Os Skip Navigation são links com âncoras inseridos nas páginas que servem como atalhos para facilitar a localização de um determinado conteúdo através do teclado. Para usuários que navegam com o mouse isto não é relevante, porém para um deficiente visual usando um leitor de tela, esta técnica ofecere uma alternativa ágil para chegar ao conteúdo desejado.

Por exemplo, imagine uma página com um menu superior com cerca de 30 links e logo abaixo o conteúdo principal. Navegando com o teclado usando a tecla tab será necessário passar por todos os links até chegar na informação desejada. A solução é simples, basta inserir um link antes do menu apontando para um elemento da página onde está o conteúdo principal.

Skip Navigation: Exemplo 1 (Teste em um bom navegador. Firefox por exemplo.)

Bug do Skip Navigation no Internet Explorer

Se você testou o Exemplo 1 usando o Internet Explorer o resultado não foi o esperado. Ao acessar o link o foco vai para o elemento desejado, porém ao usar a tecla tab novamente o foco permanece no link original. Na verdade o foco deveria ir para o próximo elemento da página que neste caso é o link “Ir Para o Menu”. Para resolver o problema basta definir uma largura para o elemento que será referenciado na âncora.

Skip Navigation: Exemplo 2 (Funciona no Internet Explorer)

Skip navigation No Real Internet Banking

No Real Internet Banking o recurso Skip Navigation foi usado em páginas de menus. Como estas telas de menus possuem uma lista de transações e subtransações, o uso desta técnica economiza tempo do usuário que está navegando com um leitor de tela e deixa a navegação mais simples.

No próximo post eu irei mostrar um menu construído com listas não ordenadas em conjunto com o recurso Skip Navigation.

Referências

WebAIM: "Skip Navigation" Links
JimThatcher - kip Navigation

A especificação para as adequações no código foi feita com base em uma análise realizada pela consultoria Fhios. Com o relatório da Fhios em mãos foi definido um padrão de codificação com base nos padrões web dando a devida atenção ao funcionamento no Virtual Vision.

Por que adequações? O foco do projeto era realizar modificações no código para permitir o acesso de deficientes visuais, e não a reconstrução das telas. Esta linha foi adotada para não inviabilizar o projeto. Afinal, são aproximadamente 800 páginas. A grande maioria são de arquivos transacionais que requerem atenção especial, pois qualquer problema pode representar um dano a imagem do banco.

Principais adequações do código

• Definição do título (<TITLE>) em todas as páginas
• Aplicação do atributo alt nas imagens
• Inclusão do atributo title nos links
• Associação da tag label aos campos de formulários
• Criação das tags <fieldset> e <legend>
• Inclusão das tags <caption>, <th>, <thead> e <tbody> nas tabelas
• Substituição da tag <b> por <strong> e <i> por <em>
• Reconstrução dos menus usando listas não ordenadas
• Aplicação de skip navigations para facilitar a navegação

Nos próximos posts eu irei detalhar melhor os pontos acima e comentar sobre os casos específicos e soluções encontradas.

Um detalhe que eu creio que a maioria não conhece é a existência do .shtml. Um arquivo .shtml é um arquivo .html que pode usar o recurso SSI (Server Side Includes). Com esta extensão não é necessário que o seu site seja feito com ASP, PHP ou JSP para usufruir dos includes. Basta colocar a extensão .shtml no arquivo e executa-lo no navegador usando um servidor local. Exemplo: http://localhost/arquivo.shtml

Chamando um include

Exemplos para chamar um include:

<!–#include file="menu.inc" –>

ou

<!–#include virtual="/includes/menu.inc" –>

Prefira sempre a instrução virtual, assim o path do arquivo será relativo ao diretório raiz do site. Isto garante que o código para chamar o include será sempre o mesmo em qualquer documento do site.

Para maiores informações visite a página Server Side Includes | using SSI to keep your pages up to date do site HTMLSource.

É inegável que a funcionalidade é muito boa. Seria chato e demorado fazer uma requisição para o servidor simplesmente para reordenar uma coluna específica. Ainda mais se pensarmos em milhares de acessos simultâneos.

No site DHTML Crossbrowser Fácil — Um Guia Rápido para Desenvolvedores (leitura recomendada) que o Elcio criou, há um exemplo para classificar colunas de uma tabela usando Javascript.

Porém a tabela que eu precisava ordenar é mais complexa. Trata-se de uma listagem com colunas numéricas, alfanuméricas e ainda por cima, havia uma coluna com radiobuttons. Para a “minha salvação” encontrei a página sorttable: Make all your tables sortable no site kryogenix.org.

A biblioteca é bem interessante. Com uma instalação simples é possível ordenar vários tipos de dados, indicar quais colunas não devem ser classificadas e além disso, definir o rodapé da tabela. Assim é possível não mexer nos dados que estão no fim da tabela.

Pesquisando na internet, eu encontrei alguns posts sobre formulários acessíveis. Porém, no meu caso eu preciso aplicar as tags <fieldset>, <legend> e <label> em um projeto gráfico já estabelecido, e além disso, manter o restante da codificação da página como está.

Um grande problema que eu encontrei, foi na definição de estilos para a legenda. Isto porque há diferenças de posicionamento da <legend> entre os IEs e Firefox. O artigo Legends of style no site Tyssen Design resolveu o meu problema.

Basicamente consiste em colocar um <span>, ou um <div> dentro da tag <legend> e aplicar os estilos nestes elementos. Veja os exemplos para formatar a legenda que o John Faulds disponibilizou. Com isto, eu consigo adaptar as páginas existentes.

Posts sobre formulários acessíveis

SERPRO - Acessibilidade na web - Formulários
A List Apart: Articles: Prettier Accessible Forms
WebAIM: Creating Accessible Forms
Tutorial CSS - Formulários acessíveis - Parte 1

Bom! Eu creio que as pessoas acabam cometendo alguns deslizes por falta de informação, ou porque estão agarradas a antigos paradigmas. Em fim, a idéia não é crucificar ninguém, mas mostrar as vantagens que os padrões trazem para a “nossa vida” e para o nosso bolso. Este último principalmente!

Vantagens dos Web Standards

Site acessível em diferentes user-agents

Abranger o máximo de dispositivos é fundamental para quem deseja viabilizar um site na internet. Não é viável excluir alguns usuários do site, devido ao navegador que ele usa, por exemplo.

Melhor indexação dos sites de busca

Aprimorar a colocação nos sites de busca é essencial, se levarmos em conta a quantidade de páginas que encontramos atualmente.

Código mais limpo e fácil manutenção

Tempo é dinheiro. Nem sempre quem implementa o site é a mesma pessoa que cuidará das manutenções. Se a codificação é mais simples, menor será o tempo de análise.

Melhora a navegabilidade de usuários com deficiências

Um site construído com base nos Web Standards, prioriza o conteúdo organizando o mesmo de forma semântica. Ou seja, mesmo que a formatação gráfica seja desabilitada, o conteúdo continua fazendo sentido. Leitores de tela por exemplo, como o JAWS, o Virtual Vision fornecem atalhos que permitem classificar as informações que estão em listas(<UL>, <LI>), ou que foram definidas como títulos (<H1>, <H2>) .

Facilidade para personalizações do layout

Usando CSS é possível diferenciar o layout para determinados segmentos de clientes, sem maiores dores de cabeça. Ou até mesmo, remodelar o visual. Um exemplo clássico é o site css Zen Garden

Consequências de não usar

Não seguir os Web Standards quer dizer restringir o acesso. Imagine um usuário navegando com o Firefox tentando comprar um produto que a muito tempo deseja, porém o site de venda só funciona no IE. No mínimo frustrante! Com certeza, este usuário irá encontrar outro site com melhores condições de atendê-lo.
Isto vale não apenas para diferentes browsers, mas outros dispositivos que acessam a internet e softwares que auxiliam pessoas com deficiências.

Reflexão

Será que alguém mais acha que seguir os padrões é uma “modinha”? Caso sim, é só dizer o porque. No entanto, vale a pena pesquisar!

Uma alternativa é usar as versões standalone do Internet Explorer disponíveis no evolt.og. Funcionava bem até o lançamento do Internet Explorer 7. O problema acontece, pois quando a versão 7 é instalada, a versão standalone do IE 6 passa a usar a engine do Internet Explorer 7. Mais detalhes no site Revolução Etc no post O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP.

Como rodar o Internet Explorer 6 e 7 na mesma máquina?

Uma solução bacana pode ser encontrada no link Install multiple versions of IE on your PC. Apenas baixe e instale o arquivo do link “Download Multiple IE installer”. Funciona direitinho. Embora, existam alguns bugs dependendo da versão do IE, os testes não são prejudicados.

Eu tinha uma hospedagem em um destes provedores aqui no Brasil. Além do valor alto, a banda era muito limitada, o espaço era pouco e para instalar qualquer componente era aquela demora.

Dá uma olhada no Plano L1. Isto porque é o mais básico.

• Criação de domínios e subdomínios com contas de FTP
• 200 GB de espaço
• 2 Terabytes de transferência mensal
• PHP e MySQL
• Painel de controle (em inglês)
• Possibilidade de criar mais de 3000 contas de email
• Sistemas de estatísticas
• Instalações padrões do Wordpress, ZenCart, Joomla e phpBB
• Streamming Quicktime

Desconto no DreamHost

Usando o cupom ANDERSON65L1 você ganha:

• 65% de desconto no Plano L1 Anual. De $119.40 por $41.79

Fazendo as contas, por mês sai $3.50.

Como usar o Cupom?

1. No site da DreamHost, escolha o Plano L1 Anual.
2. Informe os dados referente ao seu domínio.
3. Coloque suas informações pessoais.
4. No final da página preencha o campo “Promo Code or email of who referred you:” com o cupom ANDERSON65L1 para economizar $78.00.
5. Depois clique no botão “Continue to Secure Payment…”.
6. Na próxima tela informe os dados do seu cartão de crédito internacional.

Em fim, não é tão complicado. Depois disso é só hospedar os sites de clientes e amigos sem burocracia e ainda ganhar dinheiro!

Um ponto importante é saber que a função da tag alt não é mostrar um Tooltip quando o mouse passa sobre a imagem, mas sim exibir um texto alternativo quando o navegador não exibe imagens, mostrar um conteúdo caso a imagem não carregue ou servir como referência para deficientes visuais.

Acessibilidade

Agora, o que colocar na tag alt? É interessante lembrar que todas as imagens devem conter este atributo, porém em algumas situações parece não ser relevante o seu uso. Como por exemplo, imagens que montam o layout, ou servem apenas para ilustrar, não agregando informação ao conteúdo. Nestes casos use alt=”".

Não existe uma regra que defina qual conteúdo colocar na tag alt. O principal ponto é analisar a FUNÇÃO da imagem e o CONTEÚDO da página. Não seja redundante, se houver uma imagem como uma legenda, não replique este texto na tag alt. Imagine como seria chato para um deficiente visual escutar o mesmo texto duas vezes.

Quando colocamos uma imagem dentro de um link, isto quer dizer que há uma FUNÇÃO. Nesta situação deve ser levado em conta, qual função será executada. Em certos casos podem haver várias imagens iguais em uma página, porém a FUNÇÃO pode ser diferente. Por exemplo, alguns ícones iguais, com links para salvar arquivos diferentes. Neste caso, colocar no alt, o nome do arquivo que será salvo é uma boa alternativa para distinguir qual acão será executada naquele elemento.

Como não é uma regra, a melhor solução é tentar se colocar no lugar de quem está navegando na página e simular as situações em que o conteúdo do alt será exibido no lugar da imagem.

Uma matéria bem completa, inclusive com exemplos práticos pode ser encontrada no site Web Accessibility in Mind. Leitura recomendada: Appropriate use of alternative text.

Referências

Appropriate use of alternative text
W3C - How to specify alternate text
ZeroSeis: Uso correto de texto alternativo em imagens