{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2022/2022-04-22-5-motivos-para-usar-leitor-de-telas",
  "path": "/blog/2022/2022-04-22-5-motivos-para-usar-leitor-de-telas",
  "publishedAt": "2022-04-22T01:20:29.949Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": [
    "a11y"
  ],
  "textContent": "Testar acessibilidade é quase uma arte, ela encontra-se nos detalhes. Alguns comportamentos são reconhecidos somente com muita prática e experiência.\n\nOs leitores de telas, de modo geral, tem comportamentos padrões para determinados componentes e as pessoas que os utilizam identificam de forma natural.\n\nNeste artigo irei mostrar 5 motivos para testar com um leitor de telas. Vamos lá?\n\nO que são leitores de telas?\n\nFoto por Elizabeth Woolner em Unsplash\n\nBom, se você nunca ouviu falar sobre leitores de telas eles são softwares construídos para auxiliar pessoas com deficiência visual para utilizar um computador/smartphone e navegar na web.\n\nSua função básica é converter a informação, através de um API que lê a estrutura do HTML e converte o texto em aúdio.\n\nExistem diversos leitores de telas no mercado, podemos citar alguns:\n\n- NVDA;\n- Jaws;\n- Talkback;\n- VoiceOver.\n\nTendo em vista que, definimos o que são os leitores de tela irei apresentar para vocês, os 5 motivos para testar acessibilidade com leitor de telas.\n\nSe você gostou do meu conteúdo e quer receber em primeira mão, assine a minha newsletter.\n\nPrevenção de bugs\n\nFoto por Neringa Hunnefeld\n\nPode parecer óbvio, entretanto, uma interface impecável visualmente, pode conter erros grotescos de acessibilidade.\n\nNa grande maioria das vezes, esses bugs são erros de marcação HTML que poderiam ser evitados.\n\nUm exemplo banal são botões sem rótulo. Por padrão, todo elemento HTML deve ser usado para seu propósito.\n\nCada elemento possuí duas informações extremamente importantes: rótulo e semântica adequada.\n\nNo exemplo a seguir, temos um botão que representa a ação de fechar, porém, ele não está rotulado corretamente.\n\nDessa forma, compromete drasticamente a experiência de quem usa leitor de telas. O leitor iria verbalizar algo como: botão X.\n\n> Mas afinal o que seria o botão X?\n\nAlém disso, esse inocente botão fere as diretrizes da WCAG 2.1:\n\n- [1.3.1 – Informações e Relações \\[A\\]](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships);\n- [2.5.3 – Rótulo no Nome acessível \\[A\\]](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name);\n\nA 1.3.1 nos diz:\n\n> A organização estrutural de uma tela deve ser construída de forma que sua arquitetura de informação faça sentido tanto para quem vê, quanto para quem ouve o conteúdo.\n\nA 2.5.3 nos diz:\n\n> Rótulos em botões, ícones acionáveis ou qualquer controle interativo, devem ter uma descrição significativa tanto para quem vê, quanto para quem apenas ouve a informação.\n\nFica nítido que o descumprimento de uma diretriz afeta a outra proporcionalmente.\n\nComo resolvemos?\n\nUma das possíveis soluções é adicionar um atributo da WAI-ARIA o aria-label, dessa forma o leitor de tela receberá o _feedback_ apropriado.\n\nO exemplo a seguir adotamos a técnica com o uso do _aria-label_:\n\nCobrir áreas não mapeadas\n\nÉ bem comum desenvolvermos um componente é esquecermos algumas ações, como, por exemplo:\n\n- teclas de atalho para acionar o componente;\n- navegação via teclado;\n- ordem de foco.\n\nEsses itens diversas vezes são ignorados pelos desenvolvedores, costumo chamar isso de programação orientada a mouse. Com isso, precisamos de “descobrir” certos comportamentos.\n\nFoto por Dariusz Sankowski em Unsplash\n\nDessa forma, pessoas que utilizam somente o teclado ficam extremamente prejudicadas e ignoradas.\n\n> Dica: sempre pense na possibilidade de navegar somente via teclado. Afinal, quando utilizamos um smartphone, usamos somente o teclado.\n\nHTML semântico\n\nO leitor de telas é amigo íntimo do HTML, como um fiel amigo ele informa exatamente como foi escrito.\n\nÉ de extrema importância desenvolvedores escreverem um HTML decente. Já cansei de realizar testes e identificar um problema: a grande maioria dos desenvolvedores ignoram uma escrita correta de HTML.\n\n> Como podemos construir uma casa sem um bom fundamento? O primeiro temporal leva nosso esforço aos ares.\n\nEstude HTML semântico, caso você tenha dúvidas entre em contato comigo.\n\nFeedback em tempo real\n\nFoto por Claudio Schwarz em Unsplash\n\nUsando leitores de telas para testes de acessibilidade, eu aprendi uma coisa:\n\n> De feedback ao usuário o mais rápido possível.\n\nImagina a seguinte situação, um formulário para aplicar em uma vaga de emprego. Esse formulário possuí 20 campos que não informam em tempo de preenchimento se os dados estão corretos.\n\nSomente no momento do envio e também não possui mensagens claras dos erros. Uma pessoa que usa um leitor de telas provavelmente vai tentar novamente ou desistir da candidatura.\n\nPossibilidades\n\nDar o feedback enquanto as informações são preenchidas é uma excelente prática. Mensagens contextuais e concisas auxiliam bastante.\n\nExistem técnicas que podemos usamos em alguns casos, como o atributo aria-live.\n\nA experiência do usuário final\n\nFoto por Amélie Mourichon em Unsplash\n\nA acessibilidade está intimamente ligada com a experiência de uso das pessoas. Escrever um HTML semântico e adotar boas práticas de desenvolvimento podem contribuir muito para usuários de leitor de telas.\n\nUsando leitores de telas para testes de acessibilidade, conseguimos captar a experiência dos usuário, assim, podemos corrigir de forma preventiva possíveis problemas.\n\nConclusão\n\nRecomendo fortemente você desenvolvedor, enquanto estiver fazendo suas interfaces use algum leitor de telas para identificar possíveis problemas.\n\nDessa forma, você irá “sentir na pele” como é uma navegação com tecnologia assistiva. E isso pode contribuir significamente em sua carreira.\n\nCom esses conhecimentos, poderá explorar novos horizontes e quem sabe se tornar um especialista em desenvolvimento acessível.\n\nTudo depende de você e como diria o Tio Ben:\n\n> Com grandes poderes, vem grandes responsabilidades",
  "title": "5 motivos para testar acessibilidade com leitor de telas"
}