Acessibilidade web e seus níveis

É importante que os serviços oferecidos à sociedade sejam acessíveis para todos. O mesmo acontece com sites e aplicativos, que devem seguir diretrizes de modo a garantir que qualquer um possa fazer uso e entender o conteúdo disponibilizado

O que é acessibilidade web

Segundo o dicionário, acessibilidade é “qualidade do que é acessível”. Outra definição pertinente é “permitir que todos sejam capazes de perceber, entender e acessar locais, ferramentas, informações, etc, igualmente, independente de suas condições físicas, sociais e econômicas”.

Logo, acessibilidade web é a remoção de barreiras que impossibilitam o uso de sites e aplicativos para diferentes pessoas. De acordo com W3C, entidade que regula e oferece diretrizes para internet, quando todos conseguem ter acesso ao conteúdo independente de hardware, software, localização ou habilidade, então o objetivo foi alcançado.

Ainda conforme a ideia propagada pela W3C, todo o conteúdo disponível na web deve ser perceptível, compreensível, operável e robusto. Com base nesses quatro princípios, são feitas algumas recomendações para deixar o site acessível. Cada aplicação na internet pode ser classificada em diferentes níveis, a partir das instruções de acessibilidade que são, ou não, seguidas.

Os diferentes níveis de acessibilidade web

Segundo o documento WACG, Web Accessibility Content Guidelines, escrito pela Web Accessibility Initiative (WAI), existem três diferentes níveis de acessibilidade: A, AA e AAA. Sendo A o nível que cumpre menos requisitos e AAA o que cumpre o maior número de diretrizes de acessibilidade. Para atingir um nível mais elevado, é necessário cumprir todas as exigências dos níveis inferiores, além das do nível atual.

Alguns dos critérios de cada categoria são:

Nível A:

• Vídeos e áudios têm seu conteúdo escrito de maneira integral através de legendas descritivas;
• Não se deve apresentar uma informação apenas através do sensorial como cores, tamanho, formato, sons, etc;
• Possível usar leitor de tela para entender todo o conteúdo;
• Ferramenta para pausar ou regular o áudio, vídeos ou imagens que se mexam ou pisquem;
• Possibilidade de operar o site somente usando o teclado;
• Contém títulos e tópicos descritivos;
• Para componentes que contém imagens com texto é necessário ter o texto alternativo;
• Para inputs do usuário, há títulos e descrições que o ajudam a entender para que serve o campo. Além disso, se algum erro acontecer, deve ser passado algum tipo de feedback pro usuário;

Nível AA:

• Presença de legenda descritiva para áudios ao vivo;
• Elemento não pode funcionar somente para uma orientação de display;
• Contraste mínimo de cor de 4.5:1;
• Texto pode ter seu tamanho alterado em até 200% sem ter sua qualidade de identificação prejudicada;
• Espaçamento de linha de ao menos 1.5x o tamanho da fonte;
• Espaçamento entre parágrafos de no mínimo 2x o tamanho da fonte;
• Espaçamento entre letras de, no mínimo, 0.12x o tamanho da fonte;
• Espaçamento entre palavras de, no mínimo, 0.16x o tamanho da fonte;
• Componentes que aparecem em diferentes locais têm comportamento consistentes;

Nível AAA:

• Interpretação da língua de sinais em áudios e vídeos pré-gravados e em áudios em tempo real;
• Contraste mínimo de cor de 7:1;
• Espaçamento de linhas mínimo de 1.5x e 2.25x entre parágrafos;
• Imagens contendo texto são meramente ilustrativas;
• Quando a autenticação expira, o usuário pode continuar de onde parou, sem perda de dados, após fazer autenticação novamente;
• Usuários são avisados de qualquer tempo de inatividade que possa gerar perda de dados;
• Mecanismo para explicar abreviações e palavras não tão usuais é disponibilizado;
• Sites que precisam de um input do usuário permitem que o usuário submeta a entrada mais de uma vez, ou verificam possíveis erros de input antes da submissão, ou permitem que o usuário confirme as informações antes de submetê-las;

ARIA (Accessible Rich Internet Applications)

Para auxiliar os desenvolvedores a criarem sites que seguem a maioria das regras, há um conjunto de ferramentas disponíveis, conhecido como WAI-ARIA. Eles são atributos HTML que ajudam a tornar aplicações web dinâmicas e complexas mais acessíveis. Além disso, permitem que o leitor de tela consiga captar os elementos corretamente.

Quando a árvore DOM é gerada, também é criada uma árvore de acessibilidade. Os atributos ARIA afetam somente essa segunda árvore. Dessa forma, não há nenhum impacto no conteúdo visualizado pelos usuários. É importante ressaltar que o ideal é evitar utilizar ARIA e tentar fazer bom uso do HTML e CSS para atingir todos os objetivos. Contudo, se necessário, pode-se recorrer a essa ferramenta. A própria documentação destaca isso através das duas primeiras regras:

1. Se é possível utilizar um elemento HTML nativo ou um atributo com a semântica ou comportamento que você necessita já incluído, use-o ao invés de dar um novo propósito a um objeto usando ARIA.
2. Não mude a semântica nativa, a menos que você realmente tenha que fazer isso.

//Use
<button … />
//Ao invés de
<div role="button" …></div>

Há 3 funcionalidades principais no ARIA: roles, properties e states. O role define qual a função de um elemento (button, radio, tooltip, etc). A maioria dos elementos HTML possuem um role por definição, mas em alguns casos, como <div/> e <span/>, isso não está definido. Então, se algum deles está cumprindo alguma função adicional, é necessário alterar isso.

Já as properties são responsáveis por oferecer mais informações sobre o componente para o leitor de tela. Alguns exemplos são aria-required, aria-label e aria-placeholder. Por fim, o state diz sobre o estado atual do elemento. Por exemplo, se um botão está desabilitado ou habilitado, uma checkbox está marcada ou não, etc.

<button aria-label="An example" …/>
<button aria-disabled=true …/>

Conclusão

Existem orientações, diretrizes e ferramentas à disposição para tornar a internet um lugar mais inclusivo para todas as pessoas. Sem nenhum grande trabalho o desenvolvedor consegue colocar isso em prática, então é necessário ficar atento a acessibilidade do conteúdo produzido, para que todos possam usufruir de maneira integral.

Outras ferramentas interessantes

• Voice Over: leitor de tela da Apple
• TalkBack: leitor de tela do Android
• Screen Reader: extensão do Chrome que funciona como leitor de tela
• Wave: Extensão do Chrome que verifica o conteúdo do site em busca de erros de acessibilidade.

Links importantes

https://www.w3.org/TR/WCAG21/#dfn-conform

https://www.w3.org/WAI/standards-guidelines/aria/

https://www.w3.org/TR/using-aria/