Arquivo da categoria: Javascript

Acrescentando mais acessibilidade aos seus sites com CSS e XHTML.

Olá amigos leitores, hoje, após uma rápida olhada nos meus feeds, um assunto interessante me chamou a atenção o assunto tratava sobre uma propriedade do CSS muito utilizada na técnica de Image Replacement a propriedade display:none o artigo real sobre o assunto tem o nome de “Hiding with CSS: Problems and Solutions” (tradução: Esconder com CSS: Problemas e Soluções). Não vou traduzir o artigo neste poste apenas vou fazer uma pequena reflexão sobre a solução e o problema que me chamou a atenção, então vamos ao que interessa.

O Problema em esconder elementos (X)HTML com a propriedade display:none da CSS.

No artigo o autor diz que o problema em esconder um elemento com CSS é diretamente ligado a acessibilidade que o site pode ter. Pois quando usamos a propriedade:

elemento {display:none}

Estamos dizendo ao navegador que ele não deve apresentar esse elemento  ao usuário, o que de uma forma visual este é o objetivo da propriedade, porém, para pessoas com deficiência física e que precisam utilizar leitores de tela para acessarem o site pode ocorrer um problema, pois o leitor não irá ler nem falar  a propriedade com display:none.

Ok até ai blz. Agora vou aprensentar uma coisa interessante sobre acessibilidade que costumo colocar em meus projetos. Trata-se de um menu escondido que fica disposto apenas para fins de acessibilidade. Eu crio um menu normalmente com as opções para que o usuário deficiente possa acessar as seções do site usando o teclado, ficando algo como:

<div id=”atalhosdeacessibilidade”>

<p>Menu, acesse o conteúdo do site utilizando o menu abaixo para facilitar sua navegação.</p>
<a href=”#conteudoPrincipal” accesskey=”1″ tabindex=”155″>ir para conteúdo</a>,
<a href=”#menu” accesskey=”2″ tabindex=”160″>ir para menu</a>,
<a href=”#conteudoInformativo” accesskey=”3″ tabindex=”165″>ir para conteúdo informativo</a>
</div>

E mando esconder com a propriedade display:none

#atalhosdeacessibilidade {display:none}

E voylá! Temos um menu especial para usuários deficientes, e consequêntemente um site mais acessível. Bom tenho que deixar claro que a idéia inicial deste menu não foi de minha autoria e sim andei copiando do meu Prof. e Chefe o Thiago TPC (Twitter – http://twitter.com/thiagotpc) 😛 .

Agora depois de ler o artigo sobre o problema de esconder o elemento com a regra CSS display:none é que o programa leitor de tela não irá pronunciar o paragrafo dentro da DIV #atalhosdeacessibilidade.

A solução para esconder um elemento na tela de forma que possa ser lido por um programa leitor de tela.

No artigo o autor detalhe que ao invés de usar a propriedade display:none para não apresentar um determinado elemento na tela sem deixar a acessibilidade de lado é usar  a propriedade position:absolute e movimentar o elemento para fora da viewport do navegador. Ficando algo como:

#atalhosdeacessibilidade { position:absolute; left:-9999px; }

Assim desta forma o programa leitor de tela irá encontrar a DIV e irá ler o parágrafo dentro desta para o usuário e assim ele saberá sobre o recurso de acessibilidade disponível no site.

Bom é isso ai, galera, axo que isso sirva pra acrescentar conhecimento a vocês para que não esquecam dos usuários deficientes que também querem acessar o os sites por nós desenvolvidos.

Dica: para saber sempre sobre novos POSTS no meu blog me sigam no Twitter 🙂
http://twitter.com/anestesya

Té a próxima.

Anúncios

4 Comentários

Arquivado em css, Javascript, xhtml

Workaround(remendo) para o bug do jQuery fonte ClearType no IE´cas da vida

Hoje no trabalho me deparei com um novo bug (novo pra min neh =P ),  um estranho bug que faz com que a fonte do texto de um elemento fique zuada no IEca7. ~

Fontes Cleartype.

Cleartype é um tipo de fonte usada no Windows e IE7 que implementa uma técnica especifica de render chamada subpixel rendering para aumentar a resolução de fontes renderizadas pelos monitores de LCD, legal né, bom para os windows users da vida!

jQuery, Cleartypes IE7 e o bug.

Bom agora que você sabe algo sobre as fontes, vou explicar o que acontece com elas e o javascript(jQuery). Quando usamos a função .fadeIn()/.fadeOut()/.fadeTo() do jQuery para criar um efeito de esmaecimento em algum elemento ou nó do XHTML, essas funções da jQuery fazem uma chamada a uma função do núcleo de bibliotecas do javascript especifica do navegador em uso, no caso aqui, o MSIE7, a função do núcleo javascript chamada é setElementOpacity que por sua vez cria um filtro, para gerar uma opacidade em CSS  usando aquele filtro da Microsoft(DXImageTransform.Alpha ) o mesmo que tenta fazer o remendo do PNG no IEca6, ai já viu né esse filtro ai é “pobrema!” esse filtro faz com que o navegar dispense a fonte Cleartype e use a fonte padrão após o efeito e isso zua com a fonte.  Bom se você não entendeu o bug, leia na integra essa matéria que você concerteza irá entender. Veja um exemplo do bug aqui.

O remendo(workaround).

O remendo para este problema são 2:

O primeiro e mais simples é definir uma cor de fundo para o elemento que recebe o .fadeIn/Out/To() do jQuery.

background-color:#fff;

O segundo é um pouco mais complicado e faz parte da resolução do problema em nivel de javascript, consistem em remover o atributo “filter” do elemento, assim:

document.getElementById('elemento').style.removeAttribute('filter')

Um programador jQuery Benjamin Michael Novakovic criou uma função que pode ser usada para resolver o problema e o com as funções fadeIn() e fadeOut(), já um outro programador Jonathan fez o resto do serviço e implementou também a função fadeTo().

jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, speed, function() {
if (to == 1 && jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

Bom é isso ai espero que ajude você com esse problema.

4 Comentários

Arquivado em bugs, Javascript, jQuery

Desvendando os segredos do uso das aspas em strings Javascript.

Recentemente, li em um livro ( Iniciando em Javascript 1.5 exemplos práticos Adriane K., Kathie K.), uma coisa que eu sempre me perguntava, mas nunca procurava por sua resposta.

Qual a diferênça entre o uso de aspas simples ( ‘ ‘ ) e de aspas duplas ( ” ” )  para representar uma string em javascript?

Qual a diferênça?

var filhos = ” João tem 2 filhos.”;

var filhos2 = ‘ João tem 2 filhos.’;

Bom, neste caso não à diferença alguma. Mas, imagine que, você queira repasar uma frase de um outro texto dentro desta string?

Hum, confuso ?

Então veja.

var filhos3 = ‘ João tem 2 filhos “pedrinho e zézinho, são meus filhos”.. ‘;

Percebeu agora porque uma string pode ser declarada entre aspas simples ou duplas?

O quê ainda não entendeu?

Ok, mais uma chance pra você!

var banner_dinamico = ” .banner { background-color:white, font-family: ‘Times New Roman’ }”;

Certo, se você não conseguiu idenficar, vou explicar.

A sacada é a seguinte, se você precisar usar aspas simples ( ‘ ‘ ) dentro de uma string em javascript, você pode declarar esta string com aspas duplas( ” ” ), assim o interpretador javascript vai interpretar as aspas simples ( ‘ ‘ ) como sendo parte da string, do mesmo modo pode-se seguir este raciocinio para declarar strings que necessitem o uso de aspas duplas ( ” ” ) declarando-as entre aspas simples (‘ ‘ ). Legal né!

Ótimo, mas se eu precisa-se usar os dois tipos em uma única string, como ficaria?

Simples, ai entra o uso do caracter especial ( \ ) de javascript chamado caracter de escape ( \ ), ficando assim então.

var filhos4 = ” João tem 2 filhos,\”pedrinho e zézinho, são meus filhos\”..Ext.getCmp(‘filhos4’); “;

E é isso ai então, fica mais essa dica ai pra vocês.

3 Comentários

Arquivado em Javascript