Skip Navigation ou Saltos de Navegação para Acessibilidade

Quando falamos de acessibilidade um dos principais objetivos é facilitar a navegação de usuários com deficiência visual, ou qualquer outro tipo de deficiência que dificulte a navegação. Os Skip Navigation, ou Saltos de Navegação tratam exatamente disto.

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

Acessibilidade no Real Internet Banking

O Banco Real partiu para uma iniciativa muito boa que é tornar o Real Internet Banking acessível. Eu tive o prazer de participar do projeto, da especificação até a implantação. É! Madrugadas longas… mas valeram a pena.

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.

Formulário acessível, mas e os estilos?

Eu estou com um projeto aqui na empresa para tornar o site mais acessível. A princípio não será totalmente acessível, pois a estratégia adotada é fazer a adequação em fases. Neste momento, a principal mudança será nos formulários.

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

Uso correto do ALT em imagens

Normalmente, quando falamos em Acessibilidade, a primeira coisa que pensamos é usar a tag alt nas imagens que colocamos no HTML. Porém, algo tão simples requer alguns cuidados na aplicação e principalmente usar a tag conforme sua função.

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