Regra de acessibilidade: As frames devem ter um nome acessível

Sobre esta regra de acessibilidade

Os utilizadores de leitores de ecrã podem aceder a uma lista de todos os frames numa página e navegar entre eles usando os seus títulos. Quando os frames carecem de nomes acessíveis, os utilizadores ouvem rótulos genéricos como “frame”, “JavaScript” ou um URL bruto — nenhum dos quais transmite o propósito ou conteúdo do frame. Isto força os utilizadores a entrar em cada frame apenas para descobrir o que contém, o que é demorado e frustrante.

Este problema afeta principalmente utilizadores cegos ou surdo-cegos que dependem de tecnologias assistivas, mas também impacta utilizadores com deficiências motoras que navegam através de listas de frames ou marcos de referência.

Critérios de sucesso WCAG relevantes

Esta regra relaciona-se com o Critério de Sucesso 4.1.2 WCAG 2.2: Nome, Função, Valor (Nível A), que exige que todos os componentes de interface do utilizador tenham um nome que possa ser determinado programaticamente. Os frames são contentores interativos nos quais os utilizadores navegam para dentro e para fora, pelo que devem ter um nome acessível.

É também explicitamente exigido pela Secção 508 (§1194.22(i)), que estabelece que os frames devem ser titulados com texto que facilite a identificação e navegação do frame.

Como corrigir

Dê a cada elemento <iframe> e <frame> um nome acessível claro e descritivo usando um destes métodos:

Atributo title — A abordagem mais comum. Adicione um title que descreva brevemente o conteúdo do frame.
Atributo aria-label — Fornece um nome acessível diretamente no elemento.
Atributo aria-labelledby — Referencia o texto de outro elemento como o nome acessível.

Dicas para escrever bons títulos de frames

Seja breve e descritivo. Um título como “Resultados da pesquisa de produtos” é muito mais útil do que “frame1” ou “conteúdo”.
Torne cada título único. Se tem múltiplos frames, cada um deve ter um título distinto para que os utilizadores os possam distinguir.
Faça corresponder ao título do documento interno do frame. Alguns leitores de ecrã substituem o atributo title do frame pelo elemento <title> dentro do documento enquadrado. Para consistência, mantenha-os iguais ou muito similares.
Evite texto de preenchimento. Títulos como “sem título” ou “iframe” não fornecem informação útil.
Coloque informação única primeiro. Se incluir um nome de marca, coloque-o após o conteúdo descritivo para que os utilizadores ouçam imediatamente a informação mais útil.

Exemplos

Incorreto: `<iframe>` sem um nome acessível

O frame não tem title, aria-label ou aria-labelledby, pelo que os leitores de ecrã não o conseguem descrever.

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

Incorreto: atributo `title` vazio

Um title vazio é o mesmo que não ter título nenhum.

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

Correto: usar o atributo `title`

<iframe src="https://example.com/video-player" title="Reprodutor de vídeo de demonstração do produto"></iframe>

Correto: usar `aria-label`

<iframe src="https://example.com/map" aria-label="Mapa da localização da loja"></iframe>

Correto: usar `aria-labelledby`

<h2 id="chat-heading">Suporte de Chat em Tempo Real</h2>
<iframe src="https://example.com/chat" aria-labelledby="chat-heading"></iframe>

Correto: múltiplos frames com títulos únicos

Quando uma página contém vários frames, cada um deve ter um título distinto e descritivo.

<iframe src="/navigation" title="Menu de navegação do site"></iframe>
<iframe src="/content" title="Conteúdo do artigo principal"></iframe>
<iframe src="/ads" title="Publicidade patrocinada"></iframe>

Correto: fazer corresponder o título do frame ao título do documento

Para a melhor experiência, alinhe o atributo title no <iframe> com o elemento <title> dentro do documento enquadrado.

<!-- Página pai -->

<iframe src="contact-form.html" title="Formulário de contacto"></iframe>

<!-- contact-form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Formulário de contacto</title>
</head>
<body>
  <h1>Contacte-nos</h1>
  <form>
    <label for="email">Email</label>
    <input type="email" id="email">
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Learn more: