En resumen
Qué se mide
botones, enlaces y marcos (iframes) que no tienen un nombre que la tecnología de apoyo pueda leer.
Referencia
el criterio 4.1.2 de las WCAG, de nivel A, exige que el nombre de todo componente de interfaz se pueda determinar por software.
Por qué importa
sin nombre, quien navega con lector de pantalla o por voz no puede saber qué hace el control ni activarlo con seguridad.
Severidad en Wakaris
Crítico. Falla en el 72 % de las páginas analizadas.
Qué es y qué mide este hallazgo
El nombre accesible es el texto con el que el software identifica un control ante la persona que lo usa. MDN lo define como el texto asociado a un elemento HTML que da a quien usa tecnología de apoyo una etiqueta para ese elemento. Puede ser visible, como el texto de un enlace, o invisible, como un atributo que solo lee el lector de pantalla.
Este hallazgo mira tres tipos de control. Los botones, que toman su nombre de su propio texto; si solo contienen un icono, no tienen nada de donde tomarlo. Los enlaces, que también se nombran por su contenido; un enlace que envuelve una imagen sin texto alternativo se queda sin nombre. Y los marcos o iframes, que necesitan un atributo title, porque el lector de pantalla se detiene en su frontera y anuncia el rol "marco" seguido de ese título.
La referencia es el criterio 4.1.2 de las WCAG, Nombre, Rol y Valor: el nombre y el rol de todo componente de interfaz deben poder determinarse programáticamente. Es de nivel A.
Cómo se mide
Wakaris carga la URL que le indicas, construye la misma representación que usaría un lector de pantalla y revisa cada botón, cada enlace y cada marco de la página para comprobar si tiene nombre accesible. El resultado es un recuento por tipo de control, con la instancia de cada uno y el fragmento de código donde aparece, para que quien lo arregle sepa a qué elemento ir.
El nombre no se busca en un único sitio. Siguiendo el cálculo del nombre accesible que documenta MDN, un control puede tomarlo de su contenido de texto, del atributo alt de una imagen que contenga, de un elemento label asociado, de aria-labelledby apuntando a un texto visible, o de aria-label cuando no hay texto visible que asociar. Wakaris da el control por nombrado si cualquiera de esas vías produce un texto no vacío.
El umbral es exigente: basta un solo control sin nombre para que salte, y la lectura empeora a medida que crece el recuento. Un botón sin nombre en el buscador de la cabecera afecta a toda la navegación: el número importa menos que dónde están.
Por qué importa
Importa porque el nombre es lo único que una parte de tus visitantes recibe del control. Las WCAG lo resumen así: exponer nombre, rol y valor permite la compatibilidad con tecnologías de apoyo como lectores de pantalla, magnificadores y software de reconocimiento de voz. Quien navega por voz no puede decir "pulsa Buscar" porque el control no se llama así para el software.
Hay un efecto concreto en los enlaces. Los lectores de pantalla permiten listar todos los enlaces de una página para saltar directamente al que interesa. Si varios se llaman "aquí" o "leer más", o no se llaman de ninguna manera, ese atajo deja de servir: la documentación de web.dev lo ilustra con un menú lleno de la palabra "here".
Y hay un plano de conformidad. El criterio 4.1.2 es de nivel A, el escalón más bajo de las WCAG: incumplirlo deja a la página fuera de cualquier nivel de conformidad.
Causas comunes
La causa más frecuente son los botones de icono: la lupa del buscador, la hamburguesa del menú, la equis que cierra un aviso, las flechas de un carrusel. Se dibujan con un SVG, una fuente de iconos o una imagen de fondo, y el botón se queda sin texto del que sacar el nombre. La documentación de web.dev señala precisamente que un botón siempre intenta calcular su nombre a partir de su contenido de texto, y que en los botones de icono conviene darle un nombre explícito con aria-label.
La segunda son los enlaces que envuelven imágenes: el logotipo que lleva a la portada, las miniaturas de una galería, las redes sociales del pie. Si la imagen no tiene alt, el enlace no tiene nombre.
La tercera son los iframes sin title: vídeos incrustados, mapas, formularios de terceros, chats. Se pegan tal cual vienen del proveedor y nadie añade el título. A menudo el problema lo arrastra un componente externo, no tu plantilla.
Cómo solucionarlo
Empieza por el informe de Wakaris: te da cada control sin nombre con su tipo y su fragmento de código. Prioriza por uso, no por número: buscador, menú, cierre de avisos y navegación del carrusel antes que un icono decorativo del pie.
Para un botón de icono, la solución es un aria-label que diga lo que hace el botón, no lo que dibuja: "Buscar", no "lupa"; "Abrir menú", no "hamburguesa". Si el botón puede llevar texto visible, mejor aún.
Para un enlace con imagen, pon a la imagen un alt que describa el destino: "Inicio" en el logotipo, el nombre de la red en los iconos sociales. Y evita que el nombre acabe siendo "aquí" o "leer más".
Para un iframe, añade title con el contenido que incrusta: "Vídeo de presentación", "Mapa de la tienda". Después vuelve a pasar la página por Wakaris y comprueba que el recuento baja a cero.
Tabla con las fuentes de las que un botón, un enlace y un iframe toman su nombre accesible: contenido de texto, alt, aria-label, aria-labelledby y title
Brief para generar la imagen
Ilustración editorial para una guía técnica de Wakaris. Tema: Tabla con las fuentes de las que un botón, un enlace y un iframe toman su nombre accesible: contenido de texto, alt, aria-label, aria-labelledby y title. Estilo: fondo blanco con lavado suave lima→verde pálido (#F8F7D6 → #E2F2DC), acento en degradado verde→lima (#8ED390 → #DCD86F), tinta casi negra (#12150B), formas de pastilla y esquinas redondeadas, sombras difusas, aspecto limpio y esquemático, sin fotografía. Formato: 16:9, 1440 píxeles de ancho. Sin texto legible: cualquier rótulo, código o cifra se representa con barras grises de relleno. El significado lo lleva el pie de foto, no la imagen. Sin logotipos reales ni marcas de terceros. Sin personas reconocibles. Etiquetas: nombres, accesibles, controles, tabla, fuentes, botón, enlace, iframe
Pregúntale a tu IA
Si quieres profundizar en tu caso concreto, copia uno de estos dos prompts y pégalo en la IA que uses. Elige según tu situación.
Ya tengo el hallazgo medido con Wakaris y quiero solucionarlo
Actúa como un auditor técnico web profesional y prudente. Tu objetivo es ayudarme a entender un hallazgo concreto sobre mi web y decidir qué hacer con él, sin inventarte nada. Contexto: he obtenido este hallazgo con Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El hallazgo es: Nombres accesibles de controles. Hay botones, enlaces o marcos (iframes) en mi página que no tienen un nombre que un lector de pantalla o el control por voz puedan leer, así que se anuncian solo como "botón" o "enlace". Referencia: el criterio 4.1.2 de las WCAG, de nivel A, exige que el nombre de todo control se pueda determinar por software; el umbral de Wakaris es cero controles sin nombre. Pega aquí el resultado de Wakaris: cuántos controles sin nombre hay, de qué tipo (botón, enlace, marco), en qué página y, si lo indica, el fragmento de código de cada uno. Si no lo tienes, dímelo y te diré cómo obtenerlo antes de seguir. Reglas que debes seguir en todo momento: 1. No asumas nada sobre mi web. Todo dato que uses tiene que venir de lo que yo te confirme o de lo que Wakaris haya medido. Si no lo sabes, pregúntamelo antes de afirmarlo. 2. Antes de darme conclusiones, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para saber si este hallazgo me afecta de verdad y por dónde: a) ¿En qué plataforma está tu web? (WordPress, Shopify, web a medida, otra) b) De los controles sin nombre, ¿cuántos son botones, cuántos enlaces y cuántos marcos? c) ¿Los botones afectados son de icono (lupa, menú, cerrar, flechas) o tienen texto visible? d) ¿Los enlaces afectados envuelven imágenes (logotipo, miniaturas, redes sociales) o son de texto? e) ¿Los marcos afectados son contenido de terceros (vídeo, mapa, chat, formulario) o propios? f) ¿El código de esos controles lo generas tú, un tema o plantilla, o un plugin o componente externo? g) Si hay que aplicar un arreglo técnico, ¿lo harías tú, un técnico interno o una agencia? 3. Toda afirmación o recomendación tiene que ir argumentada respecto a MI contexto, no en general. Si me recomiendas algo, explícame por qué aplica a mi caso. 4. Marca siempre tu nivel de certeza. Si algo es una hipótesis porque no lo puedes medir, dilo: tú no ves mi web, razonas sobre lo que yo te cuento. 5. No me propongas cambios técnicos irreversibles o de riesgo (configuración de servidor, borrar recursos, cambios directos en producción) sin avisarme antes del riesgo y de que conviene una copia de seguridad o un entorno de prueba. 6. Si necesitas un dato que solo se obtiene midiendo la web (confirmar qué controles siguen sin nombre, o si el arreglo funcionó), dímelo y recomiéndame volver a pasar la página por Wakaris: eso se mide, no se adivina. 7. La decisión final es mía, no tuya. Tu papel es ayudarme a entender y a preparar la acción, no decidir por mí. 8. Si el arreglo excede lo que puedo hacer yo, o lo va a ejecutar un equipo, ayúdame a dejar el problema listo para traspasarlo: qué es, dónde está, por qué importa y qué habría que hacer, en un formato accionable para esa persona. Fuente de este hallazgo: https://www.wakaris.com/es/guias/accesibilidad/nombres-accesibles-de-controles Para medirlo o volver a medirlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol y haciéndome el primer bloque de preguntas.
Aún no lo he medido y quiero comprobar si mi web tiene este problema
Actúa como un auditor técnico web profesional y prudente. Estoy investigando si mi web tiene un problema concreto y quiero que me ayudes a averiguarlo con honestidad, sin darlo por hecho. Contexto: he llegado a esto a través de Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El problema que quiero investigar es: Nombres accesibles de controles. Consiste en que algún botón, enlace o marco (iframe) de mi página no tiene un nombre que un lector de pantalla o el control por voz puedan leer, y se anuncia solo como "botón" o "enlace". Referencia: el criterio 4.1.2 de las WCAG, de nivel A; el umbral es cero controles sin nombre. Todavía NO sé si mi web lo tiene: quiero averiguarlo. Reglas que debes seguir en todo momento: 1. Lo primero y más importante: esto se MIDE revisando cada control de la página, y tú no puedes medir mi web desde esta conversación. Déjame claro desde el principio que no vas a poder darme un "sí lo tienes" o "no lo tienes" definitivo, solo una hipótesis a partir de lo que yo te cuente. 2. No asumas nada. Antes de darme ninguna valoración, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para estimar si es probable que tenga el problema: a) ¿Tu web tiene botones que son solo un icono, sin texto al lado? (lupa de buscador, menú de tres rayas, equis de cerrar, flechas de un carrusel) b) ¿Tienes enlaces que son solo una imagen? (logotipo que lleva al inicio, iconos de redes sociales, miniaturas de galería) c) ¿Incrustas contenido de otros sitios: vídeos, mapas, formularios, chats? d) ¿En qué plataforma está tu web? (WordPress, Shopify, web a medida, otra; o no lo sé) e) ¿Usas un tema o plantilla comprado, o un diseño hecho a medida? f) ¿Alguien ha revisado alguna vez la accesibilidad de la web, o es la primera vez que te lo planteas? 3. Con mis respuestas, dame una estimación clara de si es PROBABLE o POCO PROBABLE que lo tenga, y de qué tipo de control sería el sospechoso, argumentada según lo que te he dicho y marcada explícitamente como hipótesis, no como diagnóstico. 4. Dime de forma directa que la única manera de saberlo de verdad es medirlo, y que puedo hacerlo gratis y sin crear cuenta pasando mi web por Wakaris, que me dará el recuento real de controles sin nombre, el fragmento de código de cada uno y de paso el estado de las otras áreas. 5. Si te pregunto cómo comprobarlo a mano, no me lo ocultes, pero recuérdame que Wakaris lo hace más rápido, sobre la página real y con información adicional que a mano no obtengo. 6. Si al medirlo resulta que sí lo tengo, dime que el siguiente paso es entender cómo me afecta y cómo solucionarlo en mi caso concreto. 7. La conclusión y la decisión son mías, no tuyas. Tú me ayudas a orientarme. Fuente de este hallazgo: https://www.wakaris.com/es/guias/accesibilidad/nombres-accesibles-de-controles Para medirlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol, dejando claro el punto 1, y haciéndome el bloque de preguntas.
Preguntas frecuentes
¿Qué diferencia hay entre nombre accesible y etiqueta visible? +
La etiqueta visible la ve todo el mundo; el nombre accesible es el texto que el software expone a la tecnología de apoyo, y puede estar oculto. Las WCAG lo dicen así: el nombre puede estar oculto y solo exponerse mediante tecnología de apoyo, mientras que la etiqueta se presenta a todas las personas. Lo ideal es que coincidan.
¿Un botón con un icono y un título al pasar el ratón ya tiene nombre? +
El atributo title puede servir de nombre como último recurso, pero es frágil: no aparece en pantallas táctiles y algunos lectores lo ignoran o lo leen como descripción. Para un botón de icono, la vía fiable es aria-label con la acción que realiza, o texto visible dentro del botón cuando el diseño lo permita.
¿Por qué "leer más" cuenta como problema si el enlace sí tiene texto? +
Estrictamente ese enlace tiene nombre, así que Wakaris no lo cuenta como control sin nombre. El problema es de utilidad: cuando un lector de pantalla lista los enlaces de la página, varios "leer más" seguidos no dicen a dónde va cada uno. Poner dentro del enlace el texto que describe el destino lo arregla.
¿Los iframes de terceros son mi responsabilidad? +
El atributo title del iframe va en tu código, no en el del proveedor, así que sí puedes y debes ponerlo. Lo que ocurra dentro del marco depende del tercero, pero el nombre del marco, que es lo que anuncia el lector de pantalla al llegar a él, es tuyo. Wakaris comprueba ese título en tu página.
Fuentes citadas
- w3.orgUnderstanding Success Criterion 4.1.2: Name, Role, Value, W3C WAI: texto del criterio, nivel A, definición de nombre frente a etiqueta y tecnologías de apoyo beneficiadas.
- developer.mozilla.orgAccessible name, MDN Web Docs: definición de nombre accesible y las vías de las que se deriva (contenido, alt, label, aria-labelledby, aria-label).
- web.devLabels and text alternatives, web.dev: cómo calcula su nombre un botón, el uso de aria-label en botones de icono, el listado de enlaces del lector de pantalla y el atributo title en iframes.
- web.devThe Accessibility Tree, web.dev: qué es el árbol de accesibilidad y cómo el lector de pantalla anuncia rol, nombre, estado y valor de cada elemento.
Actualizado: 7 de septiembre de 2026.
Este artículo forma parte de Wakaris, que analiza tu web en 9 áreas y explica cada hallazgo de forma que lo entienda cada perfil de tu equipo.