O que é acessibilidade

Este capítulo explica por que o site da Oficina Costeira precisa funcionar para qualquer pessoa. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Nada aqui é dado real de cliente.

O exemplo está em exemplos/15-acessibilidade/. Este volume tem 52 capítulos.

Acessibilidade não é um extra no fim. É a mesma página, usada de jeitos diferentes. O ciclo de estudo continua: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Ver acessibilidade como direito de uso, não como caso extremo.
• Reconhecer impedimentos visuais, motores, auditivos e cognitivos.
• Lembrar que o impedimento pode ser temporário.
• Entender o papel do teclado e do leitor de tela.
• Conhecer WCAG como referência, sem decorar a norma.
• Testar no Windows com NVDA, não só com VoiceOver de outro sistema.

A Web é para todas as pessoas

A Web aberta só cumpre a promessa se a página puder ser lida, ouvida e operada. Quem constrói o HTML decide isso.

Não pense só em “cego de nascença” ou “cadeira de rodas”. Pense em qualquer pessoa tentando completar uma tarefa: achar a agenda, ler um projeto, mandar um recado fictício.

Quando a página funciona no extremo, ela também funciona melhor no meio. Contraste alto ajuda no sol da orla. Área de clique grande ajuda no ônibus. Texto claro ajuda quem está cansado.

A meta deste volume: qualquer humana consegue usar a Oficina Costeira com o que ela tem agora — mouse, teclado, zoom, leitor de tela ou os três.

Acessibilidade e usabilidade andam juntas. Se a pessoa se perde, o visual bonito não salvou a tarefa.

Impedimento não é só permanente

Um braço quebrado, um ouvido entupido, um celular no sol, uma conexão lenta: tudo isso muda o jeito de usar a página por um tempo.

Impedimentos visuais incluem cegueira, baixa visão, catarata, daltonismo e o brilho da tela. Impedimentos motores incluem tremor, pouca precisão, não usar mouse. Impedimentos auditivos incluem surdez parcial ou total. Impedimentos cognitivos incluem dislexia, memória curta, distração, leitura em segundo idioma.

A mesma pessoa atravessa vários desses estados na vida. O HTML da Oficina Costeira não pode apostar que todo mundo vê a cor, ouve o vídeo e acerta um botão de 16 pixels.

O que já está no exemplo e você vai reforçar nas próximas capítulos:

• lang="pt-BR" no html;
• skip-link “Pular para o conteúdo”;
• alt nas imagens;
• foco visível de cerca de 3 px;
• vídeo com controles, sem autoplay.

Quatro frentes de cuidado

Visual: deixe o texto redimensionar. Teste contraste. Não dependa só da cor. Descreva imagens. Não dispare som sozinho.

Mobilidade: a página inteira precisa funcionar só com teclado. Tab, Shift+Tab, Enter e Esc. Links e botões grandes o bastante para o polegar.

Audição: legenda e transcrição quando houver fala. Indicadores que não sejam só um bipe. Controles no vídeo.

Cognição: diga onde a pessoa está (aria-current no menu). Use títulos de verdade. Parágrafos curtos. Links com nome. Figuras que explicam, não que distraem.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Agenda · Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <a href="index.html">Oficina Costeira</a>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="agenda.html" aria-current="page">Agenda</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Agenda</h1>
      <p>Oficinas fictícias em João Pessoa. Nada é inscrição real.</p>
    </main>
  </body>
</html>

Esse esqueleto já comunica idioma, atalho para o conteúdo, nome do menu e página atual.

Teclado antes do mouse

Muita gente não usa mouse. Outra gente usa os dois. O teclado é o teste mínimo.

Abra o exemplo em 127.0.0.1. Aperte Tab uma vez. O skip-link deve aparecer e receber o foco. Continue tabulando: marca, itens do menu, links do main, rodapé.

Se o foco sumir dentro da página, há um buraco. Se o foco não tiver contorno, a pessoa perde o lugar. O capítulo 17 trata o desenho do foco. Aqui o combinado do volume já existe:

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

Não escreva outline: none no :focus. Se o visual do anel não combina com a marca, troque a cor. Não apague o anel.

O skip-link pula o menu repetido. Sem ele, quem usa teclado atravessa os mesmos cinco links em toda página.

Leitor de tela: NVDA no Windows

Leitor de tela transforma o HTML em fala ou em braile. Ele não “olha” o CSS. Ele lê a árvore de elementos, os nomes acessíveis e as regiões.

Neste volume o teste principal é no Windows, com NVDA. O NVDA é gratuito. VoiceOver existe no macOS e no iOS, mas não é o único caminho e não é o padrão deste capítulo.

Com o NVDA ligado, percorra a home da Oficina Costeira. Ouça se o h1 é anunciado como título. Ouça se a lista do menu é lista. Ouça o alt da marca.

Atalhos úteis para estudar (NVDA ligado):

• Insert + N — menu do NVDA;
• H — próximo título;
• K — próximo link;
• Tab — próximo controle;
• Insert + F7 — lista de elementos.

Se o NVDA lê “gráfico 14-seo” no lugar de uma foto, o alt está ausente ou inútil. Se ele não encontra região principal, falta main ou o skip aponta para um id que não existe.

JAWS e Narrator também existem no Windows. ChromeVox é extra. Um leitor bem usado vale mais do que cinco ferramentas mal ligadas.

Ferramentas ajudam, não substituem gente

Checklist rápido em toda página da Oficina Costeira:

1. Aumente o texto duas vezes e diminua duas vezes. O bloco não pode estourar.
2. Desligue imagens. O texto continua fazendo sentido.
3. Desligue o CSS. A ordem da leitura ainda é lógica.
4. Passe um simulador de daltonismo se tiver. Cor não pode ser o único sinal.
5. Valide o HTML. Tag aberta errada muda a árvore inteira.
6. Percorra com teclado e com NVDA.

WAVE, o inspetor de acessibilidade do navegador e o validador do W3C apontam falhas óbvias. Nenhum deles ouve a página no seu lugar.

WCAG é o conjunto de critérios da W3C. Você não precisa decorar números. Precisa de percepção, operação, compreensão e robustez: dá para perceber, dá para usar, dá para entender, o código não quebra a tecnologia assistiva.

WAI-ARIA acrescenta papéis e propriedades quando o HTML sozinho não basta. Primeiro use header, nav, main, footer, button, label. ARIA demais em div costuma piorar.

Pare e experimente. Abra exemplos/15-acessibilidade/index.html. Leia o skip-link. Copie o href. Mude só o alvo para #nao-existe. Preveja: Tab ainda foca o link, mas Enter não pula. Recarregue e confira. Devolva #conteudo.

Erro comum: achar que “acessível” é só contraste de cor. Semântica, teclado, alt e idioma pesam tanto quanto a paleta.

O que esta série ainda vai fazer

O capítulo 16 aprofunda conteúdo: alt, títulos, lang, skip-link. A 17 aprofunda o visual: contraste, foco de 3 px, alvo de clique. A 18 trata animação, prefers-reduced-motion e o teste com NVDA de ponta a ponta.

Não espere um plugin milagroso. O HTML da Oficina Costeira é o produto.

Não publique o exercício. Não peça dado pessoal. Formulário, quando aparecer, só demonstra marcação.

Atividades

1. Cite um impedimento temporário que o teclado resolveria na Oficina Costeira.
2. O que deve acontecer ao apertar Tab na primeira vez em qualquer página do exemplo?
3. Por que este volume testa NVDA no Windows em vez de só VoiceOver?
4. Qual a diferença entre desligar o CSS e “a página está acessível”?
5. ARIA substitui button e label? Explique.

Respostas comentadas

1. Um pulso dolorido, um mouse quebrado, usar o notebook no colo do ônibus. Tab percorre marca, menu e conteúdo.
2. O skip-link “Pular para o conteúdo” recebe o foco e fica visível.
3. O material de estudo assume Windows. NVDA é livre e cobre o mesmo tipo de leitura. VoiceOver é outro sistema, não o único leitor do mundo.
4. Desligar o CSS mostra a ordem e as tags. Não prova contraste, foco, alvo de clique nem o que o NVDA fala.
5. Não. ARIA descreve o que o HTML não consegue. Botão de verdade e rótulo de verdade vêm primeiro.

Referências

• Acessibilidade
• O que é acessibilidade
• WCAG
• WAI-ARIA
• Skip links

O arquivo completo

Referência do exemplo 15-acessibilidade, 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.";});}