Passo 1 de 6
Da estrutura do HTML aos caminhos de leitura
Entenda como um leitor de tela usa a ordem do documento e as informações semânticas para oferecer diferentes caminhos de leitura.
Trilha de aprendizado · Nível 3 · Tutorial 3
Relacionar a marcação semântica às formas de localizar conteúdo com um leitor de tela, distinguindo a navegação por regiões da navegação por títulos.
Da estrutura do HTML aos caminhos de leitura
Entenda como um leitor de tela usa a ordem do documento e as informações semânticas para oferecer diferentes caminhos de leitura. 2 min
Encontrar regiões por marcos de navegação
Associe main, nav e aside aos marcos que permitem localizar regiões com um leitor de tela. 2 min
Distinguir cabeçalhos e rodapés da página e do conteúdo
Preveja quando header e footer são expostos como marcos globais, considerando seus ancestrais no HTML. 2 min
Reconhecer os limites da navegação por marcos
Distinguir agrupamentos semânticos de marcos e reconhecer que a ausência de um marco não impede a leitura do conteúdo. 2 min
Comparar navegação por marcos e por títulos
Observe dois percursos na mesma página e escolha como combinar regiões e títulos para localizar conteúdo. 3 min
Aplicação final: prever e escolher percursos
Analise um trecho de HTML, identifique os marcos e títulos e justifique um caminho para localizar uma informação. 3 min
Passo 1 de 6
Entenda como um leitor de tela usa a ordem do documento e as informações semânticas para oferecer diferentes caminhos de leitura.
Um leitor de tela é uma tecnologia assistiva que apresenta, por voz ou em braille, conteúdo e informações semânticas disponibilizadas pelo navegador. Assim, pode comunicar a função dos elementos, não apenas suas palavras visíveis.
Dica
Em uma página HTML simples, a ordem dos elementos no documento serve de base para a sequência de leitura.
Considere este trecho sem estilos ou scripts.
<main>
<h1>Biblioteca do bairro</h1>
<p>Conheça nossos serviços.</p>
<h2>Horários</h2>
<p>Abertura às 9h.</p>
</main>Ordene os blocos de texto conforme a leitura sequencial, do início ao fim.
Leitura sequencial: acompanhar o conteúdo na ordem do documento.
Navegação pela estrutura: usar os pontos de acesso que o leitor de tela oferece com base na semântica para localizar partes específicas, sem percorrer tudo o que vem antes.
O usuário pode chegar a uma dessas partes e continuar a leitura dali.
Uma pessoa procura uma informação no meio de uma página longa. O leitor de tela oferece um ponto de acesso pela estrutura próximo dela. O que a pessoa pode fazer?
Passo 2 de 6
Associe main, nav e aside aos marcos que permitem localizar regiões com um leitor de tela.
Um marco de navegação é uma região identificável que o leitor de tela pode oferecer para acesso direto.
Com sua semântica nativa, estes elementos são expostos como marcos:
main → conteúdo principal;nav → navegação;aside → conteúdo complementar.Dica
No código, você escreve a tag main. Na navegação por marcos, o leitor de tela apresenta sua função de região principal, em vez de ler a tag como código.
Relacione cada elemento HTML ao marco correspondente à sua semântica nativa.
Toque em um item e depois no par correspondente.
Observe as três regiões neste trecho do corpo da página:
<nav>
<a href="catalogo.html">Catálogo</a>
<a href="contato.html">Contato</a>
</nav>
<main>
<p>Programação de oficinas: escrita criativa aos sábados.</p>
</main>
<aside>
<p>Dica para a visita: há um bicicletário ao lado da entrada.</p>
</aside>Dica
Com os comandos de navegação por marcos do leitor de tela, é possível chegar ao conteúdo principal sem ler os links anteriores. A região em si não precisa ser um link ou botão.
Na página da biblioteca que você acabou de ver, uma pessoa quer chegar à programação de oficinas sem ler os links do menu. Qual marco ela deve procurar?
Passo 3 de 6
Preveja quando header e footer são expostos como marcos globais, considerando seus ancestrais no HTML.
No escopo da página, a marcação nativa permite expor:
header como marco de banner;footer como marco de informações de conteúdo.Já dentro de article ou section, esses elementos mantêm sua função semântica local, mas não recebem automaticamente esses marcos globais. Não basta encontrar a tag: é preciso observar seu contexto.
Dica
Os nomes anunciados podem mudar conforme o leitor de tela, o navegador e o idioma. Aqui, usamos “banner” e “informações de conteúdo”.
<body>
<header>Portal</header>
<main>
<article>
<header>Notícia</header>
<p>Texto da notícia.</p>
<footer>Autoria</footer>
</article>
</main>
<footer>Contato</footer>
</body>Qual par pode ser exposto como banner e informações de conteúdo, respectivamente?
A regra considera todos os ancestrais: se header ou footer estiver dentro de article, aside, main, nav ou section, não recebe automaticamente seu papel global de banner ou informações de conteúdo.
<main>
<div>
<header>Apresentação do conteúdo</header>
<p>Conteúdo principal.</p>
</div>
</main>Exemplo
O pai direto desse header é div, mas main também é ancestral. Por isso, esse header não é exposto como banner. Sua posição visual não altera essa relação.
<body>
<section>
<h1>Informações do evento</h1>
<p>Confira a programação.</p>
<div>
<footer>Atualizado hoje.</footer>
</div>
</section>
</body>Por estar no final do documento, esse footer é exposto como marco global de informações de conteúdo.
Passo 4 de 6
Distinguir agrupamentos semânticos de marcos e reconhecer que a ausência de um marco não impede a leitura do conteúdo.
Nem todo agrupamento entra na lista de marcos:
Dica
A ausência de um agrupamento na lista de marcos não impede, por si só, a leitura de seu conteúdo. A leitura sequencial continua sendo um caminho para alcançá-lo.
Um article não apareceu na lista de marcos. Isso basta para concluir que o leitor de tela não consegue ler seus parágrafos.
Uma section é exposta como marco de região quando possui nome acessível: uma identificação da própria seção disponibilizada à tecnologia assistiva.
Sem esse nome, section não é um marco por padrão.
Atenção
Colocar um h2 dentro de section não atribui automaticamente um nome acessível à seção. O título organiza o conteúdo, mas sua presença, sozinha, não transforma a seção em marco.
<main>
<h1>Novidades e horários</h1>
<article>
<h2>Nova oficina</h2>
<p>A oficina de desenho começa em maio.</p>
</article>
<section>
<h2>Horários</h2>
<p>As atividades começam às 14h.</p>
</section>
<div>
<p>Inscrições gratuitas.</p>
</div>
</main>Considerando apenas este HTML, qual previsão está correta?
Passo 5 de 6
Observe dois percursos na mesma página e escolha como combinar regiões e títulos para localizar conteúdo.
Os marcos ajudam a localizar regiões funcionais. Já os títulos h1 a h6 oferecem pontos de navegação por assuntos e subdivisões: o leitor de tela pode anunciar o texto do título e seu nível.
Observe este trecho da página que será usada na demonstração:
<header>
<h1>Visita ao museu</h1>
</header>
<nav>
<a href="exposicoes.html">Exposições</a>
</nav>
<main>
<p>Bem-vindo.</p>
<h2>Horários</h2>
<p>Das 9h às 17h.</p>
<h3>Feriados</h3>
<p>Consulte o calendário.</p>
<h2>Ingressos</h2>
<p>Entrada gratuita.</p>
</main>Dica
Ao avançar pelo próximo título, sem filtrar por nível, você segue a ordem do documento. O nível comunica hierarquia: ele não coloca todos os títulos de nível 2 antes dos de nível 3.
Na página do museu, ao avançar por todos os títulos desde o início, “Ingressos” será encontrado antes de “Feriados”, porque seu nível é menor.
Ambiente de referência: NVDA 2024.4.2, Firefox 128.5.2 ESR e Windows 11 23H2, com voz em pt-BR e modo de navegação.
Observe qual destino é identificado em A e em B. Não é necessário instalar o leitor nem memorizar teclas: os comandos e anúncios podem variar entre ambientes.
Reproduza novamente se quiser comparar os anúncios. A transcrição descritiva acompanha o vídeo.
A identifica uma região funcional; B identifica um título dentro dela.
A página “Visita ao museu” permanece aberta durante toda a demonstração. O ponto de partida é o link “Exposições”, na navegação.
Narração: “Compare.”
A: um comando de navegação por marcos leva à região principal. Um contorno identifica essa região. O NVDA anuncia a região principal e lê “Bem-vindo”. Há uma pausa para reconhecer o destino.
B: um comando de próximo título leva a “Horários”, dentro da região principal. O contorno passa a destacar esse título. O NVDA anuncia “Horários” e seu nível 2. A imagem permanece nesse destino por um breve intervalo.
Dica
Você pode chegar ao conteúdo principal por um marco e depois procurar um assunto pelos títulos. Os comandos de próximo título, porém, não ficam automaticamente limitados à região atual: ao continuar, podem alcançar títulos fora dela.
Associe os movimentos observados e a estratégia de busca às suas finalidades.
Toque em um item e depois no par correspondente.
Passo 6 de 6
Analise um trecho de HTML, identifique os marcos e títulos e justifique um caminho para localizar uma informação.
Analise este HTML. Nas próximas telas, relacione seus elementos aos marcos esperados e proponha um percurso até a informação sobre o prazo. Considere a marcação apresentada, sem alterações por scripts.
<body>
<header><p>Biblioteca do bairro</p></header>
<nav><a href="acervo.html">Acervo</a></nav>
<main>
<h1>Visite a biblioteca</h1>
<article>
<header><h2>Empréstimos</h2></header>
<section>
<h3>Prazos</h3>
<div><p>Devolva os livros em 14 dias.</p></div>
</section>
<footer><p>Regras atualizadas em maio.</p></footer>
</article>
</main>
<aside><h2>Atividades</h2><p>Clube de leitura aos sábados.</p></aside>
<footer><p>Contato na recepção da biblioteca.</p></footer>
</body>Associe cada elemento do trecho à informação esperada para a navegação por marcos.
Toque em um item e depois no par correspondente.
Com base no mesmo HTML, responda brevemente:
Escreva pelo menos 30 caracteres (0/30).
Resumo
Parabéns! Você concluiu: Relacionar regiões e títulos à navegação por leitor de tela
Você concluiu “Relacionar regiões e títulos à navegação por leitor de tela”. Use esses critérios para prever caminhos de leitura em outras páginas.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
