Desenvolvimento Web — Checklist V2.0¶

Práticas de implementação para HTML, ARIA, formulários, navegação por teclado, foco, autenticação e padrões de interação.
Baseado em WCAG 2.2 (AA), ABNT NBR 17225:2025 e WAI-ARIA Authoring Practices.

Marcação: [NOVO] (incluído na V2.0) • [ATUALIZADO] (ajustado por mudança de norma/entendimento).

1) Semântica, Estrutura e Navegação¶

Documento tem um <h1> descritivo e hierarquia correta (h2/h3...). [1]
Uso de landmarks: <header>, <nav>, <main>, <aside>, <footer> (um <main> por página). [2]
Links são <a> (navegação) e ações são <button> (evento). [3]
Elementos interativos não são div/span com onclick sem papéis/teclado. [3]

Certo

Navegação com <nav> e links; botão de abrir modal em <button> com aria-expanded.

Errado

div com onclick para navegar; múltiplos <main>; títulos pulando níveis.

[NOVO] Em tabelas de dados, usar <th> e scope apropriado (col/row); quando útil, fornecer <caption> descritivo. [A1]
[NOVO] Links que abrem em nova aba/janela informam claramente o usuário no texto ou por rótulo acessível. [A2]

Certo

<th scope="col">Preço</th>; <caption>Tabela de tarifas 2025</caption>
“Relatório Anual (abre em nova aba)”

Errado

Tabela só com <td>; link que abre nova aba sem aviso.

2) Teclado, Ordens e Armadilhas¶

Toda funcionalidade é operável por teclado (Tab/Shift+Tab/Enter/Espaço/Setas). [4]
Sem armadilha de teclado (é possível sair de modais/menus por Tab/ESC). [5]
Ordem de foco segue a ordem visual e lógica do conteúdo. [6]
Skip link para “Ir ao conteúdo principal” no topo. [2]

Certo

Modal prende foco dentro e devolve ao botão que o abriu ao fechar.

Errado

Componente acessível só por mouse; foco some atrás de cabeçalho fixo.

3) Formulários: Rótulos, Ajuda e Erros¶

Todo input tem <label> visível ou nome acessível (aria-label/aria-labelledby). [7]
Mensagens de erro são próximas ao campo, com texto claro e relação por aria-describedby. [8]
Sugestões (SC 3.3.3) e prevenção de erro (3.3.4) em transações importantes (financeiras/legais). [9]
Propósito de entrada (autocompletes) para dados pessoais/conta (SC 1.3.5). [10]
[NOVO] Agrupar campos relacionados (ex.: múltiplos checkboxes/radios) com <fieldset> e <legend> para indicar relação semântica. [A1]

Certo

<label for="cpf">CPF</label> + erro “CPF inválido” ligado ao input via aria-describedby="cpf-erro".

Errado

Placeholder como “label”; erro só com borda vermelha sem texto.

4) Mensagens de Status e Live Regions¶

Mudanças dinâmicas relevantes usam ARIA live (role="status", aria-live="polite/assertive"). [11]
Mensagens não movem foco sem necessidade e são anunciadas por leitores de tela. [11]

Certo

“Item adicionado ao carrinho” em role="status".

Errado

Snackbar surge fora de foco e não é lido; atualização silenciosa de erro.

[NOVO] Áudio automático com duração > 3 s oferece pausar/parar ou controle de volume. [A3]

Certo

Player com botão de pausar; controle de volume disponível.

Errado

Áudio que toca sozinho sem controle algum.

5) Autenticação Acessível [NOVO]¶

Permite colar senhas/códigos; funciona com gerenciadores de senha. [12]
Oferece alternativa a desafios cognitivos (link mágico, gestor do SO/biometria quando aplicável). [12]
Não exige memorização como única via de login. [12]

Certo

2FA por app/código; “Entrar por e-mail (link mágico)”.

Errado

Bloquear “colar” no input; CAPTCHA sem alternativa acessível.

6) Entrada Redundante [NOVO]¶

Não repetir dados já informados; pré-preencher quando possível e seguro. [13]

Certo

Endereço digitado na etapa 1 já aparece na etapa 2 para conferência.

Errado

Exigir redigitar CPF/endereço sem motivo.

[NOVO] Orientação do dispositivo (retrato/paisagem) não é requisito para usar o conteúdo; não “travar” layout em uma única orientação sem justificativa funcional. [A4]

7) Drag & Drop com Alternativa [NOVO]¶

Toda interação de arrastar e soltar tem alternativa por clique/teclado (ordenar, mover, anexar). [14]

Certo

Botões “mover para cima/baixo” em listas ordenáveis; upload com botão “Escolher arquivo”.

Errado

Reordenar só por arrastar.

8) Padrões de Ponteiro e Gestos¶

Gestos complexos (arrastar, pinçar, multi-toque) têm alternativa de toque único/clique. [15]
Cancelamento por ponteiro: ações por toque/click podem ser abortadas (não “dispara ao pressionar”). [16]

Certo

Slide carrega com botões anterior/próximo; ação só conclui ao soltar/clicar.

Errado

“Pressionar” já executa sem chance de cancelar; só gestos complexos.

9) Conteúdo Dinâmico: Hover/Foco e Movimento¶

Conteúdo que aparece em hover/foco pode ser dispensado, não obscurece e persiste enquanto houver foco. [17]
Conteúdos que movem/rolam/atualizam oferecem Pausar / Parar / Ocultar. [18]
Evitar flash acima de 3 vezes/seg (ou manter abaixo do limiar seguro). [19]

Certo

Tooltip dispensável; carrossel com pausar/anterior/próximo.

Errado

Banner piscando; tooltip que cobre formulário e some ao tentar interagir.

10) Idioma, Títulos e Metadados¶

Idioma da página (<html lang="pt-BR">) e partes com idioma distinto (lang). [20]
Título de página é único e descreve o conteúdo principal. [21]
Metadados de viewport e zoom não bloqueado; não usar user-scalable=no. [22]

Certo

<html lang="pt-BR"> e citação em inglês marcada com lang="en".

Errado

Página em PT sem lang; zoom bloqueado em mobile.

11) Nomes, Papéis e Estados (Name, Role, Value)¶

Componentes custom têm nome acessível, papel e estado/valor expostos (ARIA conforme APG). [23]
Evitar ARIA desnecessária quando o elemento nativo atende. [3]

Certo

Componente “switch” custom segue APG: role="switch", aria-checked, teclado com Espaço/Enter.

Errado

div role="button" sem responder ao teclado; aria-* conflitando com nativo.

12) Tempo e Sessão¶

Informar tempo limite e oferecer forma de estender a sessão antes de expirar. [24]
Processos longos indicam progresso e preservam dados em caso de expiração. [24]

Certo

Aviso “Sua sessão expira em 2 min. Deseja estender?” com botão “Estender”.

Errado

Sessão expira sem alerta e perde o formulário.

O que remover/ajustar (comparado ao pocket antigo)¶

SC 4.1.1 (Parsing) tratado como critério normativo → [ATUALIZADO]: considerar só como boa prática (validar HTML/CSS); o SC foi removido na WCAG 2.2. [25]
Accesskey como recomendação geral → [ATUALIZADO]: preferir skip-link + landmarks + headings; se usar, documente e evite conflitos com atalhos do navegador/SO. [2] [23]

Notas rápidas de implementação¶

Use elementos nativos sempre que possível; complemente com ARIA apenas quando necessário.
Garanta testes com teclado, NVDA/Firefox, JAWS/Chrome, VoiceOver/Safari e TalkBack/Chrome.
Validação automática ajuda, mas não substitui testes manuais com TA e usuários.

Referências¶

[1] WCAG 2.2 — 2.4.* (Títulos e navegação)
[2] WCAG 2.2 — Landmarks / Padrões de navegação; skip link
[3] WAI-ARIA Authoring Practices (APG) — uso de elementos nativos vs. ARIA
[4] WCAG 2.2 — 2.1.1 (Teclado)
[5] WCAG 2.2 — 2.1.2 (Sem armadilha de teclado)
[6] WCAG 2.2 — 2.4.3 (Ordem de foco)
[7] WCAG 2.2 — 3.3.2 (Rótulos ou instruções)
[8] WCAG 2.2 — 3.3.1 / 3.3.3 (Erros: identificação e sugestões)
[9] WCAG 2.2 — 3.3.4 (Prevenção de erro — financeiro/legais)
[10] WCAG 2.2 — 1.3.5 (Purpose of Input — autocompletes)
[11] WCAG 2.2 — 4.1.3 (Mensagens de status)
[12] WCAG 2.2 — 3.3.8 / 3.3.9 (Autenticação acessível)
[13] WCAG 2.2 — 3.3.7 (Entrada redundante)
[14] WCAG 2.2 — 2.5.7 (Movimentos de arrastar — alternativa)
[15] WCAG 2.2 — 2.5.1 (Gestos de ponteiro)
[16] WCAG 2.2 — 2.5.2 (Cancelamento por ponteiro)
[17] WCAG 2.2 — 1.4.13 (Conteúdo em hover ou foco)
[18] WCAG 2.2 — 2.2.2 (Pausar, Parar, Ocultar)
[19] WCAG 2.2 — 2.3.1 (Três flashes ou abaixo do limiar)
[20] WCAG 2.2 — 3.1.1 / 3.1.2 (Idioma de página e de partes)
[21] Boas práticas WAI — Títulos de página
[22] WCAG 2.2 — 1.4.4 / Mobile zoom (não bloquear)
[23] WAI-ARIA Authoring Practices — Name, Role, Value
[24] WCAG 2.2 — 2.2.1 / 2.2.6 (Temporizadores e controle de tempo)
[25] Mudanças WCAG 2.2 — Remoção do SC 4.1.1 (Parsing) [A1] WCAG 2.2 — 1.3.1 (Informação e Relações): tabelas com <th> e scope; uso de <caption>. [A2] WCAG 2.2 — 3.2.2 (Na Entrada): indicar comportamentos inesperados, como abrir em nova aba/janela. [A3] WCAG 2.2 — 1.4.2 (Controle de Áudio): pausar/parar/volume para áudio com autoplay > 3 s. [A4] WCAG 2.2 — 1.3.4 (Orientação): não exigir orientação específica do dispositivo.