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.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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.
<html>...</html>
<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.
<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 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.
<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 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.
<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 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?
<html>
. Por exemplo, <html lang="en,lt,pl,pt">
.lang
só pode ter um idioma associado a ele.lang
principal para o <html>
e idiomas adicionais em qualquer elemento com conteúdo em outro 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.