Papéis ARIA deprecados não devem ser utilizados

A especificação WAI-ARIA evolui ao longo do tempo. À medida que amadurece, certos papéis são deprecados porque foram considerados redundantes, mal suportados, ou melhor servidos por outros mecanismos. Quando você utiliza um papel deprecado, está a contar com semânticas que as tecnologias de apoio já não são esperadas suportar. Isto significa que o papel 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 papéis ARIA para navegação e interação.

Quando um leitor de ecrã encontra um elemento com um papel deprecado, pode anunciá-lo genericamente (por exemplo, como um grupo simples ou secção) ou saltar completamente o anúncio do papel. 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, Papel, Valor (Nível A). Este critério requer que para todos os componentes de interface do utilizador, o nome, papel e valor possam ser determinados programaticamente e que mudanças nestes estejam disponíveis para tecnologias de apoio. Utilizar um papel deprecado significa que o papel não pode ser determinado de forma fiável, o que viola este requisito.

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

Como corrigir

1. Identifique papéis deprecados 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 papéis deprecados por alternativas suportadas. Atualmente, o principal papel deprecado 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 uma tabela de conteúdos), 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 de apoio após fazer mudanças para confirmar que o novo papel transmite o significado pretendido.

Como a especificação WAI-ARIA continua a evoluir, papéis adicionais podem ser deprecados em versões futuras. Mantenha o seu uso de ARIA atualizado consultando a especificação WAI-ARIA mais recente.

Exemplos

Incorreto: utilizar o papel directory deprecado

<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 papel directory está deprecado. As tecnologias de apoio podem não o reconhecer, deixando os utilizadores sem informação semântica útil sobre este elemento.

Correto: utilizar um papel suportado

Se o conteúdo é uma lista simples de ligações (como uma tabela de conteúdos), 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 papel 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 e expansível, utilize o papel tree com papéis 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 papel directory deprecado 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>

A chave é escolher uma substituição que reflita com precisão 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

→