O Critério de Sucesso 1.4.11
Diz a WAI neste excerto que:
- "(...) o significado pode ser compreendido a partir apenas do ícone", e que;
- "(...) o fundo que se encontra por detrás do círculo é irrelevante".
Ou seja, dos 2 elementos que compõem a imagem anterior (ícone e silhueta do círculo):
- o ícone passa informação relevante para perceber a mensagem;
- a silhueta do círculo não passa informação relevante para perceber a mensagem.
Assim, parece lógico que o ícone tenha de ter um contraste mínimo de 3:1 (entre ele e o círculo) e que o contraste do círculo com o fundo onde se encontra aplicado seja irrelevante.
E se o círculo fosse um elemento interativo (p.e. um botão)? Tudo leva a crer que neste caso a silhueta do círculo já transmite informação ao utilizador - é indicador dos limites da área de ação. Neste caso o círculo está obrigado a contrastar no mínimo 3:1 com o fundo onde se encontra aplicado. Mas parece que há dúvidas sobre esta assunção! :-)
Nesta imagem, continuamos a ter 2 elementos, mas ambos passam informação ao utilizador:
- o ícone Libra passa a informação da moeda inglesa, e;
- a silhueta seta baixo, passa a informação de descida.
Só os 2 juntos transmitem a mensagem completa de "Libra em queda". Um deles sozinho não é suficiente. Neste caso não apenas o símbolo de libra tem de contrastar com o fundo onde está aplicado como a silhueta da seta baixo tem de contrastar com o fundo onde ela própria está aplicada.
No CS 1.4.11 (WCAG 2.1) diz-se:
This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)). Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.
Fig. O botão da esquerda, falha. O botão da direita, passa.
Da leitura do parágrafo acima retirado do Understanding CS 1.4.11 constata-se que caixas de edição com placeholders com contraste >= 4.5:1 dispensam o uso de contornos para indicar visualmente que o elemento é interativo.
Fig. Placeholder com contraste >=4.5:1, caixa de edição sem contornos e sem contraste entre o seu fundo e a página, passa o CS 1.4.11 (Uau!?). É salvo pelo contraste do placeholder.
Inferir se estamos ou não na presença de um elemento interativo, não parece ser fácil de percecionar visualmente. Precisamos de mais estudos com utilizadores nesta matéria. No entanto, parece que (a) o texto contrastante (4.5:1), (b) a iconografia contrastante (3:1), (c) a cor de fundo do componente versus o fundo onde está aplicado (3:1) e (d) o uso de contornos contrastantes (3:1), todos concorrem para identificar um componente interativo. Para os dois primeiros parâmetros parece que as WCAG não suscitam duvidas - aplique-se! Quanto à cor dos botões e ao uso de contornos, olhando à discusão do tema nas listas da WAI no GitHub, parece que há dúvidas.
- WCAG Git Discussion. (Jul 2024). Non-Text Contrast - Buttons Example
- WCAG Git Discussion. (Jul 2024). 1.4.3 and 1.4.11 Meeting contrast requirements via conforming alternate versions?