Os papéis ARIA utilizados devem estar em conformidade com valores válidos

Quando você atribui um atributo role a um elemento HTML, está a dizer explicitamente aos navegadores e tecnologias assistivas o que esse elemento representa e como os utilizadores devem interagir com ele. Se o valor estiver mal escrito, inventado, ou referenciar um papel abstrato (como widget, roletype, landmark, ou structure), o navegador não consegue mapear o elemento para qualquer papel conhecido. O resultado é que as tecnologias assistivas ou ignoram completamente o papel ou recorrem à semântica nativa do elemento, que pode não refletir a sua intenção.

Este é um problema de acessibilidade crítico. Os utilizadores que dependem de leitores de ecrã — incluindo pessoas cegas, surdocegas, ou com limitações de mobilidade — dependem de informação precisa sobre papéis para navegar e interagir com uma página. Um botão anunciado como um elemento genérico, ou um marco de navegação que não é reconhecido de todo, pode tornar uma interface confusa ou completamente inutilizável.

Esta regra relaciona-se com o Critério de Sucesso WCAG 4.1.2: Nome, Papel, Valor (Nível A), que exige que o papel de cada componente de interface de utilizador possa ser determinado programaticamente. Aplica-se ao WCAG 2.0, 2.1, e 2.2, bem como à EN 301 549 (Secção 9.4.1.2).

Como corrigir

1. Verifique a ortografia. A causa mais comum de papéis inválidos é um simples erro tipográfico, como role="buton" em vez de role="button".
2. Use apenas papéis definidos. Cada valor deve corresponder a um papel real na especificação WAI-ARIA.
3. Nunca use papéis abstratos. Papéis abstratos como widget, roletype, landmark, structure, input, range, section, sectionhead, select, command, e composite existem apenas como categorias conceptuais na especificação. Não devem ser usados na marcação.
4. Considere se precisa do role de todo. Elementos HTML nativos como <button>, <nav>, e <table> já carregam papéis implícitos. Use elementos nativos sempre que possível em vez de adicionar atributos role a elementos genéricos <div> ou <span>.

Papéis válidos por categoria

Aqui está um resumo dos papéis ARIA válidos e não abstratos que você pode usar:

• Estrutura de documento: application, article, blockquote, caption, code, definition, deletion, document, emphasis, feed, figure, generic, group, heading, img, insertion, list, listitem, mark, math, meter, none, note, paragraph, presentation, separator (quando não focalizável), strong, subscript, superscript, term, time, toolbar, tooltip
• Marco: banner, complementary, contentinfo, form, main, navigation, region, search
• Região dinâmica: alert, log, marquee, status, timer
• Widget: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, separator (quando focalizável), slider, spinbutton, switch, tab, tabpanel, textbox, treeitem
• Widget composto: combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid
• Tabela: cell, columnheader, row, rowgroup, rowheader, table
• Janela: alertdialog, dialog

Exemplos

Incorreto: papel mal escrito

Um erro tipográfico no valor do papel significa que as tecnologias assistivas não o reconhecerão.

<div role="nagivation">
  <a href="/">Início</a>
  <a href="/about">Sobre</a>
</div>

Incorreto: papel inventado

Usar um valor que não existe na especificação ARIA.

<div role="footer-container">
  <p>© 2024 Example Corp</p>
</div>

Incorreto: papel abstrato

Papéis abstratos não são permitidos na marcação.

<div role="widget">
  <button>Guardar</button>
</div>

Correto: papel ARIA válido

<div role="navigation" aria-label="Principal">
  <a href="/">Início</a>
  <a href="/about">Sobre</a>
</div>

Correto: usar HTML nativo em vez de um papel

Quando um elemento nativo já carrega a semântica que você precisa, prefira-o em vez de um atributo role.

<nav aria-label="Principal">
  <a href="/">Início</a>
  <a href="/about">Sobre</a>
</nav>

Correto: papel de widget válido

<div role="tablist" aria-label="Definições">
  <button role="tab" aria-selected="true" aria-controls="panel-1">Geral</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">Avançado</button>
</div>
<div role="tabpanel" id="panel-1">Conteúdo das definições gerais</div>
<div role="tabpanel" id="panel-2" hidden>Conteúdo das definições avançadas</div>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→