Acessibilidade na prática

Neste capítulo você vai conferir teclado, foco, contraste e alternativas no projeto.

Seu ponto de partida

Estude depois do capítulo 15. O exemplo deste capítulo é 16-acessibilidade, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Faça o percurso sem mouse

Acessibilidade faz parte de todas as etapas, não é um enfeite final. Use Tab, Shift+Tab e Enter. O primeiro foco alcança Pular para o conteúdo; o atalho chega ao main. A navegação indica a página atual. Os campos têm rótulos.

Uma inspeção só com mouse pode esconder controles inalcançáveis. Não transforme div em botão: use o elemento que já oferece a interação esperada.

Faça no seu exemplo

Confira a regra de foco e experimente o percurso.

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

Mude uma coisa e preveja

Percorra o formulário e a navegação sem mouse.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Você vê o foco e consegue ativar cada ação necessária.

Se não acontecer

Se o foco sumir, procure outline:none. Não remova a indicação para resolver uma preferência visual.

Cor precisa de contraste e significado

Texto normal precisa de contraste suficiente contra seu fundo; 4,5:1 é a referência usada aqui. Texto grande tem critérios próprios, mas não use isso como motivo para clarear toda a página. Indicadores e controles também precisam de contraste.

Um erro deve ser explicado em texto, não só marcado em vermelho. Um link deve ser reconhecível além da cor. Ferramentas de contraste ajudam, mas não substituem conferir o percurso real.

Faça no seu exemplo

Compare link e texto.

a { color: #174d69; text-underline-offset: .2em; }

Mude uma coisa e preveja

Troque temporariamente o link para #b9d0da num fundo branco.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O contraste piora; restaure a cor escura. Confira também o sublinhado.

Se não acontecer

Não aprove uma cor apenas porque parece bonita numa tela. Teste o par de primeiro plano e fundo.

Zoom e alternativas preservam a informação

Amplie a 200% e leia as cinco páginas. O menu pode quebrar; os cartões podem empilhar. Isso é adaptação. Imagens têm alternativa adequada; mídia tem descrição; tabela tem região de rolagem.

Uma conferência manual pequena não certifica toda a acessibilidade de um produto. Ela comprova os comportamentos que você realmente testou. Anote uma falha concreta e repita o percurso depois de corrigi-la.

Faça no seu exemplo

Use o zoom real do navegador.

Tab → Pular para o conteúdo → Enter
Zoom: 200%

Mude uma coisa e preveja

Amplie e percorra a página de inscrição até a confirmação local.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Rótulos, campos, botões e retorno continuam disponíveis.

Se não acontecer

Se conteúdo cortar, revise alturas fixas e largura. Não bloqueie a ampliação do usuário.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Teste o atalho de conteúdo.

2. Confira um erro de formulário por texto.

3. Faça uma lista curta do que realmente testou.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Ele aponta para main e permite pular o menu.

2. A validação explica a correção e não depende só de cor.

3. Registre páginas, teclado, largura e zoom usados, sem inventar aprovação.

Quando seguir

Você consegue demonstrar o percurso acessível que testou. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 16-acessibilidade, 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>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> <a href="local.html">Local</a> <a href="inscricao.html">Inscrição</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section><section aria-labelledby="beneficios"><h2 id="beneficios">O que você encontra</h2><ul class="beneficios"><li>Explicações curtas</li><li>Exemplos para alterar</li><li>Tempo para conferir</li></ul><h2>Seu percurso de prática</h2><ol><li>Abra a página.</li><li>Mude uma coisa.</li><li>Confira o resultado.</li></ol></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/simulacao.js

const form = document.querySelector('#inscricao');
const button = document.querySelector('#simular');
const status = document.querySelector('#retorno');
button.disabled = false;
form.addEventListener('submit', event => {
  event.preventDefault();
  status.textContent = 'Simulação concluída. Nada foi enviado ou gravado.';
  status.focus();
});
form.addEventListener('reset', () => { status.textContent = ''; });