{"id":38463,"date":"2019-10-31T22:23:52","date_gmt":"2019-10-31T19:23:52","guid":{"rendered":"https:\/\/prohoster.info\/blog\/po-napravleniyu-k-dostupnosti\/"},"modified":"2019-10-31T22:23:52","modified_gmt":"2019-10-31T19:23:52","slug":"po-napravleniyu-k-dostupnosti","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pt\/blog\/news\/po-napravleniyu-k-dostupnosti","title":{"rendered":"Rumo \u00e0 acessibilidade","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Rumo
\n
\nSexta-feira \u2013 o fim do expediente. Not\u00edcias ruins sempre chegam na sexta-feira, no final do dia de trabalho.<\/p>\n

Voc\u00ea est\u00e1 prestes a sair do escrit\u00f3rio quando um novo e-mail sobre mais uma reestrutura\u00e7\u00e3o acaba de chegar.<\/p>\n

Obrigado xxxx, yyy a partir de hoje voc\u00ea ir\u00e1 se reportar a zzzz.
\n\u2026
\nE a equipe da Hugh garantir\u00e1 a acessibilidade de nossos produtos para pessoas com defici\u00eancia.<\/i>\n<\/p><\/blockquote>\n

Oh, n\u00e3o! O que eu fiz para merecer isso? Eles querem que eu saia? Preparar-se para um trabalho ingrato e tentar corrigir os erros de outras pessoas. Isso definitivamente ser\u00e1 um fracasso...<\/p>\n

Essa era a acessibilidade h\u00e1 alguns anos. Alguns coitados eram encarregados de 'limpar' a interface do usu\u00e1rio para tentar torn\u00e1-la acess\u00edvel para pessoas com defici\u00eancia.
\n<\/a><\/noindex>
\nO que isso realmente significava era bastante vago \u2013 provavelmente, se voc\u00ea pudesse ver o indicador de foco e navegar pelos campos usando a tecla Tab, ter algum texto alternativo e algumas descri\u00e7\u00f5es para os campos, isso seria considerado como se seu aplicativo fosse acess\u00edvel...<\/p>\n

Mas, de repente, os 'bugs' come\u00e7aram a proliferar como uma avalanche.<\/p>\n

Diferentes leitores de tela (ing.<\/i> Screen Readers) e navegadores se comportavam de maneiras totalmente diferentes.<\/p>\n

Os usu\u00e1rios se queixavam de que o aplicativo n\u00e3o era utiliz\u00e1vel.<\/p>\n

Assim que um erro era corrigido em um lugar, outro aparecia em outro.<\/p>\n

E simplesmente mudar e corrigir os erros da interface do usu\u00e1rio exigia esfor\u00e7os tit\u00e2nicos.<\/p>\n

Eu estive l\u00e1. Eu sobrevivi, mas n\u00e3o 'prosperamos' \u2013 tecnicamente limpamos muito, adicionamos muitas descri\u00e7\u00f5es para os campos, fun\u00e7\u00f5es e atingimos algum n\u00edvel de conformidade, mas ningu\u00e9m ficou feliz. Os usu\u00e1rios ainda reclamavam que n\u00e3o conseguiam navegar no aplicativo. O gerente ainda reclamava do fluxo constante de erros. Os engenheiros reclamavam da defini\u00e7\u00e3o inadequada das tarefas, sem uma 'solu\u00e7\u00e3o correta' claramente definida que funcionasse em todos os casos.<\/p>\n

Na minha jornada para entender a acessibilidade, encontrei alguns momentos claramente reveladores.
\nTalvez a primeira percep\u00e7\u00e3o tenha sido que adicionar funcionalidade de acessibilidade a um produto existente \u00e9 complicado. E ainda mais dif\u00edcil \u00e9 convencer os gerentes de que isso \u00e9 incrivelmente complicado! N\u00e3o \u00e9 simplesmente \"adicionar algumas tags\" e a interface do usu\u00e1rio funcionar\u00e1 perfeitamente. N\u00e3o, n\u00e3o \u00e9 poss\u00edvel concluir isso em tr\u00eas semanas, mesmo tr\u00eas meses ser\u00e3o insuficientes.
\nMeu pr\u00f3ximo momento de verdade aconteceu quando vi de perto como os usu\u00e1rios cegos realmente utilizam nosso aplicativo. \u00c9 T\u00c3O diferente de apenas observar mensagens de erro.<\/p>\n

Voltarei a isso repetidamente, mas quase todas as nossas \"suposi\u00e7\u00f5es\" sobre como as pessoas usavam nosso aplicativo estavam erradas.<\/p>\n

Navegar por uma interface do usu\u00e1rio complicada usando as teclas Tab\/Shift+Tab<\/code> \u2013 \u00e9 insatisfat\u00f3rio! Precisamos de algo melhor. Atalhos de teclado, cabe\u00e7alhos.<\/p>\n

A perda de foco ao mudar a interface do usu\u00e1rio n\u00e3o \u00e9 um grande problema? Vamos reconsiderar \u2013 isso \u00e9 loucamente confuso.<\/p>\n

Continuei, trabalhando em v\u00e1rios projetos por um tempo, e ent\u00e3o come\u00e7amos um novo projeto, com uma interface do usu\u00e1rio complicada e um claro prop\u00f3sito de finalmente conseguir acessibilidade adequada desta vez.<\/p>\n

Assim, recuamos e pensamos em como poder\u00edamos implementar isso de forma diferente e ter sucesso, e para que o pr\u00f3prio processo de trabalho fosse interessante!<\/p>\n

Rapidamente chegamos a algumas conclus\u00f5es:<\/p>\n

    \n
  1. N\u00e3o quer\u00edamos que as pessoas que desenvolvem a interface do usu\u00e1rio se ocupassem com anota\u00e7\u00f5es\/roles aria e, naturalmente, com a estrutura HTML dos componentes. Precis\u00e1vamos fornecer os componentes corretos, nos quais a acessibilidade j\u00e1 estivesse implementada desde o in\u00edcio.<\/li>\n
  2. Acessibilidade == Usabilidade \u2013 ou seja, n\u00e3o \u00e9 apenas uma tarefa t\u00e9cnica. Precis\u00e1vamos mudar todo o processo de design e garantir que a acessibilidade fosse considerada e discutida antes do in\u00edcio do design da interface do usu\u00e1rio. Devemos pensar desde o in\u00edcio sobre como os usu\u00e1rios descobrir\u00e3o qualquer funcionalidade, como eles se mover\u00e3o e como funcionar\u00e1 o \"clique direito do mouse\" com o teclado. A acessibilidade deve ser uma parte integrante do processo de design \u2013 para alguns usu\u00e1rios, isso \u00e9 muito mais do que apenas a apar\u00eancia do aplicativo.<\/li>\n
  3. Desde o in\u00edcio, quer\u00edamos obter feedback de usu\u00e1rios cegos e de outras pessoas com defici\u00eancia sobre a facilidade de uso do aplicativo.<\/li>\n
  4. Precis\u00e1vamos de maneiras realmente eficazes para detectar regress\u00f5es de acessibilidade.<\/li>\n<\/ol>\n

    \nBem, do ponto de vista da engenharia, a primeira parte parecia bastante divertida \u2013 desenvolver a arquitetura e implementar a biblioteca de componentes. E realmente foi assim.<\/p>\n

    Dando um passo atr\u00e1s, ao considerar exemplos de ARIA<\/a><\/noindex> E ao considerar isso como um problema de design, e n\u00e3o como um problema de \"adapta\u00e7\u00e3o\", introduzimos algumas abstra\u00e7\u00f5es. O componente possui uma 'Estrutura' (composta por elementos HTML) e um 'Comportamento' (como ele interage com o usu\u00e1rio). Por exemplo, nos fragmentos abaixo, temos uma simples lista n\u00e3o ordenada. Ao adicionar \"comportamento\" \u00e0 lista, s\u00e3o adicionados pap\u00e9is correspondentes para que ela funcione como uma lista. Fazemos o mesmo para o menu.<\/p>\n

    \"Rumo
    \n
    \nNa verdade, n\u00e3o apenas pap\u00e9is s\u00e3o adicionados, mas tamb\u00e9m manipuladores de eventos para navega\u00e7\u00e3o pelo teclado.<\/p>\n

    Isso j\u00e1 parece mais organizado. Se pud\u00e9ssemos obter uma separa\u00e7\u00e3o limpa entre eles, n\u00e3o importaria como a estrutura foi criada, poder\u00edamos aplicar comportamentos e garantir a acessibilidade correta.<\/p>\n

    Na pr\u00e1tica, isso pode ser visto em https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 uma biblioteca UX React<\/a><\/noindex>, que \u00e9 projetada e implementada com acessibilidade desde o in\u00edcio.<\/p>\n

    A segunda parte \u2013 mudar a abordagem e os processos em torno do design inicialmente me assustava: engenheiros modestos tentando promover mudan\u00e7as organizacionais, isso nem sempre termina bem, mas acabou sendo uma das \u00e1reas mais interessantes onde fizemos contribui\u00e7\u00f5es significativas para o processo. Resumindo, t\u00ednhamos o seguinte processo: a nova funcionalidade era desenvolvida por uma equipe, em seguida, nosso grupo de l\u00edderes analisava\/iterava a proposta e, ap\u00f3s a aprova\u00e7\u00e3o, geralmente o design era entregue \u00e0 equipe de engenharia. Nesse caso, a equipe de engenharia, na verdade, 'detinha' a funcionalidade de acessibilidade, pois deveria resolver todos os problemas relacionados.<\/p>\n

    No in\u00edcio, foi um trabalho bastante dif\u00edcil \u2013 explicar que a acessibilidade e a usabilidade est\u00e3o interligadas e que isso precisa ser feito j\u00e1 na fase de design, caso contr\u00e1rio, levaria a grandes mudan\u00e7as e redefini\u00e7\u00f5es de alguns pap\u00e9is. No entanto, com o apoio da lideran\u00e7a e dos principais atores, conseguimos transmitir essa ideia e coloc\u00e1-la em pr\u00e1tica, de modo que os designs passassem por uma verifica\u00e7\u00e3o de acessibilidade e usabilidade antes de serem apresentados \u00e0 lideran\u00e7a.<\/p>\n

    E esses feedbacks foram extremamente valiosos para todos \u2013 foi fant\u00e1stico, como um exerc\u00edcio de compartilhamento de conhecimento\/informa\u00e7\u00e3o sobre como os usu\u00e1rios interagem com aplicativos da web, identificamos numerosas \u00e1reas problem\u00e1ticas da interface do usu\u00e1rio antes de serem constru\u00eddas, as equipes de desenvolvimento agora t\u00eam especifica\u00e7\u00f5es muito melhores, n\u00e3o apenas visuais, mas tamb\u00e9m dos aspectos comportamentais do design. As discuss\u00f5es reais s\u00e3o conversas animadas, energ\u00e9ticas e apaixonadas sobre aspectos t\u00e9cnicos e intera\u00e7\u00f5es.<\/p>\n

    Poder\u00edamos ter feito esse trabalho ainda melhor se tiv\u00e9ssemos tido usu\u00e1rios cegos e usu\u00e1rios com defici\u00eancias nessas (ou em reuni\u00f5es subsequentes) \u2013 foi dif\u00edcil de organizar, mas agora estamos realmente colaborando tanto com organiza\u00e7\u00f5es locais de deficientes visuais quanto com empresas que fornecem testes externos para verificar o fluxo de execu\u00e7\u00e3o nas fases iniciais de desenvolvimento \u2013 tanto a n\u00edvel de componente quanto a n\u00edvel de fluxo de execu\u00e7\u00e3o.<\/p>\n

    Agora, os engenheiros t\u00eam especifica\u00e7\u00f5es bastante detalhadas, componentes acess\u00edveis que podem usar para a implementa\u00e7\u00e3o e um m\u00e9todo para verificar o fluxo de execu\u00e7\u00e3o. Em parte, a experi\u00eancia nos ensinou sobre o que frequentemente esquec\u00edamos \u2013 como podemos evitar a regress\u00e3o. Da mesma forma, as pessoas podem usar testes de integra\u00e7\u00e3o ou testes de ponta a ponta para verificar a funcionalidade que precisamos para detectar mudan\u00e7as nas intera\u00e7\u00f5es e fluxos de execu\u00e7\u00e3o \u2013 tanto visuais quanto comportamentais.<\/p>\n

    A defini\u00e7\u00e3o de regress\u00e3o visual \u00e9 uma tarefa bastante espec\u00edfica, com muito pouco a ser acrescentado a esse processo, exceto, talvez, a verifica\u00e7\u00e3o se o foco \u00e9 vis\u00edvel ao navegar usando o teclado. Duas tecnologias relativamente novas para trabalhar com acessibilidade s\u00e3o mais interessantes.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> \u00e9 um conjunto de ferramentas que pode ser executado tanto no navegador quanto dentro do ciclo de build\/teste para identificar problemas.<\/li>\n
    2. A verifica\u00e7\u00e3o da funcionalidade dos leitores de tela foi uma tarefa especialmente desafiadora. Com a introdu\u00e7\u00e3o do acesso ao Accessibility DOM<\/b>, finalmente conseguimos fazer capturas do aplicativo do ponto de vista da acessibilidade, muito semelhante ao que fazemos para testes visuais, e verificar se h\u00e1 regress\u00e3o.<\/li>\n<\/ol>\n

      \nAssim, na segunda parte da hist\u00f3ria, passamos da edi\u00e7\u00e3o do c\u00f3digo HTML para trabalhar em um n\u00edvel mais alto de abstra\u00e7\u00e3o, alteramos o processo de desenvolvimento do design e introduzimos testes rigorosos. Novos processos, novas tecnologias e novos n\u00edveis de abstra\u00e7\u00e3o mudaram completamente a percep\u00e7\u00e3o sobre acessibilidade e o que significa trabalhar neste campo.
      \nMas isso \u00e9 apenas o come\u00e7o.<\/p>\n

      A pr\u00f3xima \"compreens\u00e3o\" \u00e9 que usu\u00e1rios cegos impulsionam tecnologias de ponta \u2013 s\u00e3o eles que mais se beneficiam n\u00e3o apenas das mudan\u00e7as que descrevemos anteriormente, mas tamb\u00e9m com o fato de que novas abordagens e ideias se tornam poss\u00edveis com ajuda de ML\/AI. Por exemplo, a tecnologia Immersive Reader permite que os usu\u00e1rios apresentem o texto de forma mais simples e clara. Ele pode ser lido em voz alta, a estrutura da frase \u00e9 dividida gramaticalmente e at\u00e9 mesmo os significados das palavras s\u00e3o exibidos graficamente. Isso n\u00e3o se encaixa de forma alguma no antigo entendimento de \"tornar acess\u00edvel\" \u2013 \u00e9 uma fun\u00e7\u00e3o de usabilidade que ajudar\u00e1 a todos.<\/p>\n

      Com ML\/AI, surgem maneiras completamente novas de interagir e trabalhar, e estamos entusiasmados em fazer parte das pr\u00f3ximas etapas desse caminho inovador. A inova\u00e7\u00e3o \u00e9 impulsionada pela mudan\u00e7a de mentalidade \u2013 a humanidade j\u00e1 existe h\u00e1 mil\u00eanios, as m\u00e1quinas h\u00e1 centenas de anos, os sites h\u00e1 algumas d\u00e9cadas, e os smartphones h\u00e1 ainda menos. A tecnologia deve se adaptar \u00e0s pessoas, e n\u00e3o o contr\u00e1rio.<\/p>\n

      P.S. O artigo foi traduzido com pequenas altera\u00e7\u00f5es em rela\u00e7\u00e3o ao original. Sendo coautor deste artigo, eu concordei com essas altera\u00e7\u00f5es com Hugh.<\/p>\n

      Apenas usu\u00e1rios registrados podem participar da pesquisa. Entre<\/a><\/noindex>, por favor.<\/p>\n

      Voc\u00ea presta aten\u00e7\u00e3o na acessibilidade de seus aplicativos?<\/h2>\n