HTML semântico, formulários e acessibilidade

Identificação

• Duração: 2 horas
• Tipo: teoria aplicada e laboratório
• Entrega: estrutura HTML completa da landing page Knowledge AI
• Código de referência: ../exemplos/aula-1.2/index.html

Introdução

O que é HTML?

HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. É a linguagem utilizada para descrever a estrutura e o conteúdo de uma página Web.

HTML não é responsável principalmente pela aparência e não é uma linguagem de programação tradicional. Ele informa ao navegador:

• isto é um título;
• isto é um parágrafo;
• isto é uma lista;
• isto é uma navegação;
• isto é um formulário;
• isto é um botão.

O que significa “semântico”?

Semântica é significado. HTML semântico utiliza elementos que descrevem a função do conteúdo, em vez de criar uma coleção de caixas sem significado.

Compare:

<div class="botao">Enviar</div>

Com:

<button type="submit">Enviar</button>

Visualmente os dois podem parecer iguais, mas o segundo informa que existe uma ação. Navegadores, leitores de tela, mecanismos de busca e ferramentas de teste conseguem compreender melhor esse elemento.

Por que aprender isso antes do CSS?

Uma página precisa continuar organizada mesmo sem aparência personalizada. Primeiro estruturamos o conteúdo; depois utilizamos CSS para apresentá-lo e JavaScript para adicionar comportamento.

HTML -> estrutura e significado
CSS -> aparência e layout
JavaScript -> comportamento

Objetivos

Ao final da aula, o aluno deverá conseguir:

1. explicar a função semântica dos principais elementos HTML;
2. organizar uma página com landmarks;
3. construir uma hierarquia coerente de títulos;
4. diferenciar links e botões;
5. criar um formulário associado corretamente a seus rótulos;
6. escrever textos alternativos adequados para imagens;
7. utilizar validações nativas sem prejudicar a experiência;
8. navegar pela página utilizando apenas o teclado.

Pré-requisitos

• conclusão da Aula 1.1;
• arquivo index.html criado;
• noções de cliente, servidor, URL e HTTP;
• saber abrir o DevTools.

Pergunta orientadora

Como escrever uma página que possa ser compreendida por pessoas, navegadores, leitores de tela e mecanismos de busca?

Roteiro sugerido

1. O que é HTML

HTML descreve a estrutura e o significado do conteúdo de uma página.

O HTML não deve ser tratado apenas como uma ferramenta para posicionar elementos visualmente. Aparência será responsabilidade principal do CSS; comportamento será responsabilidade principal do JavaScript.

HTML -> estrutura e significado
CSS -> apresentação
JavaScript -> comportamento

Essa separação não é absoluta, mas ajuda a manter o projeto compreensível e sustentável.

2. Elementos semânticos

Um elemento semântico comunica a função de seu conteúdo.

Compare:

<div class="topo">
  <div class="titulo">Knowledge AI</div>
</div>

Com:

<header>
  <h1>Knowledge AI</h1>
</header>

Os dois trechos podem receber a mesma aparência. O segundo, porém, descreve melhor a estrutura.

Elementos importantes

Regra prática

Não escolha um elemento pelo visual padrão do navegador. Escolha pelo significado do conteúdo.

3. Landmarks

Landmarks são regiões que ajudam tecnologias assistivas e usuários a navegar pela página.

Uma estrutura comum:

<header>
  <nav aria-label="Navegação principal">
    <!-- links -->
  </nav>
</header>

<main id="conteudo">
  <!-- conteúdo principal -->
</main>

<footer>
  <!-- informações finais -->
</footer>

O link para pular navegação permite ir diretamente ao conteúdo:

<a href="#conteudo">Pular para o conteúdo</a>

Ele será estilizado na próxima aula para aparecer quando receber foco.

4. Hierarquia de títulos

Os títulos organizam o documento.

h1 - assunto principal da página
  h2 - seção principal
    h3 - subseção

Para a landing page:

h1 Knowledge AI
  h2 Conhecimento confiável para sua equipe
  h2 Como funciona
  h2 Recursos
    h3 Organize
    h3 Pergunte
    h3 Verifique
  h2 Entre na lista de espera

Boas práticas

• mantenha um assunto principal claro;
• não escolha h4 porque ele parece menor;
• não use título vazio;
• evite saltar níveis sem uma razão estrutural;
• utilize CSS para modificar tamanho e aparência.

5. Parágrafos, listas e ênfase

Utilize:

• p para parágrafos;
• ul para listas sem ordem;
• ol para etapas ordenadas;
• strong para importância;
• em para ênfase.

Não utilize vários elementos br para criar espaçamento. O espaçamento será controlado por CSS.

6. Links e botões

Uma das decisões mais importantes da interface:

• link leva o usuário para outro endereço ou região;
• botão executa uma ação.

<a href="#lista-espera">Entrar na lista de espera</a>

<button type="submit">Quero participar</button>

Evite:

<a href="#" onclick="salvar()">Salvar</a>

Se a intenção é salvar, o elemento correto é um botão.

Tipos de botão

Dentro de formulários:

<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
<button type="button">Abrir ajuda</button>

Defina o tipo explicitamente para evitar envios acidentais.

7. Imagens

Toda imagem precisa de uma decisão sobre o texto alternativo.

Imagem informativa

O texto alternativo comunica a informação essencial:

<img
  src="assets/fluxo-conhecimento.svg"
  alt="Documentos são processados para gerar respostas acompanhadas de fontes"
>

Imagem decorativa

Utilize texto alternativo vazio:

<img src="assets/detalhe-decorativo.svg" alt="">

Não comece obrigatoriamente com “imagem de”. O leitor de tela já anuncia que se trata de uma imagem.

Figura com legenda

<figure>
  <img
    src="assets/fluxo-conhecimento.svg"
    alt="Documentos passam pela Knowledge AI antes da resposta"
  >
  <figcaption>
    A resposta mantém ligação com os documentos consultados.
  </figcaption>
</figure>

8. Formulários acessíveis

O formulário da lista de espera terá nome, e-mail, perfil e aceite.

Rótulos

Cada campo precisa de um rótulo associado:

<label for="email">E-mail profissional</label>
<input id="email" name="email" type="email" required>

O for do rótulo deve corresponder ao id do campo.

Placeholder não substitui rótulo:

<!-- Evitar -->
<input type="email" placeholder="Digite seu e-mail">

O placeholder desaparece durante a digitação e normalmente apresenta contraste reduzido.

Nome e propósito

<input
  id="nome"
  name="nome"
  type="text"
  autocomplete="name"
  required
>

<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
  required
>

• id relaciona o campo ao rótulo;
• name identifica o dado enviado;
• type informa o formato esperado;
• autocomplete ajuda o preenchimento;
• required aplica validação nativa.

Ajuda adicional

<label for="email">E-mail profissional</label>
<p id="ajuda-email">Enviaremos apenas atualizações sobre o projeto.</p>
<input
  id="email"
  name="email"
  type="email"
  aria-describedby="ajuda-email"
  required
>

aria-describedby relaciona o campo ao texto de ajuda.

Agrupamento

Campos relacionados podem ser agrupados:

<fieldset>
  <legend>Seu principal interesse</legend>

  <label>
    <input type="radio" name="interesse" value="estudo">
    Estudo
  </label>

  <label>
    <input type="radio" name="interesse" value="trabalho">
    Trabalho
  </label>
</fieldset>

Checkbox de aceite

<label>
  <input type="checkbox" name="aceite" required>
  Concordo em receber informações sobre o projeto.
</label>

O aceite deve ser claro. Não utilize uma opção pré-selecionada para obter consentimento.

9. Metadados essenciais

No head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
  name="description"
  content="Organize documentos e encontre respostas acompanhadas das fontes utilizadas."
>
<title>Knowledge AI - Conhecimento confiável para sua equipe</title>

O título deve identificar a página. A descrição deve resumir seu conteúdo de maneira honesta e útil.

10. Laboratório guiado

Passo 1 - Estrutura global

Crie:

• link para pular ao conteúdo;
• header;
• nav;
• main;
• footer.

Passo 2 - Navegação

Adicione links para:

• início;
• como funciona;
• recursos;
• lista de espera.

Passo 3 - Seção principal

Inclua:

• título;
• proposta de valor;
• chamada para ação;
• figura explicativa.

Passo 4 - Como funciona

Utilize uma lista ordenada:

1. envie os documentos;
2. faça uma pergunta;
3. confira a resposta e suas fontes.

Passo 5 - Recursos

Crie três artigos:

• organize;
• pergunte;
• verifique.

Cada artigo deve possuir título e descrição.

Passo 6 - Formulário

Inclua:

• nome;
• e-mail;
• perfil;
• aceite;
• botão de envio.

O formulário ainda não enviará dados para um servidor. O comportamento será adicionado em aulas posteriores.

11. Teste com teclado

Sem utilizar o mouse:

1. pressione Tab;
2. encontre o link para pular ao conteúdo;
3. percorra a navegação;
4. acesse a chamada para ação;
5. preencha todos os campos;
6. altere o campo de seleção;
7. marque o aceite;
8. ative o botão.

Observe

• é possível identificar onde está o foco?
• a ordem de navegação é coerente?
• algum elemento interativo fica inacessível?
• clicar no rótulo ativa o campo correspondente?
• os erros nativos são compreensíveis?

O foco será estilizado na Aula 1.3. Não o remova.

12. Exercício de fixação

Acrescente uma seção de perguntas frequentes utilizando:

<details>
  <summary>Meus documentos serão usados para treinar modelos?</summary>
  <p>
    O tratamento dos documentos dependerá da política e da configuração
    adotadas pelo serviço.
  </p>
</details>

Crie pelo menos três perguntas:

• privacidade;
• fontes das respostas;
• formatos aceitos.

13. Desafio individual

Crie uma página adicional chamada privacidade.html.

Ela deve conter:

• título da página;
• data de atualização;
• quais dados seriam coletados;
• finalidade da coleta;
• tempo de retenção;
• contato;
• link para retornar à página inicial.

O objetivo não é produzir um documento jurídico definitivo, mas praticar estrutura, navegação e clareza.

14. Erros comuns

Utilizar div para tudo

div é útil quando nenhum elemento semântico representa corretamente o agrupamento. Não deve ser a escolha automática.

Utilizar título por aparência

O nível do título representa hierarquia. O CSS definirá o tamanho visual.

Remover o contorno de foco

/* Não fazer sem criar uma alternativa visível */
*:focus {
  outline: none;
}

Sem indicação de foco, usuários de teclado podem perder sua posição.

Usar placeholder como rótulo

Campos precisam de rótulos persistentes.

Repetir o mesmo id

Cada id deve ser único na página.

Colocar botão dentro de link

Não aninhe elementos interativos:

<!-- Inválido e confuso -->
<a href="/cadastro"><button>Cadastrar</button></a>

Utilize somente o elemento que representa a intenção.

Escrever texto alternativo excessivo

O texto alternativo deve comunicar a função ou informação essencial, não descrever cada detalhe visual.

15. Lista de verificação de entrega

• O documento declara <!doctype html>.
• O idioma está definido.
• O head possui charset, viewport, descrição e título.
• Existe um link para pular ao conteúdo.
• Existe apenas um main.
• A navegação possui nome acessível.
• Os títulos formam uma hierarquia coerente.
• Links navegam e botões executam ações.
• Imagens possuem texto alternativo adequado.
• Todos os campos possuem rótulos associados.
• Os campos possuem name.
• O botão do formulário possui tipo explícito.
• A página pode ser utilizada por teclado.
• Não existem IDs duplicados.

16. Critérios de aceite

A entrega será aceita quando:

1. a página possuir todas as regiões solicitadas;
2. a navegação interna funcionar;
3. a hierarquia de títulos representar o conteúdo;
4. o formulário puder ser preenchido somente com teclado;
5. rótulos e campos estiverem associados;
6. imagens tiverem alternativas coerentes;
7. o HTML estiver legível e organizado;
8. não houver elementos interativos aninhados;
9. o aluno justificar a escolha entre link e botão;
10. o aluno demonstrar pelo menos uma validação nativa.

17. Perguntas para revisão

1. Qual é a principal responsabilidade do HTML?
2. Quando devemos utilizar section?
3. Qual é a diferença entre link e botão?
4. Por que placeholder não substitui label?
5. Para que servem fieldset e legend?
6. Quando uma imagem deve possuir alt=""?
7. Por que não devemos remover o indicador de foco?
8. Qual é a diferença entre id e name em um campo?

Próxima aula

Na Aula 1.3, a estrutura receberá identidade visual, layout responsivo, Flexbox, Grid, propriedades personalizadas e estados de foco, sem comprometer a semântica construída nesta aula.