« anterior | siguiente »

Home > 2007 > Marzo > Viernes, 30 de Marzo 2007 > Laboratorio: navegación por teclado
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Vie30Mar2007

Laboratorio: navegación por teclado

16:00 H (CET)| Temas: Javascript · Laboratorio

Ya en varios sitios se ha mostrado como realizar la navegación mediante el teclado, esto significa usar las teclas para acceder a contenidos o para realizar acciones.

Nosotros queremos darle un toque de automatización, que tan solo sea necesario añadir un enlace interno en el documento para acceder a la zona del documento.

Crearemos un script que obtenga todos los enlaces internos del documento y si tienen el atributo rel y su valor tiene el formato "formato:[letra]", se considerará un objetivo para la navegación por teclado. La letra será la que se usará para acceder y pueden repetirse, por lo que si se repiten las teclas para el shortcut, se irán alternando uno a uno los distintos enlaces.

El script consta de dos partes, uno que se ejecuta después de la carga del documento y que recupera todos los enlaces internos y los agrupa por shortcut, y otro que captura el evento onkeydown del document para acceder a la zona del documento (que será modificando el location).

var __SHORTCUTS__ = {
  // Guarda los shortcuts con los enlaces
  shortcuts: new Array(),
  // Índice del enlace actual organizado por shortcuts 
  idx_shortcuts: new Array(),
  
  // Obtiene todos los enlaces internos y los que corresponden a un shortcut los almacena
  leer_shortcuts: function(e) {
    var objs = document.getElementsByTagName("A");
    for (var i=0; i<objs.length; i++) {
      var rel = objs[i].rel;
      if (rel && rel.match(/shortcut:[a-z]/i) && objs[i].name) {
        var tipo = (rel.substring(rel.indexOf(":")+1)+"").toUpperCase().substring(0, 1);
        if (!__SHORTCUTS__.shortcuts[tipo]) {
          __SHORTCUTS__.shortcuts[tipo] = new Array();
          __SHORTCUTS__.idx_shortcuts[tipo] = 0;
        }
        __SHORTCUTS__.shortcuts[tipo][__SHORTCUTS__.shortcuts[tipo].length] = objs[i];
      }
    }
    // Capturo el evento de pulsado de teclado en el document
    document.onkeydown = __SHORTCUTS__.controlar_keypress; 
  },
  
  // Captura una tecla pulsada y accede al shortcut que tenga asociado
  controlar_keypress: function(e) {
    try {
      if (!e) e = event;
      var key = e.keyCode;
      // Obtengo el caracter correspondiente, quizás esto falle, no he hecho pruebas suficientes
      var c = String.fromCharCode(key);
      // Si es una letra
      if (c.match(/^[a-z]$/i)) {
        // Obtengo el enlace para el shortcut
        var obj = __SHORTCUTS__.shortcuts[c.toUpperCase()][__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]];
        // Acceso a esa parte del documento
        document.location = "#"+obj.name;
        // Incremento el indice para que acceda al siguiente
        __SHORTCUTS__.idx_shortcuts[c.toUpperCase()] = (__SHORTCUTS__.idx_shortcuts[c.toUpperCase()]+1)%__SHORTCUTS__.shortcuts[c.toUpperCase()].length;
      }
    } catch (e) {} // En IE me da un error que no llego a comprender, ¡cómo no!
  }
}

// Cargo el proceso en el onload
if (window.addEventListener) {
  window.addEventListener("load", function(event) {__SHORTCUTS__.leer_shortcuts(event);}, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", function(event) {__SHORTCUTS__.leer_shortcuts(event);});
} else {
  document.onload = function(event) {__SHORTCUTS__.leer_shortcuts(event);}
}

Para indicar qué elementos tienen shortcut, modificamos los estilos para mostrar subrayada la primera letra del elemento, para lo cual el elemento debe tener el atributo title con valor "SHORTCUT: [letra]". Mejorando así la accesibilidad ya que no añadimos ninguna etiqueta para la primera letra. Por supuesto en IE6 no funciona y con la etiqueta legend tampoco me funciona.

*[title~="SHORTCUT:"]:first-letter {
  padding-bottom: 2px;
  border-bottom: 1px dotted #000000;  
}

Para este ejemplo tenemos dos tipos de shortcuts: 'P' para ciertos párrafos y 'C' para acceder al formulario de comentarios.

Ejemplo

Relacionados

Feedback (2) » Formulario

1. Fresqui ~ Viernes, 30 Mar 2007 | 21:06H:

[Ya en varios sitios se ha mostrado como realizar la navegación mediante el teclado, esto significa usar las teclas para acceder a contenidos o para realizar acciones.

Nosotros queremos darle un toque de automatización, que tan solo sea necesario añadir un enlace interno en el documento para acceder a la zona del documento...]

2. cento ~ Viernes, 20 Abr 2007 | 19:17H:

si que funiona en el ie6, el unio oblema es que no uedo esribir en el formulario las letras c y p!!

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)