Regla de accesibilidad: Los frames deben tener un nombre accesible

Acerca de esta regla de accesibilidad

Los usuarios de lectores de pantalla pueden obtener 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 contenido del frame. Esto obliga a los usuarios a entrar en cada frame solo para averiguar qué contiene, lo cual consume tiempo y es 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 WCAG 2.2 4.1.2: Nombre, Función, Valor (Nivel A), que requiere que todos los componentes de interfaz de usuario tengan un nombre que pueda ser determinado programáticamente. Los frames son contenedores interactivos hacia los que los usuarios navegan y desde 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

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

Atributo title — El enfoque más común. Añade un title que describa brevemente el contenido del frame.
Atributo aria-label — Proporciona un nombre accesible directamente en el elemento.
Atributo aria-labelledby — Hace referencia al texto de otro elemento como el 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.
Coincide 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. Por consistencia, manténlos iguales o muy similares.
Evita texto placeholder. 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="Anuncios patrocinados"></iframe>

Correcto: 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: