SVG y accesibilidad: validar title, desc y estructura sin romper la optimización
Iconos decorativos vs informativos: reglas WCAG, etiquetas title/desc y validación en línea sin romper la optimización SVG.
Por qué la accesibilidad SVG importa antes de la optimización
Un SVG optimizado al −60 % no sirve de nada si un lector de pantalla anuncia «imagen» sin contexto, o si un icono decorativo contamina la navegación por voz. Las reglas WCAG distinguen los SVG decorativos (ocultos a las tecnologías de asistencia) de los SVG informativos (título o descripción requeridos). El validador SVG en línea de FastMinify comprueba la sintaxis, la presencia de viewBox y la ausencia de <title> / <desc> — con avisos recomendados, no una auditoría WCAG completa. Todo se ejecuta en el navegador en el hub de herramientas SVG, antes o después de optimize SVG. Para el contexto de los presets SVGO, consulta el artículo SVGO presets explicados.
Ejemplos concretos: iconos UI e inline
Un botón «Eliminar» con una papelera SVG a la izquierda del texto: el SVG recibe aria-hidden="true", sin title. validate-svg mostrará un warning title/desc — esperado. La accesibilidad recae en el texto del botón, no en el icono.
Before optimization
- Tamaño de archivos
- SVG con title exportado de Figma (~2,1 KB)
After optimization
- Tamaño de archivos
- aria-hidden + optimize default (~0,9 KB)
Un badge «éxito» o «error» representado únicamente por un SVG debe tener <title>Éxito</title> o un aria-label explícito en el componente. validate-svg confirma la presencia del texto; prueba después con teclado y lector de pantalla.
Buenas prácticas: WCAG, optimize y design system
Integra validate-svg en tu revisión de assets — sobre todo para iconos entregados por diseñadores sin prueba AT.
El preset aggressive puede fusionar paths o quitar IDs — rara vez title/desc, pero siempre compara visualmente. svg-to-jsx conserva el markup; comprueba que title/desc siguen siendo los primeros hijos del <svg> en el componente React.
FastMinify validate-svg es una red de seguridad estructural, no un sustituto de una auditoría de accesibilidad de página completa. Contrastes, foco de teclado, orden de tabulación y alternativas largas siguen siendo tu responsabilidad o la de herramientas dedicadas.
Cuándo basta la herramienta del navegador
No hace falta instalar svgo-cli ni un linter a11y pesado para comprobar una exportación de Figma antes del merge.
Complementar con la CI y las auditorías AT
Las pruebas automatizadas de página (Pa11y, axe-core en CI, Lighthouse accessibility) cubren el DOM renderizado — no solo el archivo SVG fuente. Mantén validate-svg aguas arriba sobre los assets; añade pruebas E2E con lector de pantalla en los recorridos críticos.
Usa el mismo preset SVGO en la preview del navegador y en CI. Tras optimize en el pipeline, extrae una muestra y pásala por validate-svg a mano — consulta SVGO presets y la guía de optimización SVG.
Herramientas complementarias
FastMinify validate-svg se centra en el markup SVG fuente. Otras herramientas cubren la página renderizada o normas más amplias.
FastMinify validate-svg
Sintaxis XML, viewBox, title/desc — navegador, sin cuenta.
Ventajas:
Inconvenientes:
axe DevTools / WAVE
Extensiones de navegador para auditoría de accesibilidad DOM.
Ventajas:
Inconvenientes:
SVGO + validación manual
Pipeline CLI clásico sin validate-svg.
Ventajas:
Inconvenientes:
Decorativo vs informativo: las reglas básicas
Un icono junto a una etiqueta visible («Guardar», «Cerrar») no aporta información extra: es puramente visual. WCAG recomienda ocultarlo a los lectores de pantalla con aria-hidden="true" en el <svg>, o un role="presentation" equivalente. En ese caso, <title> y <desc> son innecesarios — e incluso contraproducentes si duplican el texto adyacente.
Un pictograma solo (estado de error sin texto, gráfico inline, logo enlace sin texto alt) debe transmitir su sentido. Opciones: <title> y opcionalmente <desc> como primeros hijos del <svg>, o role="img" + aria-label / aria-labelledby en el elemento SVG o su wrapper React.
La herramienta parsea el markup XML, exige una raíz <svg>, señala un viewBox ausente (warning) y la ausencia de texto en <title> o <desc> (warning). Son controles estructurales básicos — no una simulación de lector de pantalla, ni contraste de color, ni validación ARIA compleja. Para una auditoría completa, complementa con axe DevTools o WAVE además del validador del navegador.
Workflow FastMinify: validar, corregir, optimizar
Abre la herramienta validate SVG, pega tu markup o carga un archivo .svg. Los errores bloquean la entrega (XML inválido); los warnings te invitan a añadir viewBox o texto descriptivo según el caso de uso.
Para un icono informativo, añade por ejemplo <title>Error</title> justo después de la apertura del <svg>. Si existen width/height sin viewBox, deduce uno (viewBox="0 0 24 24") o pasa por resize-svg en el hub. El embellecedor SVG ayuda a releer la estructura tras la edición.
Una vez validada la estructura, pasa al optimizador SVGO (preset safe o default para iconos UI). FastMinify conserva <title> y <desc> en los tres presets — vuelve a lanzar validate-svg después de optimize para confirmar. El minificador SVG rápido solo toca espacios y comentarios.
Conclusión
La accesibilidad SVG empieza por una decisión clara: decorativo (aria-hidden, sin title) o informativo (title/desc o aria-label). validate-svg te ayuda a asegurar la sintaxis y la estructura antes de optimize SVGO — sin pretender sustituir una auditoría completa. Encadena validación, optimización y revalidación en el hub SVG para entregar iconos ligeros y usables por todos.
Artículos relacionados
YAML roto, `on` o `jobs` ausentes, steps vacíos: valida la estructura de tus workflows antes del push — y deja actionlint para la CI.
Errores de sintaxis SDL, review de esquema y formateo antes del merge — complemento al beautify GraphQL existente.
Reduce la factura OpenAI/Anthropic/Gemini: estima input/output, activa batch y caching en tus cálculos — tarifas verificadas, 100 % local.