Portal do Governo Brasileiro

Curso eMAG / Desenvolvedor

gov.br eMAG

Início do Conteúdo

Práticas Web acessíveis Comportamento


Início do Sub-menu

Fim do Sub-menu


Início do tópico

Independência de dispositivo

Eventos que funcionam somente pelo mouse são um grande problema para a acessibilidade, pois nem todas as pessoas conseguem utilizá-lo. 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.

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 teclado Evento correspondente do mouse
onkeydown onmousedown
onkeyup onmouseup
onkeypress onclick
onfocus onmouseover
onmouseover onmouseout

Dê preferência por manipuladores de eventos que são dispositivo-independentes (funcionam pelo mouse, teclado ou outro), como: onFocus, onBlur, onSelect, onChange, e onClick (quando o onClick for utilizado em um link ou elemento de formulário).

Prefira utilizar o onclick/onkeypress em vez de onmousedown/onkeydown e onmouseup/onkeyup, pois estes últimos fazem com que o evento seja disparado automaticamente através do teclado, o que é um grande problema para a acessibilidade.

Por fim, sempre teste o site navegando por todo o conteúdo somente pelo teclado, com setas e Tab, e em diferentes navegadores.

Voltar ao sub-menu


Início do tópico

Objetos programáveis

Deve-se garantir que scripts, conteúdos dinâmicos e outros elementos programáveis sejam acessíveis e que seja possível sua execução via teclado ou outro dispositivo. Um exemplo é a funcionalidade drag and drop (arrastar e soltar), que é utilizada através do mouse, mas pode ter como alternativa o uso de atalhos para recortar e colar, para quem utiliza exclusivamente o teclado.

Quando o script for utilizado em uma página da Web, uma forma de fornecer uma alternativa para ele é através do elemento NOSCRIPT. Este elemento pode ser utilizado para mostrar conteúdos em navegadores que não suportam scripts ou que tenham o script desabilitado. No entanto, se o navegador tiver suporte a scripts e estes estiverem habilitados, o elemento NOSCRIPT será ignorado. Dessa forma, a utilização do elemento NOSCRIPT para um script inacessível não garante que o objeto seja acessível. Assim, a recomendação é que o próprio script seja desenvolvido tomando-se o cuidado para que ele seja acessível, e o elemento NOSCRIPT deve ser utilizado para abranger os casos em que scripts não são suportados.

Em outras palavras, o elemento noscript é uma alternativa para o script, mas não para a acessibilidade.

Exemplo:

Página HTML

						
	<script src="js/exemplo.js" type="text/javascript"></script>
	<noscript>Seu navegador não tem suporte a JavaScript ou está desativado!</noscript>
	…
	<a href="cadastro.html"id="cadastro">Cadastre-se agora!</a>
						
					

Arquivo JavaScript (exemplo.js)

						
	function pop() {
	alert("Você vai fazer um novo cadastro!");
	}
	var element = document.getElementById("cadastro");
	element.onclick = pop();
						
					

Quando não for possível que o elemento programável seja diretamente acessível, deve ser fornecida uma alternativa em HTML para o conteúdo.

Voltar ao sub-menu


Início do tópico

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.

Banner com controles para iniciar e pausar a ação de passagem das notícias

Voltar ao sub-menu


Início do tópico

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 (ex: <meta http-equiv="refresh" content="30" />, onde a página seria recarregada a cada 30 segundos).

Como exemplo de uma boa prática, em uma interface Web para e-mail (Webmail), um desenvolvedor pode fornecer um botão ou link para buscar novos e-mails recebidos em vez de atualizar automaticamente.

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. (Ver ePWG - Cartilha de Codificação (link para um novo site)).

Voltar ao sub-menu


Início do tópico

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.

Exemplo: Na inserção de dados em um formulário para obtenção de um benefício ou consulta a processo, o cidadão deve ter tanto tempo quanto for necessário para o preenchimento de seus dados. O site deve possuir um mecanismo que permita ao cidadão aumentar o limite de tempo, disponibilizando, por exemplo, um botão para aumentar o tempo em 5 minutos.

Voltar ao sub-menu


Início do tópico

Intermitência de tela

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.

Voltar ao sub-menu

Fim do Conteúdo