Curso de HTML / Noções de acessibilidade: títulos, links, imagens e teclado

Um HTML acessível começa com a escolha dos elementos com base em seu significado. Use títulos em uma ordem lógica, escreva links que revelem seu destino, forneça alternativas apropriadas para as imagens e garanta que as pessoas possam realizar as interações com um teclado.

Use títulos para descrever a hierarquia

Um título não é apenas um texto em tamanho grande. Ele sinaliza um nível no documento: um assunto de página pode usar h1, as seções principais h2, e suas subseções h3. Não vá diretamente para h4 apenas porque você gosta do tamanho padrão; ajuste a aparência com CSS. Alguém que lê apenas os títulos deve ser capaz de entender o plano da página. Compare os níveis de títulos e os parágrafos nos exemplos de Títulos e Parágrafos.

Por exemplo, «Informações de entrega» pode ser uma seção principal, com «Zonas de entrega» e «Horários de entrega» como subseções. Evite títulos vazios ou títulos que não correspondam ao texto abaixo. A hierarquia de títulos ajuda as pessoas a ler visualmente e a navegar com tecnologias assistivas.

Torne os links e as imagens compreensíveis

Uma lista de links todos nomeados "aqui" fornece poucas indicações sobre seus destinos. Indique o objetivo no texto do link, como em <a href="guide.html">Ler o guia do usuário</a>. Se o link baixar um arquivo, especifique seu tipo no contexto ao redor. Revise as alternativas de imagem apropriadas para o papel e as dimensões em Imagens: img, texto alternativo e dimensões.

O texto alt de uma imagem informativa deve transmitir a informação que ela fornece aqui. Uma imagem puramente decorativa que repete um texto próximo pode usar alt="". Uma imagem usada como link também deve indicar o objetivo do link, como “Abrir o guia do usuário”. Evite listar cada cor ou forma visível quando a função for o que importa. A árvore de decisão W3C WAI para imagens ajuda a determinar qual alternativa é adequada.

Experimente a página sem mouse

1. Use Tab para navegar pelos links, campos de formulário e botões.
2. Verifique se o elemento em foco é visivelmente identificável.
3. Ative os controles usando Enter ou Espaço, conforme o caso.
4. Se um formulário relatar um erro, leia-o, volte ao campo, corrija o valor e envie novamente.

Um div com apenas um manipulador de clique não adquire automaticamente o significado ou o comportamento de teclado de um botão. Use a para navegação e button para ações. Se um menu ou conteúdo expansível abrir e fechar, verifique para onde o foco do teclado se move em seguida. O foco não deve desaparecer em conteúdo oculto, e a ordem de navegação deve corresponder aproximadamente à ordem de leitura. Verifique a associação explícita dos nomes dos campos com o exercício de clique no rótulo em Associar corretamente label e input.

Tipicamente, um link focado é aberto com Enter, enquanto um botão é ativado com Enter ou Espaço. Escolher um elemento que corresponda à navegação ou à ação fornece aos usuários de teclado o comportamento esperado, em vez de forçar um link a imitar um botão ou vice-versa.

Uma pequena página para testes manuais

Salve o código completo como accessible-page.html e baixe a imagem de exemplo com 960 pixels de largura e coloque-a ao lado do arquivo HTML. O formulário se destina à validação e inspeção dos valores GET, não para receber mensagens.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício de teste de teclado</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Ir para o conteúdo principal</a>
  <header>
    <nav aria-label="Nesta página">
      <a href="#guide">Guia de visita</a>
      <a href="#contact">Exercício de contato</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Guia Pequeno Jardim</h1>
    <section id="guide">
      <h2>Guia de visita</h2>
      <p>Use sapatos confortáveis e leve água.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="Uma árvore em um ilhote no meio de um lago, com montanhas ao fundo" width="960" height="540">
    </section>
    <section id="contact">
      <h2>Treinar com um campo de contato</h2>
      <form method="get">
        <label for="practice-email">E-mail (obrigatório)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Use nome@example.com em vez de um endereço real.</p>
        <button type="submit">Verificar os valores inseridos</button>
      </form>
    </section>
  </main>
</body>
</html>

1. Pressione Tab uma vez para focar o link de salto, depois Enter para passar pelo menu repetido e alcançar o conteúdo principal.
2. O elemento principal com tabindex="-1" permite receber o foco sem adicionar uma outra parada normal de Tab. Verifique se o movimento seguinte com Tab segue uma ordem de leitura útil.
3. Acesse o formulário e compare uma submissão vazia, um valor inválido como abc e um endereço de teste corretamente formatado. Seu rótulo e instruções devem permanecer disponíveis enquanto você digita.
4. Verifique o texto, a imagem e o campo a 390px e com o zoom. Renomeie temporariamente a imagem para examinar seu texto alternativo e depois restaure o nome do arquivo.

HTML fornece a semântica e as interações nativas; CSS fornece o layout e o tratamento visual do foco. Erros personalizados ou menus complexos podem exigir gerenciamento adicional do estado e do foco via JavaScript. Concluir este exercício não garante que a página atenda a todos os requisitos de acessibilidade.

Tutorial sobre a estrutura de páginas W3C WAI

Compreender o que os testes podem e não podem provar

Um verificador automatizado pode detectar alguns erros de marcação, mas nem sempre pode julgar se um link é compreensível ou se a descrição de uma imagem é útil no contexto. Combine os resultados das ferramentas com testes usando o teclado, zoom e, quando aplicável, um leitor de tela. Comece pelos percursos de usuário importantes do site em vez de considerar um relatório sem erros como uma garantia. O guia MDN sobre acessibilidade HTML cobre mais modelos HTML nativos.