Conteúdo acessível

Este capítulo trata do texto e da marcação que o leitor de tela encontra na Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Os cartazes e a equipe são inventados.

O exemplo está em exemplos/16-conteudo-acessivel/. Este volume tem 52 capítulos.

Conteúdo acessível começa no idioma, nos títulos, nas listas, no alt e no skip-link. O ciclo é ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Declarar lang="pt-BR" e trechos em outro idioma.
• Escrever títulos em ordem, com um h1.
• Preferir listas de verdade a parágrafos empilhados.
• Redigir alt útil, vazio só quando for enfeite.
• Ligar o skip-link ao main.
• Usar landmarks e aria-label sem repetir o que a tag já diz.

Idioma e frases que uma pessoa lê

lang="pt-BR" no html diz ao navegador e ao NVDA que a página é português do Brasil. Sem isso, a voz pode soletrar com sotaque de outro idioma.

Se um trecho for em inglês, marque só aquele trecho.

<p>O ateliê fictício fica em Tambaú. O cartaz traz a frase <span lang="en">salt air, ink and paper</span>.</p>

Escreva frases curtas. Uma ideia por parágrafo. Evite jargão solto. Quando um termo técnico aparecer, explique na hora.

Títulos, listas e ênfase guiam o olho e a orelha. Um bloco único de vinte linhas cansa quem lê e quem ouve.

O público da Oficina Costeira, neste volume, é aluna iniciante. O texto do site de exemplo também precisa ser claro: “coletivo fictício”, “João Pessoa”, “nada é enviado a um servidor”.

Títulos são mapa, não tamanho de letra

strong grande não é título. O NVDA anuncia “heading level 1” só se a tag for h1. Com isso a pessoa abre a lista de títulos e pula.

<!-- Fraco: parece título, não é -->
<p><strong>Projetos da orla</strong></p>

<!-- Forte: é título de verdade -->
<h1>Projetos</h1>
<h2>Cartaz da Feira de Tambaú</h2>

Regras deste volume:

• um h1 por página;
• não pule de h1 para h3;
• o número marca hierarquia, não o tamanho visual;
• o CSS pode deixar o h2 menor ou maior; o significado continua h2.

A ordem no HTML é a ordem da leitura. Não empilhe o rodapé no arquivo antes do main só para “ficar em cima” no CSS. Conteúdo primeiro.

O validador de HTML desenha um esboço dos títulos. Use-o para ver se o mapa faz sentido. Ele não diz se você escolheu a tag certa. Diz se o código está bem formado.

Listas contam quantos itens existem

Três p empilhados parecem lista no olho. No NVDA viram três frases soltas.

<ul>
  <li>Identidade da Feira de Tambaú</li>
  <li>Sinalização da orla fictícia</li>
  <li>Cartaz da oficina de carimbo</li>
</ul>

O leitor anuncia que é lista, quantos itens há, em qual você está e quando acaba. Dá para pular o bloco. ol acrescenta a ordem.

Menu é lista. A Oficina Costeira já marca assim:

<nav aria-label="Principal">
  <ul class="menu">
    <li><a href="index.html">Início</a></li>
    <li><a href="projetos.html">Projetos</a></li>
    <li><a href="equipe.html">Equipe</a></li>
  </ul>
</nav>

aria-label="Principal" nomeia a região de navegação. Se houver outro nav no rodapé, o nome evita “navegação, navegação”.

Não use lista só para recuar texto. Não monte o menu com div empilhados.

Alt, figure e descrição longa

Toda img tem alt. O atributo existe mesmo quando o valor é vazio.

<img src="assets/imagens/marca.svg" alt="Marca da Oficina Costeira">

O alt substitui a imagem. Descreva o que a pessoa precisa saber se a foto não carregar.

• Texto desenhado na arte: o alt é o próprio texto.
• Foto de um cartaz: diga o motivo, não “imagem1.png”.
• Gráfico: resuma a conclusão.
• Enfeite que o CSS deveria ter levado: alt="".

<img src="assets/imagens/onda-decorativa.svg" alt="" role="presentation">

role="presentation" pede para o leitor ignorar o enfeite. Só use com alt="".

Se a imagem precisa de legenda visível, use figure e figcaption. Quando a legenda já diz tudo, o alt pode ficar vazio para não repetir.

<figure>
  <img src="assets/imagens/cartaz-tambau.jpg" alt="">
  <figcaption>Cartaz fictício: Oficina Costeira, encontro em Tambaú, exemplo sem inscrições.</figcaption>
</figure>

Infográfico complexo merece HTML de verdade (listas, títulos) ou um aria-details apontando para um bloco na mesma página. alt curto não substitui um infográfico.

Skip-link no começo do body

O primeiro foco da página é o link “Pular para o conteúdo”. Ele aponta para o id do main.

<body>
  <a class="skip" href="#conteudo">Pular para o conteúdo</a>
  <header class="site-header">…</header>
  <main id="conteudo" class="wrap">
    <h1>Equipe</h1>
    <p>Nomes fictícios do coletivo em João Pessoa.</p>
  </main>
</body>

O CSS esconde o link até o foco. Esconder com display: none tira o link do teclado. Por isso o exemplo usa deslocamento e devolve a posição no :focus.

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  padding: 0.5rem 1rem;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 10;
}

O href e o id precisam casar letra por letra. #conteudo não acha id="Conteudo".

Pare e experimente. Copie o skip-link. Mude só o texto para “Pular o menu”. Preveja: o destino continua o main. Recarregue, Tab, Enter, confira. O texto pode mudar; o href não pode quebrar.

Erro comum: alt="foto da equipe" quando a foto mostra três pessoas em frente ao mar. Diga o que importa: “Lia, Caio e Rita, nomes fictícios, na orla de João Pessoa.” Ou deixe alt="" se o parágrafo ao lado já nomeia as três.

Landmarks e rótulos de link

Regiões HTML5 já são landmarks. header, nav, main, aside e footer bastam na maior parte do site.

Papéis ARIA equivalentes existem (banner, navigation, main, complementary, contentinfo). Não duplique: um main não precisa de role="main".

Todo o conteúdo visível deve cair em alguma região. Texto solto entre header e main, fora de ambos, fica difícil de achar no rotor do leitor.

Links “Leia mais” repetidos viram uma lista inútil. Complete o nome visível ou use aria-label.

<article>
  <h2>Cartaz da Feira de Tambaú</h2>
  <p>Identidade fictícia para um fim de semana na orla.</p>
  <a href="projetos.html#tambau" aria-label="Ler o projeto do cartaz da Feira de Tambaú">Ler o projeto</a>
</article>

aria-label substitui o texto do link para o leitor. Não contradiga o que está na tela.

O validador não mede se o alt é bom. Ele só vê se o atributo existe. Você ainda precisa ler o alt em voz alta e perguntar: isso substitui a imagem?

Atividades

1. Por que lang="pt-BR" no html e não só no title?
2. O que o NVDA perde se o h1 virar div estilizado?
3. Quando alt="" é a escolha certa?
4. O skip-link pode usar display: none no estado inicial? Por quê?
5. Reescreva um link “Saiba mais” da página de projetos com aria-label útil.

Respostas comentadas

1. O idioma vale para a árvore inteira: títulos, parágrafos, alt e menu. O title sozinho não define a voz da página.
2. Perde o anúncio de nível e a lista de títulos. A pessoa não pula pelos capítulos.
3. Quando a imagem é decorativa e o texto vizinho já traz a mesma informação, ou quando a figcaption já descreve e repetir cansaria.
4. Não. display: none tira o link da ordem de Tab. O link precisa existir para o teclado e aparecer no foco.
5. Exemplo: aria-label="Saiba mais sobre o cartaz da Feira de Tambaú". O destino fica único na lista de links.

Referências

• lang
• Títulos
• alt em img
• figure
• ARIA: aria-label

O arquivo completo

Referência do exemplo 16-conteudo-acessivel, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}