Por que Acessibilidade é o seu Superpoder como Desenvolvedor?
Acessibilidade não é apenas uma lista de tarefas ou uma obrigação legal. É sobre design inclusivo.
Este template foi criado para ser um guia prático. Cada seção abaixo explica sua própria existência
e como você pode aplicar esses conceitos para criar uma web mais justa e tecnicamente superior.
O HTML semântico vai muito além
de simplesmente exibir texto na tela. Cada elemento carrega um significado que
tecnologias assistivas — como leitores de tela — utilizam para transmitir a estrutura
e a intenção do conteúdo ao usuário.
Headings: a espinha dorsal da navegação
Leitores de tela permitem que usuários naveguem por
headings (cabeçalhos) como se fossem um sumário interativo.
Por isso, a hierarquia deve ser rigorosa: nunca pule de
<h2> para <h4> sem passar pelo
<h3>. Cada nível cria uma subdivisão lógica do conteúdo.
Elementos semânticos de texto
Observe como diferentes elementos transmitem diferentes intenções:
Importância: O elemento <strong> indica
que o conteúdo tem alta importância. Já o <b>
apenas destaca visualmente, sem semântica adicional.
Ênfase: O elemento <em> aplica
ênfase vocal — um leitor de tela pode alterar a entonação.
Já o <i> é apenas visual (itálico).
Abreviações: Use <abbr> para expandir siglas.
Exemplo: a WCAG
é mantida pelo W3C.
Código: O elemento <code> identifica
fragmentos de código como aria-label.
Datas: O elemento <time> fornece datas
legíveis por máquina: a WCAG 2.2
foi publicada em
.
Destaque: Use <mark> para
destacar trechos relevantes em contexto, como resultados de busca.
Citações e atribuição
"The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect."
— Tim Berners-Lee, criador da
World Wide Web
O elemento <blockquote> marca uma citação em bloco, enquanto
<cite> identifica o título de uma obra ou o nome da fonte.
O atributo cite (no elemento) fornece a
URL da fonte
para fins de rastreabilidade.
Listas: estrutura que comunica
Leitores de tela anunciam o tipo e o número de itens de uma lista, dando contexto
imediato ao usuário. Os quatro princípios da WCAG
formam o acrônimo POUR:
Perceivable — Perceptível: o conteúdo deve ser apresentável aos sentidos.
Operable — Operável: a interface deve funcionar por teclado e outros meios.
Understandable — Compreensível: o conteúdo deve ser legível e previsível.
Robust — Robusto: o conteúdo deve funcionar com tecnologias assistivas atuais e futuras.
Glossário de termos
A lista de definições (<dl>) é ideal para glossários e
pares de termo-valor:
Screen Reader
Software que converte conteúdo digital em fala ou Braille, permitindo que pessoas cegas ou com baixa visão acessem a web.
Landmark
Região de referência na página (como <nav>, <main>, <aside>) que permite navegação rápida por leitores de tela.
Focus Indicator
Indicador visual que mostra qual elemento interativo está selecionado pelo teclado. Essencial para usuários que não utilizam mouse.
ARIA
Conjunto de atributos que complementam o HTML para melhorar a acessibilidade de conteúdo dinâmico e componentes de interface customizados.
Imagens precisam de descrições textuais (alt) para que usuários cegos compreendam o contexto.
Se a imagem for apenas decorativa, o atributo alt="" deve ser usado para que o leitor de tela a ignore.
Figura 1: Exemplo de como usar o elemento <figcaption> para dar contexto adicional.
Tabelas de Dados Acessíveis
Tabelas devem ser usadas exclusivamente para dados tabulares, nunca para
layout. O elemento <caption> dá nome à tabela (funcionando como
um título acessível), enquanto <th> com o atributo
scope associa cabeçalhos às células de dados — permitindo que leitores de
tela anunciem o cabeçalho relevante ao navegar entre células.
Estrutura recomendada
Use <thead>, <tbody> e opcionalmente
<tfoot> para agrupar semanticamente as linhas da tabela.
Cada cabeçalho de coluna recebe scope="col" e cada cabeçalho
de linha recebe scope="row".
Atributo autocomplete nos campos de nome e e-mail.
1.4.3
AA
Contrast (Minimum)
Paleta de cores com contraste mínimo de 4.5:1 para texto.
1.4.10
AA
Reflow
Layout responsivo com suporte a zoom de até 400%.
2.4.1
A
Bypass Blocks
Skip link no topo da página.
2.4.7
AA
Focus Visible
Indicador de foco de duas camadas (outline + box-shadow) com contraste ≥ 3:1 em qualquer fundo.
2.5.8
AA
Target Size (Minimum)
Mínimo AA é 24×24px; aqui botões e links usam 44×44px e o checkbox 24×24px.
3.1.1
A
Language of Page
Atributo lang="pt-BR" no <html>.
3.1.2
AA
Language of Parts
Atributo lang="en" em termos técnicos em inglês.
3.3.2
A
Labels or Instructions
<label> associado, instrução de campos obrigatórios e atributo required.
Interação e Formulários Acessíveis
Formulários são pontos críticos de acessibilidade. Cada campo precisa de um <label>
associado via id. Grupos de campos relacionados devem ser envolvidos em um
<fieldset> com uma <legend>.
Recursos para aprofundar
Viu os conceitos na prática? Estes são os caminhos para ir além:
normas e leis que regem a acessibilidade no Brasil e no mundo, e
ferramentas para testar seus próprios projetos. Os links abaixo
abrem em nova aba.
