Garanta que elementos marcados como de apresentação sejam consistentemente ignorados

Os atributos role="none" e role="presentation" dizem aos navegadores para remover o significado semântico de um elemento, efetivamente removendo-o da árvore de acessibilidade. Isto é útil quando elementos são usados puramente para layout visual e não carregam conteúdo significativo para utilizadores de tecnologia assistiva.

No entanto, a especificação WAI-ARIA define condições específicas sob as quais esta remoção é sobreposta. Se um elemento de apresentação tem um atributo ARIA global (como aria-hidden, aria-label, aria-live, aria-describedby, etc.) ou é focalizável (seja nativamente, como um <button>, ou através de tabindex), o navegador deve ignorar o papel de apresentação e manter o elemento na árvore de acessibilidade. Isto é conhecido como um conflito de papel de apresentação.

Quando este conflito ocorre, utilizadores de leitores de ecrã podem encontrar elementos que eram destinados a ser escondidos mas que são anunciados em vez disso — potencialmente com contexto confuso ou em falta. Isto cria uma experiência desorientadora, particularmente para utilizadores cegos e utilizadores com baixa visão que dependem dos leitores de ecrã para compreender a estrutura da página.

Esta regra é sinalizada como uma melhor prática da Deque. Embora não seja mapeada para um critério de sucesso WCAG específico, suporta o objetivo mais amplo de garantir que a árvore de acessibilidade represente accuradamente a intenção do autor, o que contribui para uma experiência coerente sob princípios WCAG como 1.3.1 Info and Relationships e 4.1.2 Name, Role, Value.

Como corrigir

Para cada elemento com role="none" ou role="presentation", garanta que:

1. Não existem atributos ARIA globais presentes. Remova atributos como aria-hidden, aria-label, aria-live, aria-describedby, aria-atomic, e quaisquer outros atributos ARIA globais.
2. O elemento não é focalizável. Não use elementos nativamente focalizáveis (como <button>, <a href>, ou <input>) com um papel de apresentação. Além disso, não adicione tabindex a um elemento de apresentação.

Se o elemento genuinamente precisa de um atributo ARIA global ou precisa de ser focalizável, então não deveria ter um papel de apresentação — remova role="none" ou role="presentation" em vez disso.

Exemplos

Incorreto: elemento de apresentação com um atributo ARIA global

O atributo aria-hidden="true" é um atributo ARIA global, que cria um conflito com role="none":

<li role="none" aria-hidden="true">Decorative item</li>

Incorreto: elemento nativamente focalizável com um papel de apresentação

Um <button> é nativamente focalizável, então o seu papel de apresentação será ignorado pelo navegador:

<button role="none">Click me</button>

Incorreto: elemento de apresentação tornado focalizável via tabindex

Adicionar tabindex="0" torna o elemento focalizável, sobrepondo o papel de apresentação:

<img alt="" role="presentation" tabindex="0">

Correto: elemento de apresentação sem conflitos

Estes elementos não têm atributos ARIA globais e não são focalizáveis, então serão propriamente removidos da árvore de acessibilidade:

<li role="none">Layout item</li>

<li role="presentation">Layout item</li>

<img alt="" role="presentation">

Correto: remover o papel de apresentação quando o foco é necessário

Se o elemento precisa de ser focalizável, remova o papel de apresentação e dê-lhe um nome acessível apropriado em vez disso:

<button aria-label="Submit form">Submit</button>

Learn more:

Deque Reference

Deque University - How To Fix

→