Category ArchiveAcessibilidade
Acessibilidade 26 Jun 2008 07:44 am
Accesskeys: Atalhos do teclado em uma página na web
Sabe os atalhos do teclado que adoramos usar nos nossos programas do dia a dia?
ALT+F4 pra fechar qualquer porcaria, CTRL+TAB para mudar de aba, etc…
Pois é, o HTML também possue suporte a essa funcionalidade, e é mais simples do que muito desenvolvedor imagina.
Onde poderiamos usar os atalhos do teclado em uma página web?
Ora, para pular para um conteúdo específico por exemplo, ou para o menu, ou qualquer parte do HTML, ou carregar outra página, o que pode ser muito útil em páginas ou sistemas na web que são acessados muitas vezes durante o dia, com várias rotinas de repetição e navegação.
Poderiamos por exemplo usar um ALT+C para pular para o conteúdo, ou ainda, ALT+L para ir para a lateral, as possibilidades são muitas, depende apenas do projeto que estamos desenvolvendo.
E por último porém não menos importante, atalhos ajudam pessoas com problemas de mobilidade que tem dificuldade em usar o mouse a chegar no conteúdo desejado, excelente! 
Vamos começar então a brincar um pouco com o seguinte código:
<body>
<ul id=’menu’>
<li>
<a href=”inicial.php” accesskey=”h”>Inicial</a>
<a href=”vendas.php” accesskey=”0″>Vendas</a>
<a href=”clientes.php” accesskey=”1″>Clientes</a>
<a href=”contato.php” accesskey=”2″>Contato</a>
<a href=”acessibilidade.php” accesskey=”k”>Acessibilidade</a>
<a href=”#atalho_conteudo” accesskey=”s”>Ir para o conteudo</a>
</li>
&/ul>
<div id=”conteudo”>
<a name=”atalho_conteudo”></a>
seu conteudo aqui
</div>
</body>
O que basicamente acontece no código acima.
Em um PC se você pressionar ALT+H irá para a página inicial, em um MAC aperte CTRL+H e terá o mesmo comportamento.
Da mesma forma se apertar ALT+0 irá para a página de vendas, ALT+1 para Clientes e ALT+2 para Contato.
Ainda, se pressionar ALT+K irá para uma página de acessibilidade, algo importante em páginas web e todas deveriam ter uma e a maioria das que fiz no passado recente não tem, mea culpa.
Ali voce poderia por além da política de acessibilidade do site, as teclas de atalho disponíveis no mesmo para facilitar a vida de quem as usa.
E por fim, se pressionar ALT+S irá pular para o conteúdo.
Até onde sei não existe nenhum padrão a ser utilizado nessas teclas de atalho, ou seja, um ALT+H não necessariamente tem que ir para a “home”.
Porém, mesmo não existindo um padrão documentado e aceito por todos, pela minha experiência de trabalho tanto na Itália, quanto agora no Reino Unido vejo que uma prática comum é utilizar os atalhos da seguinte forma:
- H para ir para inicial
- S para pular para o conteudo principal
- F para pular para o rodape
- N para pular para o menu principal
- K para ir a pagina de acessibilidade
- Numeros de 0 a 9 para o menu de navegacao
Repito, não é um padrão estabelecido, mas é muito utilizado, portanto sintam-se livres para fazer como quiserem, e se quiserem seguir a recomendação, melhor ainda
PHP & Acessibilidade 10 Oct 2007 07:46 am
O que é um favicon?
Eu explico rapidamente, nada mais é do que esse ícone que aparece ao lado esquerdo do endereço dos sites na barra de endereços, e nas abas dos navegadores ao lado do nome do site, claro nos navegadores mais modernos.
Essa imagem é um ícone, logo de extensão .ico, a qual deve ser inserida no diretório raiz do domínio, e o navegador automaticamente detecta o mesmo.
Este arquivo deve obrigatoriamente se chamar favicon!
Caso queira ajudar o navegador nesse caminho pode inserir o seguinte código no seu HTML, dentro da tag <HEAD>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
Normalmente usa-se o logotipo como favicon, porém nem sempre, como ele aparece nas abas dos navegadores servem como ferramenta de auxilio ao usuário para identificar cada uma delas.
Caso não tenha idéia de como gerar um ícone, ou tenha preguiça de abrir um programa de edição somente para isso, essa semana brinquei bastante com PHP, e como me veio a idéia de escrever sobre o favicon, pensei porque não criar um gerador de ícones?
Bom esta ai, para facilitar o trabalho de vocês:
Favicon Generator, em inglês pra ficar bonito 
Quando você for fazer o download da imagem, clicando sobre ela em salva imagem como, vai aparecer a mesma com extensão .png no final.
Pode cancelar todo o nome temporário que aparece e salve apenas como favicon.ico e coloque na raiz de seu site.
Praticamente é um PHP que pega um GIF/JPG/PNG que vocês enviam e o transforme em um ícone de dimensões 16×16 exatamente o que é necessário para usar como favicon.
Este não é nenhum código avançado ou que exija muitos conhecidos de PHP, mas caso tenha interesse na mesma pagina pode baixar o código fonte comentado claro
Javascript & Acessibilidade 03 Aug 2007 04:35 am
Acessibilidade? Javascript não-obstrutivo? Pra quê?
Algo que gosto sempre de abordar aqui é Javascript não-obstrutivo, afinal o cliente perde ao não conseguir entrar em um site que não se preocupa com acessibilidade, mas quem perde muito mais é a empresa, o site.
Por pura e simples curiosidade resolvi hoje acessar o site BlogBlogs, para quem não conhece é simplesmente o maior diretório de blogs do Brasil, está entre os 50 mil sites mais acessados no mundo na lista do Technorati.
E sejamos sinceros é um site agradável, bem elaborado, bonito, cheio de efeitos visuais com javascript, foi pensando nisso que resolvi acessá-lo com javascript desabilitado.
O formulário login do usuário não aparece de cara, tem apenas um link para clicar login, e um javascript faz o div oculto aparecer como mágica diante dos nossos olhos, lindo, porém, com javascript desabilitado, nada! simplesmente me proibem de acessar se não tiver o javascript, erro grave de acessibilidade.
Ai lembrei que o Technorati também possui uma janelinha que aparece bonitinha gerada por javascript para logar, fui testar com javascript desativado e me levou para uma página separada, sem o efeito bonitinho mas acessível.
Continuando com o pensamento de acessar sites conhecidos no meio dos blogueiros continuei, fui ao Rec6, para quem não conhece é um agregador de notícias, eu posto algo em meu blog e posso colocar lá para ser votado como relevante ou não, reparem que abaixo de cada post meu, tem um quadradinho escrito X pontos, e subir, clicando em subir ele aumenta os pontos, e assim esse artigo receberá mais destaque no portal rec6, logo, as pessoas todos os dias tem notícias frescas, com relevância determinada pelos próprios usuários, muito bom, funciona legal mesmo o serviço, mas ai vem o porém:
O subir dentro do site da Rec6 não funciona quando clico com javascript desabilitado, simplesmente não faz nada, erro grave! E fora do site deles, ao acessar meu site o widget deles para votar simplesmente não aparece, neste caso até normal pois é incluído no meu site, como todo link patrocinado também é, e a maioria dos widgets de qualquer serviço, via javascript, por ser a forma mais fácil e rápida de fornecer os widgets e publicidade aos usuários, mesmo aqueles com pouco conhecimento de web, e neste caso não atrapalha nada para o usuário, se ele está no meu site é para ler os artigos, votar seria um plus, algo a mais, neste caso realmente desnecessário, assim como a publicidade.
Resumindo, atrapalhar o login ao site(BlogBlogs) e impedir que a ferramenta que é a chave da existência do site(rec6) sejam inacessíveis sem javascript habilitado, repito, é erro grave de acessibilidade.
Por essas e outras que embora tenham evoluído muito os sites nacionais tem que melhorar ainda mais, se portais como esses que deveriam ser referência em boas práticas de programação não se preocupam com acessibilidade, como cobrar dos demais sites? como cobrar que o seu Joaquim da padaria da esquina se preocupe com isso se nem nosso próprio meio se preocupa?
Temos que refletir de forma séria, pois o assunto é sério, mas infelizmente nem todos pensam assim.
Usabilidade & Acessibilidade 01 Aug 2007 10:22 am
Analisador de contraste de cores
Lendo o blog do Cristian Trentin vi uma ferramenta muito interessante, um analisador de contraste de cores.
Mas o que faz um analisador de contraste de cores?
Serve para analisar se a diferença entre as cores, o contraste entre o plano de fundo e primeiro plano, oferece boas condições de visibilidade.
De repente o que tem boa visibilidade para um, pode ser diferente para outra pessoa, principalmente deficientes visuais, e uma das grandes tiradas dessa ferramenta é justamente a possibilidade de fazer simulações de determinadas condições visuais tais como a Protanopia, Deuteranopia, Tritanopia e Catarata.
Sem entrar em detalhes são doenças que afetam os olhos causando deficiência visual e por consequência a dificuldade de ler o conteúdo de sites com cores mal escolhidas.
O nome do programa é Colour Contrast Analyser.
A pagina da WAT-C desenvolvedora do programa é http://www.wat-c.org
Alias a WAT-C(Web Accessibility Tools Consortium) é um consórcio que desenvolve ferramentas para desenvolvedores de site que focam a facilitar testes de acessibilidade, merece grande destaque essa iniciativa.
A pagina especifica sobre o analisador de contraste de cores é http://www.wat-c.org/tools/CCA/1.1
No blog do Maujor existe a tradução de um excelente tutorial sobre essa ferramenta.
Fiz os testes e meu blog passou em todos, um unico porém foi no teste que simulava cataratas, que embaça toda a tela, mesmo assim esta legivel, porém com alguma dificuldade, um tamanho maior da fonte facilitaria, e está sob estudo.
Desenvolvimento & Usabilidade & Acessibilidade & Avaliação 11 Jul 2007 11:27 am
Sistemas de busca e frames
Que os frames são parte da herança da internet dita 1.0, que seu utilizo massivo como era feito muitos anos atrás é desaconselhado hoje, acho que a maioria dos fazedores de site já sabe, mas porque é desaconselhado?
A Google, considera o frame “fora dos modelos conceituais da web atual”, declarando no seu centro de assistência ao “Fazedor de Site” :D:
“Se nosso motor de busca determina que a busca de um usuário encontra resultados em uma página na sua totalidade, a página inteira é retornada, ainda se com frames; porém, se a busca encontra resultado no interno de um único frame da página, devolvemos apenas o frame em questão, e não toda a página.”
Portanto acho que podemos entender melhor agora o porquê é desaconselhado, não creio que seja do interesse de alguém que um visitante abra um pedaço apenas da sua página, muitas vezes sem ter o que fazer a partir dali, perdido esse visitante é realmente perdido, vai embora, provavelmente não volta mais.
Mas vejam, desaconselhado não é proibido, o iframe principalmente ainda pode ser útil em algumas situações, como upload de arquivos de forma assíncrona(gmail usa), mas utilizar frames para montar o layout, exibir conteúdo, a menos que queiram perder visitas é altamente desaconselhado.
Mas afinal, alguém ainda usa frames?
