Você está aqui:
Criação de JavaScript Acessível
Javascript não é HTML. Não usa as tags do HTML nem se rege por nenhuma das suas regras gerais. Não é Java. Trata-se de uma linguagem de programação que é processada pelo computador do utilizador e é responsável por alguns aspetos dinâmicos de uma página Web. HTML, CSS e Javasript podem fazer quase tudo nas suas páginas! Mas há regras de acessibilidade a cumprir que acrescentam valor aos seus conteúdos.
Manutenção de eventos em JavaScript
Antevisão
O JavaScript pode ser processado usando elementos <script> e manipuladores de eventos (event handlers). O elemento <script> pode conter diretamente código JavaScript:
<script type="text/javascript"><del></del>
<!-- function doit(); -->
</script>
ou pode abrir um ficheiro JavaScript (.js) externo:
<script type="text/javascript" src="scripts.js">
Um elemento <script> é processado quando a página web é aberta sem qualquer intervenção do utilizador. Os conteúdos e a funcionalidade do java processados dentro do elemento <script> necessitam de ser acessíveis diretamente e é ainda necessário construir uma alternativa acessível desse conteúdo e dessa funcionalidade para quem não disponha de tecnologia JavaScript.
Os manipuladores de eventos (event handlers) encontram-se incorporados ao longo do código HTML e são ativados pelo navegador ou evento de utilizador - tal como sucede quando a página é carregada, quando o utilizador pressiona um botão do rato, ou quando o relógio chega às 8 da tarde. Alguns eventos de utilizador são dependentes da utilização de um determinado dispositivo como sejam o rato ou o teclado. Estes são chamados de eventos cuja manipulação são dispositivo-dependentes. Outros manipuladores de eventos são dispositivo-independentes e caraterizam-se pela sua ativação poder ser feita indistintamente quer pelo rato quer pelo teclado, ou por quaisquer outros meios. Ao usar manipuladores de evento dispositivo-dependentes poderá resultar que o conteúdo fique inacessível a alguém que não seja capaz de utilizar o dispositivo para o qual o evento foi concebido.
onMouseOver e onMouseOut
O manipulador de evento onMouseOver é ativado quando o cursor do rato é colocado sobre um item. Como o seu próprio nome sugere, onMouseOver requer o uso do rato, ou seja este é um manipulador de evento dispositivo-dependente e a sua utilização poderá trazer algumas questões de acessibilidade. O onMouseOver, e o seu companheiro onMouseOut, podem ser utilizados, desde que qualquer conteúdo ou funcionalidade esteja igualmente disponível sem a utilização do rato.
Exemplo 1
Coloque o seu rato sob a imagem que se segue para ver um exemplo de onMouseOver. Quando o rato é colocado sob a imagem da palavra "Accessibility", aparece outra imagem no seu lugar que apresenta a definição da palavra "Accessibility".
<a href="page.html"
onmouseover="document.images['myimage'].src='imageoff.gif';"
onmouseout="document.images['myimage'].src='imageon.gif';">
<img src="imageoff.gif" width="289" height="79" id="myimage"
alt="Acessibilidade - A qualidade de ser acessível, ou de admiitir
proximidade; receptividade." />
</a>
Nota: Por questões de validadores automáticos de acessibilidade os manipuladores constantes na página foram substituídos sempre por manipuladores absolutos
Todos os exemplos deste tutorial estão em conformidade com a gramática para o XHTML 1.0 Strict. O XHTML obriga a que os nomes dos manipuladores de eventos estejam escritos em letra minúscula. (e.g., onmouseover em vez de onMouseOver).
Experimente navegar pela imagem usando o teclado. Vai notar que a informação adicional não irá ser mostrada. O texto alternativo para a imagem disponibiliza o conteúdo mostrado quando o manipulador de evento onmouseover é activado. Isto permite aos utilizadores que sabem como chegar a este texto alternativo aceder ao conteúdo, embora não seja uma solução verdadeiramente universal.
Problemas
Neste exemplo, é mostrado conteúdo adicional, usando para o efeito o manipulador onMouseOver. Este conteúdo é apenas visualizado se o utilizador fizer uso de um rato e o passar por cima da imagem. Não está disponível a quem utilize o teclado para navegar pela página. O manipulador de evento onMouseOver não se pode tornar diretamente acessível a utilizadores de teclado. Nestes casos, é necessário disponibilizar uma alternativa.
Solução Parcial
Coloque o conteúdo adicional no atributo 'alt' da própria imagem. Isto resultará para utilizadores de leitor de ecrã - o leitor de ecrã lerá o texto alternativo. Mas para os utilizadores que façam uso da visão, cujos navegadores não mostrem o texto alternativo para as imagens ou que não saibam colocar o rato em cima da imagem para ver o texto alternativo, esta não é uma alternativa viável. Contudo, a imagem precisa de ter o texto alternativo devidamente referenciado.
Soluções
Em adição ao onMouseOver e ao onMouseOut, use o onFocus e o onBlur. Estas acções serão executadas sempre que se utilize o teclado para navegar pelos links ou pelo link que circundam o elemento <img> (imagem).
<a href="page.htm"
onmouseover="document.images['myimage'].src='imageon.gif';"
onfocus="document.images['myimage'].src='imageoff.gif';"
onmouseout="document.images['myimage'].src='imageoff.gif';"
onblur="document.images['myimage'].src =
'imageoff.gif';"> <img src="imageoff.gif" width="289" height="79"
id="myimage" alt="Acessibilidade - A qualidade de ser acessível, ou de
admitir proximidade; receptividade." /></a>
Precisa mesmo assim de continuar a disponibilizar a descrição textual alternativa para utilizadores que não façam uso da visão para aceder aos conteúdos. onFocus e onBlur permitem que a imagem visual seja substituída para os utilizadores que usem apenas o teclado para navegar.
Exemplo 2
Uma utilização frequente do onMouseOver e do onMouseOut está relacionada com abertura e fecho de menus dos sistemas de navegação. Coloque o seu rato sobre os items do menu abaixo para ver um exemplo de menu drop-down. Sempre que o rato é posicionado sobre os itens do menu principal (onMouseOver), surgem por debaixo itens de sub-menu adicionais. Quando o rato é retirado do sistema de menu (onMouseOut) os sub-menus desaparecem.
| Produtos
|
Serviços
|
Suporte
|
Problemas
Até ao momento o onMouseOver tem vindo a ser utilizado para adicionar conteúdo e/ou funcionalidade à página. Neste exemplo, o JavaScript controla a visualização de elementos Cascading Style Sheet dentro da página. Os itens do sub-menu irão apenas ser visíveis se o rato for colocado sobre o item do menu principal respectivo. Estes itens poderão não estar disponíveis caso o JavaScript esteja desactivado e poderão não serem lidos pelas tecnologias de apoio.
Soluções
Sempre que possível use manipuladores de evento que permitam ser accionados através de uma navegação via teclado. Quando isto não for possível, deve disponibilizar manipuladores que permitam uma navegação redundante. Isto pode ser conseguido com uma de duas formas:
- Primeiro, fornecendo links dentro do conteúdo principal da página, para as páginas cujas ligações se encontram no sub-menu de navegação. Isto é muitas vezes feito disponibilizando uma lista de links categorizados no rodapé da página. O lado menos positivo desta opção prende-se com o facto de termos um menu de navegação acessível apenas no rodapé da página, o que poderá ser pouco intuitivo para muitos dos utilizadores.
- Um segundo método para disponibilizar um menu de navegação redundante passa por adicionar um link normalizado
hrefa cada item do menu principal de navegação (e.g., Produtos, Serviços, etc.) o qual liga a uma página, à parte, que contém o respectivo sub-menu de navigação. Se seleccionar os links Produtos, Serviços, ou Suporte acima vai ver um exemplo de um sistema de navegação redundante.
Exemplo
<a href="productlinks.htm"
onmouseover="SlideOutMenu();"
onmouseout="SlideInMenu();">Produtos</a>
Apesar deste método requerer a criação de uma página adicional e introduzir um passo adicional, ele permite igualmente um acesso completo aos elementos de navegação de uma forma intuitiva. Este método também permite que os itens do sub-menu sejam acessíveis mesmo que o JavaScript se encontre desactivado.
onFocus e onBlur
Estes manipuladores de evento são tipicamente utilizados com elementos de formulário, tais como campos de texto, botões de rádio e botões de submissão. O onFocus é accionado quando o cursor é colocado sobre ou dentro de um determinado elemento de formulário. onBlur é accionado quando o cursor abandona um elemento de formulário.
Ambos os manipuladores de evento são dispositivo-independentes, o que significa que podem ser executados com o rato, com o teclado, ou qualquer tecnologia de apoio. As acções levadas a efeito por estes manipuladores de evento têm de ser analisadas para determinar se as mesmas causam problemas de acessibilidade. Tipicamente, estes eventos não levantam questões de acessibilidade a não ser que os mesmos modifiquem o comportamento habitual do navegador Web ou interfiram com a navegação por teclado.
Exemplo 1
<input id="fname" type="text" onfocus="alert('Introduza apenas o seu primeiro nome');" />
Problemas
Nenhuns. Tirando que neste caso a janela de alerta constitua um elemento desnecessário e de distracção, a técnica em si não introduz quaisquer questões sérias de acessibilidade. A mensagem de alerta é activada quando a caixa de texto ganha o foco, quer seja através do teclado quer seja através do rato. Os alertas feitos com JavaScript são lidos pela grande maioria dos leitores de ecrã actualmente existentes no mercado e podem ser utilizados para incrementar a usabilidade dos formulários, dotando-os de resposta temporizada, instruções, ou sugestões. No entanto, se o JavaScript estiver desactivado, o alerta deixa de estar, de todo, disponível.
Exemplo 2
<input type="text" id="input1" size="5" onblur="checkAnswer();">
Problemas
Embora o manipulador de evento onblur seja dispositivo-independente, está a ser usado para executar código JavaScript, o que torna a página de difícil navegação. A caixa de edição retém o focus até que a resposta exacta seja dada. Esta alteração do comportamento normal do navegador pode tornar-se confusa e restritiva. Por outro lado, o resultado é mostrado num local diferente da página. Porque o focus é retido dentro da caixa de edição, um leitor de ecrã não será capaz de aceder ao texto do resultado ou a qualquer outra parte da página até que seja introduzida a resposta correcta.
Solução
Não force o foco a permanecer dentro da caixa de edição. Permita que o utilizador tenha total liberdade para navegar pela página. Apresente o resultado numa outra página depois do formulário ter sido submetido (funciona mesmo sem JavaScript) ou apresente o resultado através da função alert do JavaScript (necessita de JavaScript). Tente introduzir uma letra dentro da caixa de edição acima para ver uma mensagem de alerta Javascript com o resultado.
onClick e onDblClick
O manipulador de evento onClick é accionado quando o botão do rato é pressionado sobre um elemento do HTML. É suposto o onClick ser um manipulador de evento rato-dependente. Contudo, se o manipulador de evento onClick for utilizado com links de hipertexto ou controlos de formulário, a grande maioria dos navegadores e tecnologias de apoio accionam o onClick se a tecla Enter for pressionada quando o foco está sob o link ou o controlo. Nestes casos, o onClick actua como se se tratasse de um verdadeiro manipulador de evento dispositivo-independente. Não obstante, a tecla Enter não irá accionar o evento de onClick se este for utilizado em elementos não-link e não-controlo, tais como as células de tabelas ou o texto integral.
O manipulador de evento onDblClick está associado ao duplo clique do rato quando este selecciona um elemento HTML. Não há dispositivo-independência ou equivalente no teclado para o onDblClick, devendo por isso evitar-se a sua utilização.
Exemplo 1
O link que se segue acciona uma caixa de confirmação feita em JavaScript o que permite confirmar se pretende ou não ver a página.
<a href="page.htm" onclick="return confirm('Tem a certeza que pretende ver esta página?');">Veja este exemplo de onClick</a>
Problemas
Nenhuns. A caixa de confirmação é lida pela maioria dos leitores de ecrã. Ao usar o parâmetro de JavaScript return a acção do link é cancelada se o utilizador seleccionar o botão 'Cancelar' na caixa de diálogo de confirmação. Se o JavaScript estiver desactivado, o link irá trabalhar normalmente.
Exemplo 2
O texto que se segue está estilizado de forma a parecer um link (sublinhado e azul), mas na verdade trata-se de um simples texto que tem um evento onClick que abre um outro documento na janela do navegador. Utilize o rato para clicar sobre o texto que se segue.
Veja outro exemplo de onClick
<p style="color:blue; text-decoration:underline" onclick="location.href='page.htm'">Veja outro exemplo de onClick</p>
Problemas
Uma vez que o texto não é um link de hipertexto ou um controlo de formulário, ele não recebe o foco quando navegamos usando o teclado. Não obtendo o foco, o teclado não pode ser utilizado para activar o evento existente em onClick. Os utilizadores que façam uso do teclado, como é o caso dos utilizadores de leitores de ecrã, não vão sequer perceber que o link se encontra na página.
Solução
Utilize o manipulador de evento onClick num link ou controlo de formulário em vez de num elemento que não possa ser acedido usando o teclado.
Exemplo 3
Um uso muito comum de JavaScript está relacionado com a validação de informação de um formulário. O formulário que se segue usa JavaScript para validar a informação introduzida.
Pressione o seu nome na caixa de edição que se segue e depois pressione no botão Submeter.
<form action="page.htm" onsubmit="validate(); return false;">
<p><label for="yourname">Nome:</label>
<input type="text" id="yourname" />
<input type="button" value="Submeter" onclick="validate();" />
</p> </form>
Problemas
A caixa de confirmação e alerta, as quais são accionadas pelo evento onClick são acessíveis a navegadores e a tecnologias de apoio que tenham o JavaScript activo. Ao validar a informação do formulário com um script do lado do servidor e depois mostrar o resultado noutra página Web permite ultrapassar quaisquer problemas que possam ocorrer no código JavaScript e permite validar o formulário mesmo que o JavaScript esteja desactivado. Se usar JavaScript para validar o formulário, certifique-se que todos os elementos e funcionalidades do formulário podem ser utilizadas através do teclado. Uma vez que o manipulador onClick se encontra aplicado a um elemento de formulário, ele é activado quer usando o rato quer usando o teclado.
Nota | Porque a maioria dos navegaodores submetem o formulário quando a tecla Enter é pressionada, o manipulador de evento onsubmit foi adicionado à tag <form>. Assim, assegura-se que o formulário será validado mesmo quando o utilizador não pressione o botão mas pressione simplesmente a tecla Enter quando o foco se encontra no campo de edição. Note também a necessidade de adicionar a etiqueta (<label>) ao campo de edição (<input>).
Exemplo 4
Este exemplo valida igualmente a informação do formulário, mas o resultado é também mostrado dentro da página.
Quantos itens existem numa dúzia? Introduza o montante na caixa abaixo e depois pressione no botão 'Verificar'.
<form action="page.htm" onsubmit="checkAnswer2(); return false;">
<p class="invis" id="answercorrect">Correcto, existem 12 itens numa dúzia.</p>
<p class="invis" id="answerwrong">Incorrecto. Existem 12 itens numa dúzia.</p>
<p><label for="answerbox">Introduza a Resposta:</label>
<input type="text" id="answerbox" />
<input type="submit" onclick="checkAnswer2()" value="Verificar" />
</p></form>
Problemas
O resultado não é apresentado de uma forma que seja acessível a algumas tecnologias de apoio. Neste exemplo, o JavaScript está a modificar os parâmetros de estilo de visualização dos elementos presentes na página tornando-os visíveis ou invisíveis de acordo com a resposta. O utilizador de leitor de ecrã não se aperceberá que subitamente foi adicionada informação à página.
Soluções
- Valide a informação do formulário com um script do lado do servidor, e depois mostre o resultado numa outra página.
- Disponibilize o resultado de uma forma que seja acessível, usando por exemplo a função alert de JavaScript ou outro elemento de formulário.
onChange e onSelect
O manipulador de evento onChange é accionado quando um elemento de formulário é seleccionado e alterado (por exemplo, quando um botão de rádio é inicialmente seleccionado ou quando se procede a uma alteração do texto existente numa caixa de edição). O manipulador de evento onSelect é processado quando o texto existente num campo de texto ou numa área de texto é seleccionado. Embora estes manipuladores de evento sejam dispositivo-independentes e possam ser activados usando o rato, o teclado, ou qualquer outro dispositivo, as acções resultantes do seu processamento têm de ser analisadas para determinar se existem problemas de acessibilidade.
Exemplo de onChange
O elemento formulário que se segue, com o qual foi construído um menu do tipo drop-down , é utilizado como meio de navegação. Ao seleccionar um item da lista, o JavaScript abrirá automaticamente a página especificada dentro do navegador.
Nota | Nalguns navegadores é necessário pressionar a tecla Enter ou efectuar um clique na página, logo após ter efectuado a selecção do item do menu, para activar o manipulador de evento onchange. Clique no botão Voltar () do seu navegador para regressar a esta mesma página.
Nota: Sem javascript activo o exemplo abaixo não funcionará correctamente
<script type="text/javascript">
<!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//-->
</script>
<form action="page.htm" onsubmit="return false;">
<p><label for="selectPage">Ir para:</label>
<select name="selectName" onchange="goto_URL(this.form.selectName)">
<option value="">Seleccione uma page:</option>
<option value="page.htm">Página 1</option>
<option value="page.htm">Página 2</option>
<option value="page.htm">Página 3</option>
</select></p>
</form>
Problemas
O JavaScript faz com que o navegador vá para uma nova página usando onChange ou quando o utilizador seleccione um item da lista de selecção. Se o utilizador final estiver a usar um teclado, o manipulador de evento onChange é executado a cada item seleccionado da lista. É impossível ao utilizador seleccionar directamente o último item na lista, sem que cada um dos itens anteriores não seja executado. A única forma que o utilizador tem para seleccionar o último item do menu é navegar para a página do primeiro item, voltar atrás, ir para para o segundo item, pressionar de novo o botão back, e assim sucessivamente até ao último item do menu [adenda feita em Setembro 2007: dos testes feitos o comportamento não é tão penoso como o descrito. É possível navegar pelos itens da lista com teclado, sendo a selecção apenas activada quando se pressiona na tecla entrer. Testes feitos com SAFARI 2.0.4 para Mac OS X; ].
Soluções
Em vez de se usar o manipulador de evento onChange, permita que seja o utilizador a controlar a navegação pelos itens, a seleccioná-los a partir de um botão e a submeter o formulário para activar o script. Quando a programação é feita do lado do servidor é possível processar a informação formulário e redireccionar o navegador para a respectiva página sem necessidade usar quaisquer funções de JavaScript. O código que se segue demonstra um dos métodos para ultrapassar o problema do onChange.
Seleccione uma página usando o menu drop-down e depois seleccione o botão . Clique no botão do navegador para voltar a esta página.
<form action="page.htm" onsubmit="return false;">
<p><label for="selectPage2">Ir para:</label>
<select name="selectPage2" id="selectPage2">
<option value="">Seleccione uma página:</option>
<option value="page.htm">Página 1</option>
<option value="page.htm">Página 2</option>
<option value="page.htm">Página 3</option>
</select>
<input type="button" value="Go!" onclick="goto_URL(this.form.selectPage2);" />
</p>
</form>
Utilizar manipuladores de eventos dispositivo-independentes
Como já foi mencionado anteriormente, muitos manipuladores de eventos são dispositivo-independentes, nos quais se incluem o onFocus, onBlur, onSelect, onChange, e onClick (sempre que é utilizado com elementos link ou formulário). Sempre que seja possível use manipuladores de eventos dispositivo-independentes. Outros manipuladores de eventos são dispositivo-dependentes, o que significa que apenas reagem e certo tipo de input. Por exemplo, onMouseOver, onMouseOut, e onDblClick dependem do uso do rato. Existem também alguns manipuladores de eventos que são dependentes do uso do teclado (onKeyDown, onKeyUp, etc.). Em JavaScript podem ser utilizados conjuntamente múltiplos manipuladores de eventos dispositivo-dependentes de teclado e de rato. Por exemplo, quer o onMouseOver quer o onFocus (assim como o onMouseOut e o onBlur) podem ser utilizados para serem activados num script com teclado e com rato. Usar conjuntamente múltiplos manipuladores de eventos dispositivo-dependentes como método de implementar uma solução dispositivo-independente requer que se faça um leque alargado de testes com differentes navegadores e tecnologias de apoio de forma a assegurar que a acessibilidade não se encontra, de qualquer forma, limitada.