18
Jun 10
publicado por andr3, às 16:55 | comentar | ver comentários (12)

Nos últimos anos tornou-se cada vez mais frequente encontrarmos com pequenos controlos na web que são enriquecidos com a magia do JavaScript.

Sejam eles tabs (abas em Português), paginações, votações, etc., o que interessa é que o controlo "quebra" o conceito de hiperligação (link) do hipertexto. Como conceito, os links servem para interligar hiper-documentos em que cada link refere um outro documento através do seu URL.

Ora, uma vez que o AJAX permite carregamento de conteúdo sem refrescar toda a página, esta é uma técnica perfeita para mostrar grandes quantidades de conteúdo que não são necessariamente acedidos em todas as visitas.

Exemplo do link Todo o SAPO na Homepage do SAPO

Evitar barreiras desnecessárias

Existem imensas formas de programar o comportamento do exemplo mostrado.

  1. <a href="#" onclick="mostrarTodoOSapo();">Todo o SAPO</a>

    O browser executa a função de JavaScript e segue o href, provocando às vezes um scroll para o topo. Sem JavaScript, nada acontece ao clicar/activar o link.

  2. <a id="todo-o-sapo" href="#">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

    O browser executa a função de JavaScript e não segue o href. Sem JavaScript, nada acontece ao clicar/activar o link.

  3. <a id="todo-o-sapo" href="/todo-o-sapo">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

    O browser executa a função de JavaScript e não segue o href. Sem JavaScript, o browser segue normalmente o href, logo que o documento servido nesse URL deve imitar a função desempenhada por JavaScript.

Neste último ponto, estamos a falar duma questão de acessibilidade visto que se trata de permitir acesso ao conteúdo. No entanto, ao resolver este problema estamos também a melhorar a usabilidade do link uma vez que passamos a permitir também que o utilizador opte por abrir o link numa nova Janela ou tab (opção "Abrir link numa nova Janela" do menu contextual).

Esta solução tem o custo de ter de desenvolver uma versão server-side da funcionalidade mas muitas vezes isso é bastante simples e justifica o investimento.

Exemplo prático

Quando desenvolvemos o sistema de tabs da Homepage do SAPO, tivemos todos estes cuidados. Para além disso, era crucial que o utilizador pudesse usar o endereço do browser para partilhar o link para determinada parte da homepage.

Assim sendo, adoptámos a seguinte estratégia...

location.hash = '/'+lnk.getAttribute('href');
//exemplo: http://www.sapo.pt/noticias => http://www.sapo.pt/#/noticias

Os links que tiveram esta atenção foram:

No entanto, não conseguimos resolver um cenário.

  1. Utilizador com javascript, partilha o endereço do browser: http://www.sapo.pt/#/noticias/tecnologia
  2. Utilizador sem javascript segue este link e vê a aba por omissão aberta e não a de tecnologia.

Nesta situação, não conseguimos que o link partilhado seja outro sem provocar um recarregamento da página. Também não conseguimos que o link partilhado funcione sem javascript porque a parte do endereço chamada "Hash" não é enviada para o servidor.

Se tiverem algumas ideias, deixem nos comentários em baixo.

Mais pormenores

Se ainda assim quiserem ler sobre esta técnica, normalmente apelidada de JavaScript Não-Obstructivo (Unobtrusive JavaScript), podem consultar os slides publicados em Abril de 2009 no Blog do Developers: JavaScript done right.

11
Jun 10
publicado por ivogomes, às 14:20 | comentar | ver comentários (0)

Além da componente de usabilidade e user experience, aqui no SAPO também damos grande valor à acessibilidade. O nosso objectivo é que todos os nossos sites e produtos sejam acessíveis, no entanto dado que há centenas deles (muitos já são bem antigos) não é fácil mudar tudo de um dia para o outro.

Felizmente, pouco a pouco vamos melhorando este aspecto e no mês passado realizámos alguns testes de acessibilidade com utilizadores com vários níveis de necessidades especiais: invisuais e doentes com paralisia cerebral (com vários graus). Normalmente quando se fala em acessibilidade na web, só se pensa nos screen-readers e nos invisuais, mas no decorrer dos testes verificámos que além disso é extremamente importante pensarmos também na destreza manual ou na forma como os utilizadores usam os vários sistemas apontadores para navegar.

Os resultados dos testes demonstraram que na maior parte das vezes estes utilizadores não procuram uma "versão acessível" do site, mesmo tendo lá o link para tal. Talvez seja por acharem que não precisam de uma versão acessível, ou por não estarem habituados a ter essa opção e por isso ignoram-na. Este facto vai de encontro com a recomendação de conceber um design universal, que funcione para todos. Esse design só tem é que se adaptar às várias circunstâncias (quer seja através do aumento do tamanho dos textos e controlos, quer seja através do aumento do contraste entre os elementos usando uma folha de estilo alternativa). Estes foram, aliás, os principais problemas encontrados nos testes com os doentes com paralisia cerebral (dificuldade de visão/pouco contraste para ler os textos; e controlos demasiado pequenos para conseguirem clicar eficientemente).

Dispositivo apontador para o GRID

Em cima: imagem de um dispositivo apontador usado pelos doentes com paralisia cerebral para controlarem o computador (usando o sistema GRID)

 

Durante as próximas semanas iremos continuar a realizar mais alguns testes. Se tiverem algum tipo de deficiência ou conheçam alguém com alguma necessidade especial e estejam disponíveis para participar, podem responder com um comentário a este post ou escrever-nos para: acessibilidade@sapo.pt

Teremos todo o gosto em receber-vos cá :)

Categorias:
18
Set 09
publicado por ivogomes, às 17:39 | comentar | ver comentários (0)

No próximo dia 22 de Setembro, em Londres vai decorrer a segunda edição da conferência sobre acessibilidade: Accessibility 2.0.

Accessibility 2.0

 

Esta é uma conferência para todos os profissionais web que querem criar aplicações e sites que funcionem para toda a gente e em todas as circunstâncias.

Os participantes são convidados a desenvolver "hacks" para tornar acessíveis os sites inacessíveis. No ano passado foi criada uma versão do YouTube mais acessível e fácil de usar (EasyYouTube) e este ano espera-se que se continuem a criar alternativas para permitir o acesso universal à informação.

Os pontos altos da conferência deste ano são:

Os bilhetes estão disponíveis por cerca de €216 (€112 para estudantes).

Categorias:
15
Set 09
publicado por ivogomes, às 16:58 | comentar | ver comentários (1)

A APDSI (Associação para a Promoção e Desenvolvimento da Sociedade da Informação) irá fazer a apresentação pública de um relatório sobre a Acessibilidade Web em Portugal, com ênfase nos serviços web das maiores empresas portuguesas.

Este trabalho, realizado pelo Grupo de Trabalho Permanente "Negócio Electrónico", pretende analisar a acessibilidade dos sitios web das 1000 maiores empresas Portuguesas em volume de negócio.

O relatório será apresentado no dia 17 de Setembro pelas 17:00 horas no Átrio da Casa do Futuro da Fundação Portuguesa das Comunicações. A inscrição é gratuita mas obrigatória, através dos contactos:

Categorias:

Autores
Pesquisar
 
Posts recentes

JavaScript não deve compr...

Acessibilidade no SAPO

Conferência: "Accessibili...

Acessibilidade Web - pont...

Arquivo

Fevereiro 2012

Setembro 2010

Julho 2010

Junho 2010

Maio 2010

Setembro 2009

Julho 2009

Junho 2009

Maio 2009

Categorias

todas as tags

Subscrever feeds