Acessibilidade

O que o sistema já garante e o que cada página precisa fazer. Cada componente traz, no guia, as notas de teclado e de leitor de tela.

Foco

Anel de 3 px, afastado 3 px, na cor --rq-anel do tema: Verde no claro e na névoa, Pistache no escuro, no verde e na foto, Grafite no pistache. Em volta do laranja (conversão, perigo) o anel é --rq-anel-acento: Grafite nos temas claros, Neve nos escuros, sem verde encostado no laranja. O primeiro item tabulável é o .rq-pular. Tabule nesta demo.

Um link Serviço

Regras do sistema

Contraste
Texto com 4,5:1 ou mais; texto grande, bordas de controle, anel e realce com 3:1 ou mais, tema a tema. Medido em Cores e temas e conferido por tools/conferir.py.
Cor nunca sozinha
Status e erro vêm com ícone e texto. Séries de dados têm legenda e, até quatro, rótulo direto.
Teclado
Tudo o que se clica se alcança pelo Tab, na ordem de leitura. A troca muda o lugar visual, não a ordem do HTML.
Área de toque
Controles com 40 px ou mais de altura (48 por padrão). A área não muda entre estados.
Texto em foto
Só no tema imagem, na área calma e com véu. Toda foto informativa tem texto alternativo; a decorativa leva alt="".
Movimento
prefers-reduced-motion desliga animações e transições. O que troca sozinho (troca com intervalo, carrossel) pausa no hover e no foco e só roda na tela. O que corre sem parar (ticker, marquee, órbita, malha) para pelo interruptor Pausar o movimento (.rq-pausa), um por página.
Sem JavaScript
Conteúdo sempre visível e controles nativos (<details>, <dialog>, <select>) onde der.
Cores forçadas e impressão
No alto contraste do Windows, foco e ícones usam as cores do sistema. Na impressão tudo vira tema claro, sem fundo, e links externos mostram o endereço.