Carregando...

Acessibilidade HTML

Antes, datalist ligava sugestões a um input. Acessibilidade é mais ampla: a página inteira usável com teclado, leitores de tela e zoom. Bom HTML — landmarks, labels, alt, headings, botões reais — é a base.

Por que acessibilidade importa

Alguns navegam sem mouse, ampliam texto ou ouvem a página. Gráfico sem alt fica mudo; busca sem label sem nome; div clicável pode não receber foco. Marcação inclusiva ajuda a todos. Em geral hábitos ao escrever HTML.

Resposta direta

1) Regiões semânticas e controles nativos. 2) Label em cada controle com for/id. 3) Alt significativo para imagens informativas; alt vazio só decorativo. 4) Um h1 claro e aninhamento lógico sem saltos. 5) Tab em links e botões. 6) ARIA quando HTML nativo não basta — estrutura primeiro.

📊 Accessibility habits beginners use

Habit Why it helps Beginner tip
Semantic landmarks Tools jump to regions Prefer main/nav over anonymous divs
Labels on controls Names fields clearly for= must match the control id
Alt on images Describes non-text content Say what the image communicates
Logical headings Outlines the page Do not jump h1 → h4 for style
Keyboard-operable controls Not everyone uses a pointer Prefer button/a over clickable divs
Native before ARIA Roles come built-in Repair HTML; do not wallpaper broken markup

Busca rotulada com landmark

Faixa de busca: nav com nome acessível, campo rotulado e botão real. O leitor anuncia a região e o nome; Tab chega ao input e ao botão.

Labeled search in a nav

html 
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

Ler o demo de busca

  • nav é landmark de navegação; aria-label distingue vários nav
  • label for + input id dão o nome acessível
  • name é para envio — separado do nome acessível
  • type=search é nativo
  • button real com Enter/Espaço
  • Lição anterior: sugestões; aqui nomear e alcançar

Headings, alt e botão real

Segundo trecho: h1, h2 aninhado, imagem informativa com alt descritivo e ação como button. Oposto de «clique aqui» e gráficos mudos.

Headings alt and button

html 
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

Ler o demo de estrutura

  • Um h1 define o tema; h2 abaixo sem pular para h4
  • O alt do gráfico diz a ideia, não só «imagem»
  • Decorativo: alt vazio; este gráfico é informativo
  • A ação é button, não div
  • main marca o conteúdo principal
  • Próxima lição JavaScript — mantenha estes hábitos HTML

O que corrigir primeiro

  • Campos sem nome: label antes do placeholder
  • Imagens informativas mudas: escreva alt
  • Controles falsos: troque div clicável por button/a
  • Sopa de headings: restaure um esquema lógico
  • Remendos só-ARIA: use o elemento nativo se existir
  • Becos de teclado: tudo clicável deve chegar com Tab

Prática — hábitos em toda a página

  1. Demo de busca; remova o label e restaure for/id
  2. Segundo nav com aria-label distinto
  3. Esvazie o alt do gráfico; restaure alt significativo
  4. Pule de propósito h1→h4; corrija para h1→h2
  5. Troque o botão por div; volte ao button e Tab
  6. Frase: acessibilidade começa com estrutura HTML, não papel de parede ARIA
  7. A próxima lição adiciona script — mantenha labels e botões

Erros fáceis

  • Links «clique aqui» sem contexto
  • Imagens informativas sem alt ou com alt vazio
  • Divs clicáveis que ignoram o teclado
  • Níveis de heading só para tamanho visual
  • Placeholder no lugar de label
  • Papéis ARIA em marcação quebrada
  • Esquecer que datalist também precisava de label

Resumo

  • Acessibilidade = estrutura usável para mais pessoas e ferramentas
  • Landmarks, labels, alt, headings e botões nativos importam
  • Acesso por teclado faz parte do trabalho
  • HTML sólido antes de ARIA pesado
  • Datalist era um controle; esta lição vê a página
  • Seguinte: adicionar JavaScript a páginas HTML

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 57 de 68
Html Tutorial