Organizar a página para estrutura e teclado

Neste capítulo você vai percorrer o conteúdo com estrutura compreensível e foco visível. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 05. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 06-estrutura-teclado do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

O HTML informa o papel de cada região

Header apresenta o site, nav reúne navegação, main contém o assunto principal e footer encerra a página. Article identifica um cartão independente; section reúne um tema com título. Essas tags comunicam papéis que uma cor ou tamanho de fonte não comunica. H1 é o título principal; h2 organiza regiões e h3 identifica atividades dentro da agenda. Escolha o nível pela relação do conteúdo, não pelo tamanho desejado. A apresentação pode ser ajustada em CSS sem trocar o significado do título.

Faça na sua cópia

Confira a relação entre agenda e seus cartões. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<section aria-labelledby="agenda">
  <h2 id="agenda">Agenda de prática</h2>
  <article class="card"><h3>Leitura às 10h</h3></article>
</section>

Mude uma coisa e preveja

Troque somente o texto do primeiro h3 por Leitura compartilhada às 10h.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A atividade ganha um nome mais específico sem mudar o nível dentro da agenda.

Se não acontecer

Não troque h3 por h1 apenas para aumentar a fonte. Confira a relação entre os assuntos e ajuste a aparência separadamente.

O atalho chega ao conteúdo principal

Skip-link é um link de atalho que permite pular o menu. Na referência, Pular para o conteúdo aparece ao receber foco. Seu href aponta para #conteudo, o id do main. Tabindex=-1 permite que a região receba foco sem criar outra parada comum na sequência de Tab. O menu usa âncoras para partes da mesma página; por isso não marca um desses links como página atual. Aria-current=page é adequado quando a navegação contém páginas distintas e identifica a página aberta.

Faça na sua cópia

Comece numa recarga nova e pressione Tab. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<main id="conteudo" tabindex="-1">

Mude uma coisa e preveja

Troque temporariamente somente o href do atalho por #nao-existe.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O destino deixa de funcionar. Reponha #conteudo e confirme que Enter chega ao main.

Se não acontecer

Confira id único e href iguais. Um atalho visível que não chega à região não conclui a tarefa.

O foco mostra onde a ação vai acontecer

Foco é o elemento que receberá uma ação do teclado. O navegador normalmente apresenta uma indicação, e a referência acrescenta contorno de 3px. Focus-visible aplica essa indicação nas situações em que ela é útil para reconhecer o percurso, como navegação pelo teclado. Shift+Tab permite voltar. Não use tabindex positivo para forçar uma sequência diferente do HTML: quando o conteúdo cresce, essa ordem vira outra estrutura que precisa de manutenção. Confira o percurso real, além de verificar se a regra existe.

Faça na sua cópia

Confira o foco e faça o percurso sem mouse. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

:focus-visible { outline: 3px solid #a33e10; outline-offset: 3px; }

Mude uma coisa e preveja

Troque somente 3px de outline por 4px.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O contorno fica mais espesso. Os destinos e a ordem de teclado continuam iguais.

Se não acontecer

Se não aparecer, confira se outra regra remove outline ou se o elemento pode receber foco. Use Tab, não apenas um clique.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Descreva os níveis de título da agenda.

2. Provoque e corrija um destino errado do atalho.

3. Percorra o menu com Tab, Shift+Tab e Enter.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. H2 nomeia a agenda; h3 nomeia cada atividade dentro dela. O nível descreve a estrutura, não a aparência da fonte.

2. Href e id precisam se relacionar. Restaurar o destino e ativar pelo teclado prova a ação, não apenas a presença do link.

3. O contorno identifica a posição e Enter ativa o link. A sequência deve acompanhar a ordem do conteúdo, sem tabindex positivo.

Quando seguir

Você percorre o menu e o atalho sem mouse e reconhece a estrutura da página. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 06-estrutura-teclado, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p class="selo">Projeto fictício</p><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>