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

Sobre esta regra de acessibilidade

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

Este problema afeta principalmente utilizadores que são cegos ou surdocegos e dependem de tecnologia assistiva, 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 requer que todos os componentes da interface de utilizador tenham um nome que possa ser determinado programaticamente. As 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 as frames devem ser intituladas com texto que facilite a identificação e navegação de frames.

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 da 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 frame

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 você tem múltiplas frames, cada uma deve ter um título distinto para que os utilizadores as possam distinguir.
Corresponda ao título do documento interno da frame. Alguns leitores de ecrã substituem o atributo title da frame pelo elemento <title> dentro do documento enquadrado. Para consistência, mantenha-os iguais ou muito semelhantes.
Evite texto de marcador de posição. 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 a informação mais útil imediatamente.

Exemplos

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

A frame não tem title, aria-label ou aria-labelledby, pelo que os leitores de ecrã não a 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.

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

Correto: usando o atributo `title`

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

Correto: usando `aria-label`

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

Correto: usando `aria-labelledby`

<h2 id="chat-heading">Suporte por Chat ao Vivo</h2>
<iframe src="https://example.com/chat" aria-labelledby="chat-heading"></iframe>

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

Quando uma página contém várias frames, cada uma 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: corresponder o título da 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 principal -->

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