Acessibilidade

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira é um acervo comunitário fictício no bairro da Ribeira, Recife. Neste capítulo a sala de leitura precisa funcionar com teclado, zoom e leitor de tela. Acessibilidade não é um extra no fim: entra na marcação desde o primeiro arquivo.

O exemplo está em pacote de exemplos/17-acessibilidade/. Abra index.html. Use só o teclado. Tab até o campo e o botão. O anel laranja de 3px precisa aparecer.

Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Explicar o que é acessibilidade (a11y) em uma frase útil.
• Usar HTML semântico (header, nav, main, footer, label).
• Navegar sem mouse.
• Usar ARIA com parcimônia.
• Escrever alt, contraste e zoom de 200%.

O que é a11y

Acessibilidade é a página poder ser usada por mais gente: teclado, leitor de tela, visão reduzida, zoom, pouca luz, braço ocupado.

A sigla a11y é atalho de accessibility (a + 11 letras + y). No texto do capítulo, prefira a palavra acessibilidade.

Não é só “cego”. Contraste ruim acerta quem lê no sol. Foco invisível acerta quem não usa mouse. Campo sem rótulo acerta todo mundo com pressa.

HTML semântico

A estrutura certa já carrega significado. button é acionável. a com href é link. h1 é o título da página. Um div não é botão.

<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header class="site-header">
  <nav aria-label="Principal">
    <ul class="menu">
      <li><a href="index.html" aria-current="page">Início</a></li>
    </ul>
  </nav>
</header>
<main id="conteudo">
  <h1>Sala de leitura acessível</h1>
</main>

lang="pt-BR" no html. Viewport no head. Skip-link como primeiro foco. aria-current="page" no item do menu desta página.

Erro comum: vários h1 ou pular de h1 para h3. A hierarquia de títulos é o mapa do leitor de tela.

Teclado

Tab anda pelos links, botões e campos. Shift+Tab volta. Enter aciona o botão ou o link. Espaço marca a caixa.

O foco precisa ser visível. Neste volume, cerca de 3px:

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #e07a5f;
  outline-offset: 2px;
}

Não use outline: none sem um substituto tão visível quanto.

Mude uma coisa. No estilos.css do exemplo, comente o outline. Preveja o Tab “invisível”. Recarregue. Tabule. Depois devolva a regra.

O skip-link só aparece no foco. Tab uma vez no topo. Deve ler “Pular para o conteúdo”. Enter salta o menu.

ARIA com parcimônia

ARIA explica o que o HTML ainda não disse. Se o HTML já diz, não acrescente ARIA.

Bom: aria-current="page" no link atual. aria-label="Principal" no nav quando há mais de uma navegação. role="status" num aviso que muda.

Ruim: div role="button" no lugar de button. aria-label repetindo o texto visível. alt vazio e aria-label na imagem informativa.

Regra: primeiro a tag certa. ARIA só para o buraco que restar.

Alt, contraste e zoom

Toda imagem informativa tem alt que descreve o conteúdo, não o arquivo.

<img src="ribeira-fachada.png" width="800"
  alt="Fachada fictícia da Biblioteca da Ribeira, com porta central e duas janelas">

Contraste: texto escuro em papel claro (#1a1a1a em #f4f1ea). Não ponha cinza claro em branco.

Zoom: no navegador, 200%. O texto não pode cortar. max-width: 100% nas imagens. Layout com min() e flex-wrap já estudados.

O formulário do exemplo só demonstra marcação. O apoio pronto cancela o envio e mostra uma confirmação. A validação e a confirmação ocorrem na própria página. Nada é enviado. Não peça dado pessoal.

Disco, 127.0.0.1 e publicação

No disco você testa Tab, zoom e skip-link. Em 127.0.0.1 o teste é o mesmo, com URL de servidor local:

python -m http.server 8080 --bind 127.0.0.1

Publicação pública não entra neste volume. Uma página “bonita” no ar sem teclado continua inacessível. Confira antes de qualquer envio.

Atividades

1. O skip-link deve ser o quê na ordem de Tab? Para onde ele aponta?
2. Quando aria-label é desnecessário?
3. Você aplica zoom 200% no exemplo. O que não pode acontecer com o campo e o botão?

Respostas comentadas

1. O primeiro foco da página. Aponta para #conteudo, o id do main.
2. Quando o texto visível já nomeia o controle. ARIA duplicada atrapalha. Prefira label visível.
3. Não podem sair da tela nem ficar ilegíveis. O anel de foco e o rótulo precisam continuar visíveis.