WAI-ARIA define um método para criar conteúdo e aplicações web mais acessíveis para pessoas com necessidades especiais, priorizando a semântica e garantindo que todos os controles interativos sejam acessíveis via teclado. Ele fornece papéis, estados e propriedades para melhorar a acessibilidade, além de boas práticas como estrutura semântica e navegação amigável.

1. WAI-ARIA
Web Accessibility Initiative
Accessible Rich Internet Applications

2. O que é?
– Define um método para criar conteúdo e
aplicações web mais acessíveis para
pessoas com necessidades especiais.

3. Regra #1
• Quando a semântica já está presente,
não utilizar.

4. Regra #2
• Sempre priorize a semântica.

5. Regra #3
• Todos os controles interativos que usam
os atributos ARIA devem ser acessíveis
através do teclado.

6. Regra #4
• Nunca use aria-hidden=true e
role=presentation em elementos que
podem receber foco.

7. Regra #5
• Elementos de interação devem ter nomes
acessíveis.

8. Roles: role=“x”
• alert
• alertdialog
• application
• banner
• dialog
• slider
• progressbar
• heading
• navigation
• search
• tree

9. States: aria-x=“true|false”
• busy
• checked
• disabled
• hidden
• invalid
• selected

10. Properties: aria-x=“true|false”
• describedby
• label
• required
• multiline
• valuemax
• valuemin
• autocomplete

11. tabindex
• > 0 = Respeita ordem declarada
• 0 = Respeita ordem do DOM
• -1 = Remove da navegação via TAB

12. Exemplo
<li role=“presentation”>
<a href=“#panel1” role=“tab” aria-selected=“true”
aria-controls=“panel1”>Tab 1</a>
</li>
<li role=“presentation”>
<a href=“#panel2” role=“tab” aria-selected=“true”
aria-controls=“panel2”>Tab 1</a>
</li>

13. Exemplo
<div id="panel1" role="tabpanel" aria-labelledby="tab1">
...
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2">
...
</div>

14. Boas práticas
– Estrutura semântica
– Manter hierarquia do DOM ao remover
estilos
– Permitir navegação amigável através de
tabindex
– Texto alternativo para imagens – descrever a
imagem
– Saber utilizar o atributo accessKey
– Seguir convenções de conteúdo (WCAG)

15. Accessibility Developer Tools

16. Referências
– W3C Accessibility -
http://www.w3.org/standards/webdesign/accessi
bility
– WCAG - http://www.w3.org/TR/WCAG20/
– Making Accessible Web Components -
https://www.polymer-
project.org/articles/accessible-web-
components.html
– Using WAI-ARIA in HTML -
http://rawgit.com/w3c/aria-in-