Começando com WAI-ARIA

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.

• WAI-ARIA - Front in Rio 2012

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.

• command
• composite
• input
• landmark
• range
• roletype
• section
• sectionhead
• select
• structure
• widget
• window

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.

• combobox
• grid
• listbox
• menu
• menubar
• radiogroup
• tablist
• tree
• treegrid

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.

• application
• banner
• complementary
• contentinfo
• form
• main
• navigation
• search

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.