Os roles ARIA depreciados não devem ser utilizados

A especificação WAI-ARIA evolui ao longo do tempo. À medida que amadurece, certos roles são depreciados porque se descobriu que eram redundantes, mal suportados, ou melhor servidos por outros mecanismos. Quando você utiliza um role depreciado, está a depender de semântica que as tecnologias de apoio já não são esperadas suportar. Isto significa que o role pode ser completamente ignorado, mal interpretado, ou causar comportamento inesperado.

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 de apoio que utilizam roles ARIA para navegação e interação.

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

Critérios de sucesso WCAG relevantes

Esta regra relaciona-se com o Critério de Sucesso WCAG 4.1.2: Name, Role, Value (Nível A). Este critério requer que para todos os componentes da 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 de apoio. Utilizar um role depreciado significa que o role não pode ser determinado de forma fiável, o que viola este requisito.

Isto aplica-se através das WCAG 2.0, 2.1, e 2.2 no Nível A, bem como EN 301 549 (diretriz 9.4.1.2).

Como corrigir

1. Identifique roles depreciados 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 depreciados por alternativas suportadas. Atualmente, o role depreciado principal sinalizado é:
   • directory: Substitua por list, tree, ou section dependendo da estrutura do conteúdo. Se o directório representa uma lista plana de itens (como um índice), utilize list. Se representa uma estrutura hierárquica expansível, utilize tree. Se é um agrupamento geral de conteúdo relacionado, utilize section.
3. Teste com tecnologias de apoio após fazer alterações para confirmar que o novo role transmite o significado pretendido.

À medida que a especificação WAI-ARIA continua a evoluir, roles adicionais podem ser depreciados em versões futuras. Mantenha o seu uso de ARIA atualizado consultando a especificação WAI-ARIA mais recente.

Exemplos

Incorreto: utilizar o role directory depreciado

<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>

O role directory está depreciado. As tecnologias de apoio podem não o reconhecer, deixando os utilizadores sem informação semântica útil sobre este elemento.

Correto: utilizar um role suportado em vez disso

Se o conteúdo é uma lista simples de links (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 o role list, e envolvê-lo num <nav> com um aria-label dá aos utilizadores de tecnologia de apoio contexto claro sobre o seu propósito.

Correto: utilizar tree para conteúdo hierárquico

Se o conteúdo representa uma estrutura aninhada expansível, utilize o role tree com roles filhos apropriados:

<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 o role directory depreciado foi utilizado 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>

O fundamental é escolher uma substituição que reflita precisamente a estrutura e propósito do conteúdo, garantindo que as tecnologias de apoio possam transmiti-lo de forma significativa aos utilizadores.

Learn more:

Deque Reference

Deque University - How To Fix

→