Accesibilidad web (WCAG) para diseñadores UX/UI: checklist práctico

Qué es la accesibilidad web para diseñadores UX/UI 

Accesibilidad web significa que un producto digital —una web, una app, un servicio— puede usarse por el máximo número de personas posible, incluyendo a quienes tienen alguna discapacidad visual, auditiva, motora o cognitiva, y también a personas que usan el producto en condiciones complicadas (móvil al sol, mala conexión, prisas…). 

Desde el rol de diseño UX/UI, accesibilidad web es: 

Diseñar interfaces que se perciben, se entienden y se pueden usar sin barreras innecesarias. 

No es un tema solo jurídico ni técnico. Es diseño inclusivo, buen criterio y profesionalidad. 

Las WCAG (Web Content Accessibility Guidelines) son el estándar internacional que recoge qué debe cumplir un contenido web para ser accesible. Son la base sobre la que se apoyan leyes, políticas internas de empresas y auditorías de producto.

Por qué la accesibilidad web también es cosa de diseño 

Mitos frecuentes que frenan a los diseñadores 

Si vienes del mundo del diseño visual o del front junior, es fácil que te suenen algunas de estas ideas: 

• “La accesibilidad es cosa de desarrollo, yo llego hasta las pantallas.” 
• “Para aplicar las WCAG tengo que saberme un PDF técnico de memoria.” 
• “Si respeto la accesibilidad, mis diseños van a ser feos o planos.” 
• “Eso solo lo miran grandes empresas o proyectos muy formales.” 

El problema de estos mitos es que te dejan fuera de una parte importante de tu trabajo: 

• Como diseñador decides colores, jerarquía, tamaños, estados de interacción, microcopy. 
• Muchas de esas decisiones son, de hecho, decisiones de accesibilidad. 

De “cumplir normativa” a diseñar sin dejar a nadie fuera 

Cuando se habla de accesibilidad se piensa rápido en leyes, multas o informes. Pero, antes de eso, accesibilidad va de algo mucho más simple: 

Quién puede usar tu interfaz y quién se queda fuera. 

Algunos ejemplos muy cotidianos: 

• Una persona con baja visión que aumenta el zoom del navegador. 
• Una persona que navega con teclado porque no puede usar un ratón. 
• Alguien que rellena un formulario desde el móvil, en la calle y con prisa. 

Las WCAG sirven para que tu interfaz se pueda percibir, manejar y entender en todas esas situaciones reales, no solo en el escenario perfecto de diseño.

Si te quedas solo con “cumplir WCAG”, la accesibilidad parece algo lejano. Si la ves como diseñar experiencias sin barreras, se convierte en una parte natural de tu trabajo. 

Decisiones clave que se toman en Figma, no solo en código 

Gran parte de lo que marca la diferencia se decide cuando tú: 

• Eliges la paleta de colores para fondos, textos y botones. 
• Defines tamaños de tipografía y espaciados. 
• Diseñas la jerarquía de títulos de una landing. 
• Piensas los estados de foco de un botón o un enlace. 
• Montas un formulario de registro. 
• Escribes un mensaje de error o el texto de un enlace. 

Si ignoras la accesibilidad en estas fases, el área de desarrollo solo puede parchear y, a menudo, tarde. 

Un diseñador que entiende accesibilidad: 

• Mejora la experiencia de personas con y sin discapacidad. 
• Aporta calidad al producto. 
• Evita retrabajos y riesgos futuros. 
• Y gana puntos de empleabilidad en equipos que valoran perfiles que unen UX, negocio y cumplimiento. 

No se trata de que cargues tú solo con todo, sino de aceptar que tu capacidad de impacto es muy alta. 

WCAG para diseñadores: lo esencial sin leerte todo el PDF 

Las WCAG son largas y técnicas, sí. La buena noticia: no necesitas saberlas de memoria para empezar a aplicarlas bien desde tu rol de diseño. 

Los cuatro principios WCAG explicados para diseño 

Las WCAG se organizan en cuatro principios. Puedes usarlos como mini-brief para cualquier interfaz accesible:

1. Perceptible 

 La información y los componentes de interfaz deben poder percibirse. 

• Texto con buen contraste y tamaño suficiente. 
• Iconos que se acompañan de texto o explicación, no van “solos” si son importantes. 
• Vídeos que tengan alternativa para quien no oye el audio. 

2. Operable 

 La interfaz se debe poder manejar con distintos métodos de interacción. 

• Ratón, teclado, dispositivos táctiles, lectores de pantalla. 
• Menús que no dependen solo del hover en escritorio. 
• Focos visibles al navegar con teclado. 

3. Comprensible 

 El contenido y el funcionamiento deben ser entendibles y previsibles. 

• Etiquetas de botones claras. 
• Mensajes de error que expliquen qué pasa y qué hacer. 
• Comportamientos coherentes entre pantallas. 

4. Robusto 

El contenido debe poder interpretarse bien por navegadores y tecnologías de apoyo. 

• Aquí entra más el código, pero tú decides qué es un botón, qué es un enlace, qué es un título y cómo lo documentas en tu sistema de diseño. 

Si, mientras diseñas, te haces estas cuatro preguntas: 

¿Se percibe bien? ¿Se puede manejar? ¿Se entiende? ¿Se interpreta bien? 

ya estás pensando en accesibilidad con la lógica de las WCAG. 

Niveles A, AA y AAA: qué te afecta en el día a día 

Las WCAG se estructuran en tres niveles de conformidad:

• Nivel A: requisitos básicos. Sin ellos, muchas personas ni siquiera pueden usar el sitio. 
• Nivel AA: estándar más habitual. Es el nivel de referencia para la mayoría de productos. 
• Nivel AAA: requisitos avanzados que no siempre se pueden aplicar en todo el contenido. 

Desde el área de diseño, tu objetivo realista es alinearte con nivel AA. No necesitas recordar todos los criterios, pero sí interiorizar cosas como: 

• Contrastes mínimos para texto. 
• Formularios con etiquetas claras. 
• Navegación coherente y predecible. 

En proyectos y organizaciones más maduras, formarte con un enfoque completo —como el que se trabaja en el Máster Oficial en Experiencia de Usuario para el Diseño de Productos y Servicios Digitales de UDIT — te permite entender cómo se llevan estos niveles a producto real, negocio y servicio.

Herramientas que te ayudan desde diseño (sin tocar código) 

Para revisar accesibilidad no tienes que fiarte solo de tu ojo: 

• Plugins de contraste de color en Figma o Sketch para comprobar si texto y fondo cumplen WCAG AA o AAA. 
• Simuladores de daltonismo y baja visión para ver cómo cambia la interfaz. 
• Extensiones de navegador que analizan páginas ya maquetadas y señalan fallos básicos de accesibilidad. 

Tu criterio sigue siendo lo principal, pero estas herramientas te ayudan a argumentar con datos. 

Checklist de accesibilidad web para diseñadores UX/UI 

Un checklist de accesibilidad web pensado para tu día a día como diseñador UX/UI no sustituye a las WCAG, pero es un mapa práctico para tus próximos proyectos, portfolio o case studies. 

1. Colores y contraste 

El color es una de las primeras decisiones de diseño y una de las primeras fuentes de problemas de accesibilidad. 

Ten en cuenta: 

Asegura que contraste texto–fondo cumple, como mínimo, WCAG AA: 

• Texto normal con contraste suficiente. 
• Texto grande (títulos, cifras destacadas) con contraste adecuado.

Revisa el contraste en componentes clave: 

• Botones primarios y secundarios. 
• Etiquetas de formularios. 
• Enlaces dentro de párrafos. 
• Mensajes de error y validación.
  

Evita usar solo el color para transmitir información. Combina color con: 

• Texto (“Error en el campo de correo”). 
• Iconos (✔ ✖). 
• Cambios de borde, subrayado o forma. 

Revisa la interfaz en modo claro y modo oscuro, si tu producto los tiene. 

Checklist de color y contraste: 

• El texto principal tiene contraste suficiente con el fondo. 
• Botones y enlaces destacan frente al resto de elementos. 
• Los estados de error o éxito no dependen solo del color. 
• Comprobación del contraste con alguna herramienta, no solo a ojo. 

2. Tipografía, tamaño de texto y espaciado 

Una tipografía preciosa pero ilegible no es un buen diseño. 

Cuida estos aspectos: 

• Define tamaños mínimos de texto cómodos en escritorio y móvil. Como referencia, una base en torno a 16 px en web suele ser un buen punto de partida. 
• Mantén un interlineado generoso y espacio entre párrafos. Los bloques densos cansan rápido, sobre todo en móvil. 
• Evita párrafos muy largos. Introduce subtítulos, listas y destacados para facilitar la lectura en diagonal. 
• Asegúrate de que el texto siga siendo legible cuando la persona aumenta el zoom del navegador. 

Checklist rápido de tipografía: 

• El cuerpo de texto tiene un tamaño cómodo y consistente. 
• Interlineado y márgenes facilitan la lectura, no la dificultan. 
• No hay párrafos excesivamente largos sin respiro visual. 
• La tipografía se lee bien en distintos tamaños de pantalla y con zoom. 

3. Estructura y jerarquía visual 

La jerarquía visual ayuda tanto a las personas como a las tecnologías de apoyo (lectores de pantalla, por ejemplo).

Como diseñador, ordena: 

• El título principal (H1). Uno por página, claro, descriptivo. 
• Los subtítulos (H2, H3…) con jerarquía coherente visual y semántica. 
• La secuencia de bloques de contenido: qué aparece antes, qué después, qué depende de qué. 
• La alineación de textos y componentes, que guía el flujo de lectura. 

Checklist rápido de estructura: 

• Hay un título principal claro por pantalla o página. 
• Los subtítulos siguen una jerarquía lógica, sin saltos extraños. 
• El orden visual coincide con el orden natural de lectura. 
• El tamaño de cada texto refleja su importancia real. 

4. Navegación y foco: pensar también en teclado 

Una interfaz que solo se usa bien con ratón deja fuera a muchas personas. 

Ten presente: 

• El orden de tabulación debe seguir el flujo lógico de la página. Aunque tú no programes, puedes diseñar y documentar ese orden. 
• Los estados de foco (focus) deben ser visibles, claros y consistentes. Si se eliminan “por estética”, para muchas personas la interfaz se convierte en un laberinto. 
• Los componentes interactivos (botones, enlaces, pestañas, toggles) deben ser fácilmente identificables como interactivos. 

Checklist de navegación y foco: 

• Puedo imaginar un recorrido claro por la interfaz usando solo teclado. 
• Cada elemento interactivo tiene un estado de foco visible. 
• Los elementos clicables se distinguen bien del contenido no interactivo. 
• No dependo de efectos de hover que no existen en móvil o teclado. 

5. Formularios accesibles desde diseño 

Muchos problemas de accesibilidad se concentran en los formularios. 

Diseña formularios que ayuden: 

• Utiliza etiquetas visibles para los campos. El placeholder puede complementar, pero no sustituir la etiqueta. 
• Escribe mensajes de error claros, vinculados al campo concreto e indicando cómo corregirlo. 
• Señala los campos obligatorios de forma clara, no solo con color. 
• Agrupa campos por bloques lógicos (datos personales, envío, pago) y evita “pantallas muro” con demasiados campos sin respiro. 

Checklist de formularios: 

• Cada campo tiene una etiqueta clara y visible. 
• Los mensajes de error explican qué pasa y cómo solucionarlo. 
• Los campos obligatorios están bien indicados. 
• La estructura del formulario guía la tarea en lugar de estorbarla. 

6. Contenido, microcopy y mensajes 

La accesibilidad también se juega en la forma de escribir. 

Trata el texto como parte del diseño: 

• Escribe textos claros y específicos. Evita tecnicismos innecesarios. 
• Usa textos de enlace descriptivos: “Ver detalles del pedido”, “Editar dirección de envío”, en lugar de “Haz clic aquí”. 
• Coloca instrucciones antes de la acción, no solo después del error. 
• Mantén un tono coherente con la marca, priorizando siempre la comprensión. 

Checklist de contenido y microcopy: 

• El texto explica con claridad qué puede hacer la persona en cada pantalla. 
• Los enlaces y botones tienen etiquetas descriptivas. 
• Las instrucciones aparecen en el momento en que se necesitan. 
• He revisado los textos pensando en alguien cansado o con prisa. 

7. Imágenes, iconos y multimedia 

No todas las personas perciben imágenes, iconos o vídeos de la misma manera. 

Tenlo en cuenta: 

• Diferencia entre imágenes decorativas (añaden estética) e informativas (aportan información clave). 
• Las imágenes informativas (gráficos, esquemas, diagramas) deben tener una descripción alternativa que recoja su contenido. 
• Los iconos que representan acciones importantes (guardar, eliminar, compartir) deberían acompañarse de texto o, al menos, contar con una etiqueta accesible que desarrollo pueda implementar. 
• En vídeo, considera subtítulos y una breve descripción textual de lo esencial. 

Checklist de imágenes y multimedia: 

• Distingo claramente qué imágenes son decorativas y cuáles informativas. 
• Las imágenes informativas también se entienden a través de texto. 
• Los iconos de acción cuentan con apoyo de texto o etiqueta. 
• Los vídeos tienen en cuenta a quienes no pueden oír el audio. 

8. Diseño responsive y estados de interacción 

Tu diseño no vive solo en una pantalla de escritorio perfecta. 

Ten en mente: 

Revisa cómo se reorganiza la jerarquía en pantallas pequeñas. Lo que funciona en 1440 px puede romperse en móvil. 

Diseña siempre los estados de interacción de los componentes clave: 

• Normal. 
• Hover (si aplica). 
• Foco (focus). 
• Activo. 
• Desactivado (disabled).

Evita gestos invisibles en móvil (swipes sin pistas). Asegura que haya elementos visibles que inviten a la acción. 

Checklist responsive e interacción: 

• He revisado legibilidad y jerarquía en distintos tamaños de pantalla. 
• Cada componente clave tiene estados definidos y distinguibles. 
• No dependo de gestos ocultos que la persona tenga que adivinar. 
• La interfaz se mantiene usable con zoom y en distintas orientaciones. 

Cómo integrar este checklist en tu proceso sin frenar la creatividad 

Aplicar la accesibilidad al final es caro y frustrante. Integrarla desde el principio es más eficiente y creativo. 

Incluir accesibilidad desde el briefing 

En los primeros pasos de cualquier proyecto, añade algunas preguntas sencillas: 

• ¿Quién va a usar este producto en la realidad? 
• ¿En qué contextos (móvil en la calle, oficina, transporte público…)? 
• ¿Qué pasaría si alguien no viera bien los colores, no oyera el audio o no pudiera usar un ratón? 

No necesitas un estudio perfecto. Solo empezar a visualizar situaciones diversas. Eso cambia tus primeros wireframes. 

Componentes accesibles por defecto en tu sistema de diseño 

Una de las mejores inversiones que puedes hacer como diseñador es crear componentes accesibles de serie: 

• Botones con contrastes revisados y estados de foco definidos. 
• Campos de formulario con etiquetas claras, espacios bien medidos y mensajes de error pensados. 
• Tarjetas, modales y menús con jerarquía clara y orden de lectura lógico. 

Cuando tu sistema de diseño integra estos criterios, cada nueva pantalla parte de una base mucho más sólida. 

Revisiones rápidas con herramientas y con personas 

Puedes introducir tres revisiones ligeras en tu proceso: 

1. En wireframes: revisar jerarquía, orden de lectura y claridad de flujos. 

2. En UI final: revisar contraste, tipografía, formularios y estados de interacción. 

3. Con prototipo: pruebas informales con personas que no conocen el producto; cuando sea posible, incluyendo necesidades distintas. 

En contextos avanzados, la accesibilidad se integra dentro de una estrategia de investigación y diseño de servicios. Ese enfoque se trabaja de forma sistemática en el Máster Oficial en Experiencia de Usuario para el Diseño de Productos y Servicios Digitales de UDIT, donde se abordan proyectos reales con impacto en producto y negocio.

Accesibilidad como ventaja competitiva en tu carrera UX 

Lo que miran hoy empresas, agencias y startups 

Cada vez más organizaciones entienden que la accesibilidad no es un “extra”, sino un indicador de calidad y madurez.

Cuando revisan un perfil de diseño, suelen fijarse en: 

• Si la persona menciona accesibilidad de forma natural al explicar su proceso. 
• Si en sus entregables hay contraste revisado, estados de foco, formularios claros. 
• Si en su portfolio se habla de inclusión, barreras detectadas y decisiones de accesibilidad. 

Un diseñador que puede hablar de accesibilidad con criterio transmite que entiende el producto completo, no solo la capa visual. 

Cómo demostrar accesibilidad en tu portfolio y case studies 

Puedes incorporar la accesibilidad a tu porfolio sin convertirlo en un manual técnico: 

• Incluye en tus proyectos un apartado “Decisiones de accesibilidad”, donde expliques qué revisaste y qué cambiaste. 
• Muestra antes y después de pantallas donde mejoraste contraste, jerarquía o formularios. 
• Explica qué tipo de pruebas hiciste (revisión de contraste, pruebas con teclado, feedback de usuarios). 

Esto te diferencia de portfolios que solo enseñan pantallas bonitas sin contexto. 

Si quieres ir más allá del checklist: formarte en UX y accesibilidad de forma avanzada 

Este checklist es un buen primer paso. Te ayuda a bajar a tierra un concepto que a menudo se percibe como lejano: las WCAG aplicadas al día a día de diseño. 

Si quieres convertir esta primera aproximación a la accesibilidad en una competencia central de tu perfil UX, la formación avanzada entra en juego. 

El Máster Oficial en Experiencia de Usuario para el Diseño de Productos y Servicios Digitales de UDIT es un programa oficial impartido en Madrid, desarrollado en colaboración con Telefónica I+D desde sus orígenes, precisamente para responder a la demanda de perfiles capaces de unir UX, producto, tecnología y negocio. 

En este tipo de programa no trabajas solo con checklists. Trabajas: 

• Investigación con usuarios, incluyendo personas con distintas capacidades. 
• Diseño de servicios y productos completos, no solo pantallas sueltas. 
• Estrategia de producto, donde la accesibilidad impacta en alcance, satisfacción y riesgo. 
• Proyectos reales, que se convierten en un portfolio que habla de algo más que de estética. 

La accesibilidad deja de ser un añadido de última hora y pasa a ser una forma de entender el diseño. 

Si esta guía te ha hecho mirar tus interfaces con otros ojos, puedes empezar aplicando hoy mismo este checklist en tu próximo proyecto. Y, si sientes que quieres ir más allá y hacer de la accesibilidad una de tus fortalezas como diseñador UX/UI, existen caminos formativos como el de UDIT que pueden convertir esa curiosidad inicial en una especialización sólida y estratégica.