WAI-ARIAWeb Accessibility Initiative

Accessible Rich Internet Applications

O que é?– Define um método para criar conteúdo

e aplicações web mais acessíveis para pessoas com necessidades especiais.

Regra #1• Quando a semântica já está

presente, não utilizar.

Regra #2• Sempre priorize a semântica.

Regra #3• Todos os controles interativos que

usam os atributos ARIA devem ser acessíveis através do teclado.

Regra #4• Nunca use aria-hidden=true e

role=presentation em elementos que podem receber foco.

Regra #5• Elementos de interação devem ter

nomes acessíveis.

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

States: aria-x=“true|false”

• busy• checked• disabled• hidden• invalid• selected

Properties: aria-x=“true|false”

• describedby• label• required• multiline• valuemax• valuemin• autocomplete

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

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>

Exemplo<div id="panel1" role="tabpanel" aria-labelledby="tab1">

...</div><div id="panel2" role="tabpanel" aria-labelledby="tab2">

...</div>

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)

Accessibility Developer Tools

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