Artículo de Accesibilidad

Menús desplegables...

y accesibles.

A menudo los menús desplegables suponen una fuente de problemas al usuario, tanto de accesibilidad como de usabilidad.

En este artículo haremos un repaso de los errores más comunes que se cometen al desarrollar este tipo de menús; y propondremos una serie de técnicas que permitirán construir menús desplegables 100% accesibles.

A continuación, una lista de los problemas más frecuentes:

Tu menú no se despliega (I).: Es demasiado común navegar por sitios en los que los menús desplegables no se despliegan, simplemente por el hecho de no usar el navegador mayoritario. Un error muy grave ya que estaremos vetando a una serie de usuarios el acceso a ciertas partes de la web. Como primera medida de choque ante este problema, usaremos código estándar.
Tu menú no se despliega (II).: Aunque parezca raro, es posible que el usuario tenga desactivada la ejecución de scripts del lado del cliente, o que su AU no acepte este tipo de scripts. En este caso, proporcionar contenido equivalente será de vital importancia.
Tu menú no se despliega (III).: Utilizar un manejador de evento incorrecto conlleva serios problemas de accesibilidad a usuarios que no navegan con ratón. Hay que tener presente que el evento ondblclick es totalmente imposible invocarlo desde el teclado.
Tu menú me tapa contenido de la página.: Esto puede conllevar que el usuario no tenga acceso a otras partes de la web.
Uso un lector de pantalla y la navegación se me hace muy pesada.: Un problema "menor" (prioridad 3) que puede presentarse en el caso de que el menu esté en la parte superior de la página, y se componga de muchos elementos que a su vez contengan muchos subelementos. Los usuarios que usen lectores de pantalla tendrán que esperar a que el mismo lea todos y cada uno de los ítems hasta llegar al contenido de la página (lo hará aunque estén ocultos). Como podréis suponer, si son muchos, navegar por la web puede ser una tarea muy pesada. Un simple "saltar navegación" al principio del menu, enlazado a un ancla al inicio del contenido propiamente dicho es suficiente para solucionar este problema.

Estos son, a grandes rasgos, los problemas más comunes a la hora de desarrollar un menú desplegable. A continuación construiremos un menú desplegable que no comprometerá la accesibilidad de nuestra web.

Creando un menú desplegable.

Supongamos que tenemos una barra de menú vertical; el típico menú a la izquierda. El proceso que seguiremos es el siguiente:

Construiremos el menú totalmente desplegado.
Lo ocultaremos mediante un sencillo script invocado en el evento onload de la página.

Utilizando esta simple metodología nos aseguraremos de que si el AU no tiene JavaScript activado, o simplemente no interpreta JavaScript, el menú le será accesible ya que le aparecerá desplegado.

El código JavaScript utilizado seria éste:


							<script type="text/javascript">

							function ocultamenu(){

							  var menu = document.getElementById("productos");

							  menu.style.display = "none";

							}

							function despliega(){

							  var menu = document.getElementById("productos");

							    if(menu.style.display == "none"){

							      menu.style.display = "block";

							    }

							    else{

							      menu.style.display = "none";

							    }

							}

							</script>

En el evento onload del <body> llamamos a ocultamenu().

Y el XHTML sería algo tal que así:


							<ul class="ej01">

							  <li><a href="inicio.html">Inicio</a></li>

							  <li><a href="productos.html" onclick="despliega();return false;">Productos →</a>

							    <ul id="productos">

							      <li><a href="software.html">Software</a></li>

							      <li><a href="hardware.html">Hardware</a></li>

							      <li><a href="consumibles.html">Consumibles</a></li>

							    </ul>

							 </li>

							 <li><a href="contacto.html">Contacto</a></li>

							 <li><a href="comocomprar.html">Cómo comprar</a></li>

							</ul>

Fijáos en la parte resaltada en rojo y negrita. Enlazamos el apartado "productos" a una página que hemos llamado productos.html. Éste href sólo se ejecutará si el navegador no tiene JavaScript activado. En esa página incluiremos la lista de enlaces dentro de "productos". Parece redundante pero es una buena forma de cubrirnos las espaldas por si todo falla...

En categoría: Accesibilidad | Comentarios: 18 | Ver o añadir comentarios |

Permitida la reproducción parcial o total citando la fuente: jlvelazquez.net

jlvelazquez.net - accesibilidad, usabilidad, xhtml, css

Artículo de Accesibilidad

Menús desplegables...

y accesibles.

Creando un menú desplegable.