Autor Tema: Accesibilidad mediante el teclado  (Leído 24034 veces)

Desconectado Gepetto

  • Iniciado
  • *****
  • Mensajes: 1129
Accesibilidad mediante el teclado
« en: 06 de Enero de 2006, 04:30:17 pm »
Siempre cabe la posibilidad de que algun visitante de nuestro sitio web no pueda hacer uso del ratón, bien debido a una minusvalía física o bien porque en determinadas ocasiones le puede resultar incómodo.

Para mejorar la accesibilidad a esos visitantes, html4 posee dos interesantes funciones: el "tabindex" y el "accesskey".

--------------------------------------------

Por norma general, podemos cambiar entre enlaces por medio del tabulador, pero si queremos que al pulsarlo el foco se sitúe en un determinado enlace, haremos uso de la etiqueta "tabindex":

Citar
<h3>Uso del tabulador</h3>
<ul>
<li><a href="#enlace1" tabindex="1">Enlace1</a></li>
<li><a href="#enlace2" tabindex="2">Enlace2</a></li>
<li><a href="#enlace3" tabindex="3">Enlace3</a></li>
<li><a href="#enlace4" tabindex="4">Enlace4</a></li>
<li><a href="#enlace5" tabindex="5">Enlace5</a></li>
</ul>


El borde punteado alrededor del enlace4
indica que he pulsado el tabulador cuatro veces.


--------------------------------------------

La mayoría de navegadores modernos también permiten teclas de acceso rápido o atajos. Si queremos que un enlace se abra al pulsar alt+tecla, entonces usaremos "accesskey":

Citar
<h3>Teclas de acceso</h3>
<ul>
<li><a href="http://www.google.es" target="_blank" accesskey="g">G-oogle</a></li>
<li><a href="http://www.daboweb.com" target="_blank" accesskey="d">D-aboweb</a></li>
<li><a href="http://www.otrapagina.net" target="_blank" accesskey="o">O-tra página</a></li>
</ul>


He abierto el buscador google manteniendo
pulsadas las teclas alt + g


--------------------------------------------

*Aclaración del resto de código utilizado:


<h3> - Etiqueta de tamaño predefinido para los títulos.

<ul><li> - Lo he usado para crear los enlaces en modo lista.

target="_blank" - Usado para abrir los enlaces en una nueva ventana.

En el segundo ejemplo, he separado con un guión la primera letra de cada enlace (esto lo he hecho para dar una pista al visitante de que puede abrir los enlaces usando atajos). Aparte de un guión, podria haber utilizado por ejemplo la negrita, un tamaño mayor de fuente, etc...

 

Aviso Legal | Política de Privacidad | Política de Cookies

el contenido de la web se rige bajo licencia
Creative Commons License