Outros Temas

HTML Dinâmico e Acessibilidade

HTML Dinâmico (DHTML) é tipicamente uma combinação de Cascading Style Sheets (CSS) e JavaScript. O DHTML permite a quem desenvolve páginas Web, mostrar, esconder, ou mover informação directamente introduzida pelo utilizador ou através de comandos pré-programados. Muitos dos exemplos mostrados nesta secção usaram DHTML. Muitos dos menus drop-down ou fly-out que se encontram nas páginas Web também usam DHTML. Como a grande maioria destes elementos DHTML são modificáveis através da acção do rato, eles são tipicamente inacessíveis aos utilizadores que não fazem uso do rato. Quando se usa DHTML, existem dois itens que precisam ser avaliados para determinar o seu impacto na acessibilidade:

1. É o evento utilizado, para accionar uma alteração, dispositivo-independente? Se for necessário o rato para o efeito, então não é totalmente acessível.
2. É o conteúdo DHTML ou a funcionalidade por si só acessível? Se as tecnologias de apoio não conseguem aceder, adequadamente, ao conteúdo ou funcionalidade levado a efeito pelo DHTML, então não é totalmente acessível.

---

Usando o document.write

Neste exemplo, através do comando de Javasript document.write, é introduzida na página, de forma constante, alterações à informação nela afixada. A isto é vulgar designar-se de conteúdo dinâmico. Em muitos casos, o conteúdo que é escrito na página com JavaScript é acessível a quem usa tecnologias de apoio. No entanto, se o conteúdo dinâmico está constantemente a mudar ou se, de qualquer forma, interfere com a navegação ou funcionalidade do navegador, então poderá causar problemas de acessibilidade.

Exemplo de document.write

A hora actual é mostrada na caixa de texto abaixo. Ela é actualizada e modificada a cada segundo que passa.

A hora actual é:

Problemas

Neste caso, porque o conteúdo está constantemente a mudar e a actualizar, o leitor de ecrã poderá não ser capaz de o ler e até de gerar alguma confusão.

Soluções

Quando se usa informação dinâmica é preciso, em primeiro lugar, questionarmo-nos se é realmente necessário e vital usar esse método na página. Se a resposta for positiva, existem ainda outras formas de disponibilizar o conteúdo sem o uso de JavaScript inacessível. Pode, por exemplo, escrever a hora actual na página quando esta carrega usando um script do lado do servidor. Embora não esteja constantemente a actualizar,será seguramente suficiente. Pode igualmente disponibilizar uma ligação ou umbotão para ir para outra página onde a hora actual poderá ser mostradaatravés de um processamento do lado do servidor. Usar uma ligação ou um botão que permita ao utilizador pressionar sempre que queirasaber as horas é outra abordagem cuja técnica, apesar de usarJavaScript, é mais acessível.

<input type="button" value="Que horas são?" onfocus="alert('A hora actual é ' + timeValue);" />

---

Janelas Pop-up

A acessibilidade das janelas pop-up é um caso bastante singular. Primeiro que tudo, muitos peritos em usabilidade argumentam contra o uso das janelas pop-up afirmando que a sua utilização só deve ser feita em casos extremos excepcionais. Se precisa fazer uso de janelas pop-up, fique a saber que elas introduzem várias questões de acessibilidade bastante singulares. Para o utilizador que faz uso da visão poderá ser difícil dar conta da existência da nova janela, assim como navegar pela mesma. Para alguém que usa tecnologias de apoio, a nova janela poderá ser tediosa e confusa uma vez que o comportamento por defeito do link se encontra modificado. A implementação JavaScript pode tornar a nova janela difícil ou impossível de redimensionar ou escalar para alguém que use um ampliador de ecrã. Para alguém que seja cego, não existe vulgarmente qualquer indicação de que ele se encontra a navegar numa nova janela. Quando o utilizador de leitor de ecrã tenta regressar à página anterior, usando para o efeito o botão 'voltar' (back) do navegador, poderá ficar confuso quando constata que a sua acção não resultou.

Exemplo de Pop-up

Seleccione este link para abrir uma nova janela

<a href="popup.htm" onclick="window.open(this.href); return false;">Seleccione este...</a>

Nota: Se estiver a usar software para bloquear o aparecimento de janelas, necessitará de desactivar o software ou seleccionar o link de uma forma que ultrapasse o bloqueio de pop-ups (geralemnte Ctrl + clique ou Ctrl + Enter com o link seleccionado).

No exemplo cujo código se apresenta acima, o link funcionará normalmente (i.e., na mesma janela do navegador) se o JavaScript estiver desactivado.

Quando usar JavaScript para abrir novas janelas, pode modificar o tamanho e a posição da nova janela. Pode igualmente acrescentar ou retirar funcionalidade à janela, como seja a capacidade de redimensionar, de mostrar as barras de deslocação, de mostrar as barras de ferramentas, etc. Tenha muito cuidado quando alterar o comportamento por defeito da janela do navegador. Se um utilizador tem baixa visão e necessitar aumentar o conteúdo da janela, uma janela pequena que não pode ser aumentada e que não mostre as barras de deslocação pode-se tornar extremamente inacessível. Alguém com uma incapacidade motora pode necessitar trabalhar com barras de ferramentas com botões grandes para controlar mais assertivamente o navegador Web, pelo que removê-los ou modificá-los pode gerar dificuldades a estes utilizadores.

Como pode ver, existem muitas dificuldades, quer no campo da usabilidade quer no campo da acessibilidade, que ocorrem pelo uso de janelas pop-up. É preciso bastante ponderação no momento da tomada de decisão da sua utilização. Se forem utilizadas, é vital que durante a sua implementação se proceda a testes com utilizadores, com a finalidade de assegurar a sua acessibilidade. Alerte sempre o utilizador para o facto que uma janela pop-up window vai ser aberta.

---

Redireccionar e Reiniciar as Janelas do Navegador

Quando um conteúdo de uma página de repente se redirecciona ou se actualiza (reinicia), o utilizador poderá ficar desorientado ou confuso, especialmente se se tratar de um utilizador de tecnologias de apoio.

O redireccionamento é ttpicamente utilizado quando o conteúdo de uma página mudou de sítio ou foi actualizado num outro endereço. A Secção 508 requer que os utilizadores tenham controlo sobre o conteúdo dinâmico, que se altera automaticamnte e com muita frequência. Não modifique ou actualize automaticamente a janela do navegador sem primeiro alertar o utilizador que a mesma vai ocorrer e dê-lhe a possibilidade de desactivar ou interromper o processo.

---

Usar Puro CSS como Alternativa ao JavaScript

Como foi referenciado anteriormente, os parâmetros de Cascading Style Sheet (CSS) são muitas vezes modificados usando JavaScript com a finalidade de gerar modificações dinâmicas nas páginas DHTML. No entanto, com o advento da versão 2 de CSS, muita da funcionalidade dinâmica disponível com JavaScript encontra-se agora contida nas próprias especificações para o CSS. Isto permite a construção de elementos de layout e de navegação interactivos e dinâmicos sem a necessidade de recorrer aos eventos de JavaScript. É possível criar menus drop-down, imagens interactivas, e outras excitantes caraterísticas nos sítios Web sem a necessidade de nos preocuparmos com os manipuladores de evento dispositivo-independentes. Contudo, os novos padrões de CSS não são totalmente suportados pelos modernos navegadores, principalmente pelo Internet Explorer.

Por outro lado, os leitores de ecrã não têm grande suporte de CSS, especialmente no uso de parâmetros de estilo como display:none ou visibility:hidden que permitem tornar visível ou invisível os conteúdos de um determinado elemento HTML. Muitos leitores de ecrã não lêem os conteúdos que fazem uso destes estilos mesmo sabendo que os conteúdos fazem parte da estrutura da página. Até ao momento precisamos que, quer os navegadores quer as tecnologias de apoio, adiram mais aos novos padrões de CSS, pelo que usar apenas CSS para produzir conteúdo dinâmico deverá ser acompanhado de muitos testes numa variedade de navegadores e leitores de ecrã.