Accesibilidad
Accesibilidad significa que las personas con discapacidad pueden percibir, operar y comprender el trabajo. Esto incluye discapacidades permanentes, temporales y situacionales. La mayoría de los fallos comienzan como una decisión de diseño que nadie tomó: sin estilo de foco, sin estado de error, sin texto alternativo, sin niveles de encabezado. Esta skill convierte esas decisiones en una lista de verificación.
El contraste matemático, APCA y la deficiencia de visión cromática viven en color → contrast-and-dark-mode.md. Los tamaños de objetivos táctiles de plataforma viven en media-specs → digital-platforms.md. Las personas mayores, alfabetización, dislexia y cultura viven en cognitive-psychology → audience-and-culture.md. Los mínimos tipográficos viven en typography → legibility-by-medium.md.
Reglas no negociables
- Apuntar a WCAG 2.2 AA a menos que un contrato o ley nombre otra versión. También cumple 2.1 AA y 2.0 AA, excepto 4.1.1 Análisis, que 2.2 eliminó. Todos los requisitos de WCAG son [E2].
- Diseñar todos los estados. Por defecto, hover, foco, activo, seleccionado, deshabilitado, error, carga y vacío, en ambos modos de color. Un estado no dibujado es un error de accesibilidad.
- Foco visible en todas partes. Estándar interno: contorno sólido de 2px, desplazamiento de 2px, relación de contraste 3:1 con los colores adyacentes (cumple AAA 2.4.13). Nunca usar
outline: nonesin un reemplazo. Los encabezados fijos no deben ocultar el elemento enfocado (2.4.11). - Objetivos ≥ 24×24 píxeles CSS (2.5.8 AA), o espaciados para que actúen como tal. Los mínimos de plataforma son mayores (44pt iOS, 48dp Android), por lo que deben usarse en interfaces táctiles.
- Nunca parpadear y respetar movimiento reducido. Como máximo 3 destellos por segundo. Controles de pausa para cualquier movimiento de más de 5 segundos. Honrar
prefers-reduced-motioncomo regla interna (2.3.3). - Todo mediante teclado; nada solo mediante arrastre, hover o memoria. Alternativas de un solo toque al arrastre (2.5.7). Sin rompecabezas ni transcripción en el inicio de sesión (3.3.8). No pedir a las personas que vuelvan a escribir datos (3.3.7).
- Formularios: etiquetas visibles (los placeholders no son etiquetas), instrucciones antes del campo, errores en texto que indiquen cómo corregirlos, y validación que espere hasta que el usuario haya abandonado el campo. Usar tokens
autocompletepara datos personales (1.3.5). - Alternativas de texto según su propósito. Seguir el árbol de decisión de texto alternativo del W3C: las imágenes decorativas reciben
alt="", las imágenes funcionales describen la acción, las imágenes complejas reciben una descripción larga. Sin imágenes de texto. - Solucionar barreras universales antes que adaptaciones específicas. El lenguaje claro, el diseño predecible, los formularios tolerantes y el control del usuario ayudan simultáneamente a usuarios cognitivos, mayores, con baja alfabetización, de segunda lengua y estresados [E2].
- Las herramientas automatizadas no son un veredicto. Herramientas individuales detectaron entre el 17 y el 41 % de los tipos de barreras en la auditoría del gobierno del Reino Unido de 2017. Probar manualmente y con personas con discapacidad.
- Las notas legales son orientación, no asesoramiento legal. Verificar las fechas antes de citarlas. Varias cambiaron en 2026.
Lista de verificación para la especificación del diseñador (entrega a desarrollo)
- Niveles de encabezado, puntos de referencia y orden de lectura/foco anotados (kits de anotación:
motion-media-and-forms.md§7). - Cada elemento interactivo: nombre, rol, todos los estados, estilo de foco, tamaño de objetivo.
- Cada imagen: texto alternativo o marcada como decorativa. Los gráficos tienen un equivalente en texto o tabla.
- Cada formulario: etiquetas, texto de ayuda, mensajes de error redactados, campos obligatorios marcados,
autocompleteindicado. - Contraste verificado para texto, bordes de UI, foco e iconos en ambos modos (
color). - Movimiento: especificada la variante de movimiento reducido. Sin destellos. Control de pausa para movimiento prolongado.
- Video: subtítulos, más descripción de audio o una transcripción.
- El diseño se refluye a 320 píxeles CSS. El texto sobrevive al zoom al 200 % y a las anulaciones de espaciado 1.4.12 (
layout-composition). - Ayuda y contacto en un lugar consistente (3.2.6). Inicio de sesión sin pruebas de memoria (3.3.8).
- Revisión de lenguaje claro en todo el texto (
inclusive-and-cognitive.md§5).
Instantánea legal (verificada en octubre de 2026, volver a verificar antes de citar)
| Dónde | Regla | Estándar | Fechas |
|---|---|---|---|
| UE | Ley Europea de Accesibilidad | EN 301 549: V3.2.1 citado ahora; V4.1.1 (WCAG 2.2 AA) publicado en septiembre de 2026, pendiente de citación en el Diario Oficial | Aplica desde el 28 de junio de 2025 |
| Gobiernos estatales/locales de EE. UU. | Regla ADA Título II (2024) | WCAG 2.1 AA | Prórroga abril de 2026: 26 de abril de 2027 (≥50k habitantes), 26 de abril de 2028 (más pequeños, distritos especiales) |
| Empresas de EE. UU. | ADA Título III | Jurisprudencia, generalmente WCAG 2.x AA | Impulsado por litigios |
| Federal de EE. UU. | Sección 508 | WCAG 2.0 AA (web, documentos, software) | Desde 2018 |
| Sector público del Reino Unido | PSBAR 2018 | WCAG 2.2 AA + declaración de accesibilidad | En vigor |
| Canadá federal | Ley de Accesibilidad de Canadá | CAN/ASC-EN 301 549:2024 | Objetivo 2040 |
| Brasil | LBI art. 63 | ABNT NBR 17225 (2025); eMAG 3.1 (federal) | En vigor |
| Japón | Ley de Discriminación por Discapacidad | JIS X 8341-3:2016 | Acomodación en el sector privado obligatoria desde abril de 2024 |
WCAG 2.2 también es ISO/IEC 40500:2025. WCAG 3 sigue siendo un Borrador de Trabajo y está a años de distancia.
Por medio
| Medio | Enfoque |
|---|---|
| Apps nativas | 1.3.4 orientación, 1.4.4 Tipo Dinámico/escalado de fuente, 2.5.x puntero y objetivos, 3.3.x entrada, 4.1.2 nombre/rol/valor |
| Web | Todo. 1.4.10 reflujo, 1.4.12 espaciado y 2.4.11 foco no oculto se incumplen con más frecuencia. |
| PDF, presentaciones | Etiquetas, encabezados, orden de lectura, contraste, título de página, idioma |
| Publicaciones sociales | Campos de texto alternativo, subtítulos en video, sin significado solo por color, texto repetido en el subtítulo, sin parpadeos |
| Impreso, exterior | WCAG no aplica directamente, pero su contraste y lógica de color son una buena práctica. Las reglas de distancia están en media-specs. |
Archivos de referencia: cuándo abrirlos
| Archivo | Abrir cuando |
|---|---|
references/wcag-22-in-practice.md | Al verificar cualquier criterio de éxito; al redactar una especificación; las adiciones de 2.2 en detalle; criterios AAA que vale la pena adoptar; aplicabilidad por medio. |
references/inclusive-and-cognitive.md | Método de diseño inclusivo, espectro de personas, cifras de prevalencia para citar, discapacidades situacionales, accesibilidad cognitiva (COGA), lenguaje claro, usuarios neurodivergentes, conceptos básicos de localización/RTL, lista de verificación de inclusión. |
references/motion-media-and-forms.md | Movimiento y destellos, código de movimiento reducido, subtítulos/descripción de audio/transcripciones, texto alternativo e imágenes complejas, especificaciones de foco y teclado, enlaces de salto, formularios y errores, autocomplete, toque/puntero, anotaciones para lectores de pantalla y kits. |
references/legal-and-testing.md | Preguntas legales por jurisdicción, qué estándar usar para diseñar, cobertura de herramientas, WebAIM Million 2026, lista de verificación de pruebas manuales, pruebas con usuarios con discapacidad, lista de verificación de entrega en Figma, declaraciones de accesibilidad, VPAT/ACR. |