2º BN – SA2.4.
– ACCESIBILIDAD WEB
Actividad: Accesibilidad web
Descripción de la tarea
En esta actividad analizaremos la accesibilidad de distintos sitios web utilizando Lighthouse, una
herramienta integrada en Google Chrome. A través de esta práctica, identificaremos barreras de
accesibilidad y propondrán mejoras basadas en los principios de WCAG y la normativa vigente.
¿Qué es la accesibilidad web?
La accesibilidad web es la práctica de diseñar y desarrollar sitios web de manera que todas las
personas, incluidas aquellas con discapacidad, puedan acceder a la información y utilizar las
funcionalidades sin barreras.
Para lograr esto, se deben considerar diferentes discapacidades, como:
- Visuales: Ceguera, baja visión, daltonismo.
-Auditivas: Sordera o dificultades auditivas.
- Motoras: Dificultades en el uso de un ratón o teclado.
- Cognitivas: Dificultades de comprensión, dislexia, trastornos del desarrollo.
Se basa en el diseño inclusivo y en la eliminación de obstáculos digitales, garantizando que
cualquier usuario, independientemente de sus capacidades, pueda navegar y utilizar la web de
manera efectiva.
Principios fundamentales de accesibilidad (WCAG)
Las pautas de accesibilidad para el contenido web (WCAG- Web Content Accessibility Guideline)
han sido desarrolladas por el World Wide Web Consortium (W3C) y establecen cuatro principios
clave:
1. Perceptible
La información y los componentes de la interfaz deben ser visibles y comprensibles para
todos los usuarios.
Se deben proporcionar alternativas textuales para el contenido no textual (por ejemplo,
imágenes con descripciones ALT).
Debe haber contrastes adecuados entre el texto y el fondo para personas con baja visión o
daltonismo.
2º BN – SA2.4. – ACCESIBILIDAD WEB
2. Operable
El sitio web debe ser navegable mediante teclado, sin necesidad de un ratón.
Se deben evitar elementos que causen movimientos bruscos o interacciones complejas que
dificulten su uso a personas con discapacidades motoras.
Se recomienda ofrecer suficiente tiempo para leer y utilizar el contenido.
3. Comprensible
El contenido debe ser claro, bien estructurado y con un lenguaje sencillo
Se deben incluir ayudas como mensajes de error claros y formularios con instrucciones
precisas.
Se debe garantizar la previsibilidad en la navegación (los menús y botones deben funcionar
de manera intuitiva).
4. Robusto
La web debe ser compatible con diferentes tecnologías de asistencia, como lectores de
pantalla.
El código debe estar bien estructurado y semánticamente correcto para evitar errores de
accesibilidad.
Debe adaptarse correctamente a distintos dispositivos y navegadores.
Niveles de accesibilidad: A, AA y AAA
Las WCAG establecen tres niveles de accesibilidad para clasificar las páginas web:
1. Nivel A (mínimo)
Se cumplen los requisitos esenciales, pero aún hay barreras para algunos usuarios.
Ejemplo: Proporcionar textos alternativos en imágenes.
2. Nivel AA (recomendado para la mayoría de sitios web)
Se cumplen estándares más altos y la web es accesible para la mayoría de usuarios.
Ejemplo: Garantizar contraste adecuado entre texto y fondo.
3. Nivel AAA (máximo, difícil de alcanzar en su totalidad)
Se implementan todas las recomendaciones para una accesibilidad óptima.
Ejemplo: Proporcionar lenguaje de señas en contenido audiovisual.
Nota: En España, la normativa exige cumplir con WCAG 2.1 de Nivel AA para sitios web públicos
y ciertos privados.
2º BN – SA2.4. – ACCESIBILIDAD WEB
Normativa en España y Europa
- Ley 11/2007, de acceso de las personas con discapacidad a los servicios de la sociedad de la
información y de los medios de comunicación electrónicos: Esta ley establece los principios de
accesibilidad y no discriminación en los servicios electrónicos, incluyendo las páginas web, para
garantizar que todas las personas puedan acceder a la información y servicios en línea.
-Real Decreto 1112/2018: Exige accesibilidad en sitios web y apps del sector público (cumplimiento
WCAG 2.1 Nivel AA).
-Directiva Europea 2016/2102: Refuerza la accesibilidad digital en servicios públicos.
Herramientas para evaluar la accesibilidad web
Existen diversas herramientas gratuitas que permiten analizar la accesibilidad de un sitio web e
identificar problemas.
1. WAVE (Web Accessibility Evaluation Tool)
Es una herramienta en línea gratuita disponible en [Link]
Permite analizar páginas web y detectar errores como:
- Falta de descripciones ALT en imágenes.
- Problemas de contraste de colores.
- Mal uso de encabezados y estructuras semánticas.
Se usa ingresando la URL de la web a evaluar.
2. Lighthouse (Chrome)
Es una herramienta integrada en Google Chrome que evalúa:
Accesibilidad
Rendimiento
SEO: Search Engine Optimization (Optimización para motores de búsqueda)
Buenas prácticas
Genera informes detallados con puntuaciones y recomendaciones.
¿Cómo mejorar la accesibilidad web?
Para garantizar que un sitio web sea accesible, es importante seguir una serie de principios y buenas
prácticas. A continuación, se presentan instrucciones clave para mejorar la accesibilidad web:
2º BN – SA2.4. – ACCESIBILIDAD WEB
1. Proporcionar textos alternativos en las imágenes para que los lectores de pantalla puedan
describirlas a las personas con discapacidad visual.
2. Asegurar un contraste adecuado entre el texto y el fondo para facilitar la lectura a personas con
baja visión o daltonismo.
3. Habilitar la navegación por teclado permitiendo que todas las funciones sean accesibles sin
necesidad de un ratón.
4. Utilizar etiquetas semánticas en HTML para estructurar correctamente los contenidos, facilitando
su interpretación por lectores de pantalla y motores de búsqueda. Algunas etiquetas útiles son header
para la cabecera, nav para la navegación, main para el contenido principal, section para dividir la
información en bloques temáticos, article para artículos individuales, aside para contenido
complementario y footer para el pie de página.
5. Incluir subtítulos y transcripciones en los videos para hacer el contenido accesible a personas con
discapacidad auditiva.
6. Evitar el uso exclusivo de colores para transmitir información, ya que algunas personas pueden
tener dificultades para distinguirlos.
7. Diseñar formularios accesibles mediante etiquetas adecuadas y mensajes de error claros para
mejorar la experiencia de usuarios con discapacidades cognitivas.
8. Garantizar que los enlaces sean descriptivos en lugar de frases genéricas como "haz clic aquí",
facilitando la comprensión del contenido enlazado.
9. Implementar un diseño adaptable que se ajuste a diferentes tamaños de pantalla y dispositivos,
beneficiando tanto a usuarios con discapacidades como a aquellos que usan distintos equipos.
10. Permitir el ajuste del tamaño del texto sin afectar la funcionalidad o el diseño del sitio, para que
los usuarios puedan adaptar la visualización según sus necesidades.
