Os roles ARIA usados devem estar em conformidade com valores válidos

Quando você atribui um atributo role a um elemento HTML, está explicitamente a informar os navegadores e as tecnologias assistivas sobre o que esse elemento representa e como os utilizadores devem interagir com ele. Se o valor estiver mal escrito, for inventado, ou referenciar um role abstrato (como widget, roletype, landmark, ou structure), o navegador não consegue mapear o elemento para qualquer role conhecido. O resultado é que as tecnologias assistivas ou ignoram completamente o role ou recorrem à semântica nativa do elemento, o 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 deficiências motoras — dependem de informações precisas sobre roles para navegar e interagir com uma página. Um botão anunciado como um elemento genérico, ou um landmark 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, Role, Valor (Nível A), que exige que o role de cada componente de interface de utilizador possa ser determinado programaticamente. Aplica-se em 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 roles inválidos é um simples erro tipográfico, como role="buton" em vez de role="button".
2. Use apenas roles definidos. Cada valor deve corresponder a um role real na especificação WAI-ARIA.
3. Nunca use roles abstratos. Roles abstratos como widget, roletype, landmark, structure, input, range, section, sectionhead, select, command, e composite existem apenas como categorias conceituais na especificação. Não devem ser usados na marcação.
4. Considere se precisa de role de todo. Elementos HTML nativos como <button>, <nav>, e <table> já carregam roles implícitos. Use elementos nativos sempre que possível em vez de adicionar atributos role a elementos genéricos <div> ou <span>.

Roles válidos por categoria

Aqui está um resumo de roles ARIA válidos e não abstratos que 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
• Landmark: banner, complementary, contentinfo, form, main, navigation, region, search
• Região ativa: 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: role mal escrito

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

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

Incorreto: role inventado

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

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

Incorreto: role abstrato

Roles abstratos não são permitidos na marcação.

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

Correto: role ARIA válido

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

Correto: usar HTML nativo em vez de um role

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

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

Correto: role 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

→