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.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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.
<html>...</html>
<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.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
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.
<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>
<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.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<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?
<html>
. Por exemplo, <html lang="en,lt,pl,pt">
.lang
principal para o <html>
e idiomas adicionais em qualquer elemento que tenha conteúdo em um idioma diferente.