Regla de accesibilidad: Los frames deben tener un atributo title único

Acerca de esta regla de accesibilidad

Los usuarios de lectores de pantalla dependen de los títulos de los frames para entender qué contiene cada región incrustada de una página. Muchos lectores de pantalla ofrecen una funcionalidad que lista todos los frames de una página por sus títulos, permitiendo a los usuarios saltar directamente al que necesitan. Cuando los frames carecen de títulos o comparten títulos idénticos, esta funcionalidad se vuelve inútil: los usuarios se quedan adivinando qué frame es cuál, o el lector de pantalla recurre a información poco útil como “frame”, “javascript”, un nombre de archivo o una URL.

Este problema afecta principalmente a usuarios ciegos, sordociegos o que navegan con tecnologías de asistencia. Se relaciona con el Criterio de Éxito 4.1.2 de WCAG 2.0, 2.1 y 2.2: Nombre, Función, Valor (Nivel A), que requiere que todos los componentes de la interfaz de usuario tengan un nombre accesible que pueda ser determinado programáticamente. Cuando los frames comparten un título, sus nombres accesibles fallan en identificarlos de forma única, violando este criterio. La regla también está cubierta por la guía 12.D de Trusted Tester, que requiere que la combinación del nombre accesible y la descripción para cada <iframe> describa su contenido, así como la sección 9.4.1.2 de EN 301 549.

Cómo solucionarlo

Añade un atributo title a cada elemento <frame> e <iframe>.
Haz único cada título en toda la página. Ningún frame debería compartir el mismo título.
Haz descriptivo cada título. El título debe resumir claramente el contenido o propósito del frame. Evita etiquetas genéricas como “frame” o “sin título”.
Haz coincidir el <title> del documento interno del frame con el atributo title del elemento frame cuando sea posible. Algunos lectores de pantalla reemplazan el atributo title del frame con el elemento <title> del documento interno, así que mantenerlos consistentes asegura una experiencia confiable.

Consejos para escribir buenos títulos de frame

Mantén los títulos breves pero informativos: describe qué contiene el frame, no solo que existe.
Pon la información más distintiva primero. Si incluyes un nombre de marca, colócalo al final para que los usuarios no tengan que escucharlo repetidamente mientras escanean una lista de frames.
Reemplaza títulos de marcador de posición como “sin título” o “página” con descripciones significativas.
Si el contenido enmarcado tiene un encabezado visible, considera alinear el título del frame con ese encabezado para mantener consistencia.

Ejemplos

Incorrecto: Frames con títulos duplicados

En este ejemplo, dos iframes comparten el mismo title, haciendo imposible que los usuarios de lectores de pantalla los distingan.

<iframe src="/news.html" title="Actualizaciones de la Empresa"></iframe>
<iframe src="/events.html" title="Actualizaciones de la Empresa"></iframe>

Incorrecto: Frame con título vacío

Un título vacío no proporciona información útil a los usuarios de tecnologías de asistencia.

<iframe src="/contact.html" title=""></iframe>

Incorrecto: Frames sin título

Sin ningún atributo title, los lectores de pantalla recurren a anunciar información poco útil como la URL o “frame”.

<iframe src="/navigation.html"></iframe>
<iframe src="/main-content.html"></iframe>

Correcto: Frames con títulos únicos y descriptivos

Cada frame tiene un título distinto que describe claramente su contenido.

<iframe src="/news.html" title="Últimas Noticias de la Empresa"></iframe>
<iframe src="/events.html" title="Calendario de Próximos Eventos"></iframe>

Correcto: Título del frame que coincide con el título del documento interno

Para la mejor experiencia, alinea el atributo title con el elemento <title> del documento enmarcado.

<!-- Página padre -->

<iframe src="/contact.html" title="Formulario de Contacto"></iframe>

<!-- contact.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Formulario de Contacto</title>
</head>
<body>
  <h1>Contáctanos</h1>
  <form>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Correcto: Ocultar frames decorativos o sin contenido

Si un frame es puramente decorativo o no contiene contenido significativo para los usuarios (como un píxel de seguimiento), ocúltalo completamente de las tecnologías de asistencia en lugar de darle un título engañoso.

<iframe src="/tracking-pixel.html" title="" aria-hidden="true" tabindex="-1"></iframe>

Ten en cuenta que este enfoque solo debe usarse cuando el frame genuinamente no contenga contenido al que ningún usuario necesite acceder.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using the title attribute of the frame and iframe elements

→

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

Detecta problemas de accesibilidad automáticamente

Rocket Validator escanea miles de páginas con Axe Core y el W3C Validator, encontrando problemas de accesibilidad en todo tu sitio web.

Iniciar prueba gratuita Ver precios