Como aumentar o alcance do seu site: Um Guia de Acessibilidade

Introdução

No mundo cerca de 15% da população tem algum tipo de deficiência. 1 a cada 7 pessoas se enquadra nessa estatística. Só no Brasil, esse valor chega a aproximadamente 24% da população de acordo com dados da OMS (2011) e do Censo (2010). Quando eu falo de deficiência, estou falando não somente de deficiências permanentes como surdez ou cegueira, estou falando também de deficiências temporárias como um braço quebrado ou uma laringite.

Acessibilidade é a possibilidade e condição de alcance, percepção e entendimento para a utilização, em igualdade de oportunidades, com segurança e autonomia, do meio físico, do transporte, da informação e da comunicação, inclusive dos sistemas e tecnologias de informação e comunicação, bem como de outros serviços e instalações (W3C).

Acessibilidade na Web

Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento (W3C). A sigla que é usada na internet para se referir ao tema é a11y, que é uma abreviação de accessibility (entre o a e o y temos 11 letras).

No Brasil existe a Lei Brasileira de Inclusão da Pessoa com Deficiência, que visa tornar obrigatório o acesso de todos os cidadãos e cidadãs a quaisquer meios. Esta Lei tem como base a Convenção sobre os Direitos das Pessoas com Deficiência e seu Protocolo Facultativo. Não devemos aplicar acessibilidade a nossos projetos só porque a lei nos diz para fazer, mas também porque nos importamos e queremos passar nossa mensagem para todas as pessoas. "Uma experiência ruim para uma pessoa sem deficiência é geralmente muito pior para uma com deficiência." (Nicholas Kramer)

Entretanto, acessibilidade não é apenas para pessoas com deficiência. Todos somos beneficiados de alguma forma. A Netflix por exemplo, que é uma provedora global de filmes e séries de televisão via streaming, fez um estudo e viu que seus usuários utilizam seus serviços com maior frequência na parte da noite. Inicialmente o fundo do site era cinza claro, mas após esse estudo eles mudaram para o "dark mode", que é o modo escuro com fundo preto. Essa mudança deixa o uso do site mais agradável, pois há menos luz. Outro exemplo é o fato de os smartphones automaticamente mudarem o brilho da tela de acordo com a iluminação do ambiente onde estamos, isso torna o uso mais fácil e agradável. Isso é acessibilidade e é para todos.

Projetos

Existem alguns projetos de acessibilidade que a Google vem desenvolvendo que são muito interessantes e, vale frisar, são projetos que podem ser úteis para todo mundo.
O Live Caption é uma ferramenta que legenda automaticamente toda mídia que esteja sendo exibida no telefone. Sempre que uma fala é detectada, as legendas são exibidas sem precisar de abrir nenhum outro aplicativo. Ele funciona inclusive sem conexão à internet. Pode ser útil não somente para pessoas com algum tipo de perda auditiva, mas também para casos onde não é possível reproduzir áudio, seja por causa do ambiente ou por causa de algum possível problema com o seu telefone.
O Live Relay veio para ajudar as pessoas que têm alguma limitação auditiva ou de fala a se comunicarem através de uma chamada de voz. Ele usa o reconhecimento de fala do aparelho telefônico e a conversão em texto, permitindo que o telefone ouça e fale em nome dos usuários enquanto eles digitam. Oferecendo respostas instantâneas e sugestões preditivas, o Smart Compose e o Smart Reply ajudam a conversa a ser mais fluida. O Live Relay ainda está em fase de desenvolvimento e testes.
O Live Transcribe ajuda pessoas com perda auditiva a entender o que está sendo falado ao seu redor. Basta aproximar o aparelho telefônico com o software aberto perto da conversa, para que o aparelho capture o áudio e o transforme em texto em tempo real. Essa ferramenta já está disponível com mais de 70 idiomas e já está disponível para Android.
O Projeto Diva é uma ferramenta assistiva que irá ajudar pessoas com limitações de fala ou mobilidade reduzida a usar o Google Assistant sem precisar de usar a voz. Essa ferramenta pode ser programada para receber diversos comandos ativados através de botões físicos, trazendo um grande ganho para o usuário.
O Projeto Euphonia é uma ferramenta de reconhecimento de fala que pode ser ensinada a forma singular como alguém se comunica, desde algum comprometimento da fala, espasmos nas cordas vocais, gagueira, até pessoas não verbais que se comunicam com expressões faciais. Um cientista da Google, que é surdo, ajudou a desenvolver o projeto que utiliza o Google Transcribe. Ele registrou mais de 15.000 frases para ensinar a ferramenta. A Google está buscando mais pessoas para enviar amostras de voz.

Como aplicar a meu site?

Existem alguns passos que podemos seguir para garantir a acessibilidade do nosso site:

Alternativa textual

Ao disponibilizar um arquivo multimídia, é sempre importante garantir que todos possam ter acesso ao seu conteúdo, incluindo pessoas com deficiência visual e as com deficiência auditiva. Para vídeos que não possuem faixa de áudio é necessário fornecer alternativa em texto, ou seja, disponibilizar, junto ao vídeo, um arquivo para download ou um link para a transcrição textual. Para imagens podemos usar o alt do HTML

<img src="gatinho.jpg" alt="filhote de gato brincando com joaninha">

Imagens decorativas

As imagens decorativas devem ser ignoradas pelos recursos de tecnologia assistiva se não há conteúdo a ser transmitido. A recomendação é a inserção de todas as imagens decorativas através das folhas de estilo (CSS).
Não use o alt se aquela mídia não for relevante para o entendimento do conteúdo da página.

Navegação pelo teclado

Toda funcionalidade e conteúdo do site deve ser operável pelo uso do teclado. Isso não deve impedir a entrada de dados por meio do mouse ou por outros métodos de interação do usuário com o conteúdo do site.

Ajude a pessoa usuária a navegar

Coloque títulos nas páginas e organize o conteúdo em uma sequência lógica. Outra forma de ajudar o usuário a navegar é deixar a opção "avance para o conteúdo principal" no topo da página.

Hierarquia de cabeçalhos

Existe a possibilidade de navegar entre cabeçalhos, de maneira hierárquica. Ou seja, se eu estou navegando entre H1, eu posso a qualquer momento querer varrer entre os cabeçalhos H2 filhos daquele H1 e depois nos H3 filhos de um determinado H2 (desde que o site esteja corretamente estruturado) e assim por diante.
Para isso acontecer, devemos definir de maneira correta esses cabeçalhos, pois além de serem extremamente relevantes, melhoram a navegabilidade por leitores de tela.
O H1 normalmente é utilizado como cabeçalho principal, não se repetindo numa mesma página.

Estrutura de formulários

Por envolver a interação do visitante, seja para acesso restrito de determinada área, ou envio de informações privadas, os formulários devem possibilitar o acesso às informações durante o preenchimento não apenas para leitores de tela, mas por pessoas que utilizam navegadores gráficos.
Alguns elementos são básicos para a construção de um formulário, como:
FORM: o container do formulário;
INPUT: especifica os tipos de campos presentes (text, submit, button, radio button e checkbox, por exemplo);
TEXTAREA: campo de texto multi-linha, como observações e comentários;
SELECT: Utilizado para listas selecionáveis (como um menu);
BUTTON: Utilizado para botões.

Para formulários acessíveis, deve-se atentar aos seguintes elementos: Label, FIELDSET, LEGEND e OPTGROUP.
(Web Para Todos)

Links e atalhos de navegação

Os links de uma página devem ser navegáveis por teclado. O atributo tabindex permite definir essa ordem dentro de um HTML linear, com uma ordem lógica de navegação.

Não se baseie somente em cores

Pessoas com algum tipo de daltonismo não irão conseguir ter a mesma experiência se você se basear somente em cores para, por exemplo, fazer a validação de um formulário. Usar também ícones como um check ou um x pode fazer toda a diferença.

Tempo

Dê a pessoa usuária tempo suficiente para ler e utilizar todo o conteúdo do site. Evite reloads automáticos se não forem extremamente necessários.

Multimídia

Não projete conteúdo de uma forma conhecida por causar ataques epiléticos. Cuidado com as imagens e cores piscantes.

Legibilidade

Torne todo o conteúdo de texto legível e compreensível. Faça com que as páginas da web apareçam e funcionem de modo previsível. É importante também ajudar o usuário a evitar e corrigir erros usando uma linguagem compreensível para todos.

Maximize a compatibilidade com tecnologias assertivas

Algumas ferramentas assistivas, como um mouse que pode ser utilizado com os pés pode custar R$999,00. O valor de um teclado em braille pode ser de até R$17.900,00. É importante maximizar a compatibilidade, pois é frustrante para um usuário que tem acesso a tais ferramentas não conseguir utilizar seu site.

Meu site está acessível?

Existe uma lista de perguntas que podem ser feitas por você mesmo durante o desenvolvimento para garantir a acessibilidade do seu site:

• Ele pode ser lido tanto em PCs quanto em dispositivos móveis?
• Ele conta com textos e áudios descritivos?
• As letras e imagens são grandes?
• Ele tem efeitos luminosos moderados?
• O site tem um mapa?
• Os formulários são acessíveis?
• Você fez uma verificação em programas automatizados?

Ferramentas

No mercado não faltam ferramentas que facilitam a melhoria da acessibilidade em nossas aplicações, a seguir teremos algumas opções que foram selecionadas para esse artigo, mas não se limite a elas, procure sempre a que lhe atender melhor.

Leitor de tela

Há uma vasta quantidade de leitores de tela disponíveis, basta uma pesquisada rápida na internet. Todos têm o mesmo objetivo, para escolher basta testar e ver qual lhe atende melhor. Alguns exemplos:

• JAWS for Windows
• DOSVOX
• Virtual Vision
• NVDA
• Leitor Selecção (Texto-para-Voz)

Ferramentas online

Alguns sites automatizam o teste de acessibilidade, para isso basta inserir a URL no campo de texto que os sites a seguir lhe mostrarão a completude da sua acessibilidade em porcentagem e lhe mostrarão também quais foram os erros encontrados no seu sistema e, em alguns casos, é possível ver também como corrigi-los.
Web Accessibility
Cynthia Says
ASES

Layout

• Color Contrast Accessibility Validator

Essa ferramenta captura todas as palavras do site e compara-as com o seu background, fazendo uma análise do contraste do seu site e te dizendo até como melhorá-lo. Por exemplo, em um fundo laranja com letra branca, o site mostra a frase que ele está analisando, as propriedades daquela fonte (tamanho, estilo, espessura) e te mostra o que é preciso fazer para deixar aquela parte acessível.

• Low Vision

Essa ferramenta permite simular algumas condições de visão como catarata e daltonismo. Com ela você consegue navegar por todo o site com a mesma experiência uma pessoa com alguma dessas condições teria.

Desenvolvimento

• A11y checker

É uma ferramenta que você inclui no seu código e no console do navegador você consegue ver os erros de acessibilidade que ela identificar. Alguns dos erros que a ferramenta consegue cobrir são: falta de doctype, falta de título, mais de uma incidência da tag H1, botão sem texto, imagem sem alt…

• AccessLint

É um bot que você coloca no seu projeto do Github que ele faz basicamente os mesmos checks que o a11y checker, a cada nova versão do HTML que você sobe para o Github o bot verifica todo o código em busca de possíveis problemas. Esse bot já mostra também como corrigir os problemas.

Conclusão

Procure tornar seu site o mais acessível possível para que mais pessoas consigam consumir seu conteúdo com uma excelente experiência. Acessibilidade é LOVE.

Referências

https://nacoesunidas.org/acao/pessoas-com-deficiencia/
https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html
http://www.planalto.gov.br/ccivil_03/_ato2007-2010/2009/decreto/d6949.htm
http://mwpt.com.br/acessibilidade-digital/boas-praticas/
https://www.maujor.com/w3c/tec_css_acess.html
https://www.w3.org/standards/webdesign/accessibility
https://mwpt.com.br/acessibilidade-digital/site-acessivel/
https://github.com/paypal/AATT
https://www.levelaccess.com/solutions/software/access-alchemy/
https://www.toptal.com/designers/colorfilter
http://www.508checker.com/check
https://www.tawdis.net/proj#c1