Implementando WAI ARIA

Implementação WAI-ARIA


Leitores de tela

• VoiceOver - Nativo do Mac

• NVDA - Gratuito Windows

Ferramenta de testes utilizada: Tota11y




WAI/ARIA

WAI é o acrônimo para “Web Accessibility Initiative” que tem como objetivo promover uma Web acessível. ARIA é o acrônimo para “Accessible Rich Internet Applications”, é uma especificação da W3C criada para proporcionar uma web mais democrática, onde pessoas com deficiência auditiva, visual, motora ou cognitiva possam interagir da melhor maneira possível. Juntas elas formam a especificação WAI-ARIA que em termos práticos acrescenta a elementos HTML, por meio de algumas marcações, um novo significado semântico melhorando sua interpretação pelos leitores de tela. Para tanto esses elementos se dividem em quatro tipos:


Abstract Roles: definem conceitos gerais;

Landmark Roles: definem regiões importantes de navegação;

Widget Roles: definem widgets para a navegação do usuário;

Document Structure Roles: definem estruturas da página.

Exemplo de aplicação no Lambda ( home do admin )

<div class="col-md-4" role="presentation">

 `<div class="card" role="content info" aria-label="Informações sobre os clientes cadastrados.">`

No trecho de código acima utilizamos o role presentation pois o conteúdo se trata de uma apresentação de informações referentes aos clientes cadastrados no sistema, o role indica que nessa view há um conteúdo de informação e o aria-label indica ao leitor de tela num texto curto o contexto dessa div.

Segue alguns conteúdos relevantes para a implementação WAI/ARIA.

https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques

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

https://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/