Aprenda sobre indicadores de estado visual
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Explicar a importância do foco visual.
- Definir uma mensagem de erro útil.
- Descrever como criar um formulário acessível.
O que são estados de foco visual?
Considere um usuário que tenha boa visão, mas não possa usar um mouse. Pessoas assim são frequentemente referidas como usuários de teclado com visão porque elas têm o sentido da visão, mas o controle motor é possivelmente limitado e usam apenas um teclado ou dispositivo de interruptores para navegar em computadores e aplicativos Web.
Embora um usuário de mouse com visão possa mover o cursor para um botão em que deseja clicar, um usuário de teclado com visão pode usar uma combinação de teclas Tab e Setas para navegar até o mesmo botão. Por essa razão, é essencial exibir sempre visualmente o estado atual do foco do teclado para que o usuário saiba sempre onde ele está. Na verdade, isso é uma exigência do WCAG 2.4.7 Foco visível.
O exemplo abaixo contém uma lista de hiperlinks. O link Marca está atualmente em foco. Visualmente, Marca está sublinhado e tem um contorno retangular azul. Esses dois estados de foco visual juntos deixam bem claro para o usuário onde ele está atualmente ao navegar na página pelo teclado. À medida que o usuário pressiona a tecla Tab, essa combinação de sublinhado e retângulo se move para baixo na lista. 
Quando o usuário vê esse foco visual no item desejado, ele sabe que pode pressionar Enter para ativar o link.
Os navegadores têm foco visual embutido por padrão. O Chrome e o Safari usam um halo azul; já o Internet Explorer e o Firefox usam um fino contorno pontilhado. Se você não gosta da aparência do foco visual padrão, ou quer padronizar o foco visual entre navegadores, pode criar seu próprio foco visual.
Quando você projeta seus próprios estados de foco visual, deve levar em conta os requisitos atualizados do WCAG 2.1 para contraste não textual. Se você substituir os elementos visuais de foco padrão de um navegador, os que criar devem atender ou exceder uma razão de contraste de cor de 3:1. Este documento explica a exigência nos menores detalhes. Essencialmente, se você tem um fundo cinza, não pode colocar um halo cinza claro ao redor de um botão cinza e chamar isso de foco visual. Muitas pessoas não conseguem ver isso, mesmo aquelas com boa visão.
Vários estados de componentes
Em alguns casos, você precisa indicar visualmente o estado de um componente. Vamos considerar uma caixa de seleção e seus vários estados.
- Desmarcado: quadrado arredondado, elevado e cinza
- Marcado: quadrado arredondado, elevado e cinza com uma marca de seleção preta dentro
- Desmarcado e desativado: quadrado arredondado, não elevado em cinza mais claro
- Marcado e desativado: quadrado arredondado, não elevado em cinza mais claro com uma marca de seleção cinza dentro
- Desmarcado e focado: quadrado arredondado, elevado e cinza envolto em um halo azul
- Marcado e focado: quadrado arredondado, elevado e cinza, com uma marca de seleção preta dentro, envolto em um halo azul
Isso é importante se você decidir mudar completamente a maneira como um usuário vê um componente. Vamos considerar a variante de caixa de seleção do componente Seletor visual do SLDS.
No exemplo abaixo, o Seletor visual contém três opções alinhadas horizontalmente.
Cada opção contém um ícone envolto em uma caixa com uma borda cinza e um rótulo abaixo dela. Semanticamente, cada uma dessas opções é uma caixa de seleção HTML nos bastidores, ou seja, os usuários podem tabular entre elas e pressionar suas teclas de barra de espaço para alternar a seleção de cada uma.
Que estados visuais distintos precisaríamos considerar para o elemento?
- Padrão (sem passagem do mouse por cima, sem foco, sem seleção)
- Com foco, sem seleção
- Com foco, com seleção
- Sem foco, com seleção
Padrão: ícone envolto por uma caixa com uma borda cinza e um rótulo abaixo dela.
Com foco, sem seleção: a borda é azul e o rótulo está sublinhado.
Com foco, com seleção: a caixa inteira é azul com uma marca de seleção no meio; o rótulo está sublinhado.
Sem foco, com seleção: a caixa inteira é azul com uma marca de seleção no meio; o rótulo não está sublinhado.
Na captura de tela abaixo, a primeira opção está selecionada, mas não focada; a segunda opção está focada, mas não selecionada; a terceira opção não está selecionada nem focada.
Observe que cada estado é visualmente distinto. Como os estilos de passagem por cima podem contribuir para isso? A passagem por cima acrescenta uma borda azul, mas não sublinha o texto. Portanto, esse componente segue uma convenção de:
- Foco: borda azul e rótulo sublinhado
- Passagem por cima: borda azul
- Selecionado: caixa azul com marca de seleção
Todos esses três estados têm um elemento visual distinto que pode ser misturado e combinado para transmitir visualmente a sobreposição de estados.
Uma coisa que não mostramos aqui são os estados desativados para seletores visuais marcados e desmarcados. Seguindo os padrões existentes, como você diferenciaria esses dois estados adicionais? Consulte as diretrizes do SLDS para ver como fizemos isso.
Formulários
Os formulários podem parecer simples, mas há muitas coisas a serem consideradas na criação de formulários que todos podem utilizar com sucesso.
Sempre incluir rótulos visíveis
Os designers às vezes querem usar texto de espaço reservado em vez de rótulos reais. No entanto, há dois problemas com isso.
- O texto do espaço reservado precisa atender a uma razão de contraste de cores de 4,5:1, o que faz com que o campo do formulário pareça já estar preenchido.
- Após o usuário ter preenchido o formulário, a finalidade de cada campo pode não ficar clara sem rótulos visíveis. Os usuários fazem várias tarefas ao mesmo tempo e nem sempre preenchem um formulário inteiro em um só fluxo.
Faça de conta que você preencheu esse formulário, saiu para responder a um email e depois voltou a esse assunto:
O formulário original tinha este aspecto:
É melhor ter rótulos visíveis para que os usuários saibam sempre a finalidade de cada campo do formulário:
Criar mensagens de erro úteis
Quando um campo do formulário tem um erro, um contorno vermelho ao redor não é indicação suficiente. Os usuários daltônicos podem não ser capazes de vê-lo, e apenas um contorno vermelho não é muito útil. Inclua o texto de erro abaixo do campo que explica como corrigir o erro.
Na captura de tela abaixo, há outro exemplo de mensagem de erro. Em vez de dizer que a data é inválida, seria mais útil explicar o formato exigido para a inserção de uma data.
Orientar o usuário para o preenchimento correto do formulário
Se os formulários não forem concebidos corretamente, os sentimentos do usuário em relação a eles podem variar de aborrecimento a ansiedade e confusão. Formulários mal concebidos podem até mesmo impedir os usuários de concluir seus trabalhos.
Para formulários mais longos, defina expectativas claras de quantas etapas estão envolvidas ou aproximadamente quanto tempo o formulário levará para ser preenchido. Se um usuário estiver no meio do processo, mostre-lhe em que etapa está (por exemplo, página 3 de 5).
Evite estabelecer limites de tempo no preenchimento de formulários. Se você tiver que usar um limite de tempo, informe ao usuário quanto tempo ele tem antes de iniciar o processo e permita que os usuários ampliem o tempo.
Fornecer proteções
Os usuários costumam fazer várias tarefas ao mesmo tempo ou têm outras distrações. Forneça maneiras de os usuários voltarem a editar o formulário, salvar ao longo do caminho ou começar a preencher do zero. Além disso, ao criar um formulário para a realização de transações jurídicas ou financeiras, forneça aos usuários uma forma de rever, confirmar ou reverter encargos ou alterações. Isto é vital para tudo, inclusive:
- Compras online
- Transferências de dinheiro (incluindo bancos online, PayPal, Venmo, etc.)
- Contratos eletrônicos, como DocuSign e Adobe Document Cloud
Vamos recapitular
Controles interativos e dados de formulários são vitais para o design interativo do produto. É importante projetar diferenças visuais para todos os estados desses controles. Assim, os usuários saberão quando estão em foco, selecionados, desativados e assim por diante. O desenho de formulários com orientação clara e proteções não apenas remove barreiras para pessoas com deficiências cognitivas, mas proporciona uma experiência mais agradável para todos.