Visión general
El editor audita continuamente la lección que estás editando frente a un amplio conjunto de comprobaciones WCAG 2.2. A medida que añades o editas bricks, los problemas aparecen en dos lugares:
- Una insignia en cada brick afectado — roja para errores, ámbar para avisos — con una descripción emergente que resume el primer problema.
- El botón Accesibilidad de la barra de herramientas — muestra el recuento total de la lección y abre el panel de accesibilidad.
La vista de curso también muestra una insignia por lección con los totales de cada una, calculados en el servidor a partir del último estado guardado.
Las comprobaciones son solo informativas: nunca bloquean el guardado, la exportación ni la publicación.
El panel de accesibilidad
El panel enumera cada problema agrupado por brick, en el orden de la lección. Cada entrada muestra:
- Qué está mal — por ejemplo, «La imagen no tiene texto alternativo», con el criterio de éxito de la WCAG al que corresponde.
- Cómo solucionarlo — indicaciones concretas de corrección.
- Botones de corrección — cuando existe una corrección segura de un clic (ver más abajo).
Al hacer clic en el título de un grupo, el editor se desplaza hasta ese brick.
Qué se comprueba
| Área | WCAG | Comprobaciones |
|---|---|---|
| Texto alternativo | 1.1.1 | Todos los espacios de imagen activos en todos los tipos de brick (incluidos los elementos de galería/carrusel, las caras de las tarjetas, los pares para relacionar, los avatares de diálogo, las imágenes de juego, las portadas de carrusel). Un alt vacío se considera explícitamente decorativo y es válido. Se marcan los textos alternativos que parecen nombres de archivo o que superan los 150 caracteres. |
| Vídeo | 1.2.2 / 1.2.3 | Los vídeos autoalojados necesitan un archivo de subtítulos (error). Los vídeos alojados en plataformas (YouTube/Vimeo) reciben un recordatorio para verificar los subtítulos en la plataforma. La falta de transcripciones es un aviso. |
| Audio | 1.2.1 | Los bricks de audio y los medios de audio necesitan una transcripción. El audio de las líneas de diálogo está exento — el texto de la línea es su propia transcripción. |
| Encabezados | 1.3.1 / 2.4.6 | Saltos de nivel (h2 → h4), encabezados de nivel superior duplicados (el título de la lección ya se renderiza como el encabezado de la página), encabezados vacíos y lecciones largas sin ningún encabezado. |
| Tablas | 1.3.1 | Tablas sin una fila o columna de encabezado (error); celdas combinadas (aviso). |
| Contraste | 1.4.3 | Los colores efectivos del texto y de los encabezados frente al fondo efectivo, resolviendo toda la cascada: colores del tema → estilos por tipo → anulaciones del contenedor por brick → marcas de color o resaltado en línea en el texto enriquecido. Los encabezados grandes usan el umbral 3:1. |
| El color como única señal | 1.4.1 | Series de gráfico o categorías de trivia con colores casi idénticos. |
| Enlaces | 2.4.4 | Enlaces sin texto, con texto genérico («haz clic aquí», «aquí», …) o con una URL sin formatear como texto. |
| Incrustaciones | 4.1.2 | Iframes sin un título accesible (rellena el campo Título accesible en los ajustes de la incrustación). |
Correcciones de un clic
Los problemas con una corrección determinista segura ofrecen un botón que la aplica directamente (un solo paso de deshacer):
- Marcar como decorativo — establece un alt vacío explícito.
- Corregir el nivel de encabezado — establece el nivel que espera la jerarquía.
- Activar fila de encabezado — para tablas sin encabezados.
- Usar el nombre del personaje — como texto alternativo del avatar de diálogo.
Los problemas de contraste incluyen un color de sustitución sugerido en el mensaje — el color más cercano de la paleta de tu tema que cumple el umbral, o un tono ajustado del color actual. Los colores a nivel de tema se fijan en el editor de temas, de modo que un solo cambio corrige todo el curso.
Generar texto alternativo con IA
Los problemas de imagen ofrecen Generar alt con IA. La imagen se envía al modelo que tu organización tenga elegido para Procesado de texto (ver Modelos de IA), que devuelve una descripción breve en el idioma del contenido. La sugerencia aparece en un campo editable — no se escribe nada hasta que la apliques. Cada generación se factura con créditos, como el resto de funciones de IA.
Límites
- Los fondos con degradados, imágenes o CSS personalizado no se pueden comprobar automáticamente en cuanto al contraste. En su lugar, muestran un único aviso de «no verificable» en vez de adivinar — revísalos manualmente.
- Las insignias por lección de la vista de curso leen el último estado guardado, por lo que pueden ir unos segundos por detrás de tus últimos cambios.
- Los bricks de juego (sopa de letras, ahorcado, …) son intrínsecamente visuales e interactivos; el comprobador valida sus imágenes y su texto, pero la propia mecánica del juego puede necesitar una revisión de accesibilidad manual.
Revisar y corregir mediante MCP
El mismo comprobador está disponible para los asistentes de IA conectados a través del servidor MCP: audit_content_accessibility / audit_lesson_accessibility devuelven el informe, apply_accessibility_autofix aplica una corrección y generate_accessibility_alt_text sugiere texto alternativo para las imágenes. Útil para una pasada del tipo «revisa la accesibilidad de este curso y corrige lo que puedas» dirigida por chat.