Día 15: Definir accesos directos desde el teclado

Una de las características menos conocidas del HTML es el atributo accesskey vínculos y formularios, que permite al diseñador de Internet definir accesos directos desde el teclado para vínculos usados frecuentemente o campos de formularios. En Windows, puede presionar ALT + una tecla de acceso; en Macintosh, puede presionar Control + una tecla de acceso. Si la tecla de acceso está definida en un vinculo, su navegador seguirá el vinculo, si es definida en un campo de formulario, su navegador se enfocará en ese campo. Internet Explorer ha ofrecido soporte para las teclas de acceso desde su versión 4, Netscape desde su versión 6. Los navegadores más antiguos simplemente las ignoran, sin ningún efecto dañino.

Aunque no existen estándares para definir que teclas deben ser asignadas a que características, he aquí algunos accesos directos usados comúnmente:

Tecla de Acceso 1
Página de Inicio
Tecla de Acceso 2
Saltar al contenido principal (el vinculo de salto sobre la barra de navegación)
Tecla de Acceso 9
Contacto

Quién se beneficia?

  1. Jackie se beneficia. Cuando JAWS lee un vínculo que define una accesskey, anuncia la tecla de acceso también. Por ejemplo, el vinculo <a href="/" accesskey="1">Home page</a> seria leído por JAWS como "vinculo: Pagina de Inicio, ALT + 1". Jackie puede enfocarse en el vínculo presionando ALT+1, y luego seguirlo presionando ENTER.
  2. Bill se beneficia. Como Bill no puede usar el Mouse de maneta efectiva desde que sufrió su derrame, el depende de la navegación por teclado y de los accesos directos de este para moverse alrededor de una pagina. Las teclas de acceso son una forma excelente para el de saltar hacia vínculos usados comúnmente. Bill puede teclear ALT+1, y Mozilla inmediatamente se dirige al vínculo que define accesskey="1". (Nota: Mozilla no anuncia las teclas de acceso, lo que levanta la duda de cómo descubrirá Bill cuales son. Discutiremos esto en un consejo próximo).

Como hacerlo: vínculo de la página de inicio

  • Movable Type: La plantilla por defecto no tiene un vinculo a la pagina de inicio, así que debería transformar el nombre de su sitio en un vinculo, y ponerle una accesskey. Busque en su plantilla por <$MTBlogName$>, y cámbielo a esto:

    <a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a>

  • Radio: busque en su plantilla por {siteName}. Probablemente estará en un vinculo, algo como esto:

    <a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"><%siteName%></a>

    Simplemente añada un atributo accesskey al vínculo, así:

    <a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none" accesskey="1"><%siteName%></a>

  • Blogger: busque en su plantilla por <$BlogTitle$>. Si está encerrado en una etiqueta <a>, añada el atributo accesskey="1" a la etiqueta <a>, como en el anterior ejemplo para Radio. Si su <$BlogTitle$> no está encerrado en una etiqueta <a>, enciérrelo en una como esta (inserte la dirección de su página de inicio propia):

    <a href="http://dirección/de/su/página/inicial" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>

Como hacerlo: vinculo de salto de la navegación

Tiene un vínculo para saltar sobre la barra de navegación? Si es así, póngale un accesskey="2".

<a class="skiplink" href="#startcontent" accesskey="2">Skip over navigation</a>

Como hacerlo: vinculo de contacto

Tiene un formulario de contacto, o un vínculo a su dirección de correo electrónico? Si es así, póngale un accesskey="9".

<a href="mailto:me@mydomain.com" accesskey="9">Email me</a>

Nota: Los registros de apuntes (weblogs) de Radio generalmente tienen un vínculo hacia el formulario de contacto (el pequeño icono de sobre), pero el vínculo es generado por un macro, así que no podrá añadirle un accesskey a estos vínculos.

Asegúrese de incluir cada accesskey cada página de su sitio de Internet; haga estos cambios en todas sus plantillas relevantes.

Lectura añadida

 
<< Día 14: Añadir títulos a los vínculos | Contenido | Día 16: No abrir ventanas nuevas >>