programandoai

Alt, headings e landmarks

Três hábitos que você já vem praticando desde o Módulo 1 formam, juntos, a base da acessibilidade em HTML. Hora de juntar as peças.

Estudar esta lição interativa →

Se você seguiu os módulos anteriores com atenção, boa parte deste módulo já vai soar familiar, e é de propósito. Acessibilidade não é um "extra" que se adiciona no fim; ela nasce das mesmas boas práticas que você vem treinando desde a primeira aula: alt descritivo, hierarquia de títulos sem pular níveis, e landmarks (header, nav, main, footer) bem usados. Este módulo junta essas peças e mostra o motivo de cada uma importar tanto.

Pense numa pessoa usando um leitor de tela como alguém navegando uma casa grande, no escuro, só com a voz de um guia narrando o que existe à frente. Esse guia não descreve tudo de uma vez, ele responde ao que a pessoa pede: "quais são os títulos desta página?", "quais são as regiões principais?", "o que essa imagem mostra?". Alt, headings e landmarks são, literalmente, as respostas que o seu HTML já precisa ter prontas para esse guia.

🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. header + nav + main + img com alt: os quatro pilares reunidos numa página só.

No Brasil, leis como a Lei Brasileira de Inclusão tornam a acessibilidade digital uma obrigação, não uma cortesia, especialmente para sites de bancos, governo e serviços essenciais. Mas o motivo mais direto de investir nisso é simples: pessoas cegas, com baixa visão, com deficiência motora ou cognitiva usam a internet todos os dias, e um HTML mal estruturado simplesmente as exclui de tarefas básicas, como comprar um remédio on-line ou pagar uma conta.

O erro mais comum de todos

Usar um nível de título (h1 a h6) só pelo tamanho da fonte que ele produz, e não pela hierarquia real do conteúdo, é talvez o erro de acessibilidade mais comum na web. Se você quer um texto grande por razão puramente visual, isso é trabalho de CSS (você vai ver isso no próximo curso); a escolha do h1 a h6 deve sempre refletir a estrutura lógica da página, título principal, depois seções, depois subseções.

🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Corrija a hierarquia de títulos.

← Voltar ao índice do curso