Clínicas REM

Clínicas REM

Clínicas REM

Auditoría Accesibilidad

Auditoría Accesibilidad

Auditoría Accesibilidad

ROL

ROL

UX/UI Designer

UX/UI Designer

DURACIÓN

DURACIÓN

3 semanas

3 semanas

PROYECTO

PROYECTO

Individual

Individual

Scroll ↓

INTRODUCCIÓN

INTRODUCCIÓN

INTRODUCCIÓN

El próximo 28 de junio de 2025 marcará un antes y un después con la entrada en vigor del Acta Europea de Accesibilidad (European Accessibility Act, EAA). Esta directiva se aplica a los sitios de comercio electrónico, incluidas las tiendas online, que tengan al menos 10 empleados y un volumen de negocios o un balance anual de al menos 2 millones de euros.

¿Qué implica esta nueva ley?

¿Qué implica esta nueva ley?

¿Qué implica esta nueva ley?

  • Interfaz de usuario: Sencilla y comprensible.

  • Compatibilidad: Tecnologías asistenciales como lectores de pantalla.

  • Diseño visual: Contraste adecuado y textos alternativos en imágenes.

  • Navegación: Sin barreras para usuarios de teclado o dispositivos especializados.

Fases de la auditoría de accesibilidad

Fases de la auditoría de accesibilidad

Fases de la auditoría de accesibilidad

PROYECTO AUDITORÍA

PROYECTO AUDITORÍA

PROYECTO AUDITORÍA

¿Qué son las Clínicas REM?

¿Qué son las Clínicas REM?

¿Qué son las Clínicas REM?

Las Clínicas REM son centros especializados en tratamientos estéticos. Ofrecen una amplia gama de servicios, incluyendo, tratamientos faciales y corporales y eliminación de tatuajes.

Problema actual

Problema actual

Problema actual

Las Clínicas REM enfrentan problemas graves de accesibilidad en su sitio web, incluyendo:

- Páginas vacías.
- Enlaces sin contenido.
- Textos con "lorem ipsum".
- Falta de texto alternativo para imágenes.

Objetivo del proyecto

Objetivo del proyecto

Objetivo del proyecto

Evaluar la accesibilidad y garantizar que el sitio web Clínicas REM cumple con las WCAG 2.2 Nivel AA, anticipándose a la entrada en vigor del EAA en junio de 2025.

ESTADO ACTUAL DE LA WEB

ESTADO ACTUAL DE LA WEB

ESTADO ACTUAL DE LA WEB

Investigación

Investigación

Investigación

Auditoría de Accesibilidad

Auditoría de Accesibilidad

Pruebas automatizadas

Herramientas: Wave, Accessibility Cloud, Google Lighthouse. Resultados clave: - Identificación de más del 55% de elementos con barreras críticas. - Problemas comunes: etiquetas de formularios inexistentes, contraste insuficiente y enlaces sin descripción adecuada.

Pruebas automatizadas

Herramientas: Wave, Accessibility Cloud, Google Lighthouse. Resultados clave: - Identificación de más del 55% de elementos con barreras críticas. - Problemas comunes: etiquetas de formularios inexistentes, contraste insuficiente y enlaces sin descripción adecuada.

Pruebas automatizadas

Herramientas: Wave, Accessibility Cloud, Google Lighthouse. Resultados clave: - Identificación de más del 55% de elementos con barreras críticas. - Problemas comunes: etiquetas de formularios inexistentes, contraste insuficiente y enlaces sin descripción adecuada.

Pruebas automatizadas

Herramientas: Wave, Accessibility Cloud, Google Lighthouse. Resultados clave: - Identificación de más del 55% de elementos con barreras críticas. - Problemas comunes: etiquetas de formularios inexistentes, contraste insuficiente y enlaces sin descripción adecuada.

Pruebas Manuales

Metodología: - Validación con lector de pantalla. - Análisis de la arquitectura. - Lista de verificación basada en las WCAG 2.1. Resultados clave: - Se detectó problemas graves en la versión responsive. - Problemas en botones, enlaces rotos, formularios inaccesibles y elementos interactivos que no respondían correctamente a la navegación por teclado. - Otros errores encontrados en textos con contenido Lorem Ipsum y textos en imagen.

UI / UX Designer

Metodología: - Validación con lector de pantalla. - Análisis de la arquitectura. - Lista de verificación basada en las WCAG 2.1. Resultados clave: - Se detectó problemas graves en la versión responsive. - Problemas en botones, enlaces rotos, formularios inaccesibles y elementos interactivos que no respondían correctamente a la navegación por teclado. - Otros errores encontrados en textos con contenido Lorem Ipsum y textos en imagen.

Pruebas Manuales

Metodología: - Validación con lector de pantalla. - Análisis de la arquitectura. - Lista de verificación basada en las WCAG 2.1. Resultados clave: - Se detectó problemas graves en la versión responsive. - Problemas en botones, enlaces rotos, formularios inaccesibles y elementos interactivos que no respondían correctamente a la navegación por teclado. - Otros errores encontrados en textos con contenido Lorem Ipsum y textos en imagen.

Pruebas Manuales

Metodología: - Validación con lector de pantalla. - Análisis de la arquitectura. - Lista de verificación basada en las WCAG 2.1. Resultados clave: - Se detectó problemas graves en la versión responsive. - Problemas en botones, enlaces rotos, formularios inaccesibles y elementos interactivos que no respondían correctamente a la navegación por teclado. - Otros errores encontrados en textos con contenido Lorem Ipsum y textos en imagen.

Pruebas con Usuarios

La revisión con usuarios es un proceso esencial en la evaluación de la accesibilidad. Al involucrar a usuarios reales, se obtiene una perspectiva auténtica sobre la usabilidad y la experiencia del usuario final. Debido a la falta de recursos en este proyecto, no fue posible realizar estas pruebas, aunque son indispensables para garantizar una accesibilidad completa.

Pruebas con Usuarios

La revisión con usuarios es un proceso esencial en la evaluación de la accesibilidad. Al involucrar a usuarios reales, se obtiene una perspectiva auténtica sobre la usabilidad y la experiencia del usuario final. Debido a la falta de recursos en este proyecto, no fue posible realizar estas pruebas, aunque son indispensables para garantizar una accesibilidad completa.

Pruebas con Usuarios

La revisión con usuarios es un proceso esencial en la evaluación de la accesibilidad. Al involucrar a usuarios reales, se obtiene una perspectiva auténtica sobre la usabilidad y la experiencia del usuario final. Debido a la falta de recursos en este proyecto, no fue posible realizar estas pruebas, aunque son indispensables para garantizar una accesibilidad completa.

Pruebas con Usuarios

La revisión con usuarios es un proceso esencial en la evaluación de la accesibilidad. Al involucrar a usuarios reales, se obtiene una perspectiva auténtica sobre la usabilidad y la experiencia del usuario final. Debido a la falta de recursos en este proyecto, no fue posible realizar estas pruebas, aunque son indispensables para garantizar una accesibilidad completa.

Hallazgos de la Auditoria

Hallazgos de la Auditoria

Hallazgos de la Auditoria

Los problemas más significativos identificados incluyen:


1. Falta de accesibilidad visual: Contraste insuficiente y ausencia de texto alternativo en imágenes clave.
2. Problemas de interacción: Formularios no etiquetados adecuadamente y botones sin textos claros.
3. Navegación deficiente: Elementos no accesibles por teclado, páginas vacías y enlaces rotos.
4. Optimización responsive: Inconsistencias graves en la versión móvil.

Impacto:
El 45% de los elementos interactivos presentan barreras de accesibilidad graves, afectando la experiencia de los usuarios con discapacidades visuales, motoras y cognitivas.

Ahora, pasemos a la parte estética, que no es menos importante. Decidí mantener las tipografías actuales, pero opté por reducirlas a dos: Lora para los títulos y Open Sans para los textos.


También me enfoqué en la accesibilidad. Revisé los contrastes de color según las pautas WCAG y ajusté los botones y enlaces para que cumplieran con los estándares mínimos. Decidí utilizar un gris oscuro para los botones, y el naranja como hover.


Otros detalles de diseño:

  • Protagonismo del buscador en la home.

  • Tonalidad naranja en los fondos, inspirado en las hojas de los libros antiguos.


Playground Image
Playground Image
Playground Image
Playground Image

Recomendaciones y plan de implementación

Recomendaciones y plan de implementación

Recomendaciones y plan de implementación

Prioridades Inmediatas:
- Corregir errores críticos: Contraste en botones y textos. Añadir textos alternativos en imágenes.
- Garantizar la navegación completa por teclado.

A Mediano Plazo:
- Rediseñar formularios y elementos interactivos para incluir etiquetas claras y descripciones significativas.
- Optimizar la arquitectura de información en la versión responsive.

A Largo Plazo:
- Integrar accesibilidad en el flujo de trabajo del equipo para prevenir futuros errores.
- Realizar pruebas con usuarios reales para validar la solución propuesta.

Ahora, pasemos a la parte estética, que no es menos importante. Decidí mantener las tipografías actuales, pero opté por reducirlas a dos: Lora para los títulos y Open Sans para los textos.


También me enfoqué en la accesibilidad. Revisé los contrastes de color según las pautas WCAG y ajusté los botones y enlaces para que cumplieran con los estándares mínimos. Decidí utilizar un gris oscuro para los botones, y el naranja como hover.


Otros detalles de diseño:

  • Protagonismo del buscador en la home.

  • Tonalidad naranja en los fondos, inspirado en las hojas de los libros antiguos.


Playground Image
Playground Image
Playground Image
Playground Image

INFORME DE LA AUDITORÍA

INFORME DE LA AUDITORÍA

INFORME DE LA AUDITORÍA

Diseño final

Diseño final

Diseño final

Conclusión

Conclusión

Conclusión

La auditoría de accesibilidad demostró la necesidad de mejorar significativamente el diseño de la web de Clínicas REM.
Estas acciones no solo garantizan el cumplimiento legal, sino que también promueven una experiencia más inclusiva.

Beneficios Clave:

  • Inclusión social: Fomentamos una sociedad más inclusiva.

  • Reputación: Mejora la percepción de la marca.

  • Impacto en el negocio: Llegamos a más del 16% de la población.

  • SEO: Buena accesibilidad = Google’s friend.

  • Experiencia de usuario: Mejora la usabilidad del producto.

  • Cumplimiento legal: Evita posibles consecuencias legales.

    NOTA: Se calcula que el 20% de las personas se benefician de la accesibilidad una web.

RESPONSIVE

RESPONSIVE

RESPONSIVE