Content

Accesibilidad web para diseñadores

¿Un tamaño para todos?

Usted está aquí:Inicio > Recursos > Accesibilidad web para diseñadores

(Visit WebAIM English page)

Contenidos del artículo

  1. Infografía
  2. Versión del texto
  3. Código de inserción

El enfoque de la accesibilidad web está, a menudo, en el desarrollo web; lo que sucede en HTML, CSS o JavaScript después que un sitio ha sido diseñado visualmente. La accesibilidad óptima debe comenzar mucho antes, como parte del proceso de diseño gráfico. Hemos creado una infografía que destaca algunos principios importantes de diseño accesible.

Infografía

Versión de Texto

Nota
Ver una versión accesible de la infografía anterior, cortesía de Chris Throup.
Planee la estructura del heading con anticipación

Asegúrese que todo el contenido y el diseño encajan en una estructura lógica de heading.

Considere el orden de lectura

El orden de lectura debe ser el mismo que el orden visual.

Proporcionar un buen contraste

Tenga especial cuidado con los tonos claros de gris, naranja y amarillo. Revise sus niveles de contraste con nuestro comprobador de contraste de color.

Utilice texto verdadero siempre que sea posible

La fuente verdadera aumenta mejor de tamaño, se carga más rápido y es más fácil de traducir. Utilice CSS para añadir estilo visual.

Tenga cuidado con el uso de mayúsculas

Las mayúsculas pueden ser difíciles de leer y pueden ser leídas incorrectamente por los lectores de pantalla.

Use un tamaño de fuente adecuado

El tamaño de la fuente puede variar en función de la fuente elegida, pero suele ser de 10 puntos como mínimo.

Recuerde la longitud de la línea

No la haga demasiado larga o demasiada corta.

Asegúrese de que los enlaces son reconocibles

Diferencie enlaces en el cuerpo de la página con subrayado u otra cosa que no sea solo el color.

Diseñe un enlace de indicadores de selección

Un enlace para los usuarios con teclado para saltar la navegación debe estar en la parte superior de la página. Se puede ocultar, pero debe ser visible cuando se selecciona con el teclado.

Asegúrese de que el texto del enlace tenga sentido por sí mismo

Evite "Haga clic aquí" en el texto del enlace Otros enlaces ambiguos, como "Más" o "Continuar", también pueden ser confusos.

Utilice las animaciones, vídeos y audios con cuidado

Si se utilizan, proporcione un botón de reproducción / pausa. Evite contenido intermitente o estroboscópico: puede causar convulsiones.

No dependa solo del color

Dado que los usuarios a menudo no pueden distinguir, o pueden anular los colores de la página, el color no puede ser la única manera de transmitir información.

Diseñar controles de formulario accesibles

Asegúrese de que los controles de formulario tengan etiquetas e instrucciones descriptivas. Preste mucha atención a la forma de validación de errores y mecanismos de recuperación.

Código de inserción

Puede insertar esta infografía en su propia página copiando y pegando el siguiente código:

© 2015 WebAIM
Utah State University
6807 Old Main Hill
Logan, UT 84322-6807
435.797.7024