Reporte de accesibilidad - gorozcoua/team18 GitHub Wiki

Reporte de Accesibilidad - Proyecto Vinilos

📋 Información general del Reporte

Campo Detalle
Fecha de realización 17 de mayo de 2025
Persona ejecutora Juan Bermudez
Herramienta usada Accessibility Scanner v2.4.1 (Google)
Dispositivo de prueba Modelo: Samsung Galaxy S22 Ultra, Sistema operativo: Android 13
Versión app Vinilos 1.0.5
Nivel de Conformidad WCAG Objetivo WCAG 2.1 Nivel AA

🎯 Objetivo del Análisis

Garantizar que la aplicación "Vinilos" cumple con los estándares de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 Nivel AA y las pautas de accesibilidad de Android. El análisis se enfoca en:

  • Contraste adecuado: Asegurar que los elementos visuales y textuales tengan suficiente contraste para ser percibidos por usuarios con baja visión o daltonismo (e.g., discromatopsia, presbicia).
  • Navegación coherente: Validar que la navegación a través de la aplicación sea lógica, predecible y operable mediante tecnologías asistivas (e.g., para usuarios de lectores de pantalla como TalkBack, navegación por teclado o interruptores).
  • Adaptabilidad del contenido: Verificar que la interfaz se adapte correctamente a diferentes configuraciones de accesibilidad del sistema (e.g., texto redimensionable, cambios de orientación del dispositivo) sin pérdida de información o funcionalidad.

🔍 Metodología

Se empleó una combinación de técnicas para obtener una evaluación comprensiva de la accesibilidad de la aplicación:

  1. Pruebas manuales:
    • Revisión exhaustiva de todos los componentes visuales, interactivos y textuales en las pantallas clave de la aplicación.
    • Validación de los flujos principales del usuario (navegación, búsqueda, visualización de detalles) utilizando configuraciones de accesibilidad activadas (e.g., TalkBack, tamaño de fuente aumentado). Esto permite identificar problemas de usabilidad y lógica que las herramientas automáticas pueden pasar por alto.
  2. Herramientas automáticas:
    • Uso de Accessibility Scanner de Google para el análisis rápido de aspectos como el contraste de color, el tamaño de los elementos táctiles y el etiquetado básico de componentes. Esta herramienta es útil para una primera detección de problemas comunes.

Tabla de Contenidos

  1. HU001: Consultar catálogo de álbumes
  2. HU002: Consultar información de álbum
  3. HU003: Consultar listado de artistas
  4. HU004: Consultar información de artista
  5. Conclusión
  6. Recomendaciones generales
  7. Próximos Pasos

Puede consultar la evidencia visual detallada (capturas de pantalla y vídeos) de las incidencias presentadas en este reporte en la siguiente carpeta Drive: https://drive.google.com/drive/folders/1US8VpLdVFBwWUEklprHiuNHJVcoNubOC?usp=sharing

HU001: Consultar catálogo de álbumes

Descripción: El usuario debe poder navegar y explorar la lista de álbumes disponibles en la aplicación, permitiendo su identificación y selección.

📸 Evidencia visual

Incidencia contraste álbumes

🔍 Incidencias detectadas

Elemento Problema Contraste Colores (Primer plano/Fondo) Criterio WCAG afectado Impacto en el usuario
album_image Contraste muy bajo 1.19:1 #C5C7B9/#D6D8CB 1.4.11 Contraste no textual Usuarios con baja visión pueden tener dificultades para distinguir la imagen del álbum o los detalles gráficos dentro de ella.
album_image Contraste insuficiente 2.23:1 #454746/#000100 1.4.11 Contraste no textual Similar al anterior, la falta de contraste dificulta la percepción de elementos gráficos importantes.
album_image Color inválido 1.62:1 #1ASE12/#070D0D N/A (Error de formato) El código de color #1ASE12 no es un valor hexadecimal válido. Esto impide la correcta interpretación del color y su contraste por herramientas y, potencialmente, en el renderizado.
album_image Contraste bajo 2.43:1 #2D5261/#010504 1.4.11 Contraste no textual Dificultad para percibir claramente la imagen o sus componentes gráficos debido al bajo contraste con el fondo.

💡 Sugerencias

  • Reemplazar combinaciones problemáticas:
    • Para #C5C7B9/#D6D8CB (1.19:1), ajustar los colores para cumplir con el ratio mínimo de 3:1. Considerar oscurecer significativamente el fondo o utilizar un primer plano mucho más claro/oscuro.
    • Para #454746/#000100 (2.23:1), igualmente, modificar uno o ambos colores para alcanzar el ratio de 3:1.
    • Para #2D5261/#010504 (2.43:1), realizar los ajustes necesarios para llegar al ratio de 3:1.
  • Establecer mínimo 3:1 para elementos no textuales (gráficos e iconos): Cumplir con el criterio WCAG 1.4.11 Contraste no textual. Esto es crucial para que los usuarios puedan identificar y comprender la información transmitida por estos elementos.
  • Corregir código de color inválido: El valor #1ASE12 debe ser corregido a un formato hexadecimal válido (e.g., si se pretendía #1ACE12 o similar). Una vez corregido, verificar que el nuevo color cumpla con los ratios de contraste requeridos.

HU002: Consultar información de álbum

Descripción: El usuario debe poder ver toda la información relevante de un álbum seleccionado, incluyendo título, artista, lista de canciones, descripción, imagen de portada, etc., de forma clara y completa.

📸 Evidencia visual

Incidencia texto álbum

🔍 Incidencias detectadas

Elemento Problema Contraste Área afectada / Detalles Criterio WCAG afectado Impacto en el usuario
album_detail Contraste de texto 3.24:1 Texto: #666666 sobre fondo claro 1.4.3 Contraste (Mínimo) AA Usuarios con baja visión o sensibilidad al contraste pueden tener dificultades para leer el texto, causando fatiga visual o pérdida de información.
ViewGroup Texto truncado - Coordenadas: [136,1480][474,1818] 1.4.4 Redimensionamiento de texto, 1.4.10 Reajuste de contenido El texto se corta y no es visible en su totalidad, impidiendo el acceso a la información completa, especialmente si el usuario aumenta el tamaño de fuente.
ViewGroup Texto no adaptable - Coordenadas: [520,1480][858,1818] 1.4.4 Redimensionamiento de texto, 1.4.10 Reajuste de contenido El contenido textual no se reajusta adecuadamente al cambiar el tamaño de fuente o la configuración de pantalla, resultando en superposición o truncamiento.

💡 Sugerencias

  • Aumentar contraste de texto: Ajustar el color del texto #666666 para que alcance un ratio de contraste mínimo de 4.5:1 sobre su fondo actual, según WCAG 1.4.3. Considerar un gris más oscuro (e.g., #4A4A4A o inferior) o directamente negro (#000000).
  • Permitir expansión vertical del texto y reajuste de contenido:
    • Utilizar wrap_content para la altura de los contenedores de texto (TextViews) y asegurar que los layouts contenedores (e.g., LinearLayout, RelativeLayout, ConstraintLayout) permitan la expansión del contenido.
    • Para pantallas con contenido potencialmente largo, implementar NestedScrollView o ScrollView para envolver el contenido principal, asegurando que todo el texto sea accesible mediante desplazamiento.
  • Implementar scroll para contenido extenso: Asegurar que el desplazamiento sea funcional y predecible, tanto con gestos táctiles como con navegación por teclado y lectores de pantalla. El foco debe gestionarse correctamente durante el scroll.

HU003: Consultar listado de artistas

Descripción: El usuario debe poder navegar y explorar la lista de artistas disponibles en la aplicación, permitiendo su identificación y selección.

📸 Evidencia visual

Incidencia artistas

🔍 Incidencias detectadas

Elemento Problema Contraste Colores (Primer plano/Fondo) Criterio WCAG afectado Impacto en el usuario
musician_image Bajo contraste 2.38:1 #7F6554/#29333C 1.4.11 Contraste no textual Dificultad para distinguir la imagen del artista o los detalles gráficos dentro de ella, especialmente para usuarios con baja visión.

💡 Sugerencias

  • Ajustar combinación de colores: Modificar los colores #7F6554 y/o #29333C para que la imagen del músico (o el gráfico que la representa) alcance un ratio de contraste de al menos 3:1 con su fondo, cumpliendo con WCAG 1.4.11.
  • Crear componente estándar accesible para listas: Desarrollar o utilizar un componente de ítem de lista reutilizable que, por defecto, cumpla con los requisitos de accesibilidad (contraste, tamaño táctil de 48x48dp, etiquetado adecuado para contentDescription). Esto facilitará la consistencia en toda la aplicación.

HU004: Consultar información de artista

Descripción: El usuario debe poder ver toda la información relevante de un artista seleccionado, como nombre, imagen, biografía, álbumes asociados, etc., de forma clara y completa.

📸 Evidencia visual

Incidencia artista

🔍 Incidencias detectadas

Elemento Problema Ubicación / Coordenadas Impacto Criterio WCAG afectado
ViewGroup Texto truncado [136,1389][474,1727] (Área donde el texto es cortado) La información biográfica o descriptiva del artista es incompleta y no se puede leer en su totalidad, especialmente si el usuario ha aumentado el tamaño de la fuente. 1.4.4 Redimensionamiento de texto, 1.4.10 Reajuste de contenido

💡 Sugerencias

  • Implementar contenedores expansibles o scroll:
    • Utilizar ScrollView o NestedScrollView para permitir que todo el contenido textual sea visible y navegable mediante desplazamiento.
    • Asegurar que los TextViews puedan expandirse verticalmente (e.g., usando android:layout_height="wrap_content") dentro del contenedor con scroll.
  • Añadir control "Mostrar más/menos": Para secciones de texto largas (como biografías), considerar un control explícito (botón) "Mostrar más" / "Mostrar menos". Este control debe ser accesible, y su estado (expandido/colapsado) debe ser comunicado a las tecnologías asistivas (e.g., mediante android:state_expanded).

🏁 Conclusión

El análisis de accesibilidad de la aplicación "Vinilos" v1.0.5 ha revelado varias áreas críticas que requieren atención para alcanzar el nivel de conformidad WCAG 2.1 AA y mejorar la experiencia para todos los usuarios, incluyendo aquellos con discapacidades. Las incidencias más recurrentes se relacionan con el contraste de color insuficiente tanto para elementos textuales como no textuales, y con el manejo inadecuado del contenido que resulta en texto truncado o no adaptable.

Abordar estas incidencias no solo es fundamental para cumplir con los estándares de accesibilidad, sino también para ampliar el alcance de la aplicación a un público más diverso y ofrecer una experiencia de usuario inclusiva y de mayor calidad.


🔧 Recomendaciones generales

Para mejorar la accesibilidad general de la aplicación "Vinilos" de forma sostenible, se recomienda integrar las siguientes prácticas:

Diseño Accesible (Accessible-First Design):

  • Paleta de colores: Definir y utilizar una paleta de colores que garantice un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande y elementos gráficos/componentes de interfaz (WCAG 1.4.3, 1.4.11). Utilizar herramientas como WebAIM Contrast Checker durante la fase de diseño.
  • Tipografía: Seleccionar fuentes legibles (preferiblemente sans-serif estándar). Establecer un tamaño base de al menos 16sp para el texto, con un peso de fuente normal (400). Permitir que el tamaño de fuente respete la configuración del sistema del usuario (uso de sp para unidades de texto).
  • Componentes interactivos: Diseñar todos los elementos interactivos (botones, enlaces, campos de entrada) con un área táctil mínima de 48x48dp (Pautas de Accesibilidad de Material Design, relacionado con WCAG 2.5.5 Tamaño del Objetivo).

Desarrollo Inclusivo:

  • Etiquetado Semántico:
    • Proporcionar etiquetas descriptivas para todos los elementos interactivos usando android:contentDescription para elementos sin texto visible (e.g., botones de solo icono).
    • Para imágenes que transmiten información, incluir una descripción textual alternativa (android:contentDescription). Marcar imágenes puramente decorativas como no importantes para la accesibilidad (android:importantForAccessibility="no").
  • Navegación por Teclado y Foco:
    • Asegurar que toda la funcionalidad sea operable a través de un teclado (físico o virtual mediante TalkBack).
    • El orden de foco debe ser lógico e intuitivo.
    • El indicador de foco debe ser claramente visible.
  • Gestión del Foco: Manejar el foco de forma predecible, especialmente al abrir diálogos, menús o después de realizar acciones que cambian el contexto de la pantalla.
  • Adaptabilidad y Reajuste: Diseñar layouts que se adapten al contenido cuando el texto se redimensiona hasta un 200% y que permitan el reajuste del contenido sin scroll bidimensional (WCAG 1.4.4, 1.4.10).

Validación Continua:

  • Pruebas de contraste y zoom: Regularmente verificar el contraste con herramientas y probar la aplicación con el zoom de pantalla o tamaño de fuente aumentado al 200% para asegurar que no haya pérdida de contenido o funcionalidad.
  • Test con lectores de pantalla: Realizar pruebas manuales con TalkBack (lector de pantalla de Android) activado, navegando por todos los flujos de la aplicación como lo haría un usuario ciego o con baja visión.
  • Checklist de accesibilidad: Utilizar un checklist basado en WCAG 2.1 AA y las Pautas de Accesibilidad de Android para revisar nuevas funcionalidades y regresiones.

Herramientas Recomendadas:

  • Accessibility Scanner (Google): Continuar su uso para verificaciones rápidas en el dispositivo.
  • Android Studio Linters & Layout Inspector: Utilizar las herramientas integradas en el IDE para detectar problemas de accesibilidad durante el desarrollo (e.g., advertencias de contraste, falta de contentDescription).
  • WAVE Evaluation Tool: Aunque es para web, es útil para comprender conceptos de accesibilidad que son transferibles.
  • Contrast Checker de WebAIM: Para verificar combinaciones de colores específicas.
  • Google Accessibility Test Framework for Android: Considerar la integración de pruebas automatizadas de accesibilidad en el ciclo de CI/CD.

🚀 Próximos Pasos

  1. Priorización y Corrección:
    • El equipo de desarrollo debe revisar las incidencias documentadas en este reporte.
    • Priorizar la corrección de las incidencias comenzando por aquellas con mayor impacto en la usabilidad y que representen fallos de conformidad WCAG Nivel A y AA (e.g., fallos de contraste crítico, contenido inaccesible por truncamiento).
  2. Verificación Post-Corrección:
    • Una vez implementadas las correcciones, realizar una nueva ronda de pruebas de accesibilidad (manuales y automáticas) enfocada en las áreas modificadas para asegurar la efectividad de las soluciones.
  3. Integración en el Flujo de Trabajo:
    • Incorporar revisiones de accesibilidad como parte del proceso de desarrollo y pruebas para nuevas funcionalidades y actualizaciones.
    • Documentar las decisiones de diseño y desarrollo relacionadas con la accesibilidad.
⚠️ **GitHub.com Fallback** ⚠️