Paliar los «pozos de vínculos» por medio de JavaScript

En una entrada anterior, comentaba un caso en el que un «selector de ancestros» podría suponer una mejora en la accesibilidad de un menú desplegable. En esta entrada explico una posible solución basada en JavaScript.

Los menús desplegables y la accesibilidad

Como es bien sabido, para crear un menú de navegación desplegable no se necesita más que una lista para los vínculos principales que incluyan listas anidadas para los vínculos secundarios. Por medio de CSS, se ocultan las listas secundarias, y con la pseudo-clase :hover se restaura su visibilidad cuando el usuario pasa el ratón sobre los elementos de lista que contienen los vínculos principales.

<ul id="navegacion">
  <li><a href="#">Vínculo principal</a> <!--Sobre éste li se aplica el :hover-->
    <ul> <!--Esta lista se oculta o se muestra cuando el ratón pasa sobre el li padre--> 
      <li><a href="#">Vínculo secundario</a></li>
      <li><a href="#">Vínculo secundario</a></li>
    </ul>
  </li>
  <li><a href="#">Vínculo principal</a>
    <ul>
      <li><a href="#">Vínculo secundario</a></li>
      <li><a href="#">Vínculo secundario</a></li>
    </ul>
  </li>
</ul>
	

Sin embargo, como se podía comprobar en el ejemplo de la entrada mencionada arriba, cuando un usuario navega el menú por medio de la tecla Tab, los desplegables no se muestran, al no dispararse en ningún momento el estado :hover. El usuario entonces pierde de vista el foco de su avance, a pesar de que éste sigue recorriendo correctamente la lista de vínculos de los submenús. Lo que este usuario necesita es recibir la misma respuesta visual que quien emplee un ratón.

Los pasos para lograrlo serían los siguientes:

1. Hay que identificar las listas desplegables por medio de una clase, por ejemplo class="desplegable".
2. Hay que asignar a cada vínculo contenido en ellas un evento focus de JavaScript que despliegue la lista.
3. A esos mismos vínculos hay que asignarles un evento blur para que vuelva a ocultar la lista.

Y ya está, es así de sencillo.

Unos cuantos ejemplos

Por supuesto, habría decenas de formas de programar lo que he explicado arriba, pero dejo aquí unos ejemplos.

En este primer ejemplo, selecciono los desplegables por medio de getElementsByClassName, por lo que de momento sólo funciona en Firefox 3.0+, Opera 9.62+, Safari 3.1+ o Chrome, pero para su finalidad ilustrativa me parece suficiente:

window.onload = function(){
  var desplegables = document.getElementsByClassName('desplegable');
  function desplegar(x){
    x.target.parentNode.parentNode.setAttribute('style','height:auto;overflow:visible;'); 
  }
  function contraer(x){
    x.target.parentNode.parentNode.removeAttribute('style');
  }
  for(var i=0;i<desplegables.length;i++){
    var vinculos = desplegables[i].getElementsByTagName('a');
    for(var j=0;j<vinculos.length;j++){
      vinculos[j].addEventListener('focus',desplegar,false);
      vinculos[j].addEventListener('blur',contraer,false);
    }
  }
}
	

Si se necesita un script que supla la carencia del método getElementsByClassName en los demás navegadores, el mejor que se me ocurre es el de Dustin Díaz.

En este otro ejemplo empleo jQuery (1.4.2):

$(document).ready(function(){
  $('.desplegable a').each(function(i){
    $(this).focus(function(){
      $(this).parent().parent().attr('style','height:auto;overflow:visible'); 
    });
    $(this).blur(function(){
      $(this).parent().parent().removeAttr('style');
    });
  });
});
	

Y por último, otro ejemplo, esta vez con Mootools (1.2.4):

window.addEvent('domready', function() {
  $each(
    document.getElements('.desplegable a'),function(v){
      v.addEvent('focus',function(){
        v.getParent('.desplegable').setProperty('style','height:auto;overflow:visible;'); 
      });
      v.addEvent('blur',function(){
        v.getParent('.desplegable').removeProperty('style');
      });
    }
  );
});
	

Conclusión

Como ya hemos dicho en múltiples ocasiones, bien empleado JavaScript no sólo no es un obstáculo para la accesibilidad de una página, sino que puede ser una herramienta que incluso la mejore.

Etiquetas: jquery, mejora progresiva, mootools.

Esta entrada se publicó el 3 de Marzo de 2010 a las 23:47, y se archivó en Accesibilidad, JavaScript. Autor: Saúl González. Puede seguir los comentarios de esta entrada a través de RSS 2.0. Puede dejar un comentario o hacer un trackback desde su propio sitio.