#608 · Herramientas de accesibilidad

Comprobador de etiquetas ARIA

Revisa nombres definidos mediante aria-label para localizar valores vacíos, demasiado genéricos o poco manejables. Si pegas HTML, extrae los elementos que contienen ese atributo y compara la etiqueta con el texto visible disponible. También puedes pegar una etiqueta por línea. La herramienta sirve como filtro editorial; el nombre accesible final puede depender de aria-labelledby, contenido del elemento y otras reglas del navegador.

Entrada de texto

Procesamiento local
Espacio publicitario

Cómo usar esta herramienta de texto

  1. Pega HTML con atributos aria-label o escribe una etiqueta por línea.
  2. Ajusta el umbral orientativo de longitud si tu sistema usa otra guía.
  3. Ejecuta la comprobación.
  4. Valida el nombre accesible final en el componente real.

Qué hace esta herramienta

Busca problemas de texto frecuentes en aria-label, pero no reproduce por completo el algoritmo de nombre accesible.

En HTML se extrae aria-label con DOMParser y se recoge el texto visible del mismo elemento. Se marcan valores vacíos, genéricos, muy largos y etiquetas idénticas a texto visible cuando pueden ser redundantes.

No añadas aria-label por defecto a todos los controles. Si un elemento ya tiene un nombre accesible claro, un atributo adicional puede ser innecesario o incluso sustituir texto útil.

Ejemplo

Débil: aria-label="Botón".

Mejor: aria-label="Cerrar diálogo" cuando el icono × no comunica por sí solo el propósito.

Casos de uso

  • Revisar componentes de interfaz con iconos.
  • Auditar botones y campos sin texto visible.
  • Detectar etiquetas vacías en plantillas.
  • Comprobar copy accesible antes de integrarlo en código.

Consejos para obtener mejores resultados

  • Nombra la acción o el propósito, no el tipo de control.
  • Evita aria-label cuando una etiqueta visible correctamente asociada ya sirve.
  • Mantén nombres breves pero suficientemente específicos.
  • Prueba el componente con el árbol de accesibilidad del navegador.

Detalles del procesamiento

La extracción es local y no ejecuta el HTML pegado. La comparación con texto visible es aproximada porque no se aplican estilos CSS ni el algoritmo completo de accesibilidad.

No resuelve aria-labelledby, labels externos, pseudoelementos, contenido generado ni estados dinámicos de aplicaciones.

Preguntas frecuentes

¿Cuándo conviene usar aria-label en un botón con icono?

Cuando el control no tiene un texto visible que proporcione un nombre accesible claro, aria-label puede describir la acción, por ejemplo “Cerrar diálogo”.

¿aria-label sustituye el texto visible de un control para lectores de pantalla?

Puede formar o sustituir el nombre accesible según el elemento y el contexto, por lo que debe usarse con cuidado y probarse en el componente real.

¿Es recomendable poner aria-label en todos los enlaces y botones?

No. Si el contenido visible ya ofrece un nombre adecuado, añadir un aria-label redundante puede ser innecesario y dificultar el mantenimiento.

¿La herramienta calcula exactamente el nombre accesible del navegador?

No. Hace una revisión textual aproximada; el algoritmo real puede combinar otras fuentes como labels, aria-labelledby y contenido del elemento.

¿Qué problema tiene una etiqueta como aria-label="Botón"?

Describe el tipo de control pero no su propósito. Un nombre como “Guardar cambios” o “Abrir filtros” suele comunicar mejor la acción.

Resumen de etiquetas ARIA

MétricaQué indica
EtiquetasEtiquetas analizadas
Con avisosElementos con avisos
VacíasEtiquetas vacías