Acessibilidade e multimodalidade

Princípios WCAG, contraste calculado, teclado, estrutura e combinação de canais.

TLDR

Perguntar sobre esta página

ChatGPTClaudePerplexityGrokGeminiCopiar e abrirDeepSeekCopiar e abrir

Princípios e verificação

Acessibilidade remove barreiras para diferentes capacidades, tecnologias de apoio e condições temporárias ou contextuais.

WCAGExemplo de barreira
PercetívelTexto sem contraste
OperávelFunção só com rato
CompreensívelErro sem explicação
RobustoMarcação sem semântica adequada

Cumprir critérios isolados AA não demonstra conformidade AA da página. Verificadores automáticos não substituem testes manuais da tarefa, ordem de leitura e descrições.

Contraste

Texto grande tem pelo menos 18 pt, ou 14 pt em negrito, aproximadamente 24 e 18,67 CSS px. Há exceções, como logótipos e texto incidental.

C=Lmax⁡+0,05Lmin⁡+0,05.C=\frac{L_{\max}+0{,}05}{L_{\min}+0{,}05}.

Usa luminâncias relativas, não RGB diretamente:

  1. Normaliza cada canal sRGB dividindo por 255.
  2. Para c≤0,04045c\leq0{,}04045, lineariza com c/12,92c/12{,}92; caso contrário, usa:
(c+0,0551,055)2,4.\left(\frac{c+0{,}055}{1{,}055}\right)^{2{,}4}.
  1. Combina os canais lineares:
L=0,2126R+0,7152G+0,0722B.L=0{,}2126R+0{,}7152G+0{,}0722B.

Sobre branco, #777777 dá cerca de 4,4781:1 e falha texto normal; #767676 dá 4,5422:1 e passa. Não arredondes um valor inferior ao limiar para o declarar conforme.

Operação e estrutura

VerificaçãoRegra
TecladoPercurso completo sem bloqueios, foco visível e ordem significativa
ModalFoco entra, permanece aberto e regressa ao controlo relevante; trás fica indisponível
SemânticaBotão para ação, link para navegação, etiqueta associada ao campo
NomesPlaceholder não substitui etiqueta; “OK” tem nome, mas pode ser vago
ImagensDecorativa com alternativa vazia; informativa com descrição ou dados
Alvos e foco24 por 24 CSS px ou alternativa e exceções; foco nunca totalmente escondido

A exceção de teclado cobre funções dependentes do percurso do movimento, como desenho livre.

Multimodalidade

Modalidade é canal ou forma de comunicação; dispositivo é o meio técnico. Voz e toque podem ser alternativas, redundantes no significado ou complementares, como falar e apontar.

Se a voz indica B101 e o toque B102, suspende o compromisso, mostra a divergência e pede confirmação. Mais canais introduzem sincronização e ambiguidades; oferece alternativas sem exigir fala e gesto simultâneos numa ação essencial.

Cálculo e testes de acessibilidade.

À tua maneira

Aparência

Modo de cor
Tema
Cor de destaque

Leitura

Fonte de leitura

Álgebra, lógica e uma ideia de cada vez.

Código

Fonte do código

Navegação

Cursor de leitura, sem edição. h, j, k, l movem; / pesquisa nesta página. v seleciona caracteres; V seleciona linhas; y copia. Tab permite destacar ou comentar. Espaço ou Enter abre blocos recolhíveis. Nos cartões, h, j, k, l mudam o foco.

CSS personalizado

Ativa uma sugestão ou guarda o teu CSS. Só muda este navegador.

Usa --page, --text e --accent para acompanhar o tema.

Seletores e recuperação

.site-header, .prose, .course-card, [data-reading-history], [data-playground] e .page-actions.

Abre a aparência com a tecla vírgula ou no rodapé. Se o CSS esconder os controlos, abre esta página sem CSS personalizado.

Pesquisar

Escreve para pesquisar em todo o site.

para escolher · Enter para abrir · Esc para fechar

Copiar fórmula

A cópia automática não está disponível. Copia o LaTeX abaixo.

Pesquisar nesta página

Enter procura · n / N repetem · Esc cancela. Ctrl / Cmd K pesquisa todo o site.

Atalhos de teclado

Clica numa tecla para a mudar. Esc cancela. Backspace desativa.

PesquisarCtrl / Cmd K

Os atalhos não interferem enquanto escreves. Tab e Enter funcionam sempre.