WAI-ARIA

166 visualizações

Publicada em

Apresentação sobre WAI-ARIA dada em workshops sobre Web Design em 2014.

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
166
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

WAI-ARIA

  1. 1. WAI-ARIA Web Accessibility Initiative Accessible Rich Internet Applications
  2. 2. O que é? – Define um método para criar conteúdo e aplicações web mais acessíveis para pessoas com necessidades especiais.
  3. 3. Regra #1 • Quando a semântica já está presente, não utilizar.
  4. 4. Regra #2 • Sempre priorize a semântica.
  5. 5. Regra #3 • Todos os controles interativos que usam os atributos ARIA devem ser acessíveis através do teclado.
  6. 6. Regra #4 • Nunca use aria-hidden=true e role=presentation em elementos que podem receber foco.
  7. 7. Regra #5 • Elementos de interação devem ter nomes acessíveis.
  8. 8. Roles: role=“x” • alert • alertdialog • application • banner • dialog • slider • progressbar • heading • navigation • search • tree
  9. 9. States: aria-x=“true|false” • busy • checked • disabled • hidden • invalid • selected
  10. 10. Properties: aria-x=“true|false” • describedby • label • required • multiline • valuemax • valuemin • autocomplete
  11. 11. tabindex • > 0 = Respeita ordem declarada • 0 = Respeita ordem do DOM • -1 = Remove da navegação via TAB
  12. 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. 13. Exemplo <div id="panel1" role="tabpanel" aria-labelledby="tab1"> ... </div> <div id="panel2" role="tabpanel" aria-labelledby="tab2"> ... </div>
  14. 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. 15. Accessibility Developer Tools
  16. 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-

×