Técnica HTML WCAG 2.2
H64Usar el atributo title del elemento iframe
En resumen
Esta técnica pide dar a cada iframe un atributo title que describa brevemente su contenido (por ejemplo, «Publicidad» o «Mapa de localización»). Los usuarios de lectores de pantalla oyen ese título al llegar al marco y pueden decidir si entrar en él o saltarlo, sin tener que explorarlo a ciegas. Úsela en todas las páginas que incrusten vídeos, mapas, formularios de terceros o anuncios mediante iframe.
Ejemplo práctico
Los iframe aparecen sobre todo al insertar contenido de terceros: mapas de ubicación, vídeos, formularios de reserva, pasarelas de pago o widgets de chat. En el ejemplo el mapa se simula con srcdoc; en un sitio real src apuntaría al servicio de mapas.
Así no: Mapa insertado en un iframe sin title
El iframe no tiene nombre accesible. Al navegar por marcos, el lector de pantalla anuncia solo «marco» o, en el mejor de los casos, el título interno del documento insertado, que no se controla y suele estar en inglés. Para notarlo hay que recorrer la demo con NVDA o VoiceOver.
<h2>Dónde estamos</h2>
<p>Oficina de turismo, Plaza de España, 1.</p>
<iframe width="300" height="120"
srcdoc="<div lang='es' style='font-family:sans-serif;background:#e6eef5;height:100px;padding:8px'>Mapa: Plaza de España, 1</div>"></iframe>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: iframe con un title que describe su contenido
Se añade title con una descripción del contenido del marco. El lector la anuncia al llegar al marco y en la lista de marcos, de modo que el usuario decide si entrar o pasar de largo.
<h2>Dónde estamos</h2>
<p>Oficina de turismo, Plaza de España, 1.</p>
<iframe width="300" height="120"
title="Mapa con la ubicación de la Oficina de turismo"
srcdoc="<div lang='es' style='font-family:sans-serif;background:#e6eef5;height:100px;padding:8px'>Mapa: Plaza de España, 1</div>"></iframe>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Códigos de inserción de vídeo y mapas copiados tal cual, sin
titleo con el texto en inglés que trae el servicio. - Títulos genéricos que no describen el contenido, como «iframe», «Mapa» o «Contenido externo».
- Usar
namecreyendo que etiqueta el marco: solo sirve para scripts y destinos de enlaces y no se presenta al usuario. - Marcos técnicos sin contenido para el usuario (seguimiento, píxeles de publicidad) que quedan expuestos al lector en lugar de ocultarse con
hiddenodisplay: none.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Documentos HTML que usan iframes
Descripción
El objetivo de esta técnica es mostrar el uso del atributo title del elemento iframe para describir su contenido. Esto proporciona una etiqueta para el marco, de modo que los usuarios puedan decidir en qué marco entrar para explorarlo con detalle. No etiqueta el contenido que hay dentro del iframe.
El atributo title etiqueta los iframes, y es distinto del elemento title, que etiqueta documentos. Deben proporcionarse ambos, ya que el primero facilita la navegación entre iframes y el segundo aclara cuál es la página actual del usuario.
El atributo title no es intercambiable con el atributo name. El title etiqueta el marco para los usuarios; el name lo etiqueta para los scripts y para el destino de las ventanas. El name no se presenta al usuario; solo se presenta el title.
Ejemplos
Uso del atributo title en un iframe para describir el contenido del iframe
<!doctype html>
<html lang="en">
<head>
<title>A document using an iframe</title>
</head>
...
<iframe src="banner-ad.html" name="ad-iframe" title="Advertisement"></iframe>
...
</html>Pruebas
Procedimiento
- Comprobar que cada elemento
iframedel código fuente HTML tiene un atributotitle. - Comprobar que el atributo
titlecontiene un texto que describe el contenido deliframe.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H64 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
