Cores temas e acesso pelo teclado

Neste capítulo você vai personalizar o destaque nos dois temas e preservar foco, leitura e acesso ao conteúdo.

Seu ponto de partida

Continue depois do capítulo 09. Abra pacote de exemplos/10-temas-acessibilidade. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Mude uma cor compartilhada

O Simple.css usa propriedades personalizadas para compartilhar valores. Os nomes começam com dois hífens. Var(—accent) consulta o valor da cor de destaque. Você já usou essa consulta na borda da nota.

:root seleciona a raiz do documento. Definir uma variável ali permite que ela seja herdada pelas partes da página. —accent é usada por links e botões da base. —accent-hover define o destaque em certos estados de interação, e —accent-text fornece texto sobre o destaque.

No tema claro deste exercício, usaremos verde escuro com texto branco. Não mude somente a cor de fundo de um botão sem observar a cor de seu texto. A combinação precisa continuar legível.

O framework também define variáveis num bloco de tema escuro. Vamos tratar as duas situações explicitamente, em vez de presumir que uma única cor serve para qualquer fundo.

Faça no seu exemplo

Acrescente em custom.css. Confira primeiro com a preferência de tema claro no navegador ou sistema.

:root {
  --accent: #1b5e20;
  --accent-hover: #2e7d32;
  --accent-text: #ffffff;
}

Mude uma coisa e preveja

Troque somente —accent: #1b5e20 por —accent: #17365d.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Observe a página inicial e o formulário. Restaure o verde para chegar à referência.

Resultado esperado neste teste: Links, botões e a borda de nota que consultam essa variável devem passar para azul escuro no tema claro.

Se não acontecer

Escrever accent sem os dois hífens cria uma declaração inválida para essa finalidade. Mantenha o nome completo da propriedade personalizada.

Prepare o destaque para o tema escuro

A preferência de tema escuro vem do ambiente informado ao navegador. A condição prefers-color-scheme: dark permite responder a essa preferência.

Usaremos destaque verde claro e texto escuro nos botões do tema escuro. O bloco abaixo fica depois da definição geral. Ele substitui somente os valores necessários quando a condição corresponde.

Você pode testar alterando a aparência do sistema. Alguns navegadores também permitem simular a preferência no painel de ferramentas, em Renderização. Se não localizar a simulação, use a configuração de aparência do sistema e reabra a página.

Contraste compara a luminosidade do texto e do fundo. Como referência de leitura, texto comum precisa de pelo menos 4,5:1 no critério AA das WCAG. Texto grande e componentes têm critérios próprios. Isso não equivale a uma certificação completa de acessibilidade.

Use uma ferramenta de contraste para conferir as cores exatas do par, incluindo o estado de interação. Não escolha apenas pelo nome da cor.

Faça no seu exemplo

Acrescente o bloco depois da definição geral em custom.css.

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #a5d6a7;
    --accent-hover: #c8e6c9;
    --accent-text: #212121;
  }
}

Mude uma coisa e preveja

Ative a preferência de tema escuro e depois volte ao tema claro.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Confira links, botões, nota e formulário nos dois temas. Não altere o texto do formulário para fazer essa comparação.

Resultado esperado neste teste: O destaque deve ficar claro no tema escuro e escuro no tema claro; o texto do botão deve manter leitura nas duas combinações.

Se não acontecer

Color-scheme, sozinho, não troca todas as cores do seu CSS. Neste exemplo, a troca do destaque vem das variáveis dentro da condição.

Veja onde o teclado está

O foco identifica o controle que receberá a próxima ação do teclado. A regra :focus-visible fornece um contorno de 3px. Outline-offset afasta esse contorno da borda do controle.

O primeiro link é Pular para o conteúdo. Ele fica fora da área visível enquanto não tem foco e aparece ao receber Tab. Seu href aponta para #conteudo, o id de main. Main tem tabindex=“-1” para poder receber esse foco sem criar uma parada extra na sequência normal de Tab.

A regra de apoio foi fornecida desde o primeiro exemplo para garantir esse acesso. Agora você pode reconhecê-la: .pular posiciona o link fora da tela; .pular:focus o devolve ao fluxo visível. Não use display: none, pois retiraria o link também da navegação normal.

Não acrescente movimentos para concluir esta etapa. Se outro projeto tiver animações, a preferência por menos movimento merece tratamento. Aqui, a interface permanece simples.

Faça no seu exemplo

Localize esta regra já fornecida no começo de custom.css. Não precisa duplicá-la.

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

Mude uma coisa e preveja

Troque somente outline-offset: 3px por outline-offset: 5px.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Recarregue, pressione Tab, veja Pular para o conteúdo e ative com Enter. Depois percorra o menu e o formulário. Repita nos dois temas e restaure 3px.

Resultado esperado neste teste: O contorno de foco deve se afastar um pouco mais do controle, sem mudar a ordem de Tab.

Se não acontecer

Não use tabindex positivo para reorganizar o teclado. A sequência deve acompanhar uma ordem coerente do HTML.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Troque o destaque claro e preserve uma combinação legível no botão.
2. Confira o tema escuro e o estado de interação de um botão.
3. Use Pular para o conteúdo sem mouse e explique seu destino.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Modifique as variáveis em :root e confira o par fundo e texto. Não edite simple.css.

2. Ative tema escuro e observe tanto —accent quanto —accent-hover com —accent-text. Confira contraste de cada par.

3. Tab revela o link; Enter vai para main id=“conteudo”. Href=“#conteudo” estabelece essa relação.

Quando seguir

Você lê as duas paletas e consegue navegar, identificar o foco e pular o menu usando teclado. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1
• Referência 2

O arquivo completo

Referência do exemplo 10-temas-acessibilidade, reproduzida aqui para que você possa conferir sem sair da página.

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}