Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Consejos de Accesibilidad de Teclado Usando HTML y CSS

Read Time: 9 mins

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Haciendo su sitio de Internet accesible para los usuarios de teclado es una parte importante de la imagen más grande de la accesibilidad. Aquí hay algunos teclado consejos de accesibilidad que puede implementar rápidamente usando HTML y CSS.

A11y Desde el Principio

Estos consejos forman parte de la Accesibilidad Web: La Guía de Aprendizaje, donde hemos recogido una serie de tutoriales, artículos, cursos y libros electrónicos, para ayudarle a entender la accesibilidad web desde el principio.

¿Qué es la Accesibilidad del Teclado?

Un teclado puede ser el medio principal para algunos usuarios a navegar por sitios Web. Hoy en día, cuando más interfaces web están diseñadas con los cursores de ratón y toquen de interacción en la mente, se descuida la navegación mediante el teclado. Accesibilidad de teclado es la práctica de hacer seguro que los usuarios pueden navegar eficientemente y sin obstáculos a su teclado.

¿Que Puede Der que Necesite Accesibilidad de Teclado?

Estos son los grupos objetivo de accesibilidad de teclado:

  • Usuarios con discapacidad motor que tienen dificultad usando un ratón, usando un dispositivo táctil o haciendo clic en las cosas pequeñas.
  • Los usuarios ciegos o deficientes visuales con frecuencia prefieren navegar sitios web con los teclados Braille específicos.
  • Amputados o con amputación congénita (luz sin una extremidad o las extremidades, especialmente manos en este caso) a menudo uso hardware especial imitando la funcionalidad del teclado.
  • Cualquier persona que simplemente no tiene acceso a un funcionamiento del ratón o touchpad.

1. Pruebe su Sitio la Accesibilidad de Teclado

El objetivo más importante de la accesibilidad de teclado está a disposición de todos los elementos interactivos, como enlaces y controles de formulario, con la tecla Tab. Esto es cómo teclado sólo para los usuarios navegar a través de una página web. Prueba tu sitio web de accesibilidad de teclado es realmente bastante fácil: simplemente presione la tecla Tab y navegar desde la parte superior de la página en la parte inferior, destacando los elementos activos como vas.

Navigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab key
Navegando por los enlaces en el footer Tuts+ con la tecla Tab

Observar cuán fácil o difícil que es llegar al contenido principal, haga clic en un elemento de menú, rellene un formulario, funcionar un resbalador o siga su posición actual en la página. También puede probar hacia atrás usando el Shift + Tab atajo de teclado.

2. Crear Sensible :focus Estilos

CSS tiene un :focus pseudo clase que se desencadena cuando un usuario hace clic o golpecitos sobre un punto o lo seleccionas con la tecla Tab. El estado de :focus sólo se aplica a elementos pueden enfocar, es decir, <a>, <button><input>, <textarea>, <select>, y <area>.

Cada navegador viene con su propio defecto :focus estilos – generalmente un contorno negro punteado alrededor del elemento, o una luz borrosa, sin embargo, muchos diseñadores encuentran no a su gusto y totalmente la eliminará. Este es realmente el error número uno que ruinas accesibilidad de teclado en las páginas web. Si no te gusta los estilos predeterminados, utilice algo que coincida con el diseño de su sitio Web.

focus styles in Google Chrome browserfocus styles in Google Chrome browserfocus styles in Google Chrome browser
Por Defecto: Estilos en el Navegador Google Chrome se Centran

Elija un estilo que es fácilmente sensible pero no se basa únicamente en colores. Este es un ejemplo posible que puede funcionar bien para los usuarios de teclado:

3. Utilizar Designadores Sin Color para los Enlaces

Los hipervínculos no deberían distinguirse sólo por el color. Este principio generalmente se menciona en relación con la accesibilidad visual, como personas con baja visión encontraron las diferencias entre ciertos colores difíciles de discernir. Sin embargo, claramente visibles enlaces también son importantes para la accesibilidad del teclado. Usuarios teclado deben ser capaces de punto enlaces tan rápidamente como sea posible. Esto les ayuda a explorar la página y averiguar cómo navegar a la parte que les interesa.

De manera similar a :focus estilos, hipervínculos también vienen con un estilo predeterminado navegador — azul destaca en la mayoría de los casos. Sin embargo, diseñadores con frecuencia eliminar el subrayado y sólo utilizan colores para indicar la presencia de un enlace. Si se quita el subrayado por defecto siempre use otro designador sin color que coincida con su diseño de sitio web, como las fronteras, los iconos o contornos.

Clear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visited
Borrar enlaces en gov.uk: (1) hipervínculo (2) centrado (3) visitado

Usted puede utilizar el atributo title para describir el contenido de un vínculo, pero sólo se hace visible cuando alguien pasa el link. Teclado-sólo los usuarios no tienen acceso a suspender eventos, nunca coloque información crucial en el atributo title. También no cuenta como un indicador sin color. Por ejemplo, nunca hacer esto:

En su lugar, haga lo siguiente:

WCAG 2.0 también advierte sobre los problemas de accesibilidad del atributo title. Utilizar con cuidado o no usarlo en absoluto.

4. Utilizar Elementos de Control Nativo

Las formas son elementos interactivos, así que necesitan ser accesibles mediante el teclado. Teclado de usuario debe ser capaz de rellenar formularios, botones, utilice reguladores de gama, seleccione Opciones y operar controles con facilidad. Si usted tiene cualquiera de los formularios en su sitio web debe probar uno por uno, usando la tecla Tab. Pensar en formas de registro, formas de boletín de noticias, formas de inicio de sesión, formas de comentario, carros y así sucesivamente.

La mejor manera de crear formularios accesibles es mediante elementos de control nativo donde es posible. Elementos de control nativo cuentan con accesibilidad de teclado incorporado, lo que significa que son enfocable y responden a los eventos de pulsación de tecla por defecto. Son los siguientes:

  • <button>
  • <input>
  • <textarea>
  • <select>
  • <option>

Por ejemplo, puede crear un slider de gama accesible de teclado con el siguiente código HTML:

Los usuarios de teclado pueden enfocarla con la tecla Tab, primero mueva el control deslizante hacia arriba y hacia abajo con el Espacio.

Si usted necesita utilizar una etiqueta HTML no enfocable para un elemento interactivo por alguna razón, usted puede hacer enfocable con el atributo tabindex = "0". Por ejemplo, aquí es un <div> convertido en un botón de zoom:

El role= "botón" en el fragmento anterior es una función de punto de referencia ARIA. Aunque los usuarios de teclado no lo necesita, es indispensable para usuarios de lectores de pantalla y accesibilidad visual.

Incluso si el botón de no nativos se ha enfocable, es todavía inferior a su contraparte nativa en términos de accesibilidad de teclado. Vas a entender inmediatamente cuando intenta agregar un controlador de eventos para el botón. Aquí es lo que parece un detector de eventos de clic con el nativo <button> elementos:

Y aquí es el equivalente con el botón del div:

Si hace clic en los botones utilizando el ratón o touchpad puedes ver ambos mensajes de alerta. Sin embargo, si usted navega a cada botón mediante la tecla Tab y oprimir la tecla Enter para procesarlos, sólo verá el primer mensaje, perteneciente al botón nativo. Para hacer este proceso no nativos botón el teclado, también debe definir un controlador de eventos keypress por separado:

Ahora, cuando los usuarios de teclado oprimir la tecla Enter, también ver el mensaje que pertenece al botón de no nativos. Como se puede ver, es mucho más fácil y más rápido utilizar la versión nativa. Por lo tanto, a menos que tenga una buena razón para no usarlos, siempre utilizar los elementos de control nativo.

5. Añadir un enlace "Saltar al contenido principal"

Agregar un salto al contenido principal o Skip navegación enlace a sus páginas web enormemente ayuda a los usuarios mediante teclado. En la mayoría de los casos, estos usuarios no quieren saltar a través de todos los enlaces de navegación antes de que comiencen a leer el contenido. Esto es especialmente cierto cuando echa un vistazo a más de una página en su sitio. Imagínense, sin un vínculo de navegación skip, tienen que pasar por los mismos enlaces de navegación en la Página principal cada vez. No parece como una actividad particularmente entretenida.

Para crear un vínculo de navegación saltar funcionamiento, necesita enlazar con el contenido principal usando los atributos id y href HTML de la siguiente manera:

Usted también necesitará agregar el tabindex = "-1" atributo en el contenedor del contenido principal. Este es el mismo tabindex que hemos utilizado anteriormente para hacer el botón de no nativos pueden recibir el foco. El atributo tabindex se utiliza para modificar el orden de navegación por defecto. Con un valor de 0, tiene elementos no enfocable enfocable. Con un valor de -1, también hace que los elementos pueden recibir el foco pero se convierten en no-accesible con navegación mediante el teclado por defecto. Algunos navegadores, como Chrome y IE, requieren la presencia de tabindex = "-1" en el destino del enlace de navegación skip, así nunca omitirlo.

Revelan el Vínculo de Omitir Sólo para Usuarios de Teclado

Puede utilizar CSS para hacer el enlace de navegación skip visible sólo para usuarios de teclado. En su estado por defecto, ocultar el enlace de usuarios regulares colocando fuera de la vista. Entonces, revelar para usuarios de teclado mediante la creación de estilos diferentes para el estado de atención que se activa cuando el usuario toca la tecla Tab.

Usted puede ver este efecto en acción en sitios como webaim.org, www.w3.org y (como siempre) www.gov.uk:

Reveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard Users
¿Has visto este enlace antes?

El siguiente CSS es una versión simplificada del código de navegación skip de NC State University IT Manual de Accesibilidad:

Cuando el usuario toca la tecla Tab, el elemento .skip-main es dado su estado de enfoque y el enlace de navegación skip aparece en la pantalla.

Rápidamente puede probar cómo funciona si haces click en la parte superior de la maqueta de abajo y presione la tecla Tab. Usted puede encontrar más fácil abrir la demo a continuación en la vista página completa en su lugar.

Pasos a Seguir

En este artículo, compartió algunos consejos de accesibilidad de teclado básicos que usted puede implementar utilizando HTML y CSS. Hay otro, más avanzado cosas que podría hacer para accesibilidad de teclado así. Por ejemplo, usted podría:

Además de estos consejos, evitar el uso de CAPTCHAs donde sea posible, ya que tienen problemas graves de accesibilidad, tanto para usuarios de teclado y lector de pantalla. Si necesita utilizarlos, proporcionar más de dos formas de solucionarlos, de lo contrario los usuarios accesibilidad necesitan tendrá que luchar para procesar sus formularios. Háganos saber si usted tiene algún consejo de accesibilidad de teclado de los tuyos!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.