O documento

Além da estrutura, há muitos elementos HTML de suporte a serem considerados ao criar e projetar para acessibilidade digital. No curso "Aprenda sobre acessibilidade", abordamos muitos elementos.

Este módulo se concentra em elementos muito específicos que não se encaixam em nenhum dos outros módulos, mas são úteis para entender.

Título da página

O elemento HTML <title> define o conteúdo da página ou tela que o usuário vai acessar. Ele está na seção <head> de um documento HTML e é equivalente ao <h1> ou ao tópico principal da página. O conteúdo do título aparece na guia do navegador e ajuda os usuários a entender qual página eles estão visitando, mas não é exibido no site ou app.

Em um app de página única (SPA, na sigla em inglês), o <title> é processado de maneira um pouco diferente, já que os usuários não navegam entre as páginas como em sites de várias páginas. Para SPAs, o valor da propriedade document.title pode ser adicionado manualmente ou por um pacote auxiliar, dependendo do framework JavaScript. Anunciar os títulos de página atualizados para um usuário de leitor de tela pode exigir mais trabalho.

Os títulos descritivos são bons para os usuários e para a otimização de mecanismos de pesquisa (SEO), mas não exagere e adicione muitas palavras-chave. Como o título é a primeira coisa anunciada quando um usuário de AT visita uma página, ele precisa ser preciso, exclusivo e descritivo, mas também conciso.

Ao escrever títulos de páginas, também é recomendável "carregar na parte frontal" a página interna ou o conteúdo importante primeiro e, em seguida, adicionar as páginas ou informações anteriores. Dessa forma, os usuários de AT não precisam ouvir as informações que já conhecem.

O que não fazer
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
O que fazer
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Idioma

Idioma da página

O atributo de idioma da página (lang) define o idioma padrão para toda a página. Esse atributo é adicionado à tag <html>. Um atributo de idioma válido precisa ser adicionado a cada página, porque ele indica ao AT qual idioma usar.

É recomendável usar códigos de idioma ISO de dois caracteres para uma maior cobertura de AT, já que muitos deles não oferecem suporte a códigos de idioma estendidos.

Quando um atributo de idioma está completamente ausente, o AT usa o idioma programado do usuário por padrão. Por exemplo, se um AT estiver definido como espanhol, mas um usuário visitar um site ou app em inglês, o AT tentará ler o texto em inglês com sotaque e cadência em espanhol. Essa combinação resulta em um produto digital inutilizável e um usuário frustrado.

O que não fazer
<html>...</html>
O que fazer
<html lang="en">...</html>

O atributo lang só pode ter um idioma associado a ele. Isso significa que o atributo <html> só pode ter um idioma, mesmo que haja vários idiomas na página. Defina lang como o idioma principal da página.

O que não fazer
<html lang="ar,en,fr,pt">...</html>
 Não há suporte para vários idiomas.
O que fazer
<html lang="ar">...</html>
 Defina apenas o idioma principal da página. Nesse caso, o idioma é árabe.

Idioma da seção

Você também pode usar o atributo de idioma (lang) para alternar o idioma no próprio conteúdo. As mesmas regras básicas se aplicam ao atributo de idioma da página inteira, exceto que você o adiciona ao elemento apropriado na página em vez da tag <html>.

O idioma adicionado ao elemento <html> é aplicado em cascata a todos os elementos contidos. Portanto, sempre defina o idioma principal do atributo lang de nível superior da página primeiro.

Para elementos na página escritos em um idioma diferente, adicione esse atributo lang ao elemento de wrapper apropriado. Isso vai substituir a configuração de idioma de nível superior até que esse elemento seja fechado.

O que não fazer
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
O que fazer
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iFrames

O elemento iFrame (<iframe>) é usado para hospedar outra página HTML ou o conteúdo de terceiros na página. Ele basicamente coloca outra página da Web na página principal. Os iFrames são comumente usados para anúncios, vídeos incorporados, análise da Web e conteúdo interativo.

Para tornar o <iframe> acessível, há alguns aspectos a serem considerados. Primeiro, cada <iframe> com conteúdo distinto precisa incluir um elemento de título dentro da tag pai. Esse título fornece aos usuários do AT mais informações sobre o conteúdo da <iframe>.

Em segundo lugar, como prática recomendada, é bom definir a rolagem como "automático" ou "sim" nas configurações da tag <iframe>. Isso permite que pessoas com baixa visão rolem o conteúdo dentro do <iframe> que, de outra forma, não conseguiriam ver. O ideal é que o contêiner <iframe> também seja flexível em altura e largura.

O que não fazer
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
O que fazer
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

Teste seu conhecimento

Teste seus conhecimentos sobre acessibilidade de documentos.

Seu site é um livro didático on-line multilíngue, em que vários idiomas são mostrados em uma página. Qual é a melhor maneira de informar a tecnologia adaptativa sobre o idioma da cópia?

Não se preocupe, o AT pode ler automaticamente cada idioma.
Embora alguns ATs tenham habilidades de detecção de idioma, não é possível garantir que o AT vai adivinhar corretamente.
Inclua todas as línguas no elemento <html>. Por exemplo, <html lang="en,lt,pl,pt">
O atributo lang só pode ter um idioma associado.
Defina um lang principal para o <html> e outros idiomas em qualquer elemento que tenha conteúdo em um idioma diferente.
O AT vai depender principalmente do atributo de idioma <html> para ler o documento. Se você tiver texto em vários idiomas, adicione um atributo lang ao elemento correspondente (como uma seção ou um parágrafo) com o código ISO de duas letras correto.