Desenvolvimento Web

Cada tópico foi alinhado com referências da NBR 17225:2025, critérios da WCAG 2.2 e orientações do Guia de Acessibilidade do Governo do Reino Unido, garantindo conformidade técnica e apoio prático à implementação. O objetivo é tornar conteúdos e interfaces mais inclusivos para pessoas com deficiência, promovendo uma web acessível desde o código até a experiência de uso.

1. – Mídia

1.1 – Imagens

• 1. Texto alternativo para imagens de conteúdo.
• 2. Texto alternativo para imagens funcionais.
• 3. Imagens decorativas com alt vazio.
• 4. Descrição detalhada de imagens complexas com figcaption.
• 5. Evitar imagens contendo textos.
• 6. Texto alternativo para mapas <map>, porém cada <area> precisa de alt próprio.

1.1.1 – Título (de Imagens)

• 1. Associar título/caption à imagem com <figure> + <figcaption>.
• 2. Título claro, conciso e não repetitivo.
• 3. Evitar confiar apenas no atributo title.

Referências

- NBR 17225:2025 – 5.2.1  
- NBR 17225:2025 – 5.2.2
- NBR 17225:2025 – 5.2.3
- NBR 17225:2025 – 5.2.4
- NBR 17225:2025 – 5.2.5
- NBR 17225:2025 – 5.2.6
- NBR 17225:2025 – Anexo A 1.4
- WCAG 2.2 – C.S. 2.4.4
- WCAG 2.2 – C.S. 1.4.5 (AA)
- WCAG 2.2 – C.S. 1.1.1

Details

Referências 1.1.1

- NBR 17225:2025 – 5.2.4
- WCAG 2.2 – C.S. 1.3.1
- WCAG 2.2 – C.S. 2.4.4

1.2 – Vídeos e Áudio

• 1. Transcrição para conteúdos de áudio.
• 2. Legendas descritivas (closed captions).
• 3. Audiodescrição para vídeos.
• 4. Legendas em transmissões ao vivo.
• 5. Janela de Libras / Língua de sinais.
• 6. Controles de áudio (pausar, silenciar).
• 7. Evitar flashes acima de 3 Hz em vídeo.

Referências

- NBR 17225:2025 – 5.14.1 / WCAG 2.2 – C.S. 1.2.1
- NBR 17225:2025 – 5.14.2 / WCAG 2.2 – C.S. 1.2.2
- NBR 17225:2025 – 5.14.4 / WCAG 2.2 – C.S. 1.2.5
- NBR 17225:2025 – 5.14.9 / WCAG 2.2 – C.S. 1.2.4
- NBR 17225:2025 – 5.14.6 / WCAG 2.2 – C.S. 1.2.6
- NBR 17225:2025 – 5.14.7 / WCAG 2.2 – C.S. 1.4.2
- NBR 17225:2025 – 5.15.3 / WCAG 2.2 – C.S. 2.3.1

1.3 – Mídia Geral (Players / Widgets)

• 1. Controles de reprodução acessíveis.
• 2. Evitar autoplay com som ou oferecer pausa imediata.
• 3. Semântica correta (ARIA).
• 4. Atalhos de teclado para controlar a mídia.
• 5. Player responsivo a diversos tamanhos de tela.

Referências

- NBR 17225:2025 – 5.14.7 / WCAG 2.2 – C.S. 2.1.1 · WCAG 2.2 – C.S. 4.1.2
- NBR 17225:2025 – 5.14.7 / WCAG 2.2 – C.S. 1.4.2
- NBR 17225:2025 – 5.14.12 / WCAG 2.2 – C.S. 4.1.2
- WCAG 2.2 – C.S. 2.1.1 · WCAG 2.2 – C.S. 2.1.2
- NBR 17225:2025 – 5.14.11 / UK Gov Guide

2. – Controles

• 1. Semântica de botão.
• 2. Propósito claramente definido.
• 3. Área de toque mínima.
• 4. Mudança de contexto previsível.
• 5. Alternativa ao controle por movimento.

Referências

- NBR 17225:2025 – 5.8.1 / WCAG 2.2 – C.S. 1.3.1
- NBR 17225:2025 – 5.8.3 / WCAG 2.2 – C.S. 4.1.2
- NBR 17225:2025 – 5.8.5 / WCAG 2.2 – C.S. 3.2.4
- NBR 17225:2025 – 5.8.7 / WCAG 2.2 – C.S. 2.5.8
- NBR 17225:2025 – 5.8.9 · 5.8.10 / WCAG 2.2 – C.S. 3.2.1 · WCAG 2.2 – C.S. 3.2.2
- NBR 17225:2025 – 5.8.14 / WCAG 2.2 – C.S. 2.5.4

3. – Formulário

• 1. Rótulos explícitos para todos os campos.
• 2. Campos com instruções claras e visíveis.
• 3. Identificação programática de campos obrigatórios.
• 4. Mensagens de erro claras e específicas.
• 5. Evitar redundância de entrada.
• 6. Autenticação acessível.
• 7. Suporte a autopreenchimento/autocomplete.

Referências

- NBR 17225:2025 – 5.10.1 / WCAG 2.2 – C.S. 1.3.1 · WCAG 2.2 – C.S. 3.3.2
- NBR 17225:2025 – 5.10.3 / WCAG 2.2 – C.S. 3.3.5
- NBR 17225:2025 – 5.10.4 / WCAG 2.2 – C.S. 1.3.1
- NBR 17225:2025 – 5.10.6 / WCAG 2.2 – C.S. 3.3.1 · WCAG 2.2 – C.S. 3.3.3
- WCAG 2.2 – C.S. 3.3.7
- WCAG 2.2 – C.S. 3.3.8 · WCAG 2.2 – C.S. 3.3.9
- WCAG 2.2 – C.S. 1.3.5 / UK Gov Forms

4. – Semântica

4.1 – Estrutura do Documento

• 1. Título de página único e descritivo.
• 2. Idioma principal declarado.
• 3. Idiomas alternativos marcados em partes do texto.
• 4. Ordem de leitura lógica (DOM ≈ visual).

Referências

- NBR 17225:2025 – 5.13.1 / WCAG 2.2 – C.S. 2.4.2
- NBR 17225:2025 – 5.13.2 / WCAG 2.2 – C.S. 3.1.1
- NBR 17225:2025 – 5.13.3 / WCAG 2.2 – C.S. 3.1.2
- NBR 17225:2025 – 5.13.6 / WCAG 2.2 – C.S. 1.3.2

4.2 – Cabeçalhos, Regiões e Listas

• 5. Cabeçalhos hierárquicos, sem saltos.
• 6. Regiões landmark únicas e nomeadas.
• 7. Listas com marcação HTML correta.

Referências

- NBR 17225:2025 – 5.3.5 / WCAG 2.2 – C.S. 1.3.1 · WCAG 2.2 – C.S. 2.4.6
- NBR 17225:2025 – 5.4.1‑5.4.5 / WCAG 2.2 – C.S. 1.3.1 · WCAG 2.2 – C.S. 1.3.6
- NBR 17225:2025 – 5.5.1 / WCAG 2.2 – C.S. 1.3.1

4.3 – Tabelas de Dados

• 8. Usar <th>, scope, <caption> e associações célula‑cabeçalho.

Referências

- NBR 17225:2025 – 5.6.1 · 5.6.3 · 5.6.5 / WCAG 2.2 – C.S. 1.3.1

4.4 – Links

• 9. Links com propósito claro.
• 10. Links com texto visível e acessível.
• 11. Evitar múltiplos links com mesmo texto e destinos diferentes.

Referências

- NBR 17225:2025 – 5.7.1 / WCAG 2.2 – C.S. 2.4.4
- NBR 17225:2025 – 5.8.1 · 5.13.10 / WCAG 2.2 – C.S. 4.1.2

4.5 – Componentes Customizados & ARIA

• 11. Elementos nativos sempre que possível.
• 12. Componentes customizados expõem Nome/Função/Valor.
• 13. Mensagens de status anunciadas automaticamente.

Referências

- NBR 17225:2025 – 5.13.11 / WCAG 2.2 – C.S. 1.3.1
- NBR 17225:2025 – 5.13.12 · 5.13.13 / WCAG 2.2 – C.S. 4.1.2
- NBR 17225:2025 – 5.13.8 / WCAG 2.2 – C.S. 4.1.3

5. – Texto

• 1. Contraste mínimo para texto.
• 2. Texto redimensionável até 200 %.
• 3. Espaçamento adequado entre linhas, parágrafos, letras e palavras.
• 4. Idioma principal e secundário marcados.
• 5. Definir siglas, abreviações e jargões.
• 6. Usar linguagem simples ou fornecer versão simplificada.

Referências

- NBR 17225:2025 – 5.11.3 / WCAG 2.2 – C.S. 1.4.3
- NBR 17225:2025 – 5.12.7 / WCAG 2.2 – C.S. 1.4.4
- NBR 17225:2025 – 5.12.1‑4 / WCAG 2.2 – C.S. 1.4.12
- NBR 17225:2025 – 5.12.6 / WCAG 2.2 – C.S. 1.4.10
- NBR 17225:2025 – 5.13.2‑3 / WCAG 2.2 – C.S. 3.1.1 · WCAG 2.2 – C.S. 3.1.2
- NBR 17225:2025 – 5.12.11 / WCAG 2.2 – C.S. 3.1.4
- NBR 17225:2025 – 5.12.12 / WCAG 2.2 – C.S. 3.1.5

6. – Tabelas (Imagens × HTML)

• 1. Usar tabelas HTML semânticas em vez de imagens.
• 2. Se tabela for imagem, fornecer descrição longa.
• 3. <caption> resume a finalidade da tabela.

Referências

- NBR 17225:2025 – 5.6.1 / WCAG 2.2 – C.S. 1.3.1
- NBR 17225:2025 – 5.2.4 / WCAG 2.2 – C.S. 1.1.1
- NBR 17225:2025 – 5.6.4 / WCAG 2.2 – C.S. 2.4.6

7. – Modais

• 1. Focus‑trap e tecla Esc para fechar.
• 2. Imagem ampliada mantém o mesmo alt.
• 3. Botão "Fechar" como <button> com rótulo visível.
• 4. Modal acionável também por teclado (Enter/Espaço).

Referências

- NBR 17225:2025 – 5.1.6 · 5.8.9 / WCAG 2.2 – C.S. 2.1.1 · WCAG 2.2 – C.S. 2.1.2 · WCAG 2.2 – C.S. 2.4.3
- NBR 17225:2025 – 5.2.3 / WCAG 2.2 – C.S. 1.1.1
- NBR 17225:2025 – 5.8.1 / WCAG 2.2 – C.S. 4.1.2
- NBR 17225:2025 – 5.1.11 / WCAG 2.2 – C.S. 2.1.1

8. - Teclado

• 1. Todo o conteúdo deve ser navegável só com teclado.
• 2. Ordem de foco lógica.
• 3. Foco visível.

Referências

- WCAG 2.2 – C.S. 2.1.1
- WCAG 2.2 – C.S. 2.1.2
- WCAG 2.2 – C.S. 2.4.3
- WCAG 2.2 – C.S. 2.4.7

9. – Dispositivo Móvel e Tocável

1. Elementos interativos com área mínima de toque de 24×24px.

2. Orientação não restrita: interface deve funcionar em retrato e paisagem.

3. Zoom não bloqueado: página permite pinch-to-zoom do navegador.

4. Evitar ações disparadas apenas por movimento do dispositivo (ex: agitar).

Referências

- NBR 17225:2025 – 5.8.7
- NBR 17225:2025 – 5.8.12
- NBR 17225:2025 – 5.8.13
- NBR 17225:2025 – 5.8.14
- WCAG 2.2 – C.S. 2.5.1
- WCAG 2.2 – C.S. 2.5.2
- WCAG 2.2 – C.S. 2.5.4
- WCAG 2.2 – C.S. 2.5.8
- NBR 5.10.3 / WCAG 2.2 1.3.4 (A A) (NOVO)
- NBR 5.10.3 / WCAG 2.2 1.3.4 (A A)
- NBR 5.13.5 / WCAG 2.2 1.4.4 (A A)

Referências gerais

Baseado na NBR 17225:2025 (Acessibilidade em Conteúdo e Aplicações Web), nos Critérios de Sucesso da WCAG 2.2 e no Guia de Acessibilidade do Governo do Reino Unido.