Rullst AcademyRullst Academy/Lição
HTML semântico e acessibilidade · Lição 03 / 10

Links levam; botões agem

“Clique aqui” não conta para onde vamos. Vamos dar nomes úteis aos caminhos.

Trilhas de aprendizado12 min

Vamos descobrir juntos

  1. 1

    Um <a href="..."> navega; um button realiza uma ação. Um div que parece botão não ganha automaticamente foco, teclado ou significado de botão. Prefira o elemento nativo apropriado.

  2. 2

    href="#programa" aponta para o id="programa" da mesma página. Cada id deve ser único. agenda.html é um caminho relativo; https://example.org/agenda é absoluto. Na prévia só funcionam destinos internos; teste outros caminhos no arquivo local.

  3. 3

    Escreva “Ver programa da oficina”, não apenas “aqui”. O texto do link deve ajudar a antecipar o destino, inclusive quando alguém navega por uma lista de links. Não prometa um download se o destino é uma página.

  4. 4

    Use Tab para alcançar um link e Enter para abri-lo. Um button nativo aceita teclado, mas type="button" não inventa uma ação: um comportamento próprio exigirá JavaScript. O botão de treino desta lição é intencionalmente sem ação.

Oficina de HTML: escrever, observar, revisar

Edite o HTML em “Meus arquivos e GitHub” e atualize a prévia. Ela usa elementos de estudo e estilos de leitura: scripts, CSS próprio e navegação externa ficam desativados. Apenas route.svg do kit é exibida como imagem.

Ir ao meu HTML

Estas verificações simples não são uma validação completa de HTML nem uma auditoria WCAG. Confira conteúdo, teclado, zoom e tecnologias assistivas; registre o que ainda não testou.

Links oficiais e próximo passo

✦
SUA MISSÃO

Escolher links e botões nativos e escrever destinos compreensíveis.

Agora é a sua vez

Oficina de descobertas

Leia, preveja, experimente

Queremos ir à seção Programa e depois criar uma ação própria de salvar.
Monte suas respostas e confira quando estiver pronto.
Uma pausa para entender

Só escrever um botão Salvar armazena dados?

Preciso de uma pista

Compare a intenção com o significado dos elementos; aparência sozinha não demonstra acessibilidade.

Carregando sua jornada…

Leve com você

Crie dois links internos com nomes diferentes e teste ambos por teclado. Mude um id para observar um destino quebrado e depois conserte-o.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Rullstpetbot

A IA pode errar. Confira no material da lição.