Checklist WCAG 2.2 para creadores de cursos online: cada requisito explicado

Crear un curso online con un aspecto profesional y un contenido excelente es solo la mitad del trabajo. Si los estudiantes con discapacidad no pueden percibir tus videos, navegar por tus cuestionarios o entender tus instrucciones, tu curso esta fundamentalmente roto para una parte significativa de tu audiencia. Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2, publicadas por el W3C en octubre de 2023, proporcionan el estandar tecnico definitivo para hacer que el contenido digital sea accesible. Este checklist traduce cada requisito relevante de WCAG 2.2 Nivel AA a acciones en lenguaje sencillo que los creadores de cursos online y disenadores instruccionales pueden implementar de inmediato.

WCAG 2.2 organiza sus 56 criterios de conformidad bajo cuatro principios, conocidos por el acronimo POUR: Perceptible, Operable, Comprensible y Robusto. Cada principio aborda una dimension diferente de la accesibilidad. Este articulo repasa los criterios mas relevantes para los cursos online, explica que significa cada uno en la practica, proporciona orientacion para su implementacion y senala los errores que los creadores de cursos cometen con mayor frecuencia.

Usa esto como una referencia de trabajo. Imprimelo, guardalo en marcadores o compartelo con tu equipo. Si estas creando cursos en Eduspera, muchas de estas comprobaciones estan automatizadas a traves de la puntuacion de accesibilidad integrada de la plataforma — pero entender los requisitos subyacentes te convierte en un mejor creador de cursos independientemente de las herramientas que uses.

Principio 1: Perceptible

El contenido debe presentarse de formas que todos los usuarios puedan percibir — ya sea a traves de la vista, el oido o el tacto. Para los creadores de cursos, este principio rige como manejas imagenes, video, audio, color y formato de texto.

1.1.1 Contenido no textual (Nivel A)

Que significa: Todo elemento no textual — imagenes, diagramas, graficos, iconos, infografias — debe tener una alternativa de texto que transmita la misma informacion. Los lectores de pantalla no pueden interpretar pixeles; leen el texto alternativo que tu proporcionas.

Como implementarlo en cursos online:

• Escribe atributos alt descriptivos para cada imagen en tus materiales del curso. Un diagrama que muestra "Tres etapas del proceso de design thinking: Empatizar, Definir, Idear" necesita un texto alternativo que nombre esas etapas, no simplemente "diagrama".
• Para infografias complejas, proporciona una descripcion larga en el texto circundante o un enlace a una version de texto detallada.
• Las imagenes decorativas (separadores visuales, patrones de fondo) deben usar un alt="" vacio para que los lectores de pantalla las salten por completo.
• Los iconos usados como botones o enlaces deben tener etiquetas accesibles — ya sea texto visible o atributos aria-label.

Errores comunes:

• Usar nombres de archivo como texto alternativo (por ejemplo, alt="IMG_2847.jpg").
• Escribir texto alternativo que dice "imagen de" — el lector de pantalla ya lo anuncia como imagen.
• Dejar el texto alternativo vacio en imagenes informativas, haciendolas invisibles para los usuarios de lectores de pantalla.

1.2.2 Subtitulos (pregrabados) (Nivel A)

Que significa: Todo video pregrabado con audio debe incluir subtitulos sincronizados. Esto es innegociable — los subtitulos no son una funcionalidad opcional en los cursos online; son un requisito basico.

Como implementarlo en cursos online:

• Usa herramientas de transcripcion con IA (como OpenAI Whisper) para generar subtitulos iniciales, luego revisalos y corrigelos manualmente. Los subtitulos automaticos normalmente alcanzan un 90-95% de precision, pero ese 5% restante suele caer en la terminologia tecnica, los nombres propios y la jerga especifica del sector — exactamente las palabras que tus estudiantes necesitan entender.
• Asegurate de que los subtitulos esten sincronizados con el audio — la sincronizacion importa. Un subtitulo que aparece dos segundos tarde rompe la experiencia de aprendizaje.
• Incluye identificacion del hablante cuando hay varias personas hablando.
• Subtitula los efectos de sonido significativos (por ejemplo, "[aplausos]", "[telefono sonando]") que contribuyen a la comprension.

Errores comunes:

• Confiar unicamente en subtitulos autogenerados sin revisarlos.
• Usar subtitulos incrustados (open captions) con bajo contraste o tamano de fuente pequeno.
• Omitir subtitulos en videos "cortos" — el requisito se aplica a todas las duraciones.

1.2.5 Audiodescripcion (pregrabada) (Nivel AA)

Que significa: Cuando tu video muestra informacion visual que no se describe en la pista de audio — como texto en pantalla, demostraciones o transiciones visuales — debes proporcionar una audiodescripcion que narre esos elementos visuales.

Como implementarlo en cursos online:

• El enfoque mas sencillo: narra todo lo que muestras. Si estas demostrando una interfaz de software, describe lo que estas haciendo clic y lo que aparece en pantalla mientras lo haces. Esta tecnica, llamada "video autodescriptivo", elimina la necesidad de una pista de audiodescripcion separada en la mayoria de los contextos instruccionales.
• Para videos donde el contenido visual es esencial pero no se narra (por ejemplo, una demostracion silenciosa o un time-lapse), proporciona una pista de audiodescripcion separada o una descripcion de texto extendida.

Errores comunes:

• Decir "como puedes ver aqui" sin describir lo que "aqui" muestra.
• Confiar en grabaciones de pantalla sin narrar las acciones que se realizan.
• Mostrar codigo o formulas en pantalla sin leerlos en voz alta.

1.4.3 Contraste (minimo) (Nivel AA)

Que significa: El texto debe tener una relacion de contraste de al menos 4,5:1 respecto a su fondo. El texto grande (18pt o 14pt negrita) requiere al menos 3:1. Esto garantiza la legibilidad para usuarios con baja vision o deficiencias en la vision del color.

Como implementarlo en cursos online:

• Comprueba tus presentaciones de diapositivas, miniaturas y superposiciones de texto en pantalla usando una herramienta de verificacion de contraste (WebAIM Contrast Checker, por ejemplo).
• Evita colocar texto sobre fondos fotograficos con muchos detalles — usa una superposicion semitransparente si es necesario.
• Ten especial cuidado con el texto de marcador de posicion (placeholder) en formularios, que a menudo se estiliza en gris claro sobre blanco e incumple los requisitos de contraste.

Errores comunes:

• Usar colores de marca que tienen buen aspecto pero no cumplen las relaciones de contraste (comun con paletas pastel).
• Olvidar verificar el contraste en los estados hover, focus y active.
• Usar gris claro para texto "secundario" o "menos importante" — si es contenido legible, necesita contraste completo.

1.4.5 Imagenes de texto (Nivel AA)

Que significa: No uses imagenes para mostrar texto cuando la misma presentacion visual puede lograrse con texto real estilizado. Las imagenes de texto no pueden redimensionarse, refluirse ni leerse por lectores de pantalla sin texto alternativo.

Como implementarlo en cursos online:

• Usa texto real (HTML, estilizado con CSS) para titulares, subtitulos, etiquetas y llamadas de atencion en lugar de incrustarlos como graficos.
• Cuando las capturas de pantalla de texto son necesarias (por ejemplo, mostrando un editor de codigo), proporciona el contenido de texto como un bloque de codigo o una transcripcion cercana.

Errores comunes:

• Crear diapositivas de titulo elaboradas como imagenes planas en lugar de usar texto estilizado.
• Usar capturas de pantalla de codigo en lugar de bloques de codigo correctamente formateados con resaltado de sintaxis.

1.4.11 Contraste no textual (Nivel AA)

Que significa: Los componentes de la interfaz de usuario (botones, campos de formulario, indicadores de foco) y los graficos significativos (iconos, elementos de graficos) deben tener una relacion de contraste de al menos 3:1 respecto a los colores adyacentes.

Como implementarlo en cursos online:

• Asegurate de que los botones de cuestionarios, las barras de progreso y los controles de navegacion sean claramente visibles contra sus fondos.
• Comprueba que los colores de los graficos sean distinguibles — no confies solo en el color para diferenciar series de datos. Anade patrones, etiquetas o formas distintas.

Errores comunes:

• Usar bordes finos y de bajo contraste en los campos de formulario.
• Estilizar los botones desactivados de manera que sean indistinguibles del fondo.

Principio 2: Operable

Los usuarios deben poder navegar e interactuar con tu curso usando cualquier metodo de entrada — teclado, dispositivo de conmutacion, control por voz o raton. Para los creadores de cursos, este principio rige la navegacion, los tiempos y los elementos interactivos.

2.1.1 Teclado (Nivel A)

Que significa: Cada elemento interactivo — botones, enlaces, campos de formulario, controles de video, respuestas de cuestionarios, menus de navegacion — debe poder operarse usando unicamente el teclado. Ninguna funcionalidad puede requerir exclusivamente un raton o trackpad.

Como implementarlo en cursos online:

• Prueba todo el flujo de tu curso usando solo la tecla Tab (para mover el foco), Enter o Espacio (para activar) y las teclas de flecha (dentro de grupos). Si no puedes completar alguna accion, no cumple este criterio.
• Los elementos interactivos personalizados (acordeones, pestanas, dialogos modales) necesitan controladores de eventos de teclado adecuados — no solo controladores de clic.
• Asegurate de que los reproductores de video respondan a atajos de teclado: Espacio para reproducir/pausar, teclas de flecha para avanzar/retroceder, M para silenciar.

Errores comunes:

• Crear interacciones de cuestionario de arrastrar y soltar que no tienen alternativa por teclado.
• Usar elementos <div> estilizados como botones sin role="button" y tabindex="0" — parecen clicables pero no pueden recibir foco del teclado.
• Crear trampas de teclado donde el foco entra en un modal o reproductor de video pero no puede salir sin un raton.

2.1.2 Sin trampa de teclado (Nivel A)

Que significa: Si el foco del teclado puede entrar en un componente, debe poder salir de ese componente usando la interaccion estandar del teclado (normalmente Tab o Escape). Los usuarios nunca deben quedarse atrapados.

Como implementarlo en cursos online:

• Prueba todo el contenido incrustado (reproductores de video, simulaciones interactivas, widgets de terceros) tabulando hacia dentro y verificando que puedes tabular hacia fuera.
• Los dialogos modales deben atrapar el foco dentro del dialogo mientras esta abierto, pero devolver el foco al elemento que lo activo cuando se cierra con Escape o un boton de cerrar.

Errores comunes:

• Incrustar widgets de terceros (encuestas, pizarras, playgrounds de codigo) que capturan el foco del teclado sin proporcionar un mecanismo de escape.
• Bucles de tabulacion infinitos dentro de componentes interactivos complejos.

2.4.7 Foco visible (Nivel AA)

Que significa: Cuando un elemento recibe foco del teclado, debe haber un indicador visible — normalmente un contorno o resaltado — para que los usuarios de teclado puedan ver donde se encuentran en la pagina.

Como implementarlo en cursos online:

• Nunca elimines el contorno de foco predeterminado del navegador (outline: none) sin reemplazarlo con un estilo de foco personalizado igual o mas visible.
• Usa un estilo de foco que contraste bien tanto contra fondos claros como oscuros. Un patron comun es un contorno solido de 2px con un color de contraste y una pequena separacion.
• Prueba la visibilidad del foco en cada elemento interactivo: enlaces de navegacion, botones de leccion, opciones de cuestionario, controles de video.

Errores comunes:

• Anadir *:focus { outline: none; } en CSS para "limpiar" el diseno — esta unica linea rompe la accesibilidad por teclado en todo tu curso.
• Usar un color de foco que se funde con el fondo del elemento.

2.5.7 Movimientos de arrastre (Nivel AA) — Nuevo en WCAG 2.2

Que significa: Cualquier funcionalidad que use un movimiento de arrastre (mantener pulsado y mover) tambien debe poder realizarse mediante una accion de puntero simple sin arrastre, a menos que el arrastre sea esencial.

Como implementarlo en cursos online:

• Si tienes preguntas de cuestionario de arrastrar y soltar ("arrastra la etiqueta al area correcta del diagrama"), proporciona una alternativa de menu desplegable o seleccion por clic.
• Las listas de lecciones reordenables deben soportar botones de "mover arriba/mover abajo" ademas de los tiradores de arrastre.

Errores comunes:

• Asumir que arrastrar y soltar es la unica interaccion intuitiva — muchos usuarios no pueden realizar movimientos de arrastre debido a discapacidades motoras.
• Proporcionar una alternativa por teclado pero no una alternativa de puntero simple (clic/toque) — este criterio aborda especificamente la entrada por puntero, no solo el teclado.

2.4.4 Proposito del enlace (en contexto) (Nivel A)

Que significa: El proposito de cada enlace debe poder determinarse a partir del texto del enlace solo, o del texto del enlace junto con su contexto circundante. Los usuarios de lectores de pantalla suelen navegar tabulando entre enlaces — escuchar "haz clic aqui, haz clic aqui, haz clic aqui" es inutil.

Como implementarlo en cursos online:

• Escribe texto de enlace descriptivo: "Descarga el brief del proyecto (PDF, 2,3 MB)" en lugar de "Haz clic aqui".
• Para la navegacion de lecciones, usa el titulo de la leccion como texto del enlace, no etiquetas genericas.

Errores comunes:

• Usar "Leer mas" o "Saber mas" como texto de enlace sin contexto adicional.
• Enlazar URLs en bruto como texto visible — son ilegibles para los lectores de pantalla y dificiles para todos.

2.2.1 Tiempo ajustable (Nivel A)

Que significa: Si tu curso incluye actividades con tiempo (cuestionarios, evaluaciones), los usuarios deben poder desactivar, ajustar o ampliar el limite de tiempo — con al menos una de estas opciones disponible.

Como implementarlo en cursos online:

• Para cuestionarios cronometrados, ofrece una opcion para solicitar tiempo extra o desactivar el temporizador por completo.
• Las presentaciones de diapositivas o carruseles con avance automatico deben tener controles de pausa.
• Los tiempos de sesion deben avisar a los usuarios antes de expirar y permitir la extension.

Errores comunes:

• Codificar temporizadores de cuestionarios sin ninguna opcion de ajuste — esto afecta desproporcionadamente a los estudiantes con discapacidades cognitivas, deficiencias motoras o a quienes usan tecnologia de asistencia que ralentiza la velocidad de interaccion.

Principio 3: Comprensible

El contenido y el comportamiento de la interfaz deben ser comprensibles para todos los usuarios. Para los creadores de cursos, este principio aborda la claridad del lenguaje, la navegacion consistente y como tu curso gestiona la entrada del usuario — particularmente en cuestionarios y formularios.

3.1.1 Idioma de la pagina (Nivel A)

Que significa: El idioma humano predeterminado de cada pagina debe ser determinable programaticamente — normalmente a traves del atributo lang en el elemento <html>. Los lectores de pantalla usan esto para seleccionar el motor de pronunciacion correcto.

Como implementarlo en cursos online:

• Asegurate de que tu plataforma establezca el atributo lang correcto (por ejemplo, lang="en" para ingles, lang="es" para espanol).
• Si tu curso contiene pasajes en un idioma diferente, envuelvelos en un span o div con el atributo lang apropiado para que los lectores de pantalla cambien la pronunciacion.

Errores comunes:

• Usar lang="en" en una pagina que esta completamente en espanol — el lector de pantalla intentara la pronunciacion en ingles de las palabras en espanol.
• Omitir el atributo lang por completo, obligando al lector de pantalla a adivinar.

3.3.1 Identificacion de errores (Nivel A)

Que significa: Cuando un usuario comete un error de entrada (enviando un cuestionario, rellenando un formulario), el error debe detectarse automaticamente y describirse al usuario en texto. El mensaje de error debe identificar el campo especifico y describir el problema.

Como implementarlo en cursos online:

• Cuando una pregunta de cuestionario se responde incorrectamente, indica claramente que pregunta tiene un error y que tipo de respuesta se espera.
• Para formularios de registro o perfil, muestra mensajes de error especificos junto al campo relevante: "La direccion de correo electronico debe incluir un simbolo @" en lugar de un generico "Entrada no valida" en la parte superior de la pagina.
• Usa aria-describedby para asociar programaticamente los mensajes de error con sus campos de formulario, para que los lectores de pantalla anuncien el error cuando el foco se mueva al campo.

Errores comunes:

• Indicar errores solo a traves del color (borde rojo) sin texto — los usuarios que no pueden percibir el color pierden el error por completo.
• Mostrar un unico mensaje "Hubo errores en tu envio" sin especificar que campos necesitan correccion.

3.3.2 Etiquetas o instrucciones (Nivel A)

Que significa: Los campos de formulario y los componentes interactivos deben tener etiquetas o instrucciones que describan la entrada esperada. Todo campo de texto, desplegable, checkbox y boton de radio necesita una etiqueta visible y asociada programaticamente.

Como implementarlo en cursos online:

• Usa el elemento <label> con un atributo for que coincida con el id del campo, o envuelve el campo dentro del elemento label.
• Para preguntas de cuestionario, asegurate de que el texto de la pregunta este asociado programaticamente con las opciones de respuesta usando fieldset/legend o aria-labelledby.
• Proporciona indicaciones de formato donde sea necesario: "Fecha de nacimiento (DD/MM/AAAA)" o "La contrasena debe tener al menos 8 caracteres".

Errores comunes:

• Usar texto de marcador de posicion (placeholder) como unica etiqueta — los placeholders desaparecen cuando el usuario empieza a escribir, dejandolo sin contexto.
• Confiar en la proximidad visual (la etiqueta aparece cerca del campo) sin una asociacion programatica.

3.2.3 Navegacion consistente (Nivel AA)

Que significa: Los mecanismos de navegacion que aparecen en multiples paginas (barra lateral del curso, navegacion de lecciones, barra de progreso) deben aparecer en el mismo orden relativo cada vez. Los usuarios construyen una memoria espacial de tu interfaz; cambiar el diseno entre paginas los desorienta.

Como implementarlo en cursos online:

• Manten tu navegacion del curso (barra lateral, migas de pan, botones siguiente/anterior) en una posicion consistente en todas las lecciones.
• Si tienes un indicador de progreso, asegurate de que aparezca en la misma ubicacion en cada pagina de leccion.

Errores comunes:

• Mover el boton "Siguiente leccion" de la parte inferior del contenido en algunas paginas a la parte superior en otras.
• Mostrar elementos de navegacion diferentes en las paginas de cuestionarios frente a las paginas de lecciones sin una razon clara.

3.3.8 Autenticacion accesible (minima) (Nivel AA) — Nuevo en WCAG 2.2

Que significa: Los procesos de autenticacion no deben requerir pruebas de funcion cognitiva (memorizar una contrasena, resolver un CAPTCHA, reconocer objetos en imagenes) a menos que este disponible una alternativa accesible. Los usuarios deben poder autenticarse mediante gestores de contrasenas, passkeys, copiar y pegar o inicio de sesion unico.

Como implementarlo en cursos online:

• No bloquees la accion de pegar en los campos de contrasena — esto impide el uso de gestores de contrasenas.
• Soporta inicio de sesion OAuth/SSO (Google, Microsoft) como alternativa a la autenticacion basada en contrasenas.
• Si usas CAPTCHAs, proporciona una alternativa de audio o usa tecnicas de CAPTCHA invisible que no requieran interaccion del usuario.

Errores comunes:

• Desactivar la funcion de pegar en campos de contrasena por "seguridad" — esto en realidad reduce la seguridad al desincentivar contrasenas fuertes y unicas.
• Usar CAPTCHAs basados en imagenes sin ninguna alternativa.

3.2.6 Ayuda consistente (Nivel A) — Nuevo en WCAG 2.2

Que significa: Si tu plataforma proporciona mecanismos de ayuda (informacion de contacto, enlaces a preguntas frecuentes, soporte por chat), deben aparecer en la misma ubicacion relativa en todas las paginas.

Como implementarlo en cursos online:

• Coloca tu enlace de ayuda/soporte en una ubicacion consistente — normalmente el pie de pagina o un elemento de navegacion persistente.
• Asegurate de que el mecanismo de ayuda este disponible desde dentro del reproductor del curso, no solo desde el sitio principal.

Errores comunes:

• Proporcionar un widget de chat de ayuda en el sitio de marketing pero eliminarlo de la interfaz del reproductor del curso.

Principio 4: Robusto

El contenido debe ser lo suficientemente robusto como para funcionar de forma fiable con las tecnologias de asistencia actuales y futuras. Para los creadores de cursos, este principio rige como esta estructurado el HTML de tu curso y si las tecnologias de asistencia pueden interpretarlo correctamente.

4.1.2 Nombre, rol, valor (Nivel A)

Que significa: Cada componente de la interfaz de usuario debe exponer su nombre (etiqueta), rol (que tipo de elemento es) y valor o estado actual a las tecnologias de asistencia. Asi es como los lectores de pantalla saben que algo es un boton, si un checkbox esta marcado o cual es el valor actual de un slider.

Como implementarlo en cursos online:

• Usa elementos HTML semanticos: <button> para acciones, <a> para navegacion, <input type="checkbox"> para checkboxes. Estos exponen el rol y el estado automaticamente.
• Cuando uses componentes personalizados, aplica los roles y propiedades ARIA adecuados: role="tabpanel", aria-selected="true", aria-expanded="false".
• Para indicadores de progreso de cuestionarios, usa role="progressbar" con aria-valuenow, aria-valuemin y aria-valuemax.

Errores comunes:

• Construir un reproductor de video personalizado con botones <div> que no tienen roles ARIA — los lectores de pantalla no pueden identificarlos como interactivos.
• Usar aria-label que contradice el texto visible — los usuarios de lectores de pantalla escuchan una cosa mientras los usuarios videntes ven otra.

4.1.3 Mensajes de estado (Nivel AA)

Que significa: Los mensajes de estado — confirmaciones de exito, conteos de errores, actualizaciones de progreso — deben anunciarse a las tecnologias de asistencia sin recibir foco. Los usuarios no deberian tener que buscar cambios en la pagina.

Como implementarlo en cursos online:

• Usa regiones ARIA en vivo (role="status" o role="alert") para mensajes como "Cuestionario enviado correctamente" o "3 de 10 preguntas respondidas".
• Para actualizaciones de progreso en tiempo real (progreso de carga, finalizacion de leccion), usa aria-live="polite" para que el anuncio no interrumpa la actividad actual del usuario.
• Para errores criticos, usa role="alert" que activa un anuncio inmediato.

Errores comunes:

• Mostrar una notificacion de exito tipo toast que es visible en pantalla pero no se anuncia a los lectores de pantalla.
• Usar aria-live="assertive" para actualizaciones no criticas, causando interrupciones molestas.

Estructura HTML semantica

Que significa: El contenido de tu curso debe usar una semantica HTML adecuada — encabezados (<h1> a <h6>) en orden logico, listas para elementos listados, tablas para datos tabulares y puntos de referencia (<nav>, <main>, <aside>) para las regiones de la pagina. Esto es fundamental para la compatibilidad con tecnologias de asistencia.

Como implementarlo en cursos online:

• Estructura el contenido de tu leccion con una jerarquia de encabezados clara: un <h1> para el titulo de la leccion, <h2> para las secciones principales, <h3> para las subsecciones. Nunca saltes niveles de encabezado.
• Usa <ul> u <ol> para listas — los usuarios de lectores de pantalla confian en la semantica de listas para entender la estructura y el numero de elementos.
• Envuelve la navegacion de tu curso en un punto de referencia <nav> para que los usuarios de lectores de pantalla puedan saltar directamente a ella.

Errores comunes:

• Usar texto en negrita para simular encabezados — parece un encabezado visualmente pero es invisible para la funcion de navegacion por encabezados de los lectores de pantalla.
• Anidar contenido en elementos <div> genericos sin ningun significado semantico.

Uso correcto de ARIA

Que significa: Los atributos ARIA (Accessible Rich Internet Applications) complementan la semantica HTML para widgets complejos. Sin embargo, un ARIA incorrecto es peor que no usar ARIA — induce activamente a error a las tecnologias de asistencia.

Como implementarlo en cursos online:

• Sigue la primera regla de ARIA: si puedes usar un elemento HTML nativo que ya tiene la semantica que necesitas, usalo en lugar de anadir ARIA a un elemento generico.
• Si debes usar ARIA, sigue la Guia de Practicas de Autoria WAI-ARIA para el patron especifico (pestanas, acordeones, dialogos, etc.).
• Prueba con un lector de pantalla — NVDA (gratuito, Windows), VoiceOver (integrado, macOS/iOS) o TalkBack (integrado, Android).

Errores comunes:

• Anadir role="button" a un <div> pero olvidar anadir controladores de eventos de teclado — el elemento se anuncia como boton pero no responde a Enter ni a Espacio.
• Usar aria-hidden="true" en contenido que es visible e interactivo — esto lo oculta de los lectores de pantalla mientras permanece visible en pantalla, creando una desconexion confusa.

Checklist WCAG 2.2 imprimible para creadores de cursos

Usa este checklist para auditar el contenido de tu curso antes de publicar. Cada elemento se corresponde con un criterio de conformidad WCAG 2.2 especifico.

Perceptible

• ☐ Todas las imagenes tienen texto alternativo descriptivo (1.1.1)
• ☐ Las imagenes decorativas usan atributos alt vacios (1.1.1)
• ☐ Todos los videos tienen subtitulos precisos y sincronizados (1.2.2)
• ☐ Los videos con informacion solo visual tienen audiodescripciones (1.2.5)
• ☐ La relacion de contraste del texto es de al menos 4,5:1 (1.4.3)
• ☐ La relacion de contraste del texto grande es de al menos 3:1 (1.4.3)
• ☐ La relacion de contraste de los componentes de UI es de al menos 3:1 (1.4.11)
• ☐ Se usa texto real en lugar de imagenes de texto (1.4.5)
• ☐ El contenido es legible con zoom al 200% (1.4.4)
• ☐ La informacion no se transmite solo mediante el color (1.4.1)

Operable

• ☐ Todos los elementos interactivos son accesibles por teclado (2.1.1)
• ☐ No existen trampas de teclado en ningun lugar del curso (2.1.2)
• ☐ El orden de foco sigue una secuencia logica (2.4.3)
• ☐ El indicador de foco es claramente visible en todos los elementos (2.4.7)
• ☐ El texto del enlace describe el destino o el proposito (2.4.4)
• ☐ Los titulos de pagina son descriptivos y unicos (2.4.2)
• ☐ Arrastrar y soltar tiene una alternativa de clic/toque (2.5.7)
• ☐ Las actividades con tiempo se pueden ampliar o desactivar (2.2.1)
• ☐ Ningun contenido parpadea mas de 3 veces por segundo (2.3.1)
• ☐ Hay disponible un enlace para saltar la navegacion (2.4.1)

Comprensible

• ☐ El idioma de la pagina esta establecido mediante el atributo lang (3.1.1)
• ☐ Los errores de formulario se identifican en texto con descripciones especificas (3.3.1)
• ☐ Todos los campos de formulario tienen etiquetas visibles y asociadas (3.3.2)
• ☐ La navegacion es consistente en todas las paginas (3.2.3)
• ☐ Los mecanismos de ayuda aparecen en una ubicacion consistente (3.2.6)
• ☐ La autenticacion no requiere pruebas de funcion cognitiva (3.3.8)
• ☐ Se proporcionan sugerencias de error cuando es posible (3.3.3)
• ☐ El contenido usa un lenguaje claro y sencillo adecuado a la audiencia

Robusto

• ☐ Los elementos HTML semanticos se usan correctamente (4.1.2)
• ☐ Los componentes personalizados tienen roles y estados ARIA adecuados (4.1.2)
• ☐ Los mensajes de estado usan regiones ARIA en vivo (4.1.3)
• ☐ El contenido funciona con los principales lectores de pantalla (NVDA, VoiceOver, JAWS)
• ☐ La jerarquia de encabezados es logica y secuencial
• ☐ El HTML se valida sin errores criticos

Como Eduspera automatiza el cumplimiento de WCAG

Crear un curso accesible desde cero es un esfuerzo considerable — pero no tiene que ser manual. Eduspera integra verificaciones de accesibilidad directamente en el flujo de trabajo de creacion de cursos, detectando problemas antes de que lleguen a tus estudiantes.

• Puntuacion de accesibilidad: Cada curso recibe una puntuacion de accesibilidad en tiempo real basada en verificaciones automatizadas de WCAG 2.2 AA. La puntuacion se actualiza a medida que anades contenido, senalando texto alternativo faltante, problemas de contraste y errores estructurales de inmediato.
• Subtitulos generados por IA: Los videos subidos a Eduspera se transcriben automaticamente con IA, generando subtitulos que puedes revisar y editar directamente dentro de la plataforma — cumpliendo el criterio 1.2.2 sin requerir herramientas o flujos de trabajo separados.
• Diseno keyboard-first: Todo el reproductor del curso — navegacion, controles de video, cuestionarios y seguimiento de progreso — esta construido con accesibilidad completa por teclado desde el inicio, no anadida despues.
• Salida HTML semantica: El contenido del curso creado en el editor de texto enriquecido de Eduspera produce automaticamente HTML limpio y semantico con jerarquia de encabezados adecuada, estructuras de listas y atributos ARIA.
• Motor de cuestionarios accesible: Los componentes de cuestionarios incluyen etiquetas adecuadas, mensajes de error y gestion del foco desde el primer momento, cumpliendo multiples criterios WCAG (3.3.1, 3.3.2, 2.1.1, 4.1.2) sin requerir conocimientos tecnicos de los creadores de cursos.

El objetivo no es reemplazar tu comprension de la accesibilidad — este checklist existe porque entender los principios importa. El objetivo es automatizar las verificaciones repetitivas para que puedas centrarte en crear contenido educativo excelente que sirva a todos los estudiantes. Lee mas sobre como hacer cursos online accesibles para una perspectiva mas amplia sobre el diseno instruccional accesible.

Preguntas frecuentes

Necesito cumplir WCAG Nivel A, AA o AAA para mi curso online?

WCAG Nivel AA es el estandar internacionalmente reconocido para el cumplimiento de accesibilidad web y es el nivel referenciado por la mayoria de la legislacion, incluida la Ley Europea de Accesibilidad, la Ley de Estadounidenses con Discapacidades (en la practica) y la Seccion 508. El Nivel A es el minimo absoluto y es insuficiente para el cumplimiento. El Nivel AAA incluye criterios mejorados que son valiosos pero normalmente no se exigen — muchos criterios AAA son impracticables de aplicar universalmente (por ejemplo, requerir interpretacion en lengua de signos para todo el contenido de video). Apunta al Nivel AA como tu linea base y adopta criterios AAA individuales donde beneficien a tu poblacion especifica de estudiantes.

Que herramientas puedo usar para probar mi curso en cuanto a cumplimiento WCAG?

Las herramientas automatizadas detectan aproximadamente el 30-40% de los problemas WCAG. Usa axe DevTools (extension de navegador), WAVE o Lighthouse para escaneo automatizado. Para el 60-70% restante, las pruebas manuales son esenciales: navega por tu curso usando solo el teclado, prueba con un lector de pantalla (NVDA en Windows, VoiceOver en macOS), verifica el contraste de colores con WebAIM Contrast Checker y pide a usuarios con discapacidad que prueben tu curso. Plataformas como Eduspera integran escaneo de accesibilidad automatizado directamente en el flujo de trabajo de creacion, detectando problemas comunes antes de que publiques.

Puedo adaptar un curso existente para cumplir con WCAG, o necesito reconstruirlo desde cero?

La adaptacion casi siempre es posible y generalmente es mas practica que la reconstruccion. Comienza ejecutando un escaneo automatizado para identificar los problemas mas comunes — texto alternativo faltante, contraste insuficiente, campos de formulario sin etiquetar — ya que estos a menudo pueden solucionarse rapidamente. Luego aborda los problemas estructurales: jerarquia de encabezados, navegacion por teclado y gestion del foco. La correccion mas laboriosa para la mayoria de los creadores de cursos es anadir subtitulos a los videos existentes, pero las herramientas de transcripcion con IA han reducido drasticamente el esfuerzo requerido. Prioriza las correcciones por impacto: las barreras que bloquean completamente el acceso (trampas de teclado, subtitulos faltantes) deben corregirse primero, seguidas de los problemas que degradan la experiencia (contraste deficiente, texto alternativo faltante).