Roles ARIA descontinuadas não devem ser utilizadas

A especificação WAI-ARIA evolui ao longo do tempo. À medida que amadurece, certas roles são descontinuadas porque foram consideradas redundantes, mal suportadas ou melhor servidas por outros mecanismos. Quando utiliza uma role descontinuada, está a depender de semânticas que as tecnologias assistivas já não são esperadas de suportar. Isto significa que a role pode ser completamente ignorada, mal interpretada ou causar comportamentos inesperados.

Os utilizadores mais afetados incluem:

• Utilizadores cegos e surdocegos que dependem de leitores de ecrã para transmitir o propósito e estrutura dos elementos numa página.
• Utilizadores com deficiências motoras que dependem de tecnologias assistivas que utilizam roles ARIA para navegação e interação.

Quando um leitor de ecrã encontra um elemento com uma role descontinuada, pode anunciá-la genericamente (por exemplo, como um grupo ou secção simples) ou omitir completamente o anúncio da role. Isto remove o contexto significativo que ajuda os utilizadores a compreender a estrutura do conteúdo e a interagir com ele eficazmente.

Critérios de sucesso WCAG relevantes

Esta regra relaciona-se com o Critério de Sucesso WCAG 4.1.2: Nome, Role, Valor (Nível A). Este critério exige que para todos os componentes de interface do utilizador, o nome, role e valor possam ser determinados programaticamente e que as alterações a estes estejam disponíveis para as tecnologias assistivas. Utilizar uma role descontinuada significa que a role não pode ser determinada de forma confiável, o que viola este requisito.

Isto aplica-se em WCAG 2.0, 2.1 e 2.2 ao Nível A, assim como na EN 301 549 (diretriz 9.4.1.2).

Como corrigir

1. Identifique roles descontinuadas no seu código. A regra axe-core verifica todos os elementos com um atributo role contra a especificação WAI-ARIA atual.
2. Substitua roles descontinuadas por alternativas suportadas. Atualmente, a principal role descontinuada sinalizada é:
   • directory: Substitua por list, tree ou section dependendo da estrutura do conteúdo. Se o diretório representa uma lista plana de itens (como um índice), utilize list. Se representa uma estrutura hierárquica e expansível, utilize tree. Se é um agrupamento geral de conteúdo relacionado, utilize section.
3. Teste com tecnologias assistivas após fazer alterações para confirmar que a nova role transmite o significado pretendido.

À medida que a especificação WAI-ARIA continua a evoluir, roles adicionais podem ser descontinuadas em versões futuras. Mantenha a sua utilização de ARIA atualizada consultando a especificação WAI-ARIA mais recente.

Exemplos

Incorreto: utilizar a role directory descontinuada

<div role="directory">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</div>

A role directory está descontinuada. As tecnologias assistivas podem não a reconhecer, deixando os utilizadores sem informação semântica útil sobre este elemento.

Correto: utilizar uma role suportada

Se o conteúdo é uma lista simples de ligações (como um índice), utilize list ou confie na semântica nativa do <ul>:

<nav aria-label="Table of contents">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</nav>

Neste exemplo, o elemento nativo <ul> já fornece a role list, e envolvê-lo num <nav> com um aria-label dá aos utilizadores de tecnologia assistiva contexto claro sobre o seu propósito.

Correto: utilizar tree para conteúdo hierárquico

Se o conteúdo representa uma estrutura aninhada e expansível, utilize a role tree com roles filhas apropriadas:

<ul role="tree" aria-label="Site map">
  <li role="treeitem" aria-expanded="true">
    Section 1
    <ul role="group">
      <li role="treeitem">Subsection 1.1</li>
      <li role="treeitem">Subsection 1.2</li>
    </ul>
  </li>
  <li role="treeitem">Section 2</li>
</ul>

Correto: utilizar section para um agrupamento geral de conteúdo

Se a role directory descontinuada foi utilizada simplesmente para agrupar conteúdo relacionado, um elemento <section> com um nome acessível é uma boa substituição:

<section aria-label="Staff directory">
  <ul>
    <li>Alex Johnson — Engineering</li>
    <li>Maria Garcia — Design</li>
    <li>Sam Lee — Marketing</li>
  </ul>
</section>

A chave é escolher uma substituição que reflita precisamente a estrutura e propósito do conteúdo, garantindo que as tecnologias assistivas o podem transmitir de forma significativa aos utilizadores.

Learn more:

Deque Reference

Deque University - How To Fix

→