Práticas Web acessíveis Utilização da cor ou outros elementos visuais
As informações não podem ser transmitidas unicamente por meio de características sensoriais, tais como cor, forma, tamanho, localização visual, orientação ou som. Para compreendermos melhor este ponto, vamos analisar alguns exemplos.
Exemplo 1:
Lista de produtos (os itens em vermelho não estão disponíveis):
- Produto 1
- Produto 2
- Produto 3
- Produto 4
- Produto 5
Neste exemplo, é preciso que o usuário consiga enxergar e distinguir cores para saber quais produtos estão indisponíveis. Uma solução para esse caso seria, além de utilizar a cor como diferencial, informar ao lado do produto que ele encontra-se indisponível (Produto 3 (indisponível))
Exemplo 2:
O link para a página do concurso público está disponível no canto superior direito da página.
Repare que, no exemplo acima, é necessário que o usuário consiga visualizar uma posição específica da página. Nesse caso, o ideal seria fornecer o link no próprio contexto, facilitando o acesso por todos os usuários.
Exemplo 3:
Para salvar o questionário, clique no botão redondo. Para sair do questionário sem salvá-lo, clique no botão quadrado. Você poderá retornar mais tarde para preencher este questionário.
No exemplo acima, uma pessoa cega não saberia qual o formato dos botões e nem o leitor de tela teria como interpretar esse tipo de informação sensorial para transmitir ao usuário. Nesse caso, seria necessário fornecer informações adicionais aos botões, como uma descrição que identifique a sua função, ou então, o seu formato, de modo que o leitor de tela possa ler esta informação ao usuário.
No exemplo acima, uma pessoa cega não saberia qual o formato dos botões e nem o leitor de tela teria como interpretar esse tipo de informação sensorial para transmitir ao usuário. Nesse caso, seria necessário fornecer informações adicionais aos botões, como uma descrição que identifique a sua função, ou então, o seu formato, de modo que o leitor de tela possa ler esta informação ao usuário.
Exemplo 4:
Repare que o formulário acima indica os campos obrigatórios apenas através da mudança de cor. Um usuário que não pode ver, não saberá quais campos são de preenchimento obrigatório.
Uma solução para o caso de campos obrigatórios em formulários seria inserir um asterisco em forma de imagem ao lado de cada campo obrigatório, fornecendo uma descrição no atributo alt para esta imagem, que poderia ser “campo obrigatório” ou, simplesmente, “obrigatório”.
<label for="nome">Nome:
<img src="images/icon_asterisk.gif" alt="obrigatório"/>
</label>
<input type=text name="nome" id="nome" />
Para quem enxerga, basta visualizar o asterisco para distinguir os campos obrigatórios. Com o leitor de tela, a informação do alt seria lida para o usuário. No caso do exemplo de código acima, o leitor iria informar algo do tipo: “Campo de edição, nome, obrigatório”.
