Control de efectos jQuery y Accesibilidad
Miércoles, 27 de Enero de 2010Una web accesible se caracteriza por no necesitar ni estilos (CSS) ni javascript para poder visualizar su contenido perfectamente.
El uso desmesurado de librerías que simplifican el acceso a elementos HTML como puede ser jQuery (una de las más utilizadas) provoca que sitios web ricos en contenidos, no visualicen toda su información por generarse dinámicamente con este tipo de librerías.
Los efectos visuales, que hacen más atractivo nuestro sitio web, provocan algunos inconvenientes al convinarlo con la Accesibilidad.
Veamos un ejemplo para escenificar más claramente este caso:
- Pongamos que tenemos la siguiente estructura en nuestro sitio web:
- Inicio
- Quiénes somos
- Desarrollo web
- Plan Tarjeta de visita
- Plan Básico
- Plan Intermedio
- Plan Estándar
- Plan Profesional
- Plan Empresa
- Plan Empresa Plus
- Plan Tienda Virtual
- Plan Gran Portal
- Packs específicos
- Noticias
- Blog
- Contacto
- Pasamos esta estructura a HTML:
<ul id=”menuIzquierda”>
<li>Inicio</li>
<li>Quiénes somos</li>
<li>
Desarrollo web
<ul class=”hijosMenu”>
<li>Plan Tarjeta de visita</li>
<li>Plan Básico</li>
<li>Plan Intermedio</li>
<li>Plan Estándar</li>
<li>Plan Profesional</li>
<li>Plan Empresa</li>
<li>Plan Empresa Plus</li>
<li>Plan Tienda Virtual</li>
<li>Plan Gran Portal</li>
</ul>
</li>
<li>Packs específicos</li>
<li>Noticias</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
En este caso, el menú debe visualizarse completamente ya que si inicialmente apareciera escondido y con jQuery se mostrara, la gente que no tuviera el javascript activado no podría navegar por nuestro sitio web. Ejemplo de ocultar parte del menú en jQuery:
$(document).ready(function(){
$(”#menuIzquierda .hijosMenu”).hide();
});
Este cambio de estado visual del menú en cada click que se hace en la página provoca el rechazo del usuario.
Para poder solventar esta problemática, utilizaremos la librería jQuery para conseguir agilizar los accesos a elementos de la página.
1.- Incluimos el fichero de Google Code directamente o lo guardamos en nuestro servidor:
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>
2.- Cargaremos los estilos generales del sitio web (estilos.css) y seguidamente los estilos de la precarga (precarga.css). Este último archivo contiene los elementos web que van a tener efectos visuales y no queremos que se visualicen inicialmente.
<link type=”text/css” rel=”stylesheet” href=”estilos.css” media=”all”/>
<link type=”text/css” rel=”alternate stylesheet” href=”precarga.css” title=”precarga”/>
Contenido precarga.css:
/* Menu izquierda */
#menuIzquierda {
display:none;
}
3.- El archivo precarga.js, si tenemos activado el javascript, nos permitirá habilitar el fichero precarga.css que esconderá los elementos visuales que nos interese ocultar.
<script type=”text/javascript” src=”precarga.js”></script>
Contenido precarga.js:
function precarga(opcion) {
// Inicialmente activamos el CSS precarga y al finalizar la carga de la página lo ponemos como “CSS alternativo”
if ( opcion ) {
$(’link[title="precarga"]‘).attr(’rel’, ’stylesheet’);
} else {
$(’link[title="precarga"]‘).attr(’rel’, ‘alternate stylesheet’);
}
});
precarga(true);
4.- Por un tema de optimización y rapidez en la carga de la página, ubicaremos el fichero funciones.js justo antes de cerrar el tag BODY. Este fichero, además de contener las funciones que creamos oportunas para el buen funcionamiento de nuestro sitio web, activará la función precarga que deshabilitará el fichero precarga.css mostrando así los elementos ocultados.
<script type=”text/javascript” src=”funciones.js”></script>
Contenido funciones.js:
$(document).ready(function(){
precarga(false);
});
Código completo:
<html>
<head>
<link type=”text/css” rel=”stylesheet” href=”estilos.css” media=”all”/>
<link type=”text/css” rel=”alternate stylesheet” href=”precarga.css” title=”precarga”/>
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”precarga.js”></script>
</head>
<body>
<ul id=”menuIzquierda”>
<li>Inicio</li>
<li>Quiénes somos</li>
<li>
Desarrollo web
<ul class=”hijosMenu”>
<li>Plan Tarjeta de visita</li>
<li>Plan Básico</li>
<li>Plan Intermedio</li>
<li>Plan Estándar</li>
<li>Plan Profesional</li>
<li>Plan Empresa</li>
<li>Plan Empresa Plus</li>
<li>Plan Tienda Virtual</li>
<li>Plan Gran Portal</li>
</ul>
</li>
<li>Packs específicos</li>
<li>Noticias</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
<script type=”text/javascript” src=”funciones.js”></script>
</body>
</html>
Esperamos que os sea de utilidad.