O HTML é uma linguagem de marcação. Assim, dando significado para o conteúdo, mediante as suas tags. A WAI-ARIA se aplica para o significado das interações. Assim, ajudando onde a informação é dividida em diversos elementos e precisão de uma interação no site para serem visualizadas.
WAI - ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.
Roles
Distingue o tipo de elemento que está tendo a interação do usuário. Temos 4 categorias de roles: Abstract, Widgets, Document Structure e Landmarks.
Abstract - Tem a finalidade de definir conceitos gerais. São utilizados apenas por navegadores para ajudar a organizar e dinamizar um documento, e nunca por desenvolvedores para marcar HTML. Eles não são mapeados para leitores de tela e não fornecem nenhuma informação adicional acessibilidade diretamente entre HTML e leitor de tela.
Widgets - Tem a finalidade de definir elementos de interface independentes ou em conjuntos.
- alert
- alertdialog
- button
- checkbox
- dialog
- gridcell
- link
- log
- marquee
- menuitem
- menuitemcheckbox
- menuitemradio
- option
- progressbar
- radio
- scrollbar
- slider
- spinbutton
- status
- tab
- tabpanel
- textbox
- timer
- tooltip
- treeitem
Exemplo:
<span class="tooltip" role="tooltip" aria-hidden="true">Texto de exemplo</span>
As roles abaixo, normalmente são recipientes para gerenciar outros elementos de interface.
Exemplo:
<ul class="menu" role="menu">
<li class="menu-item checked" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="true">Sans-serif</li>
<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Serif</li>
<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Monospace</li>
<li class="menu-item" role="menuitemradio" tabindex="-1" aria-controls="st1" aria-checked="false">Fantasy</li>
</ul>
Document Structure - Descrevem estruturas que organizam o conteúdo de uma página. Geralmente não são interativos.
- article
- columnheader
- definition
- directory
- document
- group
- heading
- img
- list
- listitem
- math
- note
- presentation
- region
- row
- rowgroup
- rowheader
- separator
- toolbar
Exemplo:
<dialog tabindex="0" role="alertdialog" aria-labelledby="d-message">
<div>
<div role="document" tabindex="0">
<p id="d-message">Essa informação é desnecessária</p>
<button>Eu entendi</button>
</div>
</div>
</dialog>
Landmarks - São regiões da página que são pontos importantes para a navegação do usuário.
Exemplo:
<ul role="navigation">
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
States e Properties
Aprensenta o estado do elemento.
Abaixo, temos um exemplo de estado e propriedades com a funcionalidade de tabs, que será alterado via javaScript (Não será necessário, colocar o script aqui, porque a ideia é apenas mostrar as propriedades e estados):
// HTML
<ul role="tablist">
<li role="presentation"><a href="#section1" tabindex="0" role="tab" aria-controls="section1" aria-selected="true">Section 1</a></li>
<li role="presentation"><a href="#section2" tabindex="-1" role="tab" aria-controls="section2">Section 2</a></li>
<li role="presentation"><a href="#section3" tabindex="-1" role="tab" aria-controls="section3">Section 3</a></li>
</ul>
<section id="section1" role="tabpanel">...</section>
<section id="section2" role="tabpanel" aria-hidden="true">...</section>
<section id="section3" role="tabpanel" aria-hidden="true">...</section>
Ao clicar no item de navegação, o elemento terá o estado true, para a propriedade aria-selected. E o conteúdo que será mostrado para o usuário, não terá a propriedade aria-hidden com o estado true.
Links
- HTML5 ARIA - http://www.w3.org/TR/aria-in-html/
- ARIA - http://www.w3.org/WAI/PF/aria/
- Roles - http://www.w3.org/TR/wai-aria/roles
- States and Properties - http://www.w3.org/TR/wai-aria/states_and_properties
- Design Patterns - http://www.w3.org/TR/wai-aria-practices/#aria_ex
Conclusão
A WAI-ARIA é para extender e não substituir as tags HTML. Dê sempre preferência para o HTML, para dar significado ao conteúdo. E é preciso tomar alguns cuidados.
Se não é possível usar a tag form, usaríamos assim:
<div role="form"></div>
No código abaixo, seria redundante.
<form role="form"></form>
O mais importante é sempre lembrar que as interações devem ser usadas via teclado. Afinal, o foco está na acessibilidade.
