Accesibilidad Web para Todos los Usuarios

La accesibilidad web es un concepto abstracto que cobra sentido cuando los alumnos interactúan con tecnologías reales y experimentan las barreras que enfrentan otros usuarios. La combinación de pruebas prácticas y diseño colaborativo transforma este tema en una experiencia de aprendizaje tangible y transformadora para los estudiantes.

• 3° ESO
• Innovación Digital y Pensamiento Computacional
• 4 actividades
• 30 min–50 min

Objetivos de aprendizaje

1. Identificar las barreras de accesibilidad comunes en sitios web para usuarios con discapacidades visuales, auditivas o motoras.
2. Aplicar los principios de diseño universal (perceptible, operable, comprensible, robusto) en la creación de elementos de una página web.
3. Evaluar la conformidad de una página web existente con directrices básicas de accesibilidad, como WCAG 2.1, utilizando herramientas de validación.
4. Diseñar prototipos de interfaces web que incorporen características de accesibilidad, como contraste de color adecuado y navegación por teclado.
5. Explicar la importancia de la accesibilidad web para la inclusión digital y el cumplimiento de normativas legales.

Estudio de caso

⏱ 45 min·Grupos pequeños

Estaciones de Auditoría: Pruebas de Accesibilidad

Prepara cuatro estaciones: contraste de colores con herramientas online, navegación por teclado en una web de muestra, lectura de alt text con un screen reader simulado y estructura semántica con validadores. Los grupos rotan cada 10 minutos y registran fallos y soluciones en una hoja compartida.

Preparación y detalles

¿Cómo navegaría por vuestra web una persona con discapacidad visual?

Consejo de facilitación: En la actividad de estaciones de auditoría, asegúrate de que cada grupo rote por al menos dos tecnologías de asistencia diferentes para que comparen enfoques distintos de accesibilidad.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Estudio de caso

⏱ 50 min·Parejas

Rediseño Inclusivo: Mejora de una Página

En parejas, selecciona una página web existente con problemas de accesibilidad. Identifica tres barreras usando checklists WCAG, propone cambios en HTML/CSS y crea una versión mejorada en un editor online. Presenta las mejoras al grupo.

Preparación y detalles

¿Qué pautas de accesibilidad son fundamentales para incluir a todos los usuarios?

Consejo de facilitación: Durante el rediseño inclusivo, pide a los alumnos que documenten cada decisión de cambio con una breve justificación basada en los principios WCAG que aplicaron.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Estudio de caso

⏱ 35 min·Toda la clase

Simulación de Discapacidades: Navegación Empática

La clase se divide en roles: un alumno simula discapacidad visual con antifaz y auriculares, otro motora usando solo teclado. Navegan por una web preparada y dan feedback. Discute colectivamente ajustes necesarios.

Preparación y detalles

¿Cómo evaluaríais la accesibilidad de una página web existente?

Consejo de facilitación: En la simulación de discapacidades, limita el tiempo de cada prueba a 5 minutos para mantener el enfoque y evitar frustraciones innecesarias en los alumnos.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Estudio de caso

⏱ 30 min·Individual

Evaluación Rápida: Checklist Colaborativa

Individualmente, cada alumno evalúa una web asignada con una checklist de 10 ítems WCAG. Luego, en pequeños grupos, comparten resultados y votan las mejoras prioritarias para un informe final de clase.

Preparación y detalles

¿Cómo navegaría por vuestra web una persona con discapacidad visual?

Consejo de facilitación: Para la evaluación rápida con checklist, usa una página web que los alumnos conozcan para que puedan comparar su experiencia previa con la accesibilidad real de la página.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Enseñando este tema

Este tema funciona mejor cuando se enseña desde la acción y no desde la teoría pura. Los alumnos necesitan tocar los problemas con sus propias manos para internalizar las necesidades de los usuarios diversos. Evita largas exposiciones sobre WCAG; en su lugar, usa ejemplos cotidianos como el contraste de colores en señales de tráfico o la navegación por teclado en formularios antiguos. La investigación muestra que la empatía se construye cuando los estudiantes experimentan barreras por sí mismos, no cuando solo las escuchan.

Qué esperar

Al finalizar, los alumnos no solo identifican problemas de accesibilidad, sino que proponen soluciones validadas y defienden su importancia con ejemplos concretos. La evidencia de su aprendizaje se verá en los cambios realizados en las páginas rediseñadas, en las discusiones empáticas durante las simulaciones y en los registros de las auditorías grupales.

Atención a estas ideas erróneas

Idea errónea común

Durante la actividad de simulación de discapacidades, algunos alumnos pueden comentar que la accesibilidad solo importa para personas ciegas.

Qué enseñar en su lugar

Durante la simulación de discapacidades, observa las reacciones cuando los alumnos experimenten con daltonismo simulado o con la navegación por teclado. Usa estos momentos para guiar una discusión donde identifiquen barreras adicionales, como el bajo contraste que afecta a usuarios con visión reducida o la falta de etiquetas que complican la navegación por voz.

Idea errónea común

Durante el rediseño inclusivo, algunos alumnos pueden creer que añadir texto alternativo es suficiente para cumplir con los estándares de accesibilidad.

Qué enseñar en su lugar

Durante el rediseño inclusivo, pide a los alumnos que usen las herramientas de auditoría integradas en sus navegadores para comprobar el contraste de colores y la navegación por teclado. Al descubrir que un texto alternativo no resuelve problemas de legibilidad, podrán ver la interdependencia entre los principios WCAG y corregir sus mental models.

Idea errónea común

Durante las estaciones de auditoría, algunos alumnos pueden asumir que las webs modernas son accesibles por defecto.

Qué enseñar en su lugar

Durante las estaciones de auditoría, proporciona páginas de diferentes épocas o estilos (desde webs antiguas hasta diseños minimalistas modernos) y pide que comparen resultados. Al ver que incluso sitios recientes fallan en contrastes o etiquetas semánticas, los alumnos entenderán que la accesibilidad requiere un diseño activo y consciente.

Ideas de Evaluación

Boleto de Salida

Después de la actividad de simulación de discapacidades, entrega a cada alumno una tarjeta con el nombre de una tecnología de asistencia. Pídeles que escriban cómo esa tecnología ayuda a un usuario con una discapacidad específica y un ejemplo concreto de una característica web que facilita su uso.

Pregunta para Discusión

Durante la actividad de estaciones de auditoría, muestra una captura de pantalla de una página web con problemas evidentes de contraste o falta de texto alternativo. Pregunta a los alumnos: '¿Qué problema identificáis aquí y cómo lo solucionaríais usando los principios WCAG?'. Usa sus respuestas para evaluar la aplicación de los conceptos en tiempo real.

Evaluación entre Iguales

Después de que los alumnos completen el rediseño inclusivo, haz que trabajen en parejas para evaluar la accesibilidad de la sección que crearon. Deben usar una lista de verificación simple (contraste, alt text, navegación por teclado) y proporcionar una sugerencia de mejora por escrito al equipo evaluado.

Extensiones y apoyo

• Challenge: Pide a los alumnos que diseñen una página accesible para un usuario con necesidades específicas que no haya sido cubierta en clase, como dislexia o autismo.
• Scaffolding: Proporciona una plantilla básica con errores comunes de accesibilidad y pide a los alumnos que identifiquen y corrijan solo los problemas más evidentes.
• Deeper: Propón a los alumnos que investiguen cómo una empresa tecnológica conocida (como Apple o Google) implementa accesibilidad en sus productos y presenten un caso de estudio a la clase.

Vocabulario Clave

Texto alternativo (alt text)	Descripción textual de una imagen que se muestra si la imagen no se puede ver. Permite a los lectores de pantalla comunicar el contenido visual.
Contraste de color	La diferencia de luminosidad entre el texto y su fondo. Un contraste suficiente es crucial para la legibilidad, especialmente para personas con baja visión.
Navegación por teclado	La capacidad de interactuar con todos los elementos de una página web (enlaces, botones, formularios) utilizando únicamente el teclado, sin necesidad de un ratón.
Etiquetas semánticas HTML	Uso correcto de etiquetas HTML (como <nav>, <article>, <aside>) para estructurar el contenido, lo que ayuda a los lectores de pantalla y otras tecnologías de asistencia a interpretar la página.
WCAG (Web Content Accessibility Guidelines)	Un conjunto de recomendaciones internacionales para hacer que el contenido web sea más accesible. Se basa en cuatro principios: perceptible, operable, comprensible y robusto.