Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung
Acessibilidade
Por que mensagens de erro e ligações precisam de mais que apenas uma cor?
Mensagens de erro e ligações precisam de mais de uma cor porque muitas pessoas distinguem cores apenas limitadamente — a deuteranopia é a forma mais comum. Um campo obrigatório com margem vermelha sem texto explicativo permanece invisível para esses visitantes. A informação portanto deve ser dupla: cor mais texto, símbolo ou sublinhado.
Cor como adição, nunca como único portador
Três casos cotidianos mostram o problema. Primeiro formulários: se um campo mal preenchido apenas tem margem vermelha, um visitante com deuteranopia não encontra o erro — acrescente uma mensagem textual como «Introduza um endereço de email válido». Segundo, ligações no texto corrido: se uma ligação se distingue do texto envolvente apenas pela cor, não é reconhecível como ligação para muitos — o sublinhado resolve. Terceiro, diagramas e indicadores de estado: «Verde significa disponível, vermelho significa esgotado» funciona apenas com descrição adicional ou símbolos diferentes. A cor permanece explicitamente permitida e útil — apenas nunca pode ser a única fonte de informação.
Assim o nosso núcleo de medição testa o uso de cor
A verificação automática com axe-core reconhece um caso típico parcial: ligações no texto corrido que se destacam do texto envolvente apenas pela cor — sem sublinhado ou diferença de brilho suficiente. Esses casos fluem como constatação no relatório. A maior parte do critério escapa à máquina: se um diagrama é explicado apenas via cores ou se uma mensagem de erro além da margem vermelha também tem texto requer compreensão do conteúdo. Segundo o nosso princípio, uma passagem inconspícua portanto nunca é automaticamente uma prova — no padrão ouro um verificador olha para formulários, diagramas e indicadores de estado e faz o julgamento.
Exemplos
Erro apenas marcado com vermelho
<label>E-Mail <input class="fehler" style="border-color:red"></label><label for="email">E-Mail</label>
<input id="email" aria-describedby="email-fehler" aria-invalid="true">
<p id="email-fehler">Bitte eine E-Mail-Adresse mit @ eingeben.</p>Só o vermelho não vê pessoas com defeitos de cor e programas de leitura. O texto menciona o erro.
Link no texto de fluxo apenas reconhecível pela cor
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }O sublinhado torna o link reconhecível mesmo sem percepção de cor.
- Verifique os seus formulários: cada marcação de erro precisa de texto explicativo ao lado da cor no campo afetado.
- Deixe ligações no texto corrido sublinhadas — a cor sozinha as torna invisíveis para muitos visitantes.
- Acrescente em diagramas e indicadores de estado descrições ou símbolos adicionalmente à codificação por cor.
- Veja o seu site uma vez em escala de cinzentos — cada ecrã e muitos telemóveis conseguem fazer isso — e verifique se toda a informação permanece.
- Marque campos obrigatórios com a palavra «Obrigatório» ou um asterisco explicado, nunca apenas por cor.
