Os 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 “link” sem contexto adicional — deixando o utilizador sem forma de compreender o que o controlo faz.

Este problema afeta principalmente utilizadores que são cegos ou têm baixa visão e 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 há 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: Nome, Papel, Valor (Nível A). Este critério exige que todos os componentes da interface do utilizador tenham um nome que possa ser determinado programaticamente. Aplica-se através das 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 link 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

Assegure-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 incorporados. Se deve 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 etiqueta -->

<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 discerní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: Usar elementos HTML nativos

Os elementos nativos lidam com 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, tal como 6.2.1 para links.

Learn more:

Deque Reference

Deque University - How To Fix

→