Como usar WAI-ARIA com HTML?

Além de compreender quais são os papeis, propriedades e estados providos pelo WAI-ARIA é essencial ter um entendimento claro de quando e como adicioná-los em suas aplicações. Neste tópico apresentamos um conjunto de cinco regras para uso do WAI-ARIA (adaptadas de Notes on Using ARIA in HTML).

Regra 1

Se você pode usar elementos ou atributos nativos da linguagem HTML e que têm a semântica (ou seja, o significado) e o comportamento que você deseja, então faça-o (em vez de usar marcação WAI-ARIA).

Quando isso não é possível?

  • Se há o elemento ou atributo no HTML, porém ele não é implementado ainda por navegadores Web ou, ainda, não há suporte por TAs;
  • Se as restrições do design visual não atendem às necessidades por não poderem ser personalizadas como desejado;
  • Se o recurso desejado não está disponível no HTML.

Para saber mais sobre quais elementos HTML são implementados pelos navegadores Web consulte: HTML Accessibility.

Regra 2

Não altere a semântica de elementos nativos do HTML, a menos que seja realmente necessário.

Por exemplo, se você deseja um cabeçalho de seção que é um botão.

Não faça isso:

<h1 role=button>Título que é um botão</h1>

Faça isso:

<h1><button>Título que é um botão</button></h1>

Se houver algum impedimento de se usar o elemento correto, faça isso:

<h1><span role=button>Título que é um botão</span></h1>

Se um elemento HTML não interativo (por exemplo <ul> e <div>) for usado como base de um elemento interativo, que tenha a marcação WAI-ARIA, será necessário adicionar por scripts todo o comportamento dinâmico desejado. Portanto, é bem mais simples usar um elemento nativo, sempre que possível.

Regra 3

Todos os controle interativos WAI-ARIA devem ser usáveis pelo teclado.

Se você criar um widget que permite que o usuário clique, arraste, toque, role, entre outras maneiras de interação, o usuário deve ser capaz de interagir com esse widget utilizando somente o teclado. Para isso, é necessário você crie scripts para responder aos pressionamentos de teclas ou combinações de teclas, quando aplicável.

Regra 4

Não use o papel role=presentation ou o estado aria-hidden="true" em um elemento visível e que pode receber foco. Isto pode resultar em um estado de foco no "nada".

Não faça isso:

<button role=presentation>Clique</button>

ou

<button aria-hidden="true">Clique</button>

Se for necessário tornar um elemento interativo invisível, use, por exemplo:

button {display: none}
<button aria-hidden="true">Clique</button>

Regra 5

Todos os elementos devem ter um nome acessível.

Um "nome acessível" é o nome de um elemento de interface de usuário. As API de acessibilidade de cada plataforma (sistema operacional) fornecem a propriedade de nome acessível. Então o nome acessível é concatenado com o papel do elemento de interface de usuário e apresentado pela TA.

Não faça isso:

Usuário <input type="text">

Faça isso:

<label>Usuário <input type="text"></label>

ou

<label for="nomeusu">Usuário</label>
<input type="text" id="nomeusu">