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).
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?
Para saber mais sobre quais elementos HTML são implementados pelos navegadores Web consulte: HTML Accessibility.
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.
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.
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>
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">