Skip to main content English Español Light Dark System

Accesibilidad

El diseño accesible permite que personas de todas las capacidades interactúen con nuestros productos, los comprendan y los naveguen.

La accesibilidad es responsabilidad de todos. Inclúyela desde el inicio para evitar modificaciones costosas posteriores.

Creamos productos inclusivos para todos. Nuestro sistema de diseño integra funciones de accesibilidad por defecto en cada componente y herramienta.

Todos enfrentamos limitaciones: permanentes, temporales o situacionales. La tecnología de asistencia ha mejorado la web, pero aún necesitamos tu participación para crear experiencias equitativas.

Para qué diseñamos

Diseñamos para personas, no para cumplir normativas. Consideramos equidad e inclusión en cada etapa del proceso.

Diseñamos para:

  • Discapacidades visuales: Texto alternativo descriptivo, HTML semántico, contraste adecuado. No uses solo color para transmitir información.

  • Discapacidades auditivas: Proporciona información visual y textual como alternativa al audio.

  • Movilidad limitada: Navegación por teclado, objetivos de gran tamaño, HTML semántico para reconocimiento de voz.

  • Discapacidades cognitivas: Redacción clara, diseño simple, navegación intuitiva.

  • Discapacidades múltiples: Soluciones integrales, no aisladas.

  • Lenguaje inclusivo: Textos traducibles e inclusivos en género, raza y edad.

Principios fundamentales

Consistencia

Usa las mismas soluciones para problemas similares. Los componentes del sistema de diseño aseguran experiencias familiares en cualquier dispositivo o tecnología de asistencia.

Texto alternativo

El texto permite múltiples formas de consumo:

  • Lectura visual
  • Audio via lectores de pantalla
  • Táctil con braille

Etiquetas claras, texto alternativo y transcripciones son esenciales.

Colores accesibles

No dependas del color para transmitir información. Usa contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande. Los colores tienen significados culturales diferentes.

Control del usuario

  • Diseño adaptable a todos los tamaños de pantalla
  • Personalización de escala y colores (modo oscuro, alto contraste)
  • Respeto a preferencias de movimiento reducido
  • Información clara sobre cambios importantes

HTML semántico

Usa elementos que describan su significado (<header>, <nav>, <section>) en lugar de elementos genéricos (<div>, <span>). Las tecnologías de asistencia interpretan mejor el contenido semántico.

Inclusión interseccional

Diseña para todas las razas, géneros, orientaciones y orígenes. Las personas pueden enfrentar múltiples barreras simultáneamente.

Simplicidad

Crea software fácil de usar que respete el tiempo de las personas. La mayoría usa productos para completar tareas, no por entretenimiento.

Pruebas diversas

Involucra usuarios diversos en las pruebas: personas con discapacidades, diferentes niveles técnicos, tecnologías variadas y críticos del producto.