Comandos ARIA devem ter um nome acessível

Quando atribui um papel como link, button, ou menuitem a um elemento, está a informar o navegador e as tecnologias assistivas que este elemento é um comando interativo. Os leitores de ecrã dependem do nome acessível destes elementos para comunicar o seu propósito ao utilizador. Se não existir um nome acessível, um leitor de ecrã pode anunciar algo como “botão” ou “ligação” sem contexto adicional — deixando o utilizador sem forma de compreender o que o controlo faz.

Esta questão afeta principalmente utilizadores cegos ou com baixa visão que dependem de leitores de ecrã, mas também impacta utilizadores com deficiências motoras que podem usar software de controlo por voz para ativar elementos pelo nome. Se não houver nome, os utilizadores de controlo por voz não conseguem direcionar o elemento com um comando falado.

Critérios de Sucesso WCAG Relacionados

Esta regra mapeia para o Critério de Sucesso WCAG 4.1.2: Name, Role, Value (Nível A). Este critério exige que todos os componentes de interface de utilizador tenham um nome que possa ser determinado programaticamente. Aplica-se ao WCAG 2.0, 2.1 e 2.2, e é também referenciado na EN 301 549 (9.4.1.2), nas diretrizes Trusted Tester e no RGAA.

As diretrizes Trusted Tester especificam ainda que o propósito de cada ligação ou botão deve ser determinável a partir de alguma combinação do seu texto, nome acessível, descrição acessível, ou contexto determinado programaticamente.

Como Corrigir

Certifique-se de que cada elemento com role="link", role="button", ou role="menuitem" tem um nome acessível através de um destes métodos:

1. Conteúdo de texto interno — Coloque texto legível dentro do elemento.
2. Atributo aria-label — Adicione um aria-label não vazio com um nome descritivo.
3. Atributo aria-labelledby — Aponte para o id de outro elemento que contenha texto visível e não vazio.
4. Atributo title — Use um atributo title como alternativa (embora aria-label ou texto visível seja preferível).

Quando possível, prefira usar elementos HTML nativos (<a>, <button>) em vez de papéis ARIA personalizados, pois vêm com comportamentos de acessibilidade integrados. Se tiver de usar papéis ARIA, certifique-se sempre de que o nome acessível é claro e descreve a ação ou destino.

Exemplos

Incorreto: Sem nome acessível

Estes elementos serão sinalizados porque os leitores de ecrã não conseguem determinar o seu propósito.

<!-- Elemento vazio sem texto ou rótulo -->

<div role="link"></div>

<!-- aria-label vazio não fornece nome -->

<div role="button" aria-label=""></div>

<!-- aria-labelledby aponta para um elemento inexistente -->

<div role="menuitem" aria-labelledby="nonexistent"></div>

<!-- aria-labelledby aponta para um elemento vazio -->

<div role="link" aria-labelledby="empty-label"></div>
<div id="empty-label"></div>

Correto: Nome acessível fornecido

Cada um destes elementos tem um nome distinguível que os leitores de ecrã podem anunciar.

<!-- Conteúdo de texto interno -->

<div role="link" tabindex="0">Visite o nosso centro de ajuda</div>

<!-- Atributo aria-label -->

<div role="button" tabindex="0" aria-label="Fechar diálogo"></div>

<!-- aria-labelledby apontando para texto visível -->

<div role="menuitem" tabindex="0" aria-labelledby="menu-label">
  <span id="menu-label">Guardar documento</span>
</div>

<!-- Combinação de aria-label e texto interno -->

<div role="link" tabindex="0" aria-label="Saiba mais sobre preços">
  Saiba mais
</div>

<!-- Atributo title como alternativa -->

<div role="button" tabindex="0" title="Submeter formulário"></div>

Preferível: Use elementos HTML nativos

Os elementos nativos gerem a nomenclatura e comportamento de teclado automaticamente, reduzindo a possibilidade de problemas de acessibilidade.

<a href="/help">Visite o nosso centro de ajuda</a>

<button type="button">Fechar diálogo</button>

Nota: Ao testar com RGAA, os problemas reportados por esta regra podem precisar de ser mapeados para um teste RGAA diferente, como 6.2.1 para ligações.

Learn more:

Deque Reference

Deque University - How To Fix

→