Criando Formulários Acessíveis
Visão geral de acessibilidade em formulários
Introdução
Formulários são usados para muitos tipos de interações na web. Quando falamos sobre a acessibilidade de formulários, estamos normalmente nos referindo a sua acessibilidade às pessoas que utilizam leitores de tela ou navegação por teclados. Pessoas com outros tipos de deficiência são geralmente menos afetadas por formulários com defeito. Deve-se notar, no entanto, que todos se beneficiam de um formulário bem organizado, com grande usabilidade, especialmente aquelas pessoas com deficiências cognitivas.
Certifique-se de que os formulários sejam lógicos e fáceis de usar
Os formulários devem ser claros e intuitivos. Eles devem ser organizados de uma maneira lógica. Instruções, sugestões, campos de formulário obrigatórios, requisitos de formatação de campo, etc, devem ser claramente identificados para os usuários. Dê instruções claras sobre as informações desejadas. Se quaisquer elementos de formulário são obrigatórios, não se esqueça de indica-los. Certifique-se de que a ordem em que os elementos de formulário são acessados seja lógica e fácil. Isto as vezes pode ser problemático se tabelas são usadas para controlar o layout de itens do formulário.
Para verificar a ordem linear de itens na página, use a ferramenta de acessibilidade WAVE.
Certifique-se de que os formulários são acessíveis por teclado
Muitos usuários só podem navegar e usar a web através do teclado. Você deve garantir que os formulários em seu web site possam ser concluídos usando apenas o teclado. Existem algumas coisas que podem tornar os formulários totalmente inutilizáveis com o teclado, das quais a mais comum é o JavaScript. Tenha cuidado no uso do JavaScript para manipular os dados de formulário, definir o foco, alterar elementos de formulário ou submeter formulários. Cada um destes itens pode tornar o formulário difícil ou impossível, para completar ou entender, usando apenas o teclado. Sempre teste a acessibilidade através do teclado para os formulários do seu site.
Associe etiquetas de formulários com campos de entrada
Etiquetas de texto geralmente devem descrever a função de cada campo de formulário. Posicione a etiqueta junto ao seu respectivo campo de formulário (ou seja, caixa de texto, caixa de seleção, radio button, menu, etc.).
As etiquetas são normalmente posicionadas acima ou à esquerda do campo de formulário, no entanto,
as etiquetas de caixas de seleção e radio buttons estão geralmente à direita do campo de formulário.
Usuários com visão devem ser capazes de visualmente associar uma etiqueta de texto ao seu campo correspondente.
No entanto, os usuários com deficiência visual não podem fazer essa associação visual.
As etiquetas podem, contudo, ser associadas programaticamente com campos de formulário utilizando marcação HTML.
O elemento <label> é utilizado para associar uma etiqueta de texto a um campo de formulário.
Isso permite que um leitor de tela leia o texto da etiqueta associada quando o usuário navegar pelo campo de formulário.
Algumas vezes agrupamentos de campos de formulário, normalmente grupos de caixas de seleção e radio buttons,
necessitam de uma descrição de nível superior (como “Método de envio” para um grupo com oções de envio de radio buttons).
Este texto descritivo pode ser associado com o grupo de campos de formulário usando <fieldset> e <legend>.
O <fieldset> identifica todo o agrupamento e <legend> identifica o texto descritivo do agrupamento.
Usando <fieldset> e <legend> garante-se que a descrição do texto seja lida para os usuários de leitores de tela quando o agrupamento é navegado.
Controles de formulários acessíveis
Etiquetagem avançada de formulários
Introdução
Há momentos em que o elemento de etiquetagem <label> deixa a desejar – não pode ser usado para fornecer várias etiquetas para um só campo de formulário,
ou não se pode associar apenas uma etiqueta com múltiplos campos de formulário
Há também momentos quando não há uma etiqueta de texto visível para ser associada a um campo de formulário.
A maioria destas limitações de etiquetagem podem ser superadas com três propriedades ARIA
(aria-labelledby, aria-describedby, e aria-label)
e um par de outras técnicas descritas nesta página.
aria-labelledby
Um elemento de etiquetagem <label> indica de qual campo de formulário etiquetar referenciando o id do elemento:
<label for="fname">
Ele declara “Eu sou a etiqueta para este campo”.
Com aria-labelledby, o campo de formulário indica qual elemento o nomeia ao referenciar o atributo id:
<input aria-labelledby="fnamelabel">
O campo de formulário declara, “Eu sou um campo nomeado por esta etiqueta”.
Manipulação de múltiplas etiquetas
Como os elementos em uma página devem todos ter valor exclusivo do atributo id,
uma <label> pode apenas apontar para o id de um único campo -
no máximo uma relação um-para-um entre campo e etiqueta
aria-labelledby, por outro lado, permite que um elemento seja referência de etiqueta para vários campos,
e permite que múltiplos elementos sejam referência como etiqueta para um campo apenas.
Resumindo, aria-labelledby remove a limitação de um-para-um de <label>.
Na sequência há um exemplo simplificado de uma tabela que pode ser usada para a entrada de dados.
Cada cabeçalho de tabela funciona como etiqueta visual nas colunas abaixo dela.
Há apenas uma etiqueta visual para vários campos de formulário.
O elemento <label> não pode ser usado para associar seu texto com as múltiplas caixas de texto.
| Nome | Idade | Peso |
|---|---|---|
O HTML para o primeiro cabeçalho (“Nome”) é:
<th id="rotulonome" scope="col">Nome</th>
O HTML para o primeiro campo de texto da tabela é:
<input type="text" name="nome1" aria-labelledby="rotulonome">
Isso etiquetará a caixa de texto com o texto “Nome” no cabeçalho da tabela.
Este atributo aria-labelledby pode ser adicionado a todos os três campos “Nome”,
assim adequadamente etiquetando todos eles com apenas um item de texto.
Com base neste exemplo, o quadro que se segue tem etiquetas visuais ao longo do topo e do lado - várias etiquetas visuais para cada campo de formulário.
| Nome | Número do Escritório | Telefone |
|---|---|---|
| Cyndi | ||
| Jared | ||
| Jonathan |
O HTML para o primeiro campo desta tabela é:
<input type="text" name="escritorio1" aria-labelledby="cyndi numeroescritorio">
Os valores cyndi e numeroescritorio referenciam os ids das células de tabela “Cyndi” e “Número do Escritório”.
Um leitor de tela irá ler “Cyndi Número do Escritório” ao navegar nesse campo.
A ordem de leitura das várias etiqeutas baseia-se na ordem em que estes valores são especificados.
Como regra geral, se uma única etiqueta está presente para um único campo de formulário,
o elemento <label> deve ser usado para fazer a referência.
Essas etiquetas fornecem funcionalidade adicional - clicando sobre elas define-se o foco ou ativa o controle.
Isto não ocorre com o uso de aria-labelledby.
Se um campo de formulário tiver ao mesmo tempo <label> e aria-labelledby
a referencia definida por aria-labelledby irá sobrescrever e ser lida em vez de do elemento <label> associado.
aria-describedby
Há momentos em que um formulário inclui informações que não é exatamente uma etiqeuta,
mas é importante o suficiente para ser lida por um leitor de tela quando estiver navegando pelos campos de formulário.
Esta informação adicional pode ser associada ao campo de formulário com o atributo aria-describedby.
Por exemplo:
Nova senha deve ter 8-15 caracteres e conter letras e números
Aqui o HTML:
<label for="resetarsenha">Resetar Senha:</label>
<input type="password" name="resetarsenha" id="resetarsenha" aria-describedby="novasenha">
<br>
<span id="novasenha">Nova senha deve ter 8-15 caracteres e conter letras e números</span>
Como há uma uma etiqueta, <label> é lido em vez de aria-labelledby.
Como ocorre com aria-labelledby, o atributo aria-describedby aponta para o id do elemento que contém os requisitos da senha.
Um leitor de tela iria ler tantoambos, a etiqueta associada e as descrições associadas.
As descrições às vezes são lidas após de uma breve pausa.
aria-describedby também pode fazer referência a vários elementos - basta referênciar os valores de id separados por espaço.
- Enquanto
aria-labelledbysobrescreve o<label>,aria-describedbynão faz isso. Isto significa quearia-describedbydeve apenas ser usado como complemento a uma eitqueta (i.e.,<label>ou <inputaria-labelledby>), não como subistituto de um destes. - O atributo
aria-describedbytambém pode ser usada como referência em descrições que aparecem como "dica de ferramenta". Dica de ferramenta devem se tornar visíveis para usuários que enxergam e usam teclado quando o campo está com foco, não apenas quando o usuário passa o mouse por cima, ou clica no elemento com o mouse.
Etiquetas invisíveis
Há momentos em que uma etiqueta de texto para um campo de formulário não faz sentido ser exibida visualmente. O exemplo mais comum é o campo de “Pesquisar”. Sua localização na página, junto ao botão de busca, deixa seu propósito claro para usuários que enxergam. Adicionar um ródulo visual seria exagero e impactaria negativamente no design do site.
Uma das três técnicas seguintes deveria ser usada quando uma etiqueta exibida visualmente não está disponível:
label oculta
Esconda o elemento <label> movendo-o para fora da tela usando CSS. A etiqueta não vai aparecer visualmente,
porém será lida por um leitor de tela.
Aqui o HTML para a etiqueta e o campo de formulário:
<label class="hidden" for="s">Termos de busca</label>
<input type="text" id="s" name="s">
O CSS que é usado para esconder o rótulo, e informações adicionais sobre esta técnica, pode ser vista no nosso artigo sobre conteúdo invisível para leitores de tela.
Atributo title
Se um campo de formulário tem um atributo title, mas nenhum <label>, o leitor de tela irá ler o title como se fosse uma etiqueta.
Aqui o HTML para a etiqueta e o campo de formulário:
<input id="s" type="text" name="s" title="Termos de busca">
Esta técnica também fará com que uma dica de ferramenta apareça quando o usuário passar o mouse sobre o campo, o que poderia ser uma distração para alguns usuários.
aria-label
O atributo aria-label também pode ser usado quando não há uma etiqueta de texto na página.
<input id="s" type="text" name="s" aria-label="Termos de busca">
Ao contrário de aria-labelledby que deve fazer referência a um outro elemento,
aria-label contém o texto da etiqueta diretamente. Como ocorre com aria-labelledby,
aria-label irá sobrescrever qualquer elemento <label>.
- Apenas uma destas recomendações deve ser implementada.
Usar duas ou mais juntas (e.e.,
<label>oculta e duplicar com o atributotitle) pode causar repetição da informação por um leitor de tela. - Texto de espaço reservado (do inglês placeholder) (e.e.,
<input type="text" placeholder="Pesquisar no WebAIM">) não é uma etiqueta adequada e nunca deve ser usada em lugar das técnicas acima.
Recaptulação
- Use elemento
<label>quando puder. Ele tem excelente suporte ao navegador e leitor de tela, e os usuários podem clicar na etiqeuta para selecionar o campo de formulário associado. - Use
aria-labelledbypara contornar as limitações de 1:1 de rótulos<label>. - Use
aria-describedbycomo complemento a uma etiqueta quando você precisa relacionar um texto descritivo a um campo de formulário. - Use
<label>oculta ou atributotitleouaria-labelquando texto de uma etiqeuta visível não está disponível.