O documento

Além da estrutura, existem muitos elementos HTML de suporte a serem considerados ao e criar e projetar pensando na acessibilidade digital. Ao longo do aprendizado no curso Acessibilidade, abordamos muitos elementos.

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

Título da página

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

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

Títulos descritivos de página são bons para os usuários e otimização de mecanismos de pesquisa (SEO), mas não exagere e adicione muitas palavras-chave. Como o título é o primeiro anunciada quando um usuário das TAs visita uma página, ela deve ser precisa, única e descritivos, mas também concisos.

Ao escrever títulos de páginas, também é uma prática recomendada "carregar antecipadamente" o interior página ou conteúdo importante primeiro e, em seguida, adicione as páginas ou informações anteriores depois. Dessa forma, os usuários de TA não precisam lidar com as informações que têm já ouvido.

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, já que isso sinaliza à AT qual idioma deve ser usado.

Recomendamos que você use caracteres Códigos de idioma ISO para uma maior cobertura de TA, já que muitos deles não têm suporte códigos de idioma estendidos.

Quando um atributo de idioma está completamente ausente, a TA assumirá como padrão o linguagem programada do usuário. Por exemplo, se uma TA foi definida para espanhol, mas uma um usuário visita um site ou app em inglês, a TA tenta ler o inglês texto com sotaques e cadência em espanhol. Essa combinação resulta em um erro produto digital 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>
Definir apenas o idioma principal da página. Nesse caso, o idioma é o árabe.

Idioma da seção

Você também pode usar o atributo de idioma (lang) para mudanças de idioma no próprio conteúdo. As mesmas regras básicas se aplicam ao atributo de idioma de página inteira, mas você o adiciona ao elemento in-page apropriado, e não à tag <html>.

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

Para elementos in-page escritos em um idioma diferente, adicione lang. ao elemento wrapper apropriado. Isso substituirá a configuração de idioma de nível superior até que o 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>) é usados para hospedar outra página HTML ou conteúdo de terceiros na página. Ela coloca outra página da Web dentro da página principal. Os iframes geralmente são usados para anúncios, vídeos incorporados, análises da web e recursos conteúdo.

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

Segundo, é recomendável definir a rolagem como "automática" ou "sim" nas configurações da tag <iframe>. Isso permite que pessoas com baixa visão possam rolar para um conteúdo no <iframe> que elas não veriam de outra forma. 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 em vários idiomas, em que uma única página mostra diversos idiomas. Qual é a melhor maneira de dizer à tecnologia assistiva o idioma do texto?

Não se preocupe, a TA consegue ler cada idioma automaticamente.
Embora alguns TAs possam detectar idiomas, não é possível garantir que eles adivinhem corretamente.
Inclua todos os idiomas no elemento <html>. Por exemplo, <html lang="en,lt,pl,pt">.
O atributo lang só pode ter um idioma associado a ele.
Defina um lang principal para o <html> e idiomas adicionais em qualquer elemento que tenha conteúdo em um idioma diferente.
A AT usará principalmente o 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 parágrafo) com o código ISO de duas letras correto.