Regra de acessibilidade: As frames devem ter um atributo title único

Sobre esta regra de acessibilidade

Os utilizadores de leitores de ecrã dependem dos títulos das frames para compreender o que cada região incorporada de uma página contém. Muitos leitores de ecrã oferecem uma funcionalidade que lista todas as frames numa página pelos seus títulos, permitindo aos utilizadores saltar diretamente para aquela de que precisam. Quando as frames carecem de títulos ou partilham títulos idênticos, esta funcionalidade torna-se inútil — os utilizadores ficam a adivinhar qual frame é qual, ou o leitor de ecrã recorre a informações pouco úteis como “frame,” “javascript,” um nome de ficheiro, ou um URL.

Esta questão afeta principalmente utilizadores que são cegos, surdocegos, ou que navegam com tecnologias assistivas. Relaciona-se com WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A), que exige que todos os componentes da interface de utilizador tenham um nome acessível que possa ser determinado programaticamente. Quando as frames partilham um título, os seus nomes acessíveis falham em identificá-las unicamente, violando este critério. A regra é também coberta pela diretriz Trusted Tester 12.D, que exige que a combinação de nome acessível e descrição para cada <iframe> descreva o seu conteúdo, bem como pela secção EN 301 549 9.4.1.2.

Como corrigir

Adicione um atributo title a todos os elementos <frame> e <iframe>.
Torne cada título único em toda a página. Duas frames não devem partilhar o mesmo título.
Torne cada título descritivo. O título deve resumir claramente o conteúdo ou propósito da frame. Evite rótulos genéricos como “frame” ou “sem título.”
Faça corresponder o <title> do documento interno da frame ao atributo title no elemento frame sempre que possível. Alguns leitores de ecrã substituem o atributo title da frame pelo elemento <title> do documento interno, por isso mantê-los consistentes garante uma experiência fiável.

Dicas para escrever bons títulos de frames

Mantenha os títulos breves mas informativos — descreva o que a frame contém, não apenas que existe.
Coloque a informação mais distintiva primeiro. Se incluir um nome de marca, coloque-o no final para que os utilizadores não tenham de o ouvir repetidamente enquanto examinam uma lista de frames.
Substitua títulos de marcação de posição como “sem título” ou “página” por descrições significativas.
Se o conteúdo enquadrado tiver um cabeçalho visível, considere alinhar o título da frame com esse cabeçalho para consistência.

Exemplos

Incorreto: Frames com títulos duplicados

Neste exemplo, duas iframes partilham o mesmo title, tornando impossível para os utilizadores de leitores de ecrã distingui-las.

<iframe src="/news.html" title="Company Updates"></iframe>
<iframe src="/events.html" title="Company Updates"></iframe>

Incorreto: Frame com um título vazio

Um título vazio não fornece informações úteis aos utilizadores de tecnologias assistivas.

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

Incorreto: Frames sem título

Sem qualquer atributo title, os leitores de ecrã recorrem a anunciar informações pouco úteis como o URL ou “frame.”

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

Correto: Frames com títulos únicos e descritivos

Cada frame tem um título distinto que descreve claramente o seu conteúdo.

<iframe src="/news.html" title="Latest Company News"></iframe>
<iframe src="/events.html" title="Upcoming Events Calendar"></iframe>

Correto: Título da frame correspondendo ao título do documento interno

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

<!-- Página principal -->

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

<!-- contact.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <button type="submit">Send</button>
  </form>
</body>
</html>

Correto: Ocultar frames decorativas ou sem conteúdo

Se uma frame for puramente decorativa ou contiver nenhum conteúdo significativo para os utilizadores (como um pixel de rastreamento), oculte-a completamente das tecnologias assistivas em vez de lhe dar um título enganoso.

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

Note que esta abordagem só deve ser usada quando a frame genuinamente não contém conteúdo que qualquer utilizador precise de aceder.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

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

→

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Detecte problemas de acessibilidade automaticamente

O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.

Iniciar teste gratuito Ver preços