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.

Usando includes em arquivos .shtml

Eu acabei de ler o post Isso é coisa básica do Diego Eis, onde ele comenta que a maioria dos desenvolvedores web não usam includes. E isto é verdade.

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 trecho de código usado para chamar o include seja 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.