Anderson Sa

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.

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 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.

Em um belo dia, daqueles que trabalhamos bastante, eu recebo uma ligação com a seguinte indagação: “Há como ordenar as colunas de uma tabela com Javascript?” Eu prontamente respondi “Sim. É possível.”

É 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.

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

Ainda hoje eu escuto algumas pessoas comentarem: “Web Standards, Tableless… Isto tudo é moda, daqui um tempo as tabelas voltam”. Infelizmente, eu ouvi isto! E o pior é que esta pessoa é bem informada. Pelo menos eu achava que era…

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 das grandes dificuldades dos desenvolvedores web são os testes no Internet Explorer. Isto porque, dependendo da versão do IE, o site será renderizado de maneira diferente. Simples! A solução então é testar a página nas diferentes versões do IE. Porém, o Windows permite apenas uma instalação por máquina.

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.

Há alguns meses eu estou usando o DreamHost para hospedar sites. É isso mesmo! Com o DreamHost eu consigo rapidez e facilidade para hospedar, configurar e gerenciar sites sem burocracia.

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!

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