Lista de verificación de accesibilidad del diseño
Skip to main content

Lista de verificación de accesibilidad del diseño

Directrices de marca

Esta lista de verificación destaca consideraciones de accesibilidad en el diseño. Ayuda a garantizar que el contenido sea accesible y pueda utilizarse para papel, digital, señalización, presentaciones, etc.

Esta lista de verificación es una herramienta práctica para que empleados y contratistas la utilicen al preparar contenido. Seguir estas comprobaciones ayuda a garantizar que tu trabajo sea tanto fiel a la marca como accesible.

Importante: Esta lista de comprobación es intencionadamente de alto nivel. Si tu resultado final se ajusta a requisitos específicos de accesibilidad documental o digital, esos requisitos tienen prioridad en esta lista de comprobación. 

Color y contraste

  • Utiliza suficiente contraste de color entre texto y fondo.
    • Contraste de color 4.5:1 entre texto y colores de fondo
    • Contraste 3:1 entre elementos gráficos y colores de fondo
  • No te fíes solo del color para transmitir significado.
    • Ejemplo: Usa iconos o etiquetas además de los colores.
  • Evita combinaciones de colores problemáticas
    • Ejemplo: Rojo/verde o azul/morado son difíciles para algunos usuarios diferenciar entre colores.

Contenido e idioma

  • Utiliza un lenguaje sencillo y evita la jerga siempre que sea posible.
    • Ejemplo: Di "usar" en lugar de "utilizar".
  • Mantén frases cortas y directas.
    • Apunta a un nivel de lectura alrededor de 8º de primaria.
  • Usa encabezados y viñetas para desglosar contenido denso.
    • Mejora el escaneo y la comprensión.
  • Utiliza encabezados claros y etiquetas para las secciones de contenido y formularios.

Imágenes e iconos

  • Utiliza iconos que estén generalmente asociados a las etiquetas de contenido cuando sea posible.
    • Ejemplo: Un icono de papelera con la palabra "Eliminar".
  • Evita el texto incrustado en las imágenes.
    • El texto en las imágenes no es leído automáticamente por los lectores de pantalla.
  • Asegúrate de que las imágenes apoyen el mensaje y no distraigan ni confundan.
    • Las imágenes deben estar relacionadas con el contenido. 
  • Usa texto alternativo para describir imágenes relevantes para el contenido. 

Distribución y espaciamiento

  • Utiliza una jerarquía visual clara para guiar al usuario.
    • Es mejor tener contenido largo y bien estructurado que contenido corto y difícil de leer.
  • Asegúrate de un espacio adecuado entre los elementos.
    • Evita el desorden que abrume o confunda.
  • Alinea el contenido de forma consistente para apoyar el escaneo y la comprensión.
    • Ejemplo: El texto alineado a la izquierda es más fácil de leer que el alineado al centro.

Movimiento y animación

  • Evita efectos de parpadeo o estroboscópico.
    • Referencia: WCAG – Tres destellos o por debajo del umbral.
  • Ofrecer opciones de movimiento reducido para materiales digitales.
    • Ejemplo: Respeta los ajustes del sistema para reducir el movimiento.
  • Usa la animación a propósito, no decorativamente.
    • Ejemplo: Usa transiciones para guiar la atención, no solo para darle estilo.

Tipografía/Fuentes

  • Utiliza tamaños mínimos de fuente que cumplan con los requisitos de accesibilidad.  
    • fuente de 12 puntos en impresión y de 16 píxeles para contenido digital .
    • Ejemplo: El texto pequeño en fuente de 8 píxeles no es legible.
  • Utiliza tamaños de titulares para crear una jerarquía clara, aplicada de forma coherente y lógica, para guiar al usuario y cumplir con los requisitos de accesibilidad.
  • Mantener suficiente espaciado entre líneas
    • El tamaño de la fuente 1,5 veces la altura de la línea es un estándar general. 
    • Este enfoque mejora la legibilidad, especialmente para usuarios con discapacidad visual.

Reseña de la marca