Práticas Web acessíveis

08:59

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:

Eventos correspondentes para mouse e teclado
Evento do tecladoEvento correspondente do mouse
onkeydownonmousedown
onkeyuponmouseup
onkeypressonclick
onfocusonmouseover
onmouseoveronmouseout

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.

 

slide show

 

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.

Representação de como uma pessoa com visão normal e uma pessoa com daltonismo encherga a imagem com conbinações de cores verde e vermelho

  • Utilizando combinação de cores verde/lilás: mesmo com a deficiência de cor, ainda é possível perceber o contraste.

Representação de como uma pessoa com visão normal e uma pessoa com daltonismo encherga a imagem com conbinações de cores verde e lilás

 

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.

Formas de ocultar elementos e efeitos na acessibilidade
CSSEfeito na telaEfeito na acessibilidade
visibility:hidden;O elemento fica oculto, mas continua a ocupar o espaço que normalmente ocupariaO conteúdo é ignorado pelos leitores de tela
display:none;O elemento fica oculto e não ocupa espaçoO conteúdo é ignorado pelos leitores de tela
height: 0; width: 0; overflow: hidden;O elemento fica oculto e não ocupa espaçoO 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ívelOs 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 ocultoOs 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:

  1. Validar os códigos de conteúdo HTML e folhas de estilo;
  2. Verificar o fluxo de leitura da página, utilizando um navegador textual ou um software leitor de tela;
  3. Checar o fluxo de leitura das páginas sem estilos, sem scripts e sem as imagens;
  4. Verificar as funcionalidades disponíveis na barra de acessibilidade, como atalhos e contraste;
  5. Efetuar a validação automática de acessibilidade, através de avaliadores automáticos;
  6. 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:

 

Artigo Retirado de Curso eMAG – gov.br