{"id":68062,"date":"2026-06-17T10:03:42","date_gmt":"2026-06-17T08:03:42","guid":{"rendered":"https:\/\/www.insuit.net\/?p=68062"},"modified":"2026-06-26T10:16:01","modified_gmt":"2026-06-26T08:16:01","slug":"que-es-aria-label","status":"publish","type":"post","link":"https:\/\/www.insuit.net\/es\/que-es-aria-label\/","title":{"rendered":"\u00bfQu\u00e9 es aria-label y c\u00f3mo mejora la accesibilidad de tu c\u00f3digo web?"},"content":{"rendered":"\n
Si diriges un proyecto digital, sabes que un bot\u00f3n sin etiqueta puede convertirse en una barrera infranqueable para una persona usuaria de lector de pantalla. Aqu\u00ed entra aria-label<\/strong>: un atributo HTML pensado para dar un nombre accesible a elementos que, de otro modo, quedar\u00edan “mudos” para las tecnolog\u00edas de asistencia. <\/p>\n\n\n\n En este art\u00edculo te explicamos qu\u00e9 es, cu\u00e1ndo usarlo, cu\u00e1ndo no, y c\u00f3mo encaja en un flujo de desarrollo accesible serio. Y si no sabes por d\u00f3nde empezar cuando hablamos de desarrollo accesible, echa un vistazo a nuestros inSuit Services\u2122<\/strong><\/a>.<\/p>\n\n\n\n El atributo aria-label<\/strong> es una propiedad del est\u00e1ndar WAI-ARIA<\/strong>, desarrollado por el W3C, que asigna un nombre accesible a un elemento del DOM. Ese nombre lo “leen” los lectores de pantalla (NVDA, JAWS, VoiceOver, TalkBack) cuando el usuario llega al elemento. Si un icono de lupa no lleva texto visible, aria-label permite anunciarlo como “Buscar”.<\/p>\n\n\n\n Su utilidad principal es cubrir tres escenarios concretos donde el HTML sem\u00e1ntico no basta<\/strong> por s\u00ed solo:<\/p>\n\n\n\n La propia W3C insiste en algo clave: ARIA nunca sustituye al HTML sem\u00e1ntico. Usa primero las etiquetas nativas y reserva las etiquetas aria<\/strong> para los casos que no se pueden resolver de otra forma para mantener la accesibilidad en WordPress<\/strong><\/a>.<\/p>\n\n\n\n Estas tres propiedades parecen sin\u00f3nimos, pero cumplen funciones distintas. Conocer la diferencia evita errores que penalizan en auditor\u00eda:<\/p>\n\n\n\n En la pr\u00e1ctica, aria describedby vs aria label<\/strong> se resuelve as\u00ed: el primero describe, el segundo nombra. Si la informaci\u00f3n ya aparece visible en la p\u00e1gina y es la etiqueta principal del elemento, usa aria-labelledby. Si solo est\u00e1 disponible en el atributo, usa aria-label. <\/p>\n\n\n\n En general, usa aria-label cuando se cumplan estas condiciones:<\/p>\n\n\n\n No uses aria-label en estos casos:<\/p>\n\n\n\n Tres ejemplos que aparecen casi en cualquier proyecto:<\/p>\n\n\n\n <button aria-label=”Buscar”><svg …><\/svg><\/button><\/p>\n\n\n\n <a href=”\/post-1″ aria-label=”Leer m\u00e1s sobre la EAA en Espa\u00f1a”>Leer m\u00e1s<\/a><\/p>\n\n\n\n <nav aria-label=”Navegaci\u00f3n principal”>…<\/nav><\/p>\n\n\n\n Tambi\u00e9n existe la variante<\/strong> html aria-labelledby<\/strong> cuando el nombre accesible ya est\u00e1 en otro elemento del DOM:<\/p>\n\n\n\n <section aria-labelledby=”titulo-seccion”><h2 id=”titulo-seccion”>Cumplimiento normativo<\/h2>…<\/section><\/p>\n\n\n\n \u00bfA\u00fan no acabas de entender para qu\u00e9 sirve aria-labelledby<\/strong> exactamente? Sirve para evitar duplicar texto cuando el nombre ya est\u00e1 visible en pantalla. Es preferible a aria-label en esos casos porque mantiene una \u00fanica fuente de verdad. <\/p>\n\n\n\n Para complementar el dise\u00f1o visual sin afectar al nombre accesible se puede ocultar con CSS el elemento referenciado por aria-labelledby<\/strong>, usando una clase tipo .sr-only que lo mantiene disponible para los lectores de pantalla. Conviene evitar display:none <\/strong>en estos casos.<\/p>\n\n\n\n En frameworks modernos, el atributo aria-label<\/strong> se aplica como cualquier otra prop. La sintaxis es la que cambia.<\/p>\n\n\n\n En React<\/strong> la sintaxis del atributo aria-label<\/strong> no sufre ninguna modificaci\u00f3n, se escribe con el gui\u00f3n intermedio, es decir que es una excepci\u00f3n a la regla de que los atributos deben escribirse en camelCase<\/strong>:<\/p>\n\n\n\n <button aria-label=”Cerrar modal” onClick={handleClose}><IconClose \/><\/button><\/p>\n\n\n\n En Vue, Angular y Svelte se conserva el nombre HTML original con gui\u00f3n, aunque la sintaxis de enlace din\u00e1mico var\u00eda seg\u00fan el framework:<\/p>\n\n\n\n Cuatro recomendaciones para no comprometer la accesibilidad en aplicaciones SPA:<\/p>\n\n\n\n Para profundizar en c\u00f3mo la IA puede ayudar (o estorbar) en esta tarea, te recomendamos nuestro post sobre IA para generar c\u00f3digo accesible<\/strong><\/a>.<\/p>\n\n\n\n Los errores m\u00e1s recurrentes con aria labeling<\/strong> no son t\u00e9cnicos en sentido estricto. Son errores de criterio: equipos que aplican ARIA por defecto, por costumbre, o porque “as\u00ed sale el lighthouse en verde”. El resultado suele ser una experiencia peor de la que hab\u00eda antes de tocar el c\u00f3digo.<\/p>\n\n\n\n Los fallos m\u00e1s vistos en auditor\u00edas:<\/p>\n\n\n\n Para detectar este tipo de errores y ponerles fin, puedes usar herramientas de apoyo que automatizan el proceso por ti en 2 pasos:<\/p>\n\n\n\n inSuit Auditor\u2122<\/strong> realiza auditor\u00edas manuales guiadas seg\u00fan la metodolog\u00eda de la norma EN 301 549 y las WCAG 2.2. Permite revisar de forma estructurada los criterios que no se pueden validar con herramientas autom\u00e1ticas: claridad de instrucciones, orden l\u00f3gico de lectura, foco visible y, sobre todo, estructura sem\u00e1ntica y nombres accesibles<\/strong>. <\/p>\n\n\n\n Es la herramienta que utilizan nuestros equipos para detectar incoherencias entre nombre visible y nombre accesible, etiquetas ARIA mal aplicadas o ausentes en componentes interactivos personalizados.<\/p>\n\n\n\n Una vez identificados los errores, inSuit Remedy\u2122<\/strong><\/a> aplica las correcciones en tiempo real, desde la nube, sin tocar el c\u00f3digo fuente original. <\/p>\n\n\n\n Tras una auditor\u00eda experta, nuestro equipo configura los ajustes avanzados de la soluci\u00f3n que insertan o corrigen atributos ARIA, mejoran nombres accesibles y resuelven barreras conforme a las WCAG 2.2 nivel AA y la norma EN 301 549. Es la salida m\u00e1s r\u00e1pida para sitios en producci\u00f3n <\/strong>que necesitan cumplir la normativa antes de la pr\u00f3xima auditor\u00eda.<\/p>\n\n\n\n Un uso correcto del atributo aria label<\/strong> es una decisi\u00f3n de dise\u00f1o que se toma en cada componente. Integrar esa decisi\u00f3n en tu ciclo de desarrollo evita que la accesibilidad se quede en el \u00faltimo sprint, cuando ya no hay tiempo de corregir. <\/p>\n\n\n\n \u00bfQuieres conocer m\u00e1s acerca de nuestras soluciones de accesibilidad digital? En inSuit<\/strong><\/a>, te ofreceremos toda la informaci\u00f3n que necesites sobre nuestros servicios. \u00a1No dudes en contactarnos!<\/p>\n\n\n\nQu\u00e9 es aria-label y para qu\u00e9 sirve en accesibilidad web<\/strong><\/h2>\n\n\n\n
\n
Diferencia entre aria-label, aria-labelledby y aria-describedby<\/strong><\/h2>\n\n\n\n
\n
Cu\u00e1ndo usar aria-label (y cu\u00e1ndo NO usarlo)<\/strong><\/h3>\n\n\n\n
\n
\n
Ejemplos pr\u00e1cticos en HTML con atributo aria-label<\/strong><\/h3>\n\n\n\n
\n
\n
\n
C\u00f3mo usar aria-label en React y otros frameworks<\/strong><\/h2>\n\n\n\n
\n
\n
Errores comunes con etiquetas aria y c\u00f3mo detectarlos con inSuit<\/strong><\/h2>\n\n\n\n
\n
Paso 1 \u2014 Detecta problemas con etiquetas aria usando inSuit Auditor\u2122<\/strong><\/h3>\n\n\n\n
Paso 2 \u2014 Corrige sin modificar el c\u00f3digo con inSuit Remedy\u2122<\/strong><\/h3>\n\n\n\n