Campos de entrada acessíveis — leitores de tela
Dando continuidade na criação de elementos de interface acessíveis para leitores de tela, nesta publicação iremos abordar o desenvolvimento dos campos de entrada.
Uma coisa muito importante é sempre priorizar a utilização dos campos nativos como text, number, date, select, pois estes tipos já são nativamente reconhecidos pelo leitor de tela e já tem formas nativas de navegação. Caso necessite criar um elemento desses sem utilizar os nativos, você pode utilizar as definições descritas no Guia de práticas do WAI-ARIA.
O guia de práticas do WAI-ARIA irá descrever os comportamentos e navegação que este elemento deve conter para estar acessível. Nele também contém exemplos de como criar esses elementos e quais atributos aria deverão ser utilizados.
Lembrando que sempre que você utilizar um atributo aria você deve implementar este comportamento, ok? Por exemplo, quando você utiliza o atributo aria-required, ele não irá implementar essa funcionalidade no seu campo de entrada, apenas irá informar ao leitor de tela que aquele campo é obrigatório.
Como o formulário e seus elementos são identificados?
O usuário não necessariamente utiliza a tecla TAB para acessar os campos do formulário. Imagine uma página com muitos elementos tabuláveis, ele teria que acessar via TAB todos esses elementos até descobrir que encontrou um formulário.
Por isso, os leitores de tela possuem alguns atalhos para poder acessar os formulários disponíveis na página. No NVDA, um leitor de tela bastante utilizado, a tecla que acessa os formulários é <tecla modificadora>+F. A partir disso, o usuário pode escolher acessar aquele formulário e navegar nele utilizando as seguintes teclas:
- Pressione Enter (enquanto estiver focado em um controle de formulário) ou NVDA + Space para entrar no modo formulário.
- Pressione NVDA + Espaço para sair do modo formulário e retornar ao modo de navegação.
- Uma vez que você estiver no modo formulário, use Tab e Shift + Tab para navegar pelos controles do formulário.
- Use Espaço para selecionar e desmarcar as caixas de seleção.
- Use ↑ / ↓ para selecionar um grupo de botões de rádio.
- Use ↑ / ↓ ou a primeira letra de uma opção para selecionar uma opção em uma caixa de combinação.
Este trecho foi extraído do texto Usando o NVDA (leitor de tela) para avaliação de acessibilidade web. Nele também contém outras dicas de como navegar por outros elementos. No entanto, esta navegação só acontece se o código-fonte tiver sido escrito de forma correta e semântica.
Como organizar o formulário?
Primeiro de tudo, vamos utilizar o elemento <form> para poder representar o nosso formulário. Com ele é mais fácil do usuário identificar o formulário. Também podemos agrupar os itens dentro do nosso formulário utilizando o elemento <fieldset> da seguinte maneira:
<form>
<fieldset>
<legend>Dados pessoais</legend> <label for=”nome”>Nome</label>
<input type=”text” id=”nome”> <label for=”idade”>Idade</label>
<input type=”number” id=”idade”>
</fieldset>
<fieldset>
<legend>Endereço</legend> <label for=”rua”>Rua</label>
<input type=”text” id=”rua”> <label for=”cep”>CEP</label>
<input type=”number” id=”cep”>
</fieldset>
</form>
1 - Dar rótulos aos campos
Muito importante que os campos tenham rótulos para os usuários, para dar contexto e entender a sua finalidade.
<label for=”nome”>Nome</label>
<input type=”text” id=”nome”>Caso o seu rótulo não esteja visível na tela, ele precisa estar disponível para o leitor de tela e isso pode ser feito através do atributo aria-label:
<input type=”text” name=”search” aria-label=”Search”>Também podemos indicar um outro elemento que representa o rótulo utilizando o atributo aria-labelledby:
<input type=”text” name=”search” aria-labelledby=”searchbutton”><button id=”searchbutton” type=”submit”>Search</button>2 - Campo somente para leitura
Deixar o campo somente como leitura, indica que esse campo pode ser acessado via teclado, no entanto não pode ser alterado o seu valor. Para isso, podemos utilizar o atributo nativo readonly.
<label for=”idade”>Idade</label>
<input type=”text” id=”idade” readonly>3 - Campo obrigatório
Mais uma vez já temos um atributo nativo responsável por essa funcionalidade que é o atributo required.
<label for=”teste”>Teste</label>
<input type=”text” id=”teste” required>4 - Campo de pesquisa
Para poder indicar que um formulário é para fazer pesquisa na página, podemos utilizar o atributo role="search". Ao utilizar o atalho de landmarks, o leitor de tela irá identificá-lo como: “marca busca pesquisar edição”.
<form role=”search”>
<label for=”pesquisa”>Pesquisar:</label>
<input type=”text” id=”pesquisa”>
</form>Conclusão
Mais uma vez vemos a importância de se utilizar os elementos nativos. Desenvolvendo dessa forma, você também deixa o seu código-fonte mais legível e também melhora a sua página para ser encontrado por mecanismos de busca (SEO).
Você também pode estar adicionando feedback ao usuário sobre o preenchimento do formulário. Para isso, a WCAG tem um tutorial que traz algumas alternativas para a criação desses controles.
Espero que este texto tenha te ajudado e te motivado a deixar o seu código-fonte mais acessível.
Até a próxima!
Referências
Você sabia que a acessibilidade pode levar seu site ao topo do Google?
Usando o NVDA (leitor de tela) para avaliação de acessibilidade web
Formulário acessíveis (Governo Federal)
