Agora é oficial: o C.E.S.A.R é o melhor Instituto de Ciência e Tecnologia do Brasil. A instituição foi a grande vencedora do Prêmio Finep de Inovação Tecnológica, edição 2010, na categoria Instituição de Ciência e Tecnologia. A final da premiação aconteceu nesta segunda-feira(29.11.2010) na CNI (Confederação Nacional da Indústria), em Brasília, contando com as presenças do ministro da Ciência e Tecnologia, Sergio Rezende, e do presidente da FINEP, Luis Fernandes. Esta é a segunda vez que o C.E.S.A.R conquista o prêmio, em 2004 o C.E.S.A.R tinha ganho prêmio na categoria mais inovadora instituição de pesquisa do Brasil.

“Este prêmio é um reconhecimento de que estamos no caminho certo, sempre buscando projetos desafiadores que levam inovação para a sociedade. É a materialização de um empreendimento inovador e de sucesso, mais uma vez reconhecido nacionalmente. Dedicamos esta conquista aos mais de 400 profissionais que formam o C.E.S.A.R e, em especial, àqueles que idealizaram este projeto há quase 15 anos”, comemora o superintendente do C.E.S.A.R Sergio Cavalcante.

Luis Antonio Elias, secretário executivo do MCT, entrega troféu a Silvio Meira e Sergio Cavalvante, cientista chefe e superintendente do C.E.S.A.R, vencedor na categoria ICT.

Veja as fotos da entrega do Prêmio registradas pela Finep:

O C.E.S.A.R ganhou o direito de disputar a etapa nacional por ter conquistado o prêmio como a melhor Instituição da Região Nordeste na semana passada. Na mesma categoria em que o C.E.S.A.R concorreu, também disputaram IMAmt-Instituto matogrossense do Algodão (MT), Norte-Instituto CERTI Amazônia (AM), Departamento de Inovação Tecnológica da Universidade Federal de Santa Catarina (SC), Fundação Centro Tecnológico de Minas Gerais (MG).

Os cinco vencedores nacionais receberam troféus e também serão contemplados com recursos do programa de Subvenção Econômica, que variam de R$ 120 mil a R$ 2 milhões, dependendo da categoria premiada. No caso do C.E.S.A.R, o prêmio total será de R$ 1 milhão para aplicar em projetos de subvenção.

Parabéns a todos por mais essa conquista! para frente e avante!

Zebrar tabelas é um recurso amplamente utilizado para facilitar a leitura em documentos, além de dar um charme no projeto.

Para pintar alternadamente as linhas de uma tabela com Javascript na sintaxe nativa, teríamos que fazer um algoritmo para identificar se o elemento é par ou ímpar, e assim ir dando formatação as linhas.

O jQuery possui uma gama enorme de seletores próprios, que praticamente nos possibilita o controle total da interface. Vamos usar um desses seletores para identificar quais elementos <tr> da interface são pares, e atribuir cor a esses elementos.

Para este exercício, vamos criar uma estrutura HTML com uma tabela e uma classe CSS que vamos adicionar as linhas pares, e por fim o código JavaScript que será escrito com a sintaxe da biblioteca jQuery.

CSS

Caso você queira deixar as coisas mais bonitas e elegantes, acrescente mais regras aqui no CSS.

.par{background:#eee}

HTML

Uma estrutura de tabela bem simples e sem semântica, caso você vá aplicar isso ao seu projeto, veja a possibilidade de escrever a tabela o mais semântico possível, utilizando as tags thead, tbody etc…

<table>
    <tr>
        <td>elemento 1 da primeira linha</td>
        <td>elemento 2 da primeira linha</td>
        <td>elemento 3 da primeira linha</td>
        <td>elemento 4 da primeira linha</td>
    </tr>
    <tr>
    <td>elemento 1 da segunda linha</td>
        <td>elemento 2 da segunda linha</td>
        <td>elemento 3 da segunda linha</td>
        <td>elemento 4 da segunda linha</td>
    </tr>
    <tr>
        <td>elemento 1 da terceira linha</td>
        <td>elemento 2 da terceira linha</td>
        <td>elemento 3 da terceira linha</td>
        <td>elemento 4 da terceira linha</td>
    </tr>
    <tr>
        <td>elemento 1 da quarta linha</td>
        <td>elemento 2 da quarta linha</td>
        <td>elemento 3 da quarta linha</td>
        <td>elemento 4 da quarta linha</td>
    </tr>
</table>

jQuery

Agora vamos dar ação com o código javaScript…

$(document).ready(function(){

    $('table tr:even').addClass('par');

});

Na linha 4 utilizamos o seletor “even” que é responsável por identificar quais são os elementos pares que ficam na estrutura do DOM, e adicionamos a classe “par”. Essa técnica funciona em todos os browsers que tem suporte ao jQuery.

Caso você queira modificar os elementos impar, utilize no lugar do even o “odd”. Esses seletores servem não somente para elementos table, mas funcionam bem em listas, divs, parágrafos e vários outros elementos.

Como podemos ver, com a sintaxe do jQuery não passamos de uma linha para fazer esse efeito tão gracioso que é amplamente utilizado em projetos.

Não deixe de conhecer a documentação oficial do jQuery para seletores, tem a descrição destes e de vários outros seletores que deixam a nossa vida mais simples!

Algumas explicações prévias:

Ha algum tempo atrás, publiquei um post sobre como fazer um menu com jQuery, utilizando um método de evento do mouse (hover). Usaremos o mesmo método, mas de uma forma um pouco diferente. Por padrão o metodo .over(), espera duas funções como argumentos, uma para quando o mouse estiver em cima (over) e outra quando o mouse sair do ponto (out).  Neste menu utilizaremos o encadeamento de métodos do jQuery e solucionaremos com apenas uma função, utilizando o sliderToggle().

HTML

A estrutura HTML é bem simples. É uma <ul> com seus nós filhos <li>´s. Filiaremos os sub-menus, que também são estrutura de <ul> e <li>,  para fazer o nosso menu com sub-nível. O interessante é aprender o conceito, depois disto você poderá fazer a estrutura de várias formas e manipular DOM através do jQuery.

<ul>
    <li><a href='#'>Item um</a>
        <ul>
            <li><a href='#'>Sub-Item um / um</a></li>
            <li><a href='#'>Sub-Item um / dois</a></li>
            <li><a href='#'>Sub-Item um / três</a></li>
            <li><a href='#'>Sub-Item um / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item dois</a>
        <ul>
            <li><a href='#'>Sub-Item dois / um</a></li>
            <li><a href='#'>Sub-Item dois / dois</a></li>
            <li><a href='#'>Sub-Item dois / três</a></li>
            <li><a href='#'>Sub-Item dois / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item três</a>
        <ul>
            <li><a href='#'>Sub-Item três / um</a></li>
            <li><a href='#'>Sub-Item três / dois</a></li>
            <li><a href='#'>Sub-Item três / três</a></li>
            <li><a href='#'>Sub-Item três / quatro</a></li>
        </ul>
    </li>
   <li><a href='#'>Item quatro</a>
       <ul>
           <li><a href='#'>Sub-Item quatro / um</a></li>
           <li><a href='#'>Sub-Item quatro / dois</a></li>
           <li><a href='#'>Sub-Item quatro / três</a></li>
           <li><a href='#'>Sub-Item quatro / quatro</a></li>
       </ul>
   </li>
</ul>

O comportamento visual desta estrutura pode e deve ser feito com CSS, para deixar o menu mais atrativo. Não vou abordar css, pois não é o sentido deste post. O comportamento visual fica por sua conta e imaginação!

jQuery

A solução em 6 linhas:

$(document).ready(function(){// quando o DOM estiver pronto execute
    $('li ul').hide();// Esconda os menus filhos de <li>
    $('li').hover(function(){// quando passar o mouse em cima da <li>
        $(this).find('ul:first').stop(true, true).slideToggle();// procure nesta li a primeira ul, se um evento estiver disparado ele para(.stop()) e alterne o slider.
    });
});

A solução é bem simples. Eu digo com as palavras do jQuery que quando o documento tiver pronto “DOM todo lido e carregado pelo browser” (.ready), execute as tarefas abaixo. Primeiro esconda as ul´s filas de li,  e espere o evento do mouse (.hover), se alguém passar ponteiro do mouse em cima de alguma li, dispara a ação “o evento” para procurar nesta li que o mouse passou em cima, a primeira ul e, alterne o comportamento dela entre slide down e up, tornando o sub menu visível e não visível.

O (.stop()) é para corrigir o comportamento do .hover() que coloca os eventos na fila, e fica mostrando e escondendo, caso o usuários passe o mouse diversas vezes.

O arquivo robots.txt é como se fosse um cardápio que informa o que deverá ser consumido e o que não deverá ser.  É como se fosse um cartão de acesso para os mecanismos de busca, mas caso esse o (Robots.txt) não exista o seu site será vasculhado, isso significa que todas as pastas e arquivos serão analisados e provavelmente indexados pelos agentes de busca. Por default os robots (googlebot, por exemplo) são programados para vasculhar e indexar tudo que encontre.

Você pode estar se perguntando?… Mas, eu quero que o Google e os demais mecanismos de busca encontrem o meu site.  Qual seria o motivo de me preocupar com o robots.txt já que ele verifica o meu site sem este artifício?

É verdade, você não precisaria se preocupar com isso. Mas se o seu web software tiver pastas privadas com documentos de sigilo… já imaginou se o seu cliente encontrar esse conteúdo em uma pesquisa no google por exemplo… Ou até mesmo se o projeto estiver em fase de desenvolvimento e a URL de teste vazar, e de alguma forma os Robots encontram e indexam todo projeto, e os concorrentes do seu cliente passarem a ter acesso, e ai?

Mas o que vocal está tentando me dizer?
O Google e outros mecanismos de buscas tém algoritmos sofisticados que varem os códigos do site e eles guardam estas informações para quando for digitada alguma palavra chave no campo de busca, o mesmo cruza o texto digitado com as informações que ele tem guardado e monta a página com os possíveis sites que você possivelmente está procurando.

E esse robots.txt, como ele se comunica com os tais robots?
Assim que GoogleBots visita o seu site ele procura o arquivo robots.txt, que deverá ser salvo no root de seu site e nesse arquivo vamos dizer o que ele vai e o que ele não vai indexar.
A sintaxe é assim:

#comente assim
User-agent: *
Disallow: /

Onde o User-agent são os robots, o “ * ” diz que é para todos os bots, e o Disallow são as pastas que ele não poderá indexar, neste caso o “/” está dizendo que nada poderá ser indexado, mas preste bem atenção porque se você não colocar o “/” ele indexará tudo pois o caractere “/” significa um diretório e se você omitir esse caractere o Robots irá compreender o contrário que você está querendo. Veja o próximo exemplo.

User-agent: *
Disallow:  #Perceba que omitimos o / e com isso a propriedade Disallow ficará sem sentido e o bot indexará todo o seu site

O exemplo também pode ser feito utilizando uma meta tag.

// Assim estamos dizendo que nada poderá ser indexado
     <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

Vamos a outro exemplo que tem na Wikipédia:

User-agent: Googlebot
#As pastas que serão visitadas pelo Googlebot
Allow: /post
Allow:  /portifolio
#As pastas que não serão visitadas pelo Googlebot
Disallow: /confidencial
Disallow: /protegido

Este exemplo especifica o bot (Googlebot) e informa as pastas que não serão indexadas. É importante ter em mente que as demais pastas do site serão indexadas normalmente.

Alguns robots:

• Google: User-agent: Googlebot
• Yahoo: User-agent: Slurp
• MSN: User-agent: msnbot.
• Todos os mecanismos: User-agent: *.

Observações importantes

O arquivo robots.txt é uma técnica importante de SEO (Search Engine Optimization), mas não é um arquivo de segurança para o seu projeto, ele apenas sinaliza para os mecanismos de busca o que deve e o que não deve ser acessado. Outro fator é que é um arquivo .txt e fica na raiz do site ele poderá ser acessado por qualquer pessoa e nele tem informações dos caminhos de sua aplicação e com isso um hacker mal intencionado poderá ter uma brecha para invadir sua aplicação. Antes de ir implementando essa técnica é importante conversar com os responsáveis pela segurança de redes do seu projeto ou dependendo da sua necessidade você poderá substituir o .txt pela meta tag nas páginas especificas.

Em suas buscas pelo assunto você também poderá ver outras nomenclaturas para as engine de busca que eu me refiro aqui como robots, você poderá achar algo como spiders, crawlers entre outros que se referem à mesma coisa que é um algoritmo de busca.

Este menu irá utilizar um método de evento do mouse “hover” e não permite navegação através de teclado, por tantanto ele não é acessível, mas caso seu objetivo seja um menu inclusivo leia um outro post onde eu descrevo um menu drop down acessível.

Primeiro vou criar o documento de marcação para o menu, que no caso será o XHTML.

<div id="menu"><span></span>
   <ul>
      <li><a href="#">Item 1</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 2</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 3</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 4</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 5</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
   </ul>
<span class="right"></span></div>

Agora que os nós do menu estão feitos,  formato ele utilizando CSS.

*{margin:0;padding:0}//um reset básico, pra gente poder controlar melhor a página
//Os códigos CSS a baixo podem variar bastante, depende da sua necessidade e criatividade
#menu{background:url(../Images/bg-menu.jpg) repeat-x; height:37px; width:80%; margin:20px auto}
#menu span{height:37px; width:5px; background:url(../Images/bg-menu-esq.jpg) no-repeat; float:left;}
#menu span.right{background:url(../Images/bg-menu-dir.jpg) no-repeat; float:right;}
#menu ul{position:relative;z-index:2;}
#menu li{float:left; list-style:none; display:inline;}
#menu a{text-decoration:none;display:block; font-size:12px; font-family:Arial;color:#000; padding:10px;}
#menu a:hover{text-decoration:none}
#menu ul li ul{position:absolute;z-index:1;background:#f5f8fd url(../Images/bg-sub-menu.jpg) repeat-x !important;border:1px solid #cfd7ea;border-top:none;
	-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul li ul li{float:none;display:block;padding:0 10px !important; border-top:1px solid #dbe2ec;}
#menu ul li ul li:hover{background:#e2ecf8;color:#26156E;}

Agora vamos ao que interessa, o jQuery

/**
 * @author Felipe
 *Se for usar me avisa e comenta o post 
 */

$(document).ready(function(){

    $("ul li ul").hide();//aqui eu escondo as ul´s que forem filhas de li.
    $("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.
        $(this).find("ul:first").slideDown("slow"); //aqui você faz o que quiser quando o mouse estiver em cima

    }, function(){
        $(this).find("ul:first").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.

O jQuery como você pode ver, é o arquivo mais simples e com poucas linhas de código.

Utilizamos o método hover que recebe dois parâmetros, que é referente a dois estados do mouse, o mouse hover e mouse down.  Em jQuery esse método pode receber duas funções como parâmetros, que é o que fizemos e após eu utilizo o this pra referenciar ao elemento que está sendo acionado e com o find peço pra ele procurar naquele elemento o elemento filho, no caso o primeiro ul que existir e por fim faço o slideDown e Up.
Escolhi esconder o ul filho de li “o sub-menu” com o jQuery, por que se o javaScript estiver desabilitado ou por algum motivo não estiver funcionando, o usuário poderá ver o menu pois ele ficará aberto, se você optar em esconder o menu inicialmente com o CSS o seu menu poderá ficar inutilizável.

Essa foi uma demonstração de um menu simples e bem interessante, porém o jQuery tem plugns incríveis e se você quiser implementar um super menu, você poderá instalar algum plugin, como alguns que vou listar.

• Superfish
• iPod-style Drilldown Menu
• Plugins de menu no site do jQuery

Imagem do filme, Um Sonho de Liberdade

Acessibilidade à web permite que pessoas com as mais diversas necessidades especiais, possam interagir com web sites e web software de modo a que eles possam perceber, entender, navegar e interagir de maneira efetiva, bem como criar e contribuir com conteúdos da web.

Para que a web acessível possa acontecer, é necessário o trabalho de várias áreas de desenvolvimento e de interação. Um dos principais motivos para termos tantos sites não acessíveis é a utilização de ferramentas de geração de conteúdo que não usam os Standards de acessibilidade e também o desinteresse de alguns desenvolvedores.

A web exerce um papel crescentemente importante nas áreas de educação, comércio, negócios, governo e recreação. Um sistema web acessível e que permita a inclusão de pessoas com necessidades especiais na sociedade é fundamental para proporcionar oportunidades iguais para todos.

Referência: W3C

Não se trata de uma nova tecnologia, é apenas javaScript assim como mootools e prototype, uma das grandes vantagens em optar por jQuery é a documentação disponível no site oficial, que é bastante completa e os artigos encontrados em fóruns e blogs espalhados na web.

Neste post em especifico eu vou brincar um pouco com o jQuery pra gente sentir um pouco da biblioteca dos deuses.

O primeiro passo é baixar a biblioteca no site oficial, depois chame a biblioteca entre a tag <head> da página que você irá usar as funções do jQuery.

Deverá ficar algo assim:

<head>

<title>Brincando com jQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>//js = pasta onde ficará seus arquivos javaScript, isso é você que escolhe onde ficaram os arquivos e o jquery.js é a biblioteca

</head>

Agora vamos testar se a biblioteca está instalada corretamente:

<script type="text/javascript">

$(document).ready(
//Aqui você faz o que quiser útilizando a sintax jQuery ou javaScript puro
function(){
       alert("O jQuery está funcionando e a brincadeira já pode começar!!!");//alert comum com a sintax javaScript

});

</script>

Este código espera a página ficar pronta “toda carregada” e após executa uma função que é apenas um alerta normal, com a sintaxe javaScript. Se ao carregar a página com este código e apresentar um alert é porque o jQuery está funcionando e a sua página já compreende a sintaxe jQuery e os métodos e funcionalidades podem ser usadas e isso significa que a brincadeira vai começar a ficar bom agora!

Mas se não funcionou é importante verificar se o caminho que você está chamando está correto ou se há alguma tag escrita incorreta ou sem fechamento, mas de qualquer maneira vou disponibilizar todo código citado aqui.

Uma piada ao getElementById()

O getElementById ficou famoso com a difusão da API DOM e é sem dúvidas um dos métodos mais usados, mas imagina digitar tudo isso umas vinte ou trinta vezes, e em casos extremos, que é necessário chamar esse método várias vezes, me dá tendinite só de pensar, mas com o jQuery isso é tão simples que se torna ridículo, uma verdadeira piada, foi uma das coisas que me chamou a atenção quando eu comecei com o jQuery, isso tudo se resume a “$();”,  $(“id desejado, e não só o id, mas os seletores e classes”), vamos aos exemplos para compreendermos melhor:

O método puro

Com JavaScript utilizando a API DOM
document.getElementById();
Com a biblioteca dos Deuses
$();

Manipulando CSS com jQuery

	$("#meuId").css("color", "red");

Os elementos de texto que estiverem dentro do id “meuId” ficaram com a cor vermelho.

Manipular CSS com a sintaxe de javaScript ficaria algo assim:

Forma muito usada 
      var n = document.getElementById("meuId");
       n.style.color = "red";

Forma otimizada
       document.getElementById("meuId").style.color = "red";

Os três exemplos fazem a mesma coisa, deixa os elementos de texto do meuid na cor vermelha.

Brincando de pic esconde

Ocultar e mostrar elementos sempre foi algo útil, tanto pra criar sub-menus e tudo que a necessidade do seu cliente mandar.

Fazer isso com jQuery é muito fácil e tem algumas formas interessantes, vamos ver um delas:

$(document).ready(function(){

	$("#meuId").click(function(){
		$("p").toggle("slow");

	});

});

HTML

<body>

 <span id="#meuId">Clique me!!!</span> 

         <p>paragrafo 1</p>

         <p>paragrafo 2</p>

</body>

Ajax virou brincadeira de criança

Para usar o Ajax normalmente é necessário usar uma receitinha de bolo para inicializar o objeto XMLHTTPRequest e ainda por cima fazer um IF se for o IE pra ativar o ActveX, pra funcionar em ambos ou browsers, mas com o jQuery virou outra maravilhosa piada:

Ajax com javaScript

var Ajax = false;// Ajax

	function AjaxRequest() {
		Ajax = false;
		if (window.XMLHttpRequest) {//Mozilla e safari
			Ajax = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE
			try{
				Ajax = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try{
					Ajax = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {

				}
			}

		}
	}

Ajax com jQuery

$("#idOndeVaiCarregar").load("pagina.php", callback);

Acredito que já deu pra brincar um pouco e espero que a leitura tenha sido proveitosa.

As melhores referências de jQuery você poderá achar no site oficial, vale a pena conferir e estudar

Utilize texto alternativo

Nas imagens, utilize o atributo alt=”….” do elemento <img /> para dar uma descrição textual à imagem.

<img src="images/fuscaPreto.jpg" alt="Foto de um fusca preto"  title="Foto de um fusca preto" />

Enquanto a imagem está sendo carregada ou quando por algum motivo a imagem não é exibida, o texto alternativo alt=”Foto de um fusca preto” é exibido.

O texto alternativo da imagem somente estará acessível a softwares de leitura de tela “Virtual Vision por exemplo” durante a leitura da página, pois uma imagem sem hiperlink não receberá foco através da navegação com a tecla TAB.

Ao mover o mouse por cima da imagem, o Virtual Vision irá ler o conteúdo do atributo alt=”Foto de um fusca preto”, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.

Descrição textual da imagem “d-link”

Para imagens mais complexas é aconselhável utilizar uma técnica chamada d-link, que consiste em criar uma pagina HTML para descrever a imagem em questão.

A técnica é colocar um link com a letra “D” ao lado da imagem, para quando a navegação por TAB encontrar o link e usuário poder chegar até a página com a descrição detalhada da imagem.

Para não mudar seu projeto visual, é possível esconder visualmente o link com a letra “D” e o desenvolvedor poderá utilizar várias maneiras para esconder visualmente este link, com CSS é uma boa uma alternativa.

<!-- É uma opação colocar a link direto na imagem -->
<a href="descricaoimagemcriancanap.html"  title="ir a página da descrição textual da imagem, crianças brincando na praia">
     <img src="images/criancasNaP.jpg" alt="Crianças brincando na praia" />
</a>

<!--  A técnica D-link, este link é para ficar ao lado da imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
     [d]
</a> 

Como a curiosidade é da natureza do homem e já que o deficiente visual não pode apreciar o conteúdo da imagem visualmente, seria interessante prover as imagens de um texto descritivo.
Um recurso utilizado é colocar, após a imagem, um link com a letra “d”, conhecido como “d-link”, o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem.
Para quem não deseja prejudicar o design da página, com uma letra “d” após as imagens, utilize o recurso de d-link invisível, ou seja, coloque uma pequena imagem transparente no lugar da letra “d”.

Este post foi inspirado na cartilha de acessibilidade e pode ser encontrado no site Lupa Digital, e a citação acima são palavras do autor e pode ser lido em: Lupa digital no item 7.2.

Para fazer com que os links fiquem acessíveis “href acessível” para leitores de telas e usuários que usam o teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível.

Adicionando o Atributo “title”

O atributo “title” é muito importante, é ele que vai dar a descrição do link e informar para onde ele vai levar o seu usuário.

<a href="acessibilidade.html" title="Ir a página de acessibilidade">
     Acessibilidade
</a>

Facilite a vida dos seus usuários e escreva com um texto conciso, que faça sentido e que tenha relevância.

Adicione Teclas de Atalho

É uma boa idéia usar teclas de atalho na navegação principal, com isso você vai facilitar a vida de muita gente que tem dificuldade motora e não usa o mouse para acessar o seu conteúdo.

<a href="acessibilidade.html" accesskey="a">Acessibilidade</a>

Pular para o Conteúdo

Permita que o usuário possa ir direto ao conteúdo desejado.

Utilize um link com o atributo accesskey no topo do documento, faça com que ele seja o primeiro link do seu site. Com isso você evitará que o usuário percorra o site todo até chegar ao conteúdo desejado.

Caso você não queira que esse link apareça no topo, você poderá ocultar com CSS.

<div id="topo">
    <h1>titulo do site</h1> <!-- "essa área é muito importante p/ SEO mas é assunto para outro post" -->
    <a href="#conteudo" accesskey="p" title="ir ao conteúdo">Pular para o conteúdo</a>
</div>
<div id="menu">
    <!-- os intens do menu -->
</div>
<div id="conteudo">
    <!-- aqui é onde o usuário chegará, o conteúdo desejado -->
</div>

não que você vá colocar teclas de atalho em todos os links do seu site, mas pense nisso com carinho!

Navegando Através de Tab

Muitos usuários não podem ou não querem usar dispositivos como mouse para navegar em seu site.

Eles utilizam o teclado pra percorrer os links, geralmente usando a tecla “tab”.

Por este motivo seu código deve estar estruturado semanticamente, principalmente a estrutura de links, eles devem estar em uma ordem lógica de navegação, caso esteja, não é necessário usar o atributo “tabindex”.

Mas caso não esteja ou você queira conduzir seus usuários, use o atributo “tabindex” que permite definir a ordem de navegação dos links em seu sistema web.

<ul>
    <li><a href="#" tabindex="3">Link 1</a></li>
    <li><a href="#" tabindex="1">Link 2</a></li>
    <li><a href="#" tabindex="2">Link 3</a></li>
    <li><a href="#" tabindex="4">Link 4</a></li>
</ul>

Conduza seus usuários, dê a eles o que eles realmente precisam e querem ler

Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.

Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.

Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.

Veja o menu funcionando e vamos aos detalhes:

XHTML

É o documento de marcação onde vamos criar os nós do menu.

Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.

<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li class="submenu"><a href="#" class="bullet">Portfólio</a>
		<ul>
			<li><a href="sites.html">Sites</a></li>
			<li class="submenu"><a href="#" class="bullet">Interfaces</a>
				<ul>
					<li><a href="graficas.html">Gráficas</a></li>
					<li><a href="digitais.html">Digitais</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="quemsomos.html">Quem Somos</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>

CSS

É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.

Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.

#nav, #nav ul {
	width: 70em;
	list-style: none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
 }
#nav li {
	float: left;
 }
#nav a {
	display: block;
	width: 10em;
	height: 2em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
	background-color: #69c; /* IE precisa desta declaração */
	color: #fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px
 }
#nav a:hover {
	text-decoration: none;
	background: #c7daec;
	color:#69c;
 }
#nav a.bullet {
	background:#69c url(bullet.gif) no-repeat right;
 }
#nav a.bullet:hover {
	background: #c7daec url(bullet-over.gif) no-repeat right;
 }
#nav li ul {
	position: absolute;
	left: -1000em;
	width: 10em;
	margin: 0;
 }
#nav ul ul {
	margin: -2.1em 0 0 10.1em;
 }
#nav li:hover ul ul, #nav li.over ul ul {
	left: -1000em;
 }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
	left: auto;
}

JavaScript

O arquivo JavaScript é responsável pela ação.

É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.

<script type="text/javascript">

var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;

function dropdown_init()
{
 try
 {
  var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');

  for (var a = 0; a < as.length; a++)
  {
   as[a].onfocus = function() { dropdown_expand(this) }
   as[a].onmouseover = function() { dropdown_expand(this) }
   as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
   as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
  }

  dropdown_colapse(0);

 } catch(e){}

}

function dropdown_expand(caller)
{
 try
 {
  clearInterval(dropdown_intervalId);

  var uls = caller.parentNode.parentNode.getElementsByTagName('ul');

  for (var ul = 0; ul < uls.length; ul++)
   uls[ul].style.left = "-1000em";

  caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";

 } catch(e){}

}

function dropdown_colapse(milliseconds)
{
 try
 {
  clearInterval(dropdown_intervalId);

  dropdown_intervalId = setInterval(function()
  {
   var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');

   for (var ul = 0; ul < uls.length; ul++)
    uls[ul].style.left = "-1000em";

   clearInterval(dropdown_intervalId);

  }, milliseconds, null);

 } catch(e){}

}

window.onload = dropdown_init;
</script>

Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.