Proyecto 5: Mejora de la Accesibilidad Web

1. Descripción del proyecto

Introducción

El objetivo de este proyecto es diseñar y desarrollar una web accesible, alcanzando el nivel de conformidad AA según las pautas WCAG 2.1. Para ello, el alumnado trabajará en distintas fases que abarcan desde el análisis inicial hasta la verificación final, documentando cada etapa en un informe que servirá como referencia para futuros proyectos. Esta relacionado con el proyecto de Desarrollo Full-Stack con MERN del módulo de DWEC.

2. Objetivos

Conocer qué es la accesibilidad.
Desarrollar webs accesibles teniendo en cuenta las pautas de accesibilidad al contenido en la web (WCAG), teniendo en cuenta prioridades, puntos de verificación y niveles de adecuación.
Conocer los principios generales del diseño accesible
Utilizar herramientas de análisis de accesibilidad web.
Realizar análisis de accesibilidad web a través de dispositivos.

3. Resultados de aprendizaje y Criterios de evaluación

RA5: Desarrolla interfaces web accesibles, analizando las pautas establecidas y aplicando técnicas de verificación.

CE. a) Se ha reconocido la necesidad de diseñar webs accesibles.
CE. b) Se ha analizado la accesibilidad de diferentes documentos web.
CE. c) Se han analizado los principios y pautas de accesibilidad al contenido, así como los niveles de conformidad.
CE. d) Se han analizado los posibles errores según los puntos de verificación de prioridad.
CE. e) Se ha alcanzado el nivel de conformidad deseado
CE. f) Se han verificado los niveles alcanzados mediante el uso de test externos.
CE. g) Se ha verificado la visualización del interfaz con diferentes navegadores y tecnologías.
CE. h) Se han analizado y utilizado herramientas y estrategias que mejoren la visibilidad y la accesibilidad de los sitios y páginas web en los resultados de los buscadores.

4. Prueba - Fases del Proyecto

Proyecto: Mejora de la Accesibilidad Web

El siguiente proyecto ha sido adaptado para cumplir con los criterios de evaluación establecidos en el RA5. El alumnado trabajará en distintas fases, cada una diseñada para abordar un criterio específico, asegurando un enfoque integral en el desarrollo de interfaces web accesibles. Además, se incluye el análisis y uso de herramientas que mejoren la visibilidad y accesibilidad en los motores de búsqueda.

Fases del Proyecto

Fase 1: Reconocimiento de la necesidad de accesibilidad web

Objetivo: Comprender la importancia de diseñar webs accesibles y su impacto en los usuarios.

Tareas:

Investigar sobre la accesibilidad web y redactar un apartado en el informe que responda:
- ¿Por qué es importante diseñar webs accesibles?
- ¿Qué beneficios aporta a los usuarios (especialmente aquellos con discapacidades) y a los desarrolladores?
- Relación con normativas vigentes, como las WCAG 2.1 y el Real Decreto 1112/2018.
Reflexionar sobre cómo la accesibilidad mejora la experiencia del usuario (UX) y contribuye a la inclusión digital.

Entrega: Apartado en el informe que justifique la necesidad de accesibilidad.

Fase 2: Análisis inicial de accesibilidad en documentos web

Objetivo: Identificar problemas de accesibilidad en páginas web existentes o en partes del proyecto asignado.

Tareas:

Seleccionar una página web para analizar.
Utilizar herramientas automáticas como WAVE, Lighthouse o TAW para detectar problemas técnicos.
Realizar pruebas manuales para verificar aspectos no detectables automáticamente, como etiquetas semánticas correctas o textos alternativos descriptivos.
Documentar los problemas encontrados:
- Tipo de problema (contraste, navegación, etiquetas, etc.).
- Ubicación exacta dentro del sitio.
- Impacto en la experiencia del usuario.

Entrega: Informe parcial con los resultados del análisis inicial.

Fase 3: Análisis de principios, pautas y niveles de conformidad

Objetivo: Familiarizarse con los principios fundamentales de las WCAG 2.1 y los niveles de conformidad (A, AA, AAA).

Tareas:

Estudiar los principios fundamentales:
- Perceptible.
- Operable.
- Comprensible.
- Robusto.
Identificar las pautas específicas asociadas a cada principio.
Determinar el nivel de conformidad objetivo (nivel AA) y analizar sus requisitos.
Incluir ejemplos prácticos sobre cómo aplicar estas pautas al contenido web (por ejemplo, uso de texto alternativo, navegación por teclado, etc.).

Entrega: Sección del informe que resuma los principios, pautas y niveles de conformidad.

Fase 4: Análisis y priorización de errores según puntos de verificación

Objetivo: Identificar los errores más críticos según su prioridad e impacto en la experiencia del usuario.

Tareas:

Revisar los problemas detectados en el análisis inicial.
Priorizar los errores según su impacto:
- Contraste insuficiente entre texto y fondo.
- Imágenes sin texto alternativo.
- Formularios sin etiquetas descriptivas.
Proponer soluciones específicas para cada problema identificado.

Entrega: Documento con la lista priorizada de errores y las soluciones propuestas.

Fase 5: Implementación para alcanzar el nivel deseado

Objetivo: Realizar las modificaciones necesarias para alcanzar el nivel AA de conformidad según las WCAG 2.1.

Tareas:

Modificar el código HTML/CSS/JS del proyecto para solucionar los problemas detectados:
- Mejorar el contraste entre texto y fondo.
- Añadir textos alternativos a imágenes y elementos multimedia.
- Asegurar que todos los formularios tengan etiquetas claras y descriptivas.
- Garantizar la navegación completa mediante teclado.
Documentar cada mejora realizada con capturas antes y después del cambio.

Entrega: Archivos del proyecto actualizados con las mejoras implementadas.

Fase 6: Verificación mediante test externos

Objetivo: Comprobar que se han alcanzado los objetivos de accesibilidad mediante herramientas externas y pruebas manuales.

Tareas:

Utilizar herramientas automáticas como TAW, SortSite, o validadores online para verificar el cumplimiento del nivel AA.
Realizar pruebas manuales:
- Navegación por teclado (sin usar ratón).
- Uso de lectores de pantalla como NVDA o VoiceOver.
Documentar los resultados obtenidos (capturas, informes generados por herramientas).

Entrega: Evidencias del cumplimiento del nivel AA (resultados obtenidos, capturas, etc.).

Fase 7: Verificación multiplataforma

Objetivo: Garantizar que la web es funcional en diferentes navegadores, dispositivos y tecnologías asistivas.

Tareas:

Probar la visualización del sitio en navegadores modernos como Chrome, Firefox y Edge.
Verificar su funcionamiento en dispositivos móviles y tabletas (diseño responsive).
Comprobar su compatibilidad con tecnologías asistivas como lectores de pantalla o magnificadores.

Entrega: Informe con los resultados de las pruebas multiplataforma.

Fase 8: Análisis y estrategias para mejorar visibilidad en buscadores

Objetivo: Implementar estrategias avanzadas de SEO en una aplicación MERN que aborden los tres tipos de SEO: On-page, Off-page y Técnico.

Tareas:

SEO On-page:
Crear una estructura semántica usando React para las páginas principales, incluyendo metaetiquetas dinámicas con React Helmet.
Implementar URLs amigables y configurar rutas con React Router.
Añadir contenido optimizado con palabras clave relacionadas con el tema de la aplicación.
SEO Técnico:
Configurar un sitemap dinámico utilizando Express que incluya las rutas principales de la aplicación.
Implementar un archivo robots.txt para gestionar el acceso de los motores de búsqueda.
Medir y optimizar el tiempo de carga utilizando herramientas como Lighthouse, ajustando imágenes y activando la compresión Gzip en el servidor.
SEO Off-page:
Diseñar una estrategia de backlinks creando contenido atractivo (como tutoriales o blogs) que pueda ser enlazado desde otras plataformas.
Crear un perfil en Google Search Console y analizar el tráfico y las páginas indexadas.
Evaluación del SEO:
Usar herramientas como PageSpeed Insights y Google Search Console para analizar las mejoras implementadas.
Elaborar un informe que incluya las métricas iniciales y los cambios logrados.

Entrega: - Una aplicación MERN funcional con todas las optimizaciones SEO implementadas. - Un informe detallado que describa las estrategias aplicadas en cada tipo de SEO, incluyendo capturas de pantalla de las herramientas utilizadas y un análisis de los resultados obtenidos.

Fase 9: Elaboración del informe final

Objetivo: Documentar todo el proceso seguido durante el proyecto para que sirva como referencia futura.

Tareas: 1. Redactar un informe final que incluya: - Introducción sobre la importancia de la accesibilidad web. - Análisis inicial: problemas detectados y herramientas utilizadas. - Modificaciones realizadas para alcanzar el nivel AA. - Resultados obtenidos tras las verificaciones externas y multiplataforma. - Estrategias aplicadas para mejorar visibilidad SEO inclusivo. - Conclusiones y recomendaciones para futuros proyectos. 2. Asegurarse de que el informe sea claro, estructurado e incluya evidencias gráficas (capturas antes/después).

Entrega: Informe final completo en formato PDF.

5.Entrega Final

Debéis entregar en un repositorío de GitHub (el mismo del proyecto de MERN):

Al finalizar todas las fases, cada estudiante o equipo deberá entregar: 1. El informe final documentado con todas las fases descritas. 2. Los archivos actualizados del proyecto web con las mejoras implementadas. 3. Evidencias gráficas o informes generados por herramientas externas que demuestren: - Cumplimiento del nivel AA según WCAG 2.1. - Estrategias aplicadas para mejorar visibilidad SEO inclusiva. - ¡Ánimo! 🖖

6. Evaluación.

RA5: Desarrolla interfaces Web accesibles, analizando las pautas establecidas y aplicando técnicas de verificación

Criterios de evaluación y niveles de desempeño

Criterio de evaluación (CE)	10 - Excelente	7,5 - Notable	5 - Suficiente	2,5 - Insuficiente	0 - No evaluable
1. Se ha reconocido la necesidad de diseñar webs accesibles.	Explica exhaustivamente la importancia de la accesibilidad web con un lenguaje técnico y preciso, citando normativas y casos prácticos relevantes.	Explica la importancia de la accesibilidad web con un lenguaje correcto y preciso, mencionando normativas o ejemplos generales.	Reconoce la importancia de la accesibilidad web con un lenguaje correcto pero poco preciso, sin profundizar en normativas o ejemplos concretos.	Reconoce superficialmente la importancia de la accesibilidad web con un lenguaje poco correcto y sin aportar ejemplos o normativas relevantes.	No asiste o no es evaluable.
2. Se ha analizado la accesibilidad de diferentes documentos web.	Analiza varios documentos web justificando con precisión técnica los problemas detectados, apoyándose en herramientas y tests específicos.	Analiza varios documentos web justificando correctamente los problemas detectados, apoyándose en herramientas y tests específicos.	Analiza algunos documentos web justificando los problemas detectados con argumentos correctos pero imprecisos y herramientas básicas.	Analiza pocos documentos web justificando los problemas detectados con argumentos poco correctos e imprecisos, sin usar herramientas adecuadas.	No asiste o no es evaluable.
3. Se han analizado los principios y pautas de accesibilidad al contenido, así como los niveles de conformidad.	Explica y aplica exhaustivamente los principios WCAG (Perceptible, Operable, Comprensible y Robusto) y niveles (A, AA, AAA), justificando cada análisis.	Explica y aplica correctamente los principios WCAG y niveles de conformidad, aunque no justifica todos los análisis realizados.	Explica los principios WCAG de forma general y aplica parcialmente los niveles de conformidad en el análisis realizado.	Menciona superficialmente los principios WCAG sin aplicarlos correctamente ni justificar el nivel de conformidad alcanzado en el análisis realizado.	No asiste o no es evaluable.
4. Se han analizado los posibles errores según los puntos de verificación de prioridad.	Identifica exhaustivamente errores según puntos clave WCAG, justificando con precisión técnica las soluciones propuestas para corregirlos.	Identifica correctamente errores según puntos clave WCAG, proponiendo soluciones generales para corregirlos.	Identifica algunos errores según puntos clave WCAG pero propone soluciones incompletas o generales para corregirlos.	Identifica pocos errores según puntos clave WCAG y no propone soluciones claras para corregirlos.	No asiste o no es evaluable.
5. Se ha alcanzado el nivel de conformidad deseado.	Demuestra haber alcanzado el nivel deseado (A/AA/AAA) mediante pruebas documentadas que justifican exhaustivamente las mejoras realizadas en la interfaz.	Demuestra haber alcanzado el nivel deseado (A/AA/AAA) mediante pruebas documentadas que justifican correctamente las mejoras realizadas en la interfaz.	Demuestra parcialmente haber alcanzado el nivel deseado mediante pruebas básicas que justifican algunas mejoras realizadas en la interfaz.	No demuestra haber alcanzado el nivel deseado o presenta pruebas insuficientes que no justifican las mejoras realizadas en la interfaz.	No asiste o no es evaluable.
6. Se han verificado los niveles alcanzados mediante el uso de test externos.	Verifica exhaustivamente los niveles alcanzados mediante herramientas externas (ej.: WAVE, TAW), documentando resultados y proponiendo mejoras adicionales.	Verifica correctamente los niveles alcanzados mediante herramientas externas, documentando resultados básicos sin proponer mejoras adicionales.	Verifica parcialmente los niveles alcanzados mediante herramientas externas pero sin documentar adecuadamente resultados ni proponer mejoras claras.	Verifica superficialmente los niveles alcanzados utilizando pocas herramientas externas o sin interpretar adecuadamente los resultados obtenidos.	No asiste o no es evaluable.
7. Se ha verificado la visualización del interfaz con diferentes navegadores y tecnologías.	Realiza pruebas exhaustivas en múltiples navegadores (Chrome, Firefox, Safari) y tecnologías (lectores de pantalla), documentando cada resultado obtenido.	Realiza pruebas correctas en varios navegadores y algunas tecnologías específicas, documentando resultados básicos obtenidos en dichas pruebas.	Realiza pruebas básicas en algunos navegadores pero omite tecnologías específicas como lectores de pantalla o dispositivos móviles especializados.	Realiza pruebas superficiales en pocos navegadores sin incluir tecnologías específicas ni documentar adecuadamente los resultados obtenidos.	No asiste o no es evaluable.
8. Se han analizado y utilizado herramientas y estrategias que mejoren visibilidad/accesibilidad SEO	Analiza exhaustivamente herramientas SEO (ej.: Google Lighthouse) e implementa estrategias claras para mejorar visibilidad/accesibilidad del sitio web	Analiza correctamente herramientas SEO e implementa algunas estrategias básicas para mejorar visibilidad/accesibilidad del sitio web	Analiza parcialmente herramientas SEO e implementa estrategias limitadas para mejorar visibilidad/accesibilidad del sitio web	Analiza superficialmente herramientas SEO sin implementar estrategias claras para mejorar visibilidad/accesibilidad del sitio web	No asiste o no es evaluable

Notas adicionales

Los tests externos recomendados pueden incluir WAVE, TAW, Axe DevTools u otros similares que permitan verificar tanto accesibilidad como usabilidad del sitio web diseñado.