O documento

Além da estrutura, existem muitos elementos HTML de suporte a serem considerados ao criar e projetar para acessibilidade digital. No curso "Aprenda 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 está prestes a acessar. É encontrado 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 é exibido na guia do navegador e ajuda os usuários a entender qual página eles estão visitando, mas não no site ou no app.

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

Títulos de página 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 é o primeiro anunciado quando um usuário de TA visita uma página, ele precisa ser preciso, exclusivo e descritivo, mas também conciso.

Ao escrever títulos de páginas, também é uma prática recomendada "carregar" 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 da TA não precisam passar pelas informações que já ouviram.

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>

linguagem

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 deve ser adicionado a todas as páginas, já que indica ao AT qual idioma deve ser usado.

É recomendável usar códigos de idioma ISO de dois caracteres para 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, a AT usa o idioma programado do usuário por padrão. Por exemplo, se um TA estiver definido como o espanhol, mas um usuário acessar 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 em um usuário frustrado.

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

O atributo lang pode ter apenas um idioma associado a ele. Isso significa que o atributo <html> só pode ter um idioma, mesmo que haja vários 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 é o árabe.

Idioma da seção

Você também pode usar o atributo de idioma (lang) para mudar o idioma no conteúdo. As mesmas regras básicas se aplicam ao atributo de idioma de página inteira, mas você precisa adicioná-lo ao elemento in-page adequado e não à tag <html>.

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

Para elementos in-page escritos em outro idioma, adicione o atributo lang ao elemento do wrapper adequado. 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. Basicamente, ele coloca outra página da Web na página principal. Os iframes são usados com frequência para anúncios, vídeos incorporados, análises da Web e conteúdo interativo.

Para que seu <iframe> seja acessível, você precisa considerar alguns aspectos. Primeiro, cada <iframe> com conteúdo diferente precisa incluir um elemento de título dentro da tag mãe. Esse título fornece aos usuários do AT mais informações sobre o conteúdo de <iframe>.

Em segundo lugar, como prática recomendada, é bom definir a rolagem como "auto" ou "yes" nas configurações da tag <iframe>. Isso permite que pessoas com baixa visão rolem para conteúdos no <iframe> que não conseguiriam ver 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 on-line em vários idiomas que mostra diversos idiomas em uma página. Qual é a melhor maneira de dizer à tecnologia assistiva o idioma da cópia?

Não se preocupe, a AT consegue ler automaticamente cada idioma.
Embora algumas TAs possam ter habilidades de detecção de idioma, não é possível garantir que a TA vai adivinhar 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 com conteúdo em outro idioma.
A AT vai usar principalmente o atributo de idioma <html> para ler o documento. Se você tiver textos 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.