Agregar aria-hidden a iconos decorativos SVG en Register.tsx - #44
Open
bedceo[bot] wants to merge 1 commit into
Open
Agregar aria-hidden a iconos decorativos SVG en Register.tsx#44bedceo[bot] wants to merge 1 commit into
bedceo[bot] wants to merge 1 commit into
Conversation
Se agregó el atributo aria-hidden="true" a los 17 elementos SVG decorativos del componente Register.tsx para cumplir con WCAG 2.1 criterio 1.1.1. Los lectores de pantalla ya no anunciarán estos gráficos innecesariamente ya que el texto descriptivo adyacente comunica la misma información. SVGs actualizados: - Icono de flecha "Volver" (línea 161) - Iconos de beneficios desktop: bookmark, usuarios, comentarios, paleta (líneas 187-229) - Icono de check en header mobile y grid de beneficios mobile (líneas 283-308) - Icono de usuario en header del formulario (línea 332) - Icono de error (línea 345) - Iconos de requisitos de contraseña x4 (líneas 426-450) - Spinner de carga (línea 491) 🤖 Generated by Maite <maite@bdco.ai>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problema de accesibilidad identificado:
El componente Register.tsx contiene 17 elementos SVG que son puramente decorativos (iconos que acompañan texto descriptivo) pero ninguno tiene el atributo aria-hidden="true". Esto causa que los lectores de pantalla anuncien estos elementos gráficos innecesariamente, generando ruido y confusión para usuarios con discapacidad visual.
Ubicación específica:
Archivo: frontend/src/components/Register.tsx
Líneas afectadas: 161, 187, 201, 215, 229 (benefits icons), y otros SVG decorativos en el componente
Impacto en la experiencia del usuario:
• Los lectores de pantalla actualmente anuncian cada SVG sin contexto útil
• El texto descriptivo ya comunica la información (ej: "Guarda tus posts favoritos")
• Duplicación de información innecesaria para usuarios de tecnologías asistivas
• Viola las pautas WCAG 2.1 (criterio 1.1.1 - Contenido no textual)
Solución propuesta:
Agregar aria-hidden="true" a todos los elementos decorativos en Register.tsx, específicamente:
Ejemplo de cambio:
Antes:
Después:
Alcance:
• Solo frontend: Register.tsx
• No requiere cambios en backend o API
• Cambio simple y de bajo riesgo
• Mejora inmediata en accesibilidad sin afectar funcionalidad
Beneficios:
✓ Cumplimiento con WCAG 2.1 nivel A
✓ Mejor experiencia para usuarios de lectores de pantalla
✓ Reducción de ruido auditivo innecesario
✓ Primer paso hacia una auditoría completa de accesibilidad del sitio
Created automatically by MAITE agent