Sí. La tecnología JavaScript se puede utilizar siempre y cuando se haga de forma no intrusiva, de manera que no se pierda información o funcionalidad al acceder a las páginas Web prescindiendo de JavaScript.

Para ampliar la información sobre scripts y objetos programados se recomienda descargar la Guía de Comprobación de la Accesibilidad: Objetos Programados

Volver al listado de buenas prácticas

Lo primero es crear la página en (x)HTML incluyendo todo el texto en ella, sin scripts. El texto que se quiera desplegar se incluye dentro de un elemento asignándole un id concreto.

Por otra parte se creará un enlace, mediante técnicas JavaScript y DOM, que sea el que muestre y oculte el texto. A dicho enlace se le asigna un evento onclick asociado a la función JavaScript de desplegar el texto.

Ejemplo de código HTML:

<ul><li>Presentación
  <ul id="desplegable1" class="desplegado">
   <li>Quiénes somos</li>
   <li>Contacta con nosotros</li>
  </ul>
</li>

<li>Descarga de documentación
  <ul id="desplegable2" class="desplegado">
   <li>Formularios</li>
   <li>Impresos</li>
  </ul>
</li></ul>

Mediante JavaScript y DOM se deberá acceder a los elementos “Presentación” y “Descarga de documentación”, y se crean los enlaces con un evento onclick, como se muestra en el siguiente ejemplo:

<li><a href=”#desplegable1" onclick="plegar(’desplegable2’);" >Presentación</a>

En las hojas de estilo se crean dos estilos, uno para el texto oculto y otro para el texto cuando se muestre desplegado.

Ejemplo de código CSS:

ul.oculto {
 position:absolute;
 left:-9999px;
 overflow:hidden;
}

ul.desplegado {
 font-style:italic;
}

Se utiliza además una función JavaScript que pliega o despliega el texto, cambiándole la clase al elemento HTML que se le indica como parámetro.

Ejemplo de código JavaScript:

/* Función para plegar o desplegar texto */
function plegar(texto) {
  var elemento = document.getElementById(texto);
  if (elemento.className == "desplegado") {
  elemento.className = "oculto";
  } else {
  elemento.className = "desplegado";
  }
}

Y por último otro JavaScript para ocultar el texto cuando se carga la página por primera vez, de forma que al usuario que disponga de JavaScript se le muestre el menú plegado, y al que no tenga soporte para esta tecnología se le muestre completo. Este script se situará al final de la página web.

Ejemplo de código JavaScript:

/* Script que plegará todos los textos que se le indiquen */
plegar(’desplegable1’);
plegar(’desplegable2’);

Para ampliar la información sobre accesibilidad en scripts y objetos programados se recomienda descargar la Guía de Comprobación de la Accesibilidad: Objetos Programados.

Volver al listado de buenas prácticas