Mejora la accesibilidad de elementos ocultos con Jquery/CSS

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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Mejora la accesibilidad de elementos ocultos con Jquery/CSS

¿Pero cuál es el problema de esto?

Publica tu comentario

o puedes...