Tecnología y Digitalización · 3° ESO · Creación de Contenidos y Diseño Web · 2o Trimestre

Accesibilidad Web para Todos los Usuarios

Los alumnos aplican principios de accesibilidad web para garantizar que sus creaciones digitales sean utilizables por personas con diversas capacidades.

• Competencias Clave LOMLOE
• LOMLOE: ESO - Diseño universal
• LOMLOE: ESO - Empatía y diseño

Sobre este tema

La accesibilidad web asegura que las páginas digitales sean utilizables por todas las personas, independientemente de sus capacidades físicas, sensoriales o cognitivas. En 3º de ESO, los alumnos aplican principios como los de WCAG: perceptible, operable, comprensible y robusto. Aprenden a usar textos alternativos en imágenes, contrastes adecuados de color, navegación por teclado y etiquetas semánticas en HTML, lo que fomenta el diseño universal alineado con la LOMLOE.

Este tema conecta con la unidad de Creación de Contenidos y Diseño Web, promoviendo empatía al imaginar cómo navega una persona con discapacidad visual o motora. Los alumnos evalúan sitios reales con herramientas como WAVE o screen readers, identificando barreras comunes y proponiendo mejoras. Esto desarrolla competencias digitales inclusivas y pensamiento crítico sobre el impacto social de la tecnología.

El aprendizaje activo beneficia especialmente este tema porque las simulaciones prácticas, como probar webs con los ojos vendados o usando solo teclado, generan empatía inmediata y retención duradera de los principios. Las actividades colaborativas permiten debates sobre soluciones reales, haciendo que los conceptos abstractos se conviertan en habilidades aplicables.

Preguntas clave

1. ¿Cómo navegaría por vuestra web una persona con discapacidad visual?
2. ¿Qué pautas de accesibilidad son fundamentales para incluir a todos los usuarios?
3. ¿Cómo evaluaríais la accesibilidad de una página web existente?

Objetivos de Aprendizaje

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

Antes de Empezar

Introducción al HTML y CSS

Por qué: Es fundamental que los alumnos conozcan la estructura básica de una página web y cómo se aplica el estilo para poder implementar y evaluar la accesibilidad.

Conceptos básicos de diseño web

Por qué: Comprender los principios de diseño visual y de interacción es necesario para aplicar las pautas de accesibilidad de manera efectiva.

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.

Atención a estas ideas erróneas

Idea errónea común

La accesibilidad solo importa para personas ciegas.

Qué enseñar en su lugar

La accesibilidad beneficia a todos, incluyendo usuarios con daltonismo, discapacidades motoras o cognitivas, y conexiones lentas. Actividades de simulación grupal ayudan a los alumnos a experimentar barreras diversas, fomentando empatía y comprensión integral mediante discusiones compartidas.

Idea errónea común

Añadir texto alternativo basta para hacer una web accesible.

Qué enseñar en su lugar

El alt text es solo un principio; se necesitan contrastes, navegación por teclado y estructura lógica. Pruebas prácticas en estaciones revelan interdependencias, donde los alumnos corrigen mental models al ver fallos en cadena durante rotaciones colaborativas.

Idea errónea común

Las webs modernas son accesibles por defecto.

Qué enseñar en su lugar

Muchas webs fallan en estándares básicos pese a herramientas automáticas. Auditorías reales con pares muestran evidencias concretas, ayudando a superar esta idea mediante datos colectivos y propuestas de mejora inmediata.

Ideas de aprendizaje activo

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.

45 min·Grupos pequeños

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.

50 min·Parejas

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.

35 min·Toda la clase

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.

30 min·Individual

Conexiones con el Mundo Real

• Los diseñadores web y desarrolladores de empresas como Google o Microsoft deben aplicar constantemente las pautas de accesibilidad para que sus productos, como Google Maps o Windows, sean utilizables por todos los usuarios, incluyendo aquellos con discapacidades.
• Las administraciones públicas, como el Ayuntamiento de Madrid o el Gobierno de Francia, están obligadas por ley a asegurar que sus sitios web y aplicaciones sean accesibles, permitiendo a todos los ciudadanos acceder a la información y a los servicios públicos digitales.
• Las plataformas de e-commerce, como Amazon o El Corte Inglés, implementan medidas de accesibilidad para ampliar su base de clientes, garantizando que personas con diversas capacidades puedan navegar, buscar productos y completar compras de forma autónoma.

Ideas de Evaluación

Boleto de Salida

Entrega a cada alumno una tarjeta con el nombre de una tecnología de asistencia (ej. lector de pantalla, lupa de pantalla, software de reconocimiento de voz). Pide que escriban una frase explicando cómo ayuda a un usuario con una discapacidad específica y un ejemplo de una característica web que facilita su uso.

Verificación Rápida

Muestra una captura de pantalla de una página web con problemas de accesibilidad evidentes (ej. texto con bajo contraste, falta de texto alternativo en una imagen clave). Pregunta a los alumnos: '¿Qué problema de accesibilidad identificáis aquí y cómo lo solucionaríais?'

Evaluación entre Iguales

Los alumnos trabajan en parejas para evaluar la accesibilidad de una sección de una web que ellos mismos han creado previamente. Deben usar una lista de verificación simple (contraste, alt text, navegación por teclado). Cada pareja revisa el trabajo de otra y proporciona una sugerencia de mejora por escrito.

Preguntas frecuentes

¿Cómo enseñar accesibilidad web en 3º ESO según LOMLOE?

Integra principios WCAG en proyectos de diseño web, enfatizando diseño universal y empatía. Usa herramientas gratuitas como WAVE o Lighthouse para evaluaciones prácticas. Conecta con competencias digitales inclusivas, evaluando mediante rúbricas que valoren mejoras reales en sitios creados por alumnos.

¿Cuáles son las pautas fundamentales de accesibilidad web?

Las WCAG destacan cuatro: perceptible (alt text, subtítulos), operable (teclado, tiempo suficiente), comprensible (lenguaje claro, predicible) y robusto (código compatible). En clase, prioriza checklists simples para que alumnos las apliquen en sus creaciones, midiendo impacto con pruebas de usuario simuladas.

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

Combina herramientas automáticas (WAVE, axe) con manuales: prueba navegación por teclado, screen readers como NVDA y contraste con WebAIM. Involucra alumnos en auditorías grupales para identificar y priorizar fixes, generando informes con evidencias visuales y propuestas accionables.

¿Cómo ayuda el aprendizaje activo a entender la accesibilidad web?

Simulaciones como navegar con discapacidad vendada o teclado único generan empatía directa, haciendo abstractos principios WCAG tangibles. Rotaciones en estaciones y rediseños colaborativos fomentan debate y aplicación inmediata, mejorando retención un 40-60% según estudios. Discusiones post-actividad consolidan aprendizajes inclusivos.