Menu de acesso ao conteúdo (oculto)
Bem, vejo que uma das regras de acessibilidade dos padrões, é forncer um link que leve direto ao conteúdo.Este link, é de regra vir antes de tudo no body. Mas por quê? Bom, entenda:Pessoas com dificuldades de uso do mouse, pessoas cegas principalmente, normalmente utilizam o teclado para navegar, este usando a tecla TAB.Mas vejo que muitos desenvolvedores não usam deste método, por achar que tira a beleza do site, ou até mesmo porque nem sabem deste artíficio.Bom, sou totalmente iniciante no CSS e foi eu que desenvolvi este código, porém, peço que qualquer erro, sugestão, reformulação ou resumo do mesmo, será muito bem-vindo para futura modificação.Segue o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">* { margin: 0; padding: 0;}.teste { font: bold 14px "Trebuchet MS"; text-align: center; display: block; overflow:hidden; text-indent: -500em; }.teste a:hover { text-indent: 1em; z-index: 100; background: #009966; }.teste a { color: #fff; text-decoration: none; display: block; }.pagina { position: absolute; top: 0; z-index: -1; }</style></head><body><div class="teste"> <a href="#" title="Ir direto para o conteúdo">Ir direto para o conteúdo</a></div><div class="pagina">TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br /></div></body></html>
Explicação de trechos:
<div class="teste"> <a href="#" title="Ir direto para o conteúdo">Ir direto para o conteúdo</a></div>
Nota-se que ao destino do link, você deverá trocar pelo ID da div que terá o conteúdo principal. Assim, funcionando como uma âncora daquelas estilo FrontPage :D...
<div class="pagina">
Fica à sua imaginação trocar à classe, id, desta div. Porém, sugiro deixar ela sempre com top 0, para grudar ao topo do browser. E também deixar um z-index menor do que o menu oculto a:hover.É isto... peço desculpas se houver quaisquer erros.-----------------------------------1º Erro, vejo que o z-index negativo só funciona no IE, porém, quando troco o z-index para positivo para funcionamento no FF, o texto da div da página fica por cima.Por hora não posso testar, se alguém tiver uma solução, fico agradecido.
Discussão (6)
Carregando comentários...