Os roles ARIA descontinuados não devem ser utilizados

A especificação WAI-ARIA evolui ao longo do tempo. À medida que amadurece, certos roles são descontinuados porque se verificou que eram redundantes, mal suportados, ou melhor servidos por outros mecanismos. Quando você utiliza um role descontinuado, 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 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 de apoio que utilizam roles ARIA para navegação e interação.

Quando um leitor de ecrã encontra um elemento com um role descontinuado, pode anunciá-lo genericamente (por exemplo, como um simples grupo ou secção) ou omitir completamente o anúncio do 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 da interface de 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 descontinuado significa que o role não pode ser determinado de forma fiável, o que viola este requisito.

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

Como corrigir

1. Identifique roles descontinuados 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 descontinuados por alternativas suportadas. Atualmente, o principal role descontinuado sinalizado é:
   • 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), use list. Se representa uma estrutura hierárquica e expansível, use tree. Se é um agrupamento geral de conteúdo relacionado, use 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 descontinuados em versões futuras. Mantenha o seu uso de ARIA atualizado consultando a especificação WAI-ARIA mais recente.

Exemplos

Incorreto: utilizar o role descontinuado directory

<div role="directory">
  <ul>
    <li><a href="#section-1">Secção 1</a></li>
    <li><a href="#section-2">Secção 2</a></li>
    <li><a href="#section-3">Secção 3</a></li>
  </ul>
</div>

O role directory está descontinuado. 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), use list ou confie na semântica nativa do <ul>:

<nav aria-label="Table of contents">
  <ul>
    <li><a href="#section-1">Secção 1</a></li>
    <li><a href="#section-2">Secção 2</a></li>
    <li><a href="#section-3">Secção 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 tecnologias de apoio contexto claro sobre o seu propósito.

Correto: utilizar tree para conteúdo hierárquico

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

<ul role="tree" aria-label="Site map">
  <li role="treeitem" aria-expanded="true">
    Secção 1
    <ul role="group">
      <li role="treeitem">Subsecção 1.1</li>
      <li role="treeitem">Subsecção 1.2</li>
    </ul>
  </li>
  <li role="treeitem">Secção 2</li>
</ul>

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

Se o role descontinuado directory foi usado 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 — Engenharia</li>
    <li>Maria Garcia — Design</li>
    <li>Sam Lee — Marketing</li>
  </ul>
</section>

O essencial é escolher uma substituição que reflita com precisão a estrutura e o propósito do conteúdo, garantindo que as tecnologias de apoio o possam transmitir de forma significativa aos utilizadores.

Learn more:

Deque Reference

Deque University - How To Fix

→