Como creo y le doy estilo a las teclas de acceso?

Css | Escrito por Ezequiel M. | Marzo - 20 - 2009

Mejorar la accesibilidad de un sitio puede cambiar la experiencia del navegante y el uso de las teclas de acceso es uno de los puntos mas esenciales. Para asignar teclas de acceso a palabras o enlaces hay que utilizar una etiqueta XHTML.

Con la etiqueta “acceskey” nos referimos a una letra del teclado y con una etiqueta “Span” la estilizamos. ¿Suena medio complicado? es muy sencillo. Una letra de la palabra estará subrayada indicando la letra del teclado asignada.

Código CSS:

.letra{
text-decoration: underline; /*--Subrayando la letra--*/
}

Código XTML:


Nombre

Nombre

Resultado:

Sin poner enfasis en el diseño del formulario, veamos la funcionalidad. En firefox tenemos que presionar ALT + SHIFT + “La letra subrayada” que en este caso seria la “d” y el campo “Nombre” quedara seleccionado y listo para ser rellenado.

Datos

Nombre

Articulos relacionados:

Como elimino el subrayado de mis enlaces? Básicamente un enlace de texto toma las propiedades especificadas para el elemento, agregándole además de su color característico, un subrayado que indica que es un enlace. Su simbología es única porque en la actualidad cualquier persona lo reconoce. Si necesitas eliminar ese subrayado con CSS lo podes hacer de la siguiente manera. Código CSS: a:link, a:visited{ text-decoration:none; } Código XHTML: Mi
Como hacer transparencias con Opacity en CSS3 CSS3 promete solucionar muchos de los problemas y necesidades de los maquetadores web. Todavía hay incompatibilidades con CSS2.1 en algunos navegadores, pero esto no desmerece estudiar y practicar sobre esta nueva promesa. La propiedad Opacity permite hacer transparencias con valores Alpha que van del 0.0 al 1.0, esto equivale a 0% y 100%. Muy facil de
Como oculto un elemento sin que deje de ocupar su espacio? Mediante una simple propiedad podemos hacer desaparecer elementos como párrafos, imagenes, enlaces, tablas, celdas, listas, citas, contenedores y mas sin eliminarlos de nuestro Xhtml. La propiedad Visibility:hidden; oculta el o los elementos a los que les asignemos dicha propiedad. Esto puede ser útil, por ejemplo, cuando queremos ocultar un enlace sin que nuestro diseño se desmorone