Além da estrutura, há muitos elementos HTML de suporte a serem considerados ao criar e projetar para acessibilidade digital. Ao longo do 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 um usuário está prestes a
acessar. Ele é encontrado na seção <head> de um documento HTML e é equivalente ao <h1> ou ao tema principal da página. O conteúdo do título é mostrado na guia do navegador e ajuda os usuários a entender qual página estão visitando, mas não aparece no site ou app em si.
Em um app de página única (SPA),
o <title> é processado de maneira um pouco diferente, já que os usuários não navegam
entre 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 de JavaScript. Anunciar os títulos de página atualizados para um usuário de leitor de tela pode exigir um trabalho extra.
Títulos de página descritivos são bons para usuários e 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ágina, também é recomendável "carregar na frente" a página interna ou o conteúdo importante primeiro e, em seguida, adicionar páginas ou informações anteriores. Assim, os usuários de TA não precisam ouvir informações que já ouviram.
<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 todas as páginas, já que ele indica à tecnologia assistiva qual idioma usar.
Recomendamos usar códigos de idioma ISO de dois caracteres para aumentar a cobertura de AT, já que muitos deles não são compatíveis com códigos de idioma estendidos.
Quando um atributo de idioma está completamente ausente, a TA usa o idioma programado do usuário por padrão. Por exemplo, se uma AT estiver definida como espanhol, mas um usuário acessar um site ou app em inglês, a 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.
<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 da página inteira, exceto que você o adiciona ao elemento in-page apropriado em vez da tag <html>.
Lembre-se de que o idioma adicionado ao elemento <html> é transmitido para todos os elementos contidos. Portanto, sempre defina primeiro o idioma principal do atributo lang de nível superior da página.
Para qualquer elemento in-page escrito em um idioma diferente, adicione o atributo lang
ao elemento wrapper apropriado. Isso vai 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>) é usado para hospedar outra página HTML ou conteúdo de terceiros na página. Ele essencialmente 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álise da Web e conteúdo interativo.
Para tornar seu <iframe> acessível, há alguns aspectos a serem considerados. Primeiro, cada <iframe> com conteúdo diferente precisa incluir um elemento de título na tag mãe. Esse título fornece aos usuários de TA mais informações sobre o conteúdo dentro do <iframe>.
Em segundo lugar, como prática recomendada, é bom definir a rolagem como "automática" ou "sim" nas configurações da tag <iframe>. Isso permite que pessoas com baixa visão rolem o conteúdo no <iframe> que talvez não consigam ver 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>