¿Quieres registrarte?
Estás en: Cristalab > Tips > Mejora la accesibilidad de elementos ocultos con Jquery/CSS

Mejora la accesibilidad de elementos ocultos con Jquery/CSS

Por: ivanfc0o
9 de Abril del 2009
232 de clabLevel
Otros artículos de ivanfc0o
2,992 visitas
javascript css jquery

Luego de ver el tip de M@U sobre Limpiar desperfectos de [url=http://www.cristalab.com/tips/tags/css]css y javascript por demora de carga[/url] recordé un tip que suele ser muy útil en el manejo de jquery y CSS para mejorar la accesibilidad.

Agregarle una clase al elemento <html>:

Código :

$("html").addClass("js");


Con este pequeño detalle le sumamos una característica tipo "condicional" al trabajar con CSS para detectar si javascript está activado o no, abajo les explico mejor.

Supongamos que tenemos un div oculto que aparecemos con jquery, algo parecido al ejemplo de m@u. Entonces naturalmente ocultamos el div mediante css:

Código :

<style type="text/css">
.div_oculto{ display: none; }
</style>

<!-- boton que aparecerá el div -->
<a class="show" href="#">Mostrar div</a>
<!-- div que se ocultará al cargar la página -->
<div class="div_oculto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod ipsum dolor sit amet et dolore magna aliqua. Ut enim ad ipsum dolor sit amet.
</div>


y lo mostraríamos con jquery:

Código :

$(document).ready(function() {
$(".show").click(function(){ $(".div_oculto").show(); });
});


Todo está bien, funciona. Aquí el ejemplo para que me crean.

¿Pero cuál es el problema de esto?


En caso de que el visitante sea parte del bajo porcentaje de usuarios que navegan sin javascript activado, ese usuario no tendría acceso al contenido del div oculto. Pueden probar desactivar javascript en su navegador y después visitar de nuevo el ejemplo para que entiendan de que hablo.

Entonces, aquí viene la solución y la manera de usar el antes comentado $("html").addClass("js");

HTML Y CSS:

Código :

<style type="text/css">
.js .div_oculto{ display: none; }
</style>

<!-- boton que aparecerá el div -->
<a class="show" href="#">Mostrar div</a>
<!-- div que se ocultará al cargar la página -->
<div class="div_oculto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod ipsum dolor sit amet et dolore magna aliqua. Ut enim ad ipsum dolor sit amet.
</div>


Jquery:

Código :

 $(document).ready(function() {
$("html").addClass("js");
$(".show").click(function(){ $(".div_oculto").show(); });
});


Despues de agregarle la clase js al elemento HTML del documento tendremos acceso a, como dije anteriormente, una especie de condicional para usar en la hoja de estilo:

Código :

<style type="text/css">
.js .clase {
/* Estilo que se ejecutará SOLAMENTE si el navegador tiene javascript activado */
}
.clase {
/* Estilo que se ejecutará tenga o no javascript activado */
}
</style>


Y listo, ahora en el ejemplo con esta técnica aplicada pueden ver el contenido del div sin importar si cuentas con javascript activado o no. Simple, pero útil.

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas javascript css jquery

Comentarios | Enviar un comentario
Hey! Me agrada este truco, de hecho es parte de la magia otorgada por la Progressive Enhancement, quiza despues tome otro tema a partir de este otro... Solo como nota al editor; no se pueden poner tags dentro de un enlace.
:lol:
Por: M@U
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.