HTML semântico e acessibilidade · Lição 10 / 10

Missão: uma oficina aberta a mais pessoas

Transforme o modelo em sua própria página e entregue também as evidências da revisão.

Vamos descobrir juntos

1
O kit reúne index.html, uma imagem de processo, estilos de leitura, demo.js e REVIEW.md. O tema é uma oficina fictícia de ideias. Personalize título, programa e instruções com conteúdo inventado, sem nomes completos ou dados pessoais de participantes.
2
Mantenha uma hierarquia coerente, regiões claras, links que explicam seu destino, alt adequado, tabela simples e controles com rótulos. Se remover uma imagem ou tabela porque seu projeto não precisa delas, explique a decisão em vez de adicionar elementos sem propósito.
3
Compare a página com um defeito e com a correção: por exemplo, troque for de um label, observe a pista e o clique que não foca, restaure e teste novamente. Em REVIEW.md registre a evidência antes/depois e testes ainda pendentes.
4
Baixe o HTML editado separadamente e substitua index.html no kit extraído. O ZIP sempre contém o modelo inicial. GitHub é opcional: o botão envia um arquivo por vez; para publicar o projeto completo envie também os arquivos de apoio pelo GitHub ou Git. Isso não ativa GitHub Pages automaticamente.

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

Referência para investigar

✦

SUA MISSÃO

Integrar HTML semântico e produzir uma revisão honesta do projeto.

Agora é a sua vez

Oficina de descobertas

Leia, preveja, experimente

A prévia não encontrou pistas simples, mas você ainda não testou o projeto com leitor de tela.

01O que registrar na revisão?02Onde estão suas últimas edições?

Monte suas respostas e confira quando estiver pronto.

Uma pausa para entender

Qual entrega demonstra melhor o aprendizado?

Página autoral e revisão com evidências e limitesApenas copiar o modelo sem conferir

Preciso de uma pista

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

Carregando sua jornada…

Como perceber o que aprendi?

Use os objetivos e o desafio abaixo como uma conversa com você mesmo ou com alguém que possa ajudar. É uma autoavaliação orientada: não envia respostas, não concede XP e não verifica automaticamente sua autonomia.

Em Fundamentos, altere um exemplo, preveja o resultado, confira um caso comum e um caso de erro, e explique suas escolhas. Se precisar de ajuda, identifique o trecho que quer praticar novamente.

Seu desafio de transferência

Entregue uma página com pelo menos três mudanças justificadas e uma revisão antes/depois. Depois, continue na trilha CSS e desenho de interfaces para estudar apresentação, layout e responsividade.

Guarde uma evidência: previsão, tentativa, resultado, uma mudança sua e o que ainda não consegue explicar. Quando possível, peça feedback a alguém; se estudar sozinho, retome depois sem copiar e compare suas tentativas.

Tente de novo em outro momento

Depois de uma pausa, explique a ideia sem abrir a solução e tente um exemplo diferente. Compare com sua primeira tentativa: o que consegue fazer sozinho e onde precisa de uma pista? Você pode escrever, falar ou desenhar; escolha uma forma que permita conferir a mesma ideia. Registre ajuda recebida, inclusive de IA, e volte ao trecho necessário. Não há prazo universal nem XP extra por esse registro.

Conclusões e XP registram as avaliações da Rullst Academy. Uma trilha introdutória pode ajudar na vida cotidiana e preparar próximos estudos; sozinha não comprova domínio completo ou preparo profissional. O nível indica profundidade, não idade.

Leve com você

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…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'self'; script-src 'self'; base-uri 'none'; form-action 'none'">
<title>Oficina de ideias</title>
<link rel="stylesheet" href="style.css">
<script src="demo.js" defer></script>
</head>
<body>
<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Oficina de ideias</h1><p>Uma oficina fictícia para desenhar, testar e revisar ideias com papel.</p></header>
<nav aria-label="Navegação principal"><a href="#programa">Ver programa da oficina</a> · <a href="#treino">Experimentar formulário</a></nav>
<main id="conteudo" tabindex="-1">
<section id="programa"><h2>Programa</h2>
<h3>Materiais</h3>
<ul><li>Papel reutilizado</li><li>Lápis</li></ul>
<h3>Passos</h3>
<ol><li>Desenhar uma ideia</li><li>Testar e observar</li><li>Revisar com uma evidência</li></ol>
<figure><img src="route.svg" width="600" height="120" alt="Ideia, depois teste, depois revisão"><figcaption>Nosso processo tem três etapas.</figcaption></figure>
<table><caption>Programa de atividades fictícias</caption><thead><tr><th scope="col">Atividade</th><th scope="col">Minutos</th></tr></thead><tbody><tr><th scope="row">Desenhar</th><td>10</td></tr><tr><th scope="row">Testar</th><td>15</td></tr></tbody></table>
</section>
<section id="treino"><h2>Formulário de treino</h2>
<p id="form-help">Use um apelido inventado, até 20 caracteres. Campo obrigatório. Não é uma inscrição e nada será enviado.</p>
<form><label for="alias">Apelido fictício (obrigatório)</label>
<input id="alias" name="alias" type="text" required maxlength="20" aria-describedby="form-help" autocomplete="off">
<fieldset><legend>Qual atividade você prefere?</legend>
<label for="draw"><input id="draw" type="radio" name="activity" value="draw" checked> Desenhar</label>
<label for="test"><input id="test" type="radio" name="activity" value="test"> Testar</label></fieldset>
<button type="submit">Conferir treino local</button></form>
<p id="practice-result" role="status" data-practice-message="Treino concluído localmente; nada foi enviado ou inscrito."></p></section>
<section><h2>Perguntas</h2><details><summary>Preciso me inscrever?</summary><p>Não. Esta página é apenas um projeto de estudo.</p></details></section>
</main>
<footer><p>Projeto fictício de aprendizagem.</p></footer>
</body>
</html>

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.