Los frames deben tener un nombre accesible

Los usuarios de lectores de pantalla pueden mostrar una lista de todos los frames en una página y navegar entre ellos usando sus títulos. Cuando los frames carecen de nombres accesibles, los usuarios escuchan etiquetas genéricas como “frame”, “JavaScript” o una URL sin procesar — ninguna de las cuales transmite el propósito o el contenido del frame. Esto obliga a los usuarios a entrar en cada frame solo para averiguar qué contiene, lo que resulta tedioso y frustrante.

Este problema afecta principalmente a usuarios que son ciegos o sordociegos y dependen de tecnología asistiva, pero también impacta a usuarios con discapacidades de movilidad que navegan por listas de frames o landmarks.

Criterios de éxito WCAG relevantes

Esta regla se relaciona con el Criterio de éxito 4.1.2 de WCAG 2.2: Nombre, función, valor (Nivel A), que requiere que todos los componentes de interfaz de usuario tengan un nombre que pueda determinarse programáticamente. Los frames son contenedores interactivos hacia los que los usuarios navegan y de los que salen, por lo que deben tener un nombre accesible.

También es explícitamente requerido por la Sección 508 (§1194.22(i)), que establece que los frames deben titularse con texto que facilite la identificación y navegación del frame.

Cómo solucionarlo

Proporciona a cada elemento <iframe> y <frame> un nombre accesible claro y descriptivo usando uno de estos métodos:

1. Atributo title — El enfoque más común. Añade un title que describa brevemente el contenido del frame.
2. Atributo aria-label — Proporciona un nombre accesible directamente en el elemento.
3. Atributo aria-labelledby — Referencia el texto de otro elemento como nombre accesible.

Consejos para escribir buenos títulos de frame

• Sé breve y descriptivo. Un título como “Resultados de búsqueda de productos” es mucho más útil que “frame1” o “contenido”.
• Haz que cada título sea único. Si tienes múltiples frames, cada uno debería tener un título distinto para que los usuarios puedan diferenciarlos.
• Haz coincidir con el título del documento interno del frame. Algunos lectores de pantalla reemplazan el atributo title del frame con el elemento <title> dentro del documento enmarcado. Para mantener consistencia, mantenlos iguales o muy similares.
• Evita texto de marcador de posición. Títulos como “sin título” o “iframe” no proporcionan información útil.
• Pon la información única primero. Si incluyes un nombre de marca, colócalo después del contenido descriptivo para que los usuarios escuchen la información más útil inmediatamente.

Ejemplos

Incorrecto: <iframe> sin un nombre accesible

El frame no tiene title, aria-label o aria-labelledby, por lo que los lectores de pantalla no pueden describirlo.

<iframe src="https://example.com/video-player"></iframe>

Incorrecto: atributo title vacío

Un title vacío es lo mismo que no tener título en absoluto.

<iframe src="https://example.com/video-player" title=""></iframe>

Correcto: usando el atributo title

<iframe src="https://example.com/video-player" title="Reproductor de video de demostración del producto"></iframe>

Correcto: usando aria-label

<iframe src="https://example.com/map" aria-label="Mapa de ubicación de la tienda"></iframe>

Correcto: usando aria-labelledby

<h2 id="chat-heading">Soporte de chat en vivo</h2>
<iframe src="https://example.com/chat" aria-labelledby="chat-heading"></iframe>

Correcto: múltiples frames con títulos únicos

Cuando una página contiene varios frames, cada uno debería tener un título distinto y descriptivo.

<iframe src="/navigation" title="Menú de navegación del sitio"></iframe>
<iframe src="/content" title="Contenido del artículo principal"></iframe>
<iframe src="/ads" title="Publicidad patrocinada"></iframe>

Correcto: hacer coincidir el título del frame con el título del documento

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

<!-- Página padre -->

<iframe src="contact-form.html" title="Formulario de contacto"></iframe>

<!-- contact-form.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">
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

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

→