Tornar uma página responsiva, tanto à diferentes resoluções de telas quanto a dispositivos variados, praticamente já tornou-se lei de mercado para que uma página tenha uma boa qualidade na transmissão da informação. Porém, apenas adaptar o layout da página para respeitar padrões responsivos, não é o bastante para deixar a página acessível.
Hoje, se você tem interesse em criar uma página acessível à vários ambientes, apenas adaptar o layout à variações de resolução não basta. Algumas metodologias devem ser revistas para uma completa adequação. Eventos gerenciados pelo DOM, como key press, mouse over e mouse out, não funcionam muito bem em dispositivos móveis. Enquanto conteúdos que são ativados por meio de alguma ação, não serão bem aproveitados para usuários com alguma deficiência, por exemplo.
Alguns tópicos serão levantados durante esse artigo, envolvendo questões quanto á portabilidade e acessibilidade.
Independência de dispositivo
Eventos que funcionam somente pelo mouse são um grande problema para a acessibilidade, pois nem todas as pessoas conseguem utilizar o mouse. Quem utiliza leitor de tela, por exemplo, navega exclusivamente pelo teclado. Pessoas com determinados tipos de deficiência física poderão não ter a habilidade de usar o mouse convencional e poderão utilizar teclados e mouses adaptados. Por isso, todas as funções de uma página devem ser dispositivo-independentes, ou seja, devem funcionar pelo mouse, teclado ou outro dispositivo. Além disso, o foco do teclado não deve ficar fixado ou “preso” em algum elemento, pois o usuário deve poder percorrer toda a página pelo teclado facilmente. Valendo lembrar que em dispositivos móveis, muitos eventos são inexistentes.
Como exemplo, aquele popover que aparece na página, coma opção de fechar ao click de um botão gera uma excelente usabilidade, mas uma acessibilidade terrível para usuários que não conseguem alcançar aquele botão. Uma simples adição de código aplica à tecla “ESC” do teclado a ação de fechar o popover.
window.onload = function(){ document.onkeydown = function(e){ // tecla ESC if(e.keyCode==13){ fecha_popover(); } }}Se forem utilizados eventos de JavaScript específicos para mouse, devem ser utilizados os correspondentes para teclado:
| Evento do teclado | Evento correspondente do mouse |
|---|---|
| onkeydown | onmousedown |
| onkeyup | onmouseup |
| onkeypress | onclick |
| onfocus | onmouseover |
| onmouseover | onmouseout |
Adequar a navegação da página pela tecla “TAB” do teclado é outra dica importante. Ordene o conteúdo da sua página para que este tipo de navegação passe apenas por conteúdos utilizáveis, como formulários e links.
Por fim, sempre teste o site navegando por todo o conteúdo somente pelo teclado, com setas e “TAB”, e em diferentes navegadores.
Alterações temporais do conteúdo
É muito comum a utilização de conteúdos que se movem, como os slideshows. Esse tipo de elemento não deve mover-se automaticamente, pois o usuário é quem deve decidir se quer “rolar” o conteúdo ou não. Assim, devem ser oferecidos controles para iniciar, pausar e reiniciar tais rolagens. Esses controles devem ser acessíveis também pelo teclado e devem estar bem descritos, para quem utiliza leitor de tela.
Atualização e redirecionamento automáticos
Quando ocorre uma mudança, atualização ou redirecionamento repentino na página, o usuário pode sentir-se confuso ou desorientado, especialmente se estiver utilizando algum recurso de Tecnologia Assistiva, como um leitor de tela, por exemplo. Isso ocorre em páginas com atualização ou redirecionamento automáticos. A atualização automática periódica – muito utilizada por canais de notícias – é comumente realizada através do uso do o atributo http-equiv com conteúdo “refresh” do elemento meta no HEAD do documento.
Em páginas onde a atualização é absolutamente necessária, o usuário deverá ser informado que a página é atualizada automaticamente.
Quanto ao redirecionamento automático, o mesmo deve ocorrer de forma transparente para o usuário. Ou seja, não devem ser utilizadas marcações para redirecionar a uma nova página, como o uso do atributo http-equiv com conteúdo “refresh” do elemento META.
Limite de tempo
Em uma página onde há limite de tempo para realizar uma tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite. Essa recomendação não se aplica a eventos em que o limite de tempo é absolutamente necessário. Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.
Ao especificar o tempo limite para o usuário conclua a ação, não se deve tomar como modelo um desktop conectado a teclado e mouse convencionais. Dispositivos móveis mostram uma ergonomia mais precária, comparadas ao desktop, exigindo um esforço maior e mais prolongado para resolver algumas ações. Deficiências motoras retardam a conclusão de alguns trabalhos na página da web. É importante adequar o tempo levando em conta o dispositivo que o usuário esteja utilizando, e a dificuldade que usuários possam ter concluir trabalhos convencionais.
Intermitência de tela
Não apenas pela acessibilidade, mas também pelo bom gosto. Não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epilético. Além disso, elementos piscantes podem causar desconforto, desatenção e confusão para os usuários.
A importância do contraste para usuários com Daltonismo
A deficiência de cor vermelho/verde é o tipo mais comum de Daltonismo. Por isso, deve-se evitar a utilização de contrastes entre essas duas cores.
- Utilizando combinação de cores verde/vermelho: com a deficiência de cor não é possível perceber o contraste entre as cores.
- Utilizando combinação de cores verde/lilás: mesmo com a deficiência de cor, ainda é possível perceber o contraste.
Elementos ocultos na tela
É bastante comum, e deixa a página “inteligente”, ocultar texto que devem ser mostrar apenas se o usuário desejar velos. Mutas vezes por alguma ação do mouse over aplicada a um ícone de ajuda, por exemplo, para configurar uma capacidade de aprendizagem. Porém, dependendo método aplicado ao elemento para esconde-lo da página, aplicativos de leitores de tela não conseguem alcançar o conteúdo. Dependendo do método, a acessibilidade à aquela ajuda, não exite.
Abaixo é mostrado os diferentes métodos para esconder um elemento da página, e sua reação aos aplicativos leitores de tela.
| CSS | Efeito na tela | Efeito na acessibilidade |
|---|---|---|
| visibility:hidden; | O elemento fica oculto, mas continua a ocupar o espaço que normalmente ocuparia | O conteúdo é ignorado pelos leitores de tela |
| display:none; | O elemento fica oculto e não ocupa espaço | O conteúdo é ignorado pelos leitores de tela |
| height: 0; width: 0; overflow: hidden; | O elemento fica oculto e não ocupa espaço | O conteúdo é ignorado pelos leitores de tela |
| text-indent: -999em; | O conteúdo é movido para “fora da tela”, não sendo mais visível, mas links podem ser focalizados de maneira imprevisível | Os leitores de tela acessam o conteúdo, mas somente texto e elementos inline |
| position: absolute; left: -999em; | O conteúdo é removido de sua posição, não ocupando espaço e é movido para “fora da tela”, ficando oculto | Os leitores de tela acessam o conteúdo |
Elementos ocultos na tela
Por fim, para a avaliar se sua página é Web acessível, existem ferramentas automáticas que auxiliam na avaliação de acessibilidade. O aplicativo eMAG sugere um passo a passo para avaliar a acessibilidade de um site:
- Validar os códigos de conteúdo HTML e folhas de estilo;
- Verificar o fluxo de leitura da página, utilizando um navegador textual ou um software leitor de tela;
- Checar o fluxo de leitura das páginas sem estilos, sem scripts e sem as imagens;
- Verificar as funcionalidades disponíveis na barra de acessibilidade, como atalhos e contraste;
- Efetuar a validação automática de acessibilidade, através de avaliadores automáticos;
- Realizar a validação manual, com uso de checklists de validação humana.
Um recurso bastante útil na avaliação de acessibilidade de um site são as extensões para navegadores para análise de acessibilidade:
- Para Firefox: Accessibility Evaluation Toolbar (link para um novo site)
- Para Google Chrome: Accessibility Developer Tools (link para um novo site)
- Para Internet Explorer: Web Accessibility Toolbar for Internet Explorer (link para um novo site)
Artigo Retirado de Curso eMAG – gov.br