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 a que necessitam. 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 é qual frame, ou o leitor de ecrã recorre a informação pouco útil 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 o 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 do 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 a secção EN 301 549 9.4.1.2.

Como corrigir

Adicione um atributo title a cada elemento <frame> e <iframe>.
Torne cada título único na 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 quando possível. Alguns leitores de ecrã substituem o atributo title da frame pelo elemento <title> do documento interno, pelo que mantê-los consistentes assegura 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 temporários como “sem título” ou “página” por descrições significativas.
Se o conteúdo da frame 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="Atualizações da Empresa"></iframe>
<iframe src="/events.html" title="Atualizações da Empresa"></iframe>

Incorreto: Frame com título vazio

Um título vazio não fornece informação útil aos utilizadores de tecnologia assistiva.

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

Incorreto: Frames sem título

Sem qualquer atributo title, os leitores de ecrã recorrem a anunciar informação pouco útil 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="Últimas Notícias da Empresa"></iframe>
<iframe src="/events.html" title="Calendário de Eventos Próximos"></iframe>

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

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

<!-- Página principal -->

<iframe src="/contact.html" title="Formulário de Contacto"></iframe>

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

Correto: Ocultar frames decorativas ou sem conteúdo

Se uma frame é puramente decorativa ou não contém conteúdo significativo para os utilizadores (como um pixel de rastreamento), oculte-a completamente da tecnologia assistiva 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 precisaria 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