Semântica de componentes customizados
O que a norma pede
Componentes feitos sob medida têm função, estados, propriedades e valores informados no código, e essas informações são atualizadas quando mudam.
- 1.3.1 (A)
- 4.1.2 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Prefira componentes nativos a customizados. Para cada componente customizado, especifique o padrão equivalente, como aba ou acordeão, e documente os estados, como expandido e selecionado.
Acordeão de perguntas frequentes
Perguntas que abrem a resposta.
Errado: Estados só visuais
Na especificação
Seta para baixo = fechado; para cima = aberto.
O leitor não sabe se está aberto.
Certo: Padrão definido
Na especificação
Padrão “acordeão”: botão com estado expandido/recolhido.
O código informa o estado.
Siga o ARIA Authoring Practices Guide: aplique o role correto e atualize estados como aria-expanded e aria-selected a cada mudança. Quando existir um elemento nativo, como details ou dialog, prefira-o.
Acordeão
Implementação da pergunta frequente.
Errado: Div sem estado
<div class="pergunta" onclick="alternar()">Quem pode pedir?</div>Sem papel, sem estado.
Certo: Botão com estado
<button aria-expanded="false" aria-controls="r1">Quem pode pedir?</button> <div id="r1" hidden>…</div>Anunciado como “botão, recolhido”.
Exija justificativa para criar componentes customizados e teste com leitor de tela na aceitação deles. Esses componentes são a principal fonte de barreiras complexas.
Escolha de biblioteca
A equipe avalia duas bibliotecas de interface.
Errado: Escolha pelo visual
Decisão
Biblioteca com componentes bonitos e sem ARIA.
Barreiras em todo o produto.
Certo: Escolha pela acessibilidade
Decisão
Biblioteca que segue o ARIA APG e tem testes.
Componentes acessíveis de saída.
Interaja com cada componente customizado usando o leitor de tela e confira se o papel e o estado são anunciados. Mude o estado e verifique se o anúncio muda junto.
Aba de conteúdo
Abas “Documentos” e “Prazos”.
Errado: Sem semântica
“Documentos”
“Prazos”
Não se sabe que são abas nem qual está ativa.
Certo: Com semântica
“Documentos, aba, selecionada, 1 de 2”
“Prazos, aba, 2 de 2”
Atende.
Use rótulos curtos e distintos em abas e acordeões, sem repetir o papel, como em “Aba Documentos”. Escreva perguntas frequentes como perguntas completas.
Rótulo da aba
Aba de documentos.
Errado: Repete o papel
Rótulo
“Aba de documentos”
Anunciado como “Aba de documentos, aba”.
Certo: Só o conteúdo
Rótulo
“Documentos”
Anunciado como “Documentos, aba”.