proYecto Final | caso de estudio
Proyecto real | Caso de estudio
Proyecto real | Caso de estudio
AUDITORIA DE ACCESIBILIDAD
AUDITORIA DE ACCESIBILIDAD
AUDITORIA DE ACCESIBILIDAD
Rol
UX UI DESIGNER
UX UI DESIGNER
UX UI DESIGNER
ÚLTIMA ACTUALIZACIÓN
ÚLTIMo
06/2025
06/2025
06/2025
Introducción
Introducción
Introducción
PcComponentes es uno de los e-commerce más populares de tecnología en España. Su sitio web recibe millones de visitas al mes y ofrece una amplia variedad de productos: electrónica, informática, electrodomésticos y gaming, alcanzando una audiencia muy diversa.
PcComponentes es uno de los e-commerce más populares de tecnología en España. Su sitio web recibe millones de visitas al mes y ofrece una amplia variedad de productos: electrónica, informática, electrodomésticos y gaming, alcanzando una audiencia muy diversa.
Problema
Las personas con discapacidad visual, cognitiva, motora o neurodivergencias enfrentan múltiples obstáculos al navegar por sitios como PcComponentes. La falta de foco visible, contraste insuficiente o botones sin etiquetado accesible impiden una experiencia fluida e inclusiva, provocando frustración, abandono del sitio e incluso exclusión digital.
Las personas con discapacidad visual, cognitiva, motora o neurodivergencias enfrentan múltiples obstáculos al navegar por sitios como PcComponentes. La falta de foco visible, contraste insuficiente o botones sin etiquetado accesible impiden una experiencia fluida e inclusiva, provocando frustración, abandono del sitio e incluso exclusión digital.
¿Porqué PcComponentes?
En relación al impacto humano que podemos aportar:
En España hay más de 4,3 millones de personas con discapacidad. Mejoras simples como un buen texto alternativo o foco visible pueden derribarían muchas barreras.
En relación a los beneficios de negocio aporta:
- Mejor posicionamiento del SEO.
- Aumenta el alcance y número de usuarios.
- Refuerza la imagen positiva de la marca.
- Reduce riesgos legales y económicos.
- Mejora la usabilidad para todos los usuarios.
En relación al impacto personal y como objetivo de la presentación:
Auditar PcComponentes me permitió aplicar todo lo aprendido, detectar barreras reales y proponer mejoras con impacto. Es un paso importante en mi camino como diseñadora comprometida con la accesibilidad.
En relación al impacto humano que podemos aportar:
En España hay más de 4,3 millones de personas con discapacidad. Mejoras simples como un buen texto alternativo o foco visible pueden derribarían muchas barreras.
En relación a los beneficios de negocio aporta:
- Mejor posicionamiento del SEO.
- Aumenta el alcance y número de usuarios.
- Refuerza la imagen positiva de la marca.
- Reduce riesgos legales y económicos.
- Mejora la usabilidad para todos los usuarios.
En relación al impacto personal y como objetivo de la presentación:
Auditar PcComponentes me permitió aplicar todo lo aprendido, detectar barreras reales y proponer mejoras con impacto. Es un paso importante en mi camino como diseñadora comprometida con la accesibilidad.
Proceso
Proceso
Proceso
A continuación, repaso brevemente cada etapa del proyecto: research, inventario, auditoría, propuestas de mejora, métricas y aprendizajes.
A continuación, repaso brevemente cada etapa del proyecto: research, inventario, auditoría, propuestas de mejora, métricas y aprendizajes.
🧠 Research e Inventario
Comencé el proyecto investigando las WCAG 2.2 y analizando ecommerce de referencia para entender cómo abordan (o ignoraban) la accesibilidad. A partir de ese análisis, estructuré la auditoría en 11 categorías clave , desde tipografía, contraste y estructura semántica, hasta navegación, interacción y básicos de desarrollo.
Este análisis permitió visibilizar mejoras necesarias para garantizar una experiencia más inclusiva, alineada tanto con los objetivos del negocio —como la conversión— como con el cumplimiento de las normativas vigentes.
Comencé el proyecto investigando las WCAG 2.2 y analizando ecommerce de referencia para entender cómo abordan (o ignoraban) la accesibilidad. A partir de ese análisis, estructuré la auditoría en 11 categorías clave , desde tipografía, contraste y estructura semántica, hasta navegación, interacción y básicos de desarrollo.
Este análisis permitió visibilizar mejoras necesarias para garantizar una experiencia más inclusiva, alineada tanto con los objetivos del negocio —como la conversión— como con el cumplimiento de las normativas vigentes.
Comencé el proyecto investigando las WCAG 2.2 y analizando ecommerce de referencia para entender cómo abordan (o ignoraban) la accesibilidad. A partir de ese análisis, estructuré la auditoría en 11 categorías clave , desde tipografía, contraste y estructura semántica, hasta navegación, interacción y básicos de desarrollo.
Este análisis permitió visibilizar mejoras necesarias para garantizar una experiencia más inclusiva, alineada tanto con los objetivos del negocio —como la conversión— como con el cumplimiento de las normativas vigentes.
🕵🏻♀️ Detección y análisis
Audité la web de PcComponentes evaluando criterios, documenté cada hallazgo con capturas reales, contrast checkers, herramientas como WAVE, Axe y simuladores de visión.
Además de identificar problemas, también analicé el impacto de cada barrera en personas con discapacidad visual, motora o cognitiva.
Audité la web de PcComponentes evaluando criterios, documenté cada hallazgo con capturas reales, contrast checkers, herramientas como WAVE, Axe y simuladores de visión.
Además de identificar problemas, también analicé el impacto de cada barrera en personas con discapacidad visual, motora o cognitiva.
👩🏻💻 Propuestas de mejoras
Propuse soluciones accesibles para cada barrera detectada, incluyendo mejoras en contraste, uso del color, etiquetas ARIA, orden de foco y feedback visual. También sugerí ajustes en componentes clave como formularios, navegación por teclado y jerarquías semánticas, priorizando la accesibilidad, la escalabilidad y las buenas prácticas de producto digital.
Propuse soluciones accesibles para cada barrera detectada, incluyendo mejoras en contraste, uso del color, etiquetas ARIA, orden de foco y feedback visual. También sugerí ajustes en componentes clave como formularios, navegación por teclado y jerarquías semánticas, priorizando la accesibilidad, la escalabilidad y las buenas prácticas de producto digital.
📊 Métricas
Mejorar la accesibilidad no solo impacta positivamente en la experiencia de las personas, también beneneficia a muchas personas como al negocio.
Mejorar la accesibilidad no solo impacta positivamente en la experiencia de las personas, también beneneficia a muchas personas como al negocio.
Mejorar la accesibilidad no solo impacta positivamente en la experiencia de las personas, también beneneficia a muchas personas como al negocio.
👣 Aprendizaje
Este proyecto no solo me permitió aplicar todo lo aprendido en accesibilidad, sino también reforzar mi enfoque como diseñadora centrada en las personas. Validé cada mejora con simulaciones y herramientas, y entendí que la accesibilidad no es un extra, sino una base de diseño responsable.
Este proyecto no solo me permitió aplicar todo lo aprendido en accesibilidad, sino también reforzar mi enfoque como diseñadora centrada en las personas. Validé cada mejora con simulaciones y herramientas, y entendí que la accesibilidad no es un extra, sino una base de diseño responsable.
Solución
Solución
Solución
Estos fueron los tres impactos clave que busqué generar con la auditoría: mejorar la experiencia de las personas, aportar valor al negocio y facilitar la implementación técnica de las mejoras.
Estos fueron los tres impactos clave que busqué generar con la auditoría:
♿️ Impacto Humano
Mejorar la experiencia de personas de todos los usuarios, especialmente de quienes enfrentan barreras. Facilitando la navegación, reduciendo puntos de dolor, frustraciones y hacer la web más fluida y usable.
Mejorar la experiencia de personas de todos los usuarios, especialmente de quienes enfrentan barreras. Facilitando la navegación, reduciendo puntos de dolor, frustraciones y hacer la web más fluida y usable.
💼 Impacto en el negocio
Ampliar el alcance, generar nuevas conversiones y reforzando la imagen de la marca. Optimizando la experiencia de los usuarios de PcComponentes y reduciendo posibles riesgos legales y económicos.
Ampliar el alcance, generar nuevas conversiones y reforzando la imagen de la marca. Optimizando la experiencia de los usuarios de PcComponentes y reduciendo posibles riesgos legales y económicos.
⚒️ Impacto Técnico
Proponer mejoras fáciles de implementar, con soluciones accesibles y escalables.
Proponer mejoras fáciles de implementar, con soluciones accesibles y escalables.
Tomas de decisiones
INVENTARIO Y ORGANIZACIÓN
Antes de auditar, organicé los problemas en un mapa visual para detectar patrones, priorizar lo que más afectaba a la experiencia y estructurar el análisis de forma clara y accionable.
Auditoria
Audité la home y el login, registrando errores con capturas y ejemplos. Más allá de señalarlos, propuse mejoras claras para que la web sea más fácil de usar y accesible para todos.
INVENTARIO Y ORGANIZACIÓN
Antes de auditar, organicé los problemas en un mapa visual para detectar patrones, priorizar lo que más afectaba a la experiencia y estructurar el análisis de forma clara y accionable.
Auditoria
Audité la home y el login, registrando errores con capturas y ejemplos. Más allá de señalarlos, propuse mejoras claras para que la web sea más fácil de usar y accesible para todos.
INVENTARIO Y ORGANIZACIÓN
Antes de auditar, organicé los problemas en un mapa visual para detectar patrones, priorizar lo que más afectaba a la experiencia y estructurar el análisis de forma clara y accionable.
Auditoria
Audité la home y el login, registrando errores con capturas y ejemplos. Más allá de señalarlos, propuse mejoras claras para que la web sea más fácil de usar y accesible para todos.
INVENTARIO Y ORGANIZACIÓN
Antes de auditar, organicé los problemas en un mapa visual para detectar patrones, priorizar lo que más afectaba a la experiencia y estructurar el análisis de forma clara y accionable.
Auditoria
Audité la home y el login, registrando errores con capturas y ejemplos. Más allá de señalarlos, propuse mejoras claras para que la web sea más fácil de usar y accesible para todos.
Tomas de decisiones
INVENTARIO Y ORGANIZACIÓN
Antes de empezar con la auditoría, necesitaba entender bien qué estaba fallando y por dónde empezar. Por eso armé un mapa visual en Figma donde fui agrupando todos los problemas que encontraba en la web.
Organizar todo de forma clara me ayudó a ver patrones repetidos, entender qué cosas impactaban más en la experiencia de las personas y poder ordenar bien el análisis para que fuera fácil de leer y de accionar.Auditoria
Una vez detectados los problemas, pasé a auditar la home y la pantalla de login de la web. No se trataba solo de señalar errores, sino de entender cómo esos problemas afectan la experiencia de las personas.
Fui registrando cada hallazgo con capturas y ejemplos, y para los puntos más repetitivos o críticos propuse mejoras concretas que ayuden a que la web sea más clara, fácil de usar y accesible para todos.INVENTARIO Y ORGANIZACIÓN
Antes de empezar con la auditoría, necesitaba entender bien qué estaba fallando y por dónde empezar. Por eso armé un mapa visual en Figma donde fui agrupando todos los problemas que encontraba en la web.
Organizar todo de forma clara me ayudó a ver patrones repetidos, entender qué cosas impactaban más en la experiencia de las personas y poder ordenar bien el análisis para que fuera fácil de leer y de accionar.Auditoria
Una vez detectados los problemas, pasé a auditar la home y la pantalla de login de la web. No se trataba solo de señalar errores, sino de entender cómo esos problemas afectan la experiencia de las personas.
Fui registrando cada hallazgo con capturas y ejemplos, y para los puntos más repetitivos o críticos propuse mejoras concretas que ayuden a que la web sea más clara, fácil de usar y accesible para todos.INVENTARIO Y ORGANIZACIÓN
Antes de empezar con la auditoría, necesitaba entender bien qué estaba fallando y por dónde empezar. Por eso armé un mapa visual en Figma donde fui agrupando todos los problemas que encontraba en la web.
Organizar todo de forma clara me ayudó a ver patrones repetidos, entender qué cosas impactaban más en la experiencia de las personas y poder ordenar bien el análisis para que fuera fácil de leer y de accionar.Auditoria
Una vez detectados los problemas, pasé a auditar la home y la pantalla de login de la web. No se trataba solo de señalar errores, sino de entender cómo esos problemas afectan la experiencia de las personas.
Fui registrando cada hallazgo con capturas y ejemplos, y para los puntos más repetitivos o críticos propuse mejoras concretas que ayuden a que la web sea más clara, fácil de usar y accesible para todos.INVENTARIO Y ORGANIZACIÓN
Antes de empezar con la auditoría, necesitaba entender bien qué estaba fallando y por dónde empezar. Por eso armé un mapa visual en Figma donde fui agrupando todos los problemas que encontraba en la web.
Organizar todo de forma clara me ayudó a ver patrones repetidos, entender qué cosas impactaban más en la experiencia de las personas y poder ordenar bien el análisis para que fuera fácil de leer y de accionar.Auditoria
Una vez detectados los problemas, pasé a auditar la home y la pantalla de login de la web. No se trataba solo de señalar errores, sino de entender cómo esos problemas afectan la experiencia de las personas.
Fui registrando cada hallazgo con capturas y ejemplos, y para los puntos más repetitivos o críticos propuse mejoras concretas que ayuden a que la web sea más clara, fácil de usar y accesible para todos.
Métricas
Métricas
Métricas
Mejorar la accesibilidad no solo impacta positivamente en la experiencia de las personas, también beneneficia a muchas personas como al negocio.
Mejorar la accesibilidad no solo impacta positivamente en la experiencia de las personas, también beneneficia a muchas personas como al negocio.
% de usuarios que se beneficiarían
👁️ Personas con discapacidad visual en Europa: 9%
⌨️ Usuarios que navegan con teclado: 33,3%
👵🏽 Usuarios mayores de 60 años con discapacidad visual: 4,71%
📖 Personas con dislexia: 18%
🧠 Personas con dificultades cognitivas: 14,9%
🎧 Usuarios que usan lectores de pantallas: 30,7%
Fuentes: Ver Link
👁️ Personas con discapacidad visual en Europa: 9%
⌨️ Usuarios que navegan con teclado: 33,3%
👵🏽 Usuarios mayores de 60 años con discapacidad visual: 4,71%
📖 Personas con dislexia: 18%
🧠 Personas con dificultades cognitivas: 14,9%
🎧 Usuarios que usan lectores de pantallas: 30,7%
Fuentes: Ver Link
Impacto en la experiencia de usuario
Añadir aria-label a botones ➡️ Reduce los errores de interacciones.
Hacer visible el foco ➡️ Mejorar la orientación de navegación con teclado.
Los textos alternativos en imágenes ➡️ Facilita el acceso a promociones a usuarios que navegan con lectores de pantallas.
Añadir “Saltos de contenido” en ecommerce ➡️ Optimiza la experiencia para usuarios que navegan sin ratón.
Añadir aria-label a botones ➡️ Reduce los errores de interacciones.
Hacer visible el foco ➡️ Mejorar la orientación de navegación con teclado.
Los textos alternativos en imágenes ➡️ Facilita el acceso a promociones a usuarios que navegan con lectores de pantallas.
Añadir “Saltos de contenido” en ecommerce ➡️ Optimiza la experiencia para usuarios que navegan sin ratón.
Impacto en conversión o abandono
Un estudio realizado en el Reino Unido reveló que el 71% de los usuarios web con discapacidad abandonan sitios no accesibles, por lo que implementar la accesibilidad no solo mejora la experiencia, sino que también puede resultar en un aumento significativo de los ingresos anuales
Fuente: Ver Link
Un estudio realizado en el Reino Unido reveló que el 71% de los usuarios web con discapacidad abandonan sitios no accesibles, por lo que implementar la accesibilidad no solo mejora la experiencia, sino que también puede resultar en un aumento significativo de los ingresos anuales
Fuente: Ver Link
Impacto en la empresa
SEO mejorado y Alcance Orgánico.
Reputación y fortaleza a la imagen de marca.
Reducción a los Riesgos Legales y costes por sanciones.
Crecimiento en la lealtad del cliente.
SEO mejorado y Alcance Orgánico.
Reputación y fortaleza a la imagen de marca.
Reducción a los Riesgos Legales y costes por sanciones.
Crecimiento en la lealtad del cliente.
Reflexión y aprendizaje
Reflexión y aprendizaje
Reflexión y aprendizaje
Este trabajo me ayudó a bajar todo lo aprendido a un caso real. Pude ver cómo aplicar las WCAG en situaciones concretas y entender que con pequeños cambios se pueden lograr grandes mejoras en la experiencia de las personas.
También me permitió incorporar herramientas y prácticas que ahora forman parte de mi forma de diseñar.
Y lo más importante: me hizo reflexionar y entender que la tecnología debería ser un puente, no una barrera.
La accesibilidad no tendría que verse solo como una obligación legal, sino como parte natural de nuestra evolución como diseñadores.
Este trabajo me ayudó a bajar todo lo aprendido a un caso real. Pude ver cómo aplicar las WCAG en situaciones concretas y entender que con pequeños cambios se pueden lograr grandes mejoras en la experiencia de las personas.
También me permitió incorporar herramientas y prácticas que ahora forman parte de mi forma de diseñar.
Y lo más importante: me hizo reflexionar y entender que la tecnología debería ser un puente, no una barrera.
La accesibilidad no tendría que verse solo como una obligación legal, sino como parte natural de nuestra evolución como diseñadores.
Este trabajo me ayudó a bajar todo lo aprendido a un caso real. Pude ver cómo aplicar las WCAG en situaciones concretas y entender que con pequeños cambios se pueden lograr grandes mejoras en la experiencia de las personas.
También me permitió incorporar herramientas y prácticas que ahora forman parte de mi forma de diseñar.
Y lo más importante: me hizo reflexionar y entender que la tecnología debería ser un puente, no una barrera.
La accesibilidad no tendría que verse solo como una obligación legal, sino como parte natural de nuestra evolución como diseñadores.