WAI-ARIA
-
Upload
nata-barbosa -
Category
Software
-
view
189 -
download
0
Transcript of WAI-ARIA
![Page 1: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/1.jpg)
WAI-ARIAWeb Accessibility Initiative
Accessible Rich Internet Applications
![Page 2: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/2.jpg)
O que é?– Define um método para criar conteúdo
e aplicações web mais acessíveis para pessoas com necessidades especiais.
![Page 3: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/3.jpg)
Regra #1• Quando a semântica já está
presente, não utilizar.
![Page 4: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/4.jpg)
Regra #2• Sempre priorize a semântica.
![Page 5: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/5.jpg)
Regra #3• Todos os controles interativos que
usam os atributos ARIA devem ser acessíveis através do teclado.
![Page 6: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/6.jpg)
Regra #4• Nunca use aria-hidden=true e
role=presentation em elementos que podem receber foco.
![Page 7: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/7.jpg)
Regra #5• Elementos de interação devem ter
nomes acessíveis.
![Page 8: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/8.jpg)
Roles: role=“x”• alert• alertdialog• application• banner• dialog• slider• progressbar• heading• navigation• search• tree
![Page 9: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/9.jpg)
States: aria-x=“true|false”
• busy• checked• disabled• hidden• invalid• selected
![Page 10: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/10.jpg)
Properties: aria-x=“true|false”
• describedby• label• required• multiline• valuemax• valuemin• autocomplete
![Page 11: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/11.jpg)
tabindex• > 0 = Respeita ordem declarada• 0 = Respeita ordem do DOM• -1 = Remove da navegação via TAB
![Page 12: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/12.jpg)
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>
![Page 13: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/13.jpg)
Exemplo<div id="panel1" role="tabpanel" aria-labelledby="tab1">
...</div><div id="panel2" role="tabpanel" aria-labelledby="tab2">
...</div>
![Page 14: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/14.jpg)
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)
![Page 15: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/15.jpg)
Accessibility Developer Tools
![Page 16: WAI-ARIA](https://reader036.fdocuments.pl/reader036/viewer/2022062523/58eda5651a28ab40598b45a5/html5/thumbnails/16.jpg)
Referências– W3C Accessibility -
http://www.w3.org/standards/webdesign/accessibility
– 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-html/master/index.html