Acessibilidade no visual

Este capítulo cuida do que se vê e do que se clica no site da Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. A paleta do exemplo (azul #0b4f6c, areia #f7f4ee, tinta #14222b, ação #c45c26) é de estudo.

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

Contraste, foco de cerca de 3 px e alvo de clique grande não são enfeite. São o caminho para a pessoa terminar a tarefa. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Medir contraste de texto e de interface.
• Desenhar o foco com outline de cerca de 3 px.
• Aumentar a área de clique de links e botões.
• Deixar links óbvios sem depender só da cor.
• Prever a página sem imagem de fundo.
• Esconder de um jeito que o NVDA ainda encontre, quando for o caso.

Contraste é leitura, não gosto

Texto claro em fundo claro some. Texto laranja em fundo vermelho some para muita gente com daltonismo. O olho descansado no monitor do ateliê não é o teste.

WCAG pede contraste forte entre texto e fundo. Corpo de texto precisa de mais contraste do que um título enorme. Não decore a razão aqui: meça.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Início · Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <main id="conteudo">
      <h1>Oficina Costeira</h1>
      <p>Coletivo fictício de design em João Pessoa.</p>
    </main>
  </body>
</html>

No exemplo, o corpo usa #14222b sobre #f7f4ee. O cabeçalho usa branco sobre #0b4f6c. Os dois pares foram pensados para ler, não só para “combinar”.

Não use cinza #888 em parágrafo. Se o texto e o fundo se misturam, escureça o texto ou o fundo. Nunca os dois na mesma direção.

Cor não é o único sinal. O item atual do menu também tem sublinhado. Um erro de formulário precisará de texto, não só de borda vermelha.

:root {
  --marca: #0b4f6c;
  --areia: #f7f4ee;
  --tinta: #14222b;
  --acao: #c45c26;
}
body {
  color: var(--tinta);
  background: var(--areia);
}
.site-header {
  background: var(--marca);
  color: #fff;
}

Ferramentas de contraste existem no DevTools e em sites de verificação. Use-as. Não confie só no print do celular.

Foco visível de cerca de 3 px

Quem navega com teclado precisa ver onde está. O anel de foco é esse marcador.

O volume combina um contorno de cerca de 3 px, cor da ação, com um respiro (outline-offset).

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

:focus-visible mostra o anel quando a entrada é teclado. Clique de mouse não precisa do mesmo anel em todos os navegadores. Mesmo assim, nunca zere :focus com outline: none.

Duplicar o hover no foco ajuda:

a:hover,
a:focus {
  text-decoration-thickness: 0.15em;
}

O anel precisa contrastar com o fundo debaixo dele. No cabeçalho azul, laranja #c45c26 aparece. Num fundo laranja, escolha outra cor.

Alvo de clique e polegar

Link de uma linha, com 12 px de altura, é alvo ruim. Tremor, tela de ônibus e unhas compridas erram o ponto.

Aumente o alvo com padding. display: inline-block (ou flex no pai) deixa o padding valer.

.menu a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
}
.botao {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  min-height: 2.75rem;
}

WCAG 2.2 fala em alvos de pelo menos 24 px CSS, com exceções. No volume, pense em botão fácil de acertar no celular. O menu da Oficina Costeira já usa gap e área extra.

Não dependa de um pixel único. Não coloque dois links colados sem espaço.

Links óbvios e medida do texto

Link no meio do parágrafo precisa parecer link. Sublinhado é o sinal mais estável. Cor sozinha falha no daltonismo.

O menu pode abrir mão do sublinhado permanente se o lugar (lista no cabeçalho) já disser “isto é navegação”. Aí o aria-current ganha o sublinhado.

a {
  color: #0b4f6c;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.menu a {
  text-decoration: none;
}
.menu a[aria-current="page"] {
  text-decoration: underline;
}

A linha de texto não pode ser uma fita infinita. 45 a 75 caracteres, ou cerca de 65ch, é uma medida confortável.

p, li {
  max-width: 65ch;
}

Não justifique o texto na Web (text-align: justify). O vão irregular entre palavras cansa e quebra o ritmo. Alinhe à esquerda no português.

Teste o zoom de texto. No Firefox, ative “Zoom só no texto”. Duas vezes para cima, duas para baixo. Nada pode sair da caixa nem cobrir o menu.

Quando a imagem some

Texto branco em cima de uma foto escura some se a foto não carregar. Sempre coloque cor de fundo na caixa.

.hero {
  color: #fff;
  background-color: #0b4f6c;
  background-image: url("../imagens/orla.jpg");
  background-size: cover;
}

Se orla.jpg falhar, o azul continua e o texto segue legível. Teste desligando imagens nas ferramentas do navegador.

Marca, busca e menu não podem pular de lugar a cada página. A pessoa memoriza posição. A Oficina Costeira mantém o cabeçalho estável.

Esconder de verdade e esconder só da vista

hidden e display: none escondem de todo mundo, inclusive do NVDA.

<p hidden>Rascunho interno, não publicar.</p>

Às vezes o texto precisa existir para o leitor e não ocupar a tela: o nome extra de um ícone, o “início” escondido ao lado da marca. Aí entra a classe de esconder visual.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

<a class="brand" href="index.html">
  <img src="assets/imagens/marca.svg" alt="">
  <span class="visually-hidden">Oficina Costeira, início</span>
</a>

O alt da marca pode ficar vazio se o span já nomeia o destino. Não esconda o skip-link com essa classe no estado inicial: ele precisa aparecer no foco, como no capítulo 16.

Pare e experimente. No main.css do exemplo, mude só o outline do foco de 3px para 0. Preveja: o Tab ainda anda, mas o lugar some. Recarregue e confira. Devolva 3px.

Erro comum: outline: none em a:focus “porque fica feio”. Feio para quem vê o mouse. Inútil para quem só tem teclado.

Landmarks visuais (logo, menu, busca) não devem dançar. Animação de entrada que empurra o menu para baixo depois de um segundo é o tema da próximo capítulo.

Atividades

1. Por que #888 sobre #f7f4ee é arriscado no corpo do texto?
2. Qual a função de outline-offset: 3px junto do anel de 3 px?
3. Como o padding do .menu a ajuda quem não acerta alvos pequenos?
4. Por que text-align: justify fica de fora deste volume?
5. O que deve restar visível no .hero se a foto de fundo não carregar?

Respostas comentadas

1. O contraste cai. Muita gente com baixa visão ou tela no sol não lê o parágrafo.
2. Afasta o anel do glifo para o foco não cobrir a letra e permanecer visível.
3. A área clicável fica maior do que a palavra. O polegar e o teclado acertam com menos precisão fina.
4. Justificar cria buracos irregulares entre palavras e dificulta achar o começo da linha seguinte.
5. O texto branco sobre o azul #0b4f6c. A cor de fundo é o plano B da imagem.

Referências

• Cor e contraste
• outline
• :focus-visible
• text-decoration
• max-width

O arquivo completo

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