5.1.4 - Requisitos para codificação
Descrição
Os códigos devem ser estruturados de forma correta. Toda a aplicação deve ser codificada conforme as documentações de padrões técnicos, para garantir compatibilidade com o máximo de dispositivos e tecnologias assistivas. Para aplicações e páginas web que rodam em dispositivos móveis, as linguagens de marcação e o conteúdo devem ser bem estruturados e válidos, de acordo com as regras definidas nessas linguagens. Os erros na sintaxe dos elementos e atributos e as falhas de estrutura podem impedir a correta interpretação do conteúdo por agentes de usuário e tecnologias assistivas. Caso sejam utilizados elementos de interface ou controles customizados, é necessário verificar se do componente possui nome, função e valores declarados, e se são acessíveis por recurso de tecnologia assistiva.
Exemplo
Uma aplicação web segue a especificação de elementos do HTML5 e das diretrizes de acessibilidade WCAG. Aplicações de sistemas nativos Android e IOs seguem suas respectivas orientações de acessibilidade.
Desempenho funcional
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Colabore com a equipe de desenvolvimento para garantir que todos os elementos de interface sigam os padrões de acessibilidade, mantendo clareza em nomes e funções dos componentes para uma navegação coerente com dispositivos assistivos.
Especifique nome, função e estado dos componentes
Componentes personalizados precisam de especificação de acessibilidade.
Certo: Componente especificado
anotação de especificação
Interruptor "Modo avião": função interruptor, estados ligado/desligado.
Errado: Componente só visual
anotação de especificação
Interruptor personalizado desenhado sem definir nome, função nem estado.
Estruture o código conforme as documentações e padrões técnicos para evitar erros de sintaxe e problemas de compatibilidade com tecnologias assistivas. Certifique-se de que componentes customizados sejam devidamente identificados no código, com nome, função e valores acessíveis.
Prefira elementos nativos
Se criar um componente, declare nome, função e valor.
Certo: Elemento nativo
<button>Salvar</button>Leitor de tela anuncia: "Salvar, botão"
Errado: Div como botão
<div class="btn" onclick="salvar()"> Salvar </div>Leitor de tela anuncia: "Salvar": não é focável nem é anunciado como botão
Certo: Personalizado com ARIA
<div role="switch" aria-checked="true" tabindex="0" aria-label="Modo avião"></div>Leitor de tela anuncia: "Modo avião, interruptor, ligado"
Errado: HTML inválido
<ul> <div>Item</div> </ul> <p><div>Texto</div></p>Leitor de tela anuncia: lista e parágrafo interpretados de forma errada
Aprenda a fazer com conteúdos selecionados para você
Garanta que os desenvolvedores utilizem padrões de codificação técnica apropriados para maximizar a compatibilidade da aplicação com dispositivos assistivos (como código estruturado e semântico), aumentando a acessibilidade e evitando problemas de interpretação do conteúdo.
Valide o código em cada entrega
Rode validadores e revise componentes personalizados.
Checklist do requisito 5.1.4: codificação
- sem erros
Validação do HTML
automática
- semânticos
Botões e links
elementos nativos
- pendente
Interruptores personalizados
componente
2 de 3 itens em conformidade, 1 pendente de revisão.
Revisar a estrutura do código
Verifique se o código da aplicação está em conformidade com as documentações de padrões técnicos, como o WCAG e as melhores práticas de desenvolvimento web.
Validação de sintaxe
Utilize ferramentas de validação de código (como W3C Validator) para garantir que as linguagens de marcação e script utilizadas sejam válidas e bem estruturadas.
Verificação de compatibilidade
Teste a compatibilidade do código com diferentes dispositivos móveis e tecnologias assistivas para assegurar que o conteúdo seja interpretado corretamente.
Avaliar elementos customizados
Em caso de controles ou elementos de interface personalizados, confirme se cada componente tem nome, função e valores declarados de forma programática e acessíveis por tecnologias assistivas.
Revisar atributos e estrutura semântica
Certifique-se de que todos os atributos e elementos HTML sejam utilizados de acordo com sua função semântica e técnica, evitando erros que possam prejudicar a interpretação.
Testar a acessibilidade
Utilize leitores de tela e outras ferramentas de acessibilidade para verificar se o código é navegável e compreensível para usuários com deficiência.
Valide e navegue
Rode o validador e percorra os componentes com leitor de tela.
Certo: Código interpretável
Validador: 0 erros
"Salvar, botão"
"Modo avião, interruptor, ligado"
Nome, função e estado anunciados.
Errado: Código mal estruturado
Validador: 14 erros
"Salvar" (sem função)
"clicável"
O leitor de tela não sabe o que é cada coisa.
Construa e organize o conteúdo em um código de programação de acordo com as diretrizes para Web (como WCAG 2.2 e ABNT NBR 17060), permitindo que as tecnologias assistivas possam interpretar o conteúdo de maneira precisa e confiável, beneficiando especialmente a experiência de leitura e navegação dos usuários.
Use a estrutura certa para cada conteúdo
Listas como listas, títulos como títulos, tabelas como tabelas.
Certo: Estrutura semântica
conteúdo no editor
Passos cadastrados como lista numerada; seções com títulos.
O leitor de tela anuncia a estrutura.
Errado: Estrutura só visual
conteúdo no editor
Passos com hífens digitados; títulos só em negrito.
Tudo vira texto corrido.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.