Técnica HTML WCAG 2.2
H64Dar un title que describa el contenido de cada iframe
Nombre oficial en el W3C: Usar el atributo title del elemento iframe
En pocas palabras
Un iframe (marco) mete en la página contenido de otra web, como un mapa, un vídeo o un formulario de reserva. Su atributo title debe decir qué contiene, por ejemplo «Mapa de la oficina de turismo». Así el lector de pantalla lo anuncia y el usuario decide si entrar o seguir.
Por qué es importante
Los lectores de pantalla anuncian los marcos al llegar a ellos y permiten saltar de uno a otro. Sin title, solo dicen «marco» o un texto técnico del servicio externo, a menudo en inglés.
La persona tiene que entrar en el marco y explorarlo para saber qué es. Con un buen título puede saltarlo si no le interesa. El criterio 4.1.2 pide que cada componente tenga nombre. El 2.4.1 pide que se puedan saltar bloques de contenido.
Cómo se hace
- Añada
titlea cada<iframe>:title="Vídeo: cómo pedir cita previa". - Describa el contenido, no la tecnología. Evite «iframe», «YouTube video player» o «Contenido externo».
- Si hay varios marcos, dé a cada uno un título distinto.
- Revise los códigos de inserción que copia de servicios de vídeo o de mapas. Cambie el título o tradúzcalo al español.
- Oculte los marcos que no tienen contenido para el usuario, como los de seguimiento, con
hiddenodisplay: none.
Ejemplo práctico
Los iframe sirven sobre todo para insertar contenido de otras webs: mapas, vídeos, formularios de reserva, pasarelas de pago o ventanas de chat. En el ejemplo, el mapa se simula con srcdoc. En una web real, src apuntaría al servicio de mapas.
Así no: Mapa insertado en un iframe sin title
El iframe no tiene nombre. Al ir de marco en marco, el lector de pantalla dice solo «marco». Como mucho, lee 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.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>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. Así el usuario decide si entrar o pasar de largo.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Códigos de inserción de vídeos y mapas copiados tal cual, sin
titleo con el texto en inglés del servicio. - Títulos genéricos que no dicen qué hay dentro, como «iframe», «Mapa» o «Contenido externo».
- Usar
namecreyendo que da nombre al marco. Solo sirve para scripts y destinos de enlaces, y el usuario no lo oye. - Marcos técnicos sin contenido para el usuario, como los de seguimiento o publicidad, que el lector anuncia. Hay que ocultarlos con
hiddenodisplay: none.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H64 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H64 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.