Também disponível em: English · Español · Français · العربية
Roles ARIA: qual elemento precisa de um e qual já tem
Consulte qualquer elemento HTML e qualquer role ARIA e descubra se você deve escrevê-lo, se pode, ou se o elemento já é aquilo.
O que é um role do ARIA?
Um role do ARIA diz à tecnologia assistiva o que é um pedaço de marcação: um botão, uma região de navegação, um cabeçalho, um diálogo. Você escreve role="button" e isso muda como um leitor de tela anuncia o elemento e o que a pessoa pode fazer com ele.
O WAI-ARIA define os roles. Uma segunda especificação, ARIA in HTML, responde à pergunta com que as pessoas realmente chegam — quais roles podem ir em qual elemento HTML — e faz isso numa tabela que cobre 139 elementos. É essa tabela que sustenta esta página, e é ela que vale ler, porque roles não são intercambiáveis entre elementos.
A coisa mais útil dela passa fácil despercebida: 81 desses 139 elementos já carregam um role sem atributo nenhum, e o cabeçalho da própria tabela diz que atribuí-los na marcação é desaconselhado. Um elemento button já é um botão. Um h1 já é um cabeçalho com nível. Na maior parte das vezes, a resposta certa para “qual role vai aqui” é nenhum.
Como usar
- Digite o elemento. Só o nome da tag — sinais de menor e maior e maiúsculas não atrapalham. Onde a especificação qualifica um elemento, o nome puro leva à linha qualificada: digitar a traz a regra de a with href.
- Digite o role que você ia escrever. Você recebe uma de quatro respostas: o elemento já o tem, é permitido, não é permitido aqui, ou a regra é condicional e não existe resposta direta.
- Depois olhe o índice inverso abaixo. Ele lista os elementos que já têm aquele role sem atributo, separados dos que apenas o aceitam. Costuma ser o melhor jeito de resolver o problema.
Redundante não é o mesmo que errado
Escrever role="button" num elemento button é marcação válida. Não é erro e nada quebra. A especificação marca isso como desaconselhado porque não acrescenta nada e porque pode se desencontrar: mude o elemento depois e o role fica lá, descrevendo algo que não existe mais. Esta página relata esse caso como veredito próprio em vez de misturá-lo com os erros de verdade, porque dizer a alguém que a marcação correta dele está quebrada é pior do que não dizer nada.
Os casos realmente proibidos são outra história. 51 elementos não aceitam role algum além do que já têm — main, body, html, base, caption e companhia —, então role="navigation" num main simplesmente não é permitido. Outros 37 aceitam só um conjunto específico: um a with href aceita button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab ou tree, e nada mais. E 41 elementos, as folhas em branco como span e abbr, aceitam qualquer role.
Sobram os roles em si, dos quais a tabela nomeia 75. Se você precisa de um, o índice inverso é o atalho: pergunte quais elementos já são um botão antes de decidir fabricar um com uma div.
Dez elementos sobre os quais esta página não se pronuncia
Dez das 139 regras são escritas com uma condição, e a ferramenta se recusa a dar um veredito sobre elas em vez de chutar. td, th e tr dependem do role do elemento table que os contém. div depende de ser filho direto de um dl. figure depende de ter um figcaption como descendente. label depende de estar associado a um elemento rotulável.
Em todos esses casos a especificação evita dar uma regra incondicional, então uma ferramenta que soltasse um sim ou não confiante estaria inventando uma. No lugar aparece a frase original, para ser lida contra a sua marcação real. Essa é a resposta honesta, e é por isso que a página mostra o texto de origem de cada elemento e não só o próprio resumo.
Mais dois limites que vale dizer. Isto é apenas a tabela de elementos: a ARIA in HTML tem outras duas, uma sobre recursos do HTML e outra sobre quais descendentes cada role admite, e nenhuma está coberta aqui. E a página diz o que é permitido, não o que é boa ideia: um role permitido ainda pode ser o errado, e nenhuma tabela sabe se o seu componente se comporta mesmo como uma aba.
Por que é grátis?
A tabela viaja com a página como alguns kilobytes e cada consulta roda no seu próprio navegador. Nada do que você digita é enviado, nada é registrado e não há conta a criar.
Sem cadastro, sem limites e sem marca d'água em nada que você copiar.