Passo 1 de 6
Localizar e ler as informações de acessibilidade
Inspecione um título no navegador e identifique seu papel semântico, nome acessível e nível, distinguindo essas informações da estrutura do DOM.
Trilha de aprendizado · Nível 7 · Tutorial 8
Ao concluir, você será capaz de revisar a hierarquia de títulos e a identificação dos elementos interativos, usando a inspeção do navegador como apoio e reconhecendo o que verificações automáticas não conseguem garantir.
Localizar e ler as informações de acessibilidade
Inspecione um título no navegador e identifique seu papel semântico, nome acessível e nível, distinguindo essas informações da estrutura do DOM. 3 min
Revisar os títulos na ordem do documento
Compare nomes e níveis dos títulos com a organização do conteúdo e justifique ajustes sem depender da aparência. 3 min
Conferir nomes de links e botões
Compare a identificação visível, o nome calculado pelo navegador e a finalidade de links e botões no contexto. 3 min
Conferir a identificação dos campos
Compare rótulos, nomes calculados e contexto de grupo para identificar problemas na identificação dos campos. 3 min
Reconhecer os limites das ferramentas
Diferencie o que as ferramentas conseguem verificar do que exige julgamento humano e outras formas de teste. 2 min
Aplicar a revisão e registrar as conclusões
Revise uma página do seu site, registre evidências, faça ajustes necessários e confira o resultado sem ampliar indevidamente a conclusão. 4 min
Passo 1 de 6
Inspecione um título no navegador e identifique seu papel semântico, nome acessível e nível, distinguindo essas informações da estrutura do DOM.
Use o Chrome no computador, com as ferramentas do desenvolvedor em pt-BR.
h1 a h6).») dessa lateral.Dica
A localização dos painéis e os rótulos variam entre navegadores e versões. O papel pode aparecer como Função ou role; o nome, como Nome ou name; e o nível, como level.
Você selecionou um título e encontrou estas propriedades. Relacione cada uma ao que ela informa.
Toque em um item e depois no par correspondente.
O DOM mostra a estrutura do documento. A árvore de acessibilidade representa as informações expostas às tecnologias assistivas. Não existe uma correspondência obrigatória entre todos os nós: alguns contêineres podem não aparecer como nós próprios, enquanto seu conteúdo continua representado.
<div>
<h2><span>Serviços</span></h2>
</div>Exemplo
Com esse trecho na página, ao selecionar o h2, você encontra papel de título (heading), nome “Serviços” e nível 2. O texto dentro de span contribui para o nome do título; não é necessário que cada elemento do DOM tenha um nó próprio na árvore de acessibilidade.
Abra uma página do seu site e selecione um título em Elementos. Consulte Acessibilidade e registre o elemento selecionado, o papel, o nome e o nível observados — não responda apenas olhando a tag.
Depois, responda: a presença de uma div no DOM garante um nó próprio na árvore de acessibilidade? Justifique.
Escreva pelo menos 30 caracteres (0/30).
Passo 2 de 6
Compare nomes e níveis dos títulos com a organização do conteúdo e justifique ajustes sem depender da aparência.
Percorra os elementos na ordem do documento, usando o DOM como referência de sequência. Para cada elemento exposto com papel de título, anote seu nome e nível.
Não reordene a lista pelo tamanho da fonte ou pela posição visual. Compare o levantamento com a organização pretendida: quais conteúdos são seções, quais são subseções e quais estão no mesmo nível?
Dica
Um salto de nível 2 para 4 merece investigação no contexto. Já um retorno de 3 para 2 pode encerrar uma subseção e iniciar outra seção: não é um erro automático.
Fotografia e Cerâmica são seções de mesma importância. Materiais é uma subseção de Fotografia.
A inspeção mostra, nesta ordem:
Afirmação: Cerâmica deve mudar para nível 4, pois os níveis precisam continuar aumentando.
Confira também os textos que parecem abrir seções, mas não apareceram no levantamento. Considere este trecho: “Regras de participação” abre uma seção do mesmo nível de “Programação”, cujo título foi exposto como nível 2.
<p><strong>Regras de participação</strong></p>Exemplo
A inspeção não mostra papel de título nem nível de título para esse trecho. Registre essa ausência separadamente: não atribua um nível pela aparência.
Neste contexto, substituir a marcação por <h2>Regras de participação</h2> representa a seção pretendida. O negrito, sozinho, não fazia isso.
Na página “Guia do parque”, Passeios e Contato são seções do mesmo nível. Trilhas e Lagos são subseções diretas de Passeios, também no mesmo nível entre si.
Exemplo
<h1>; título, nível 1.<h2>; título, nível 2.<h4>; título, nível 4.<p><strong>Lagos</strong></p>; texto destacado, sem papel de título.<h2>; título, nível 2.Proponha duas correções na marcação e justifique os níveis escolhidos. Explique também se Contato precisa mudar de nível.
Escreva pelo menos 40 caracteres (0/40).
Passo 3 de 6
Compare a identificação visível, o nome calculado pelo navegador e a finalidade de links e botões no contexto.
Selecione o próprio <a> ou <button> e confira seu papel e nome nas informações de acessibilidade. Se o inspetor selecionar uma imagem ou outro elemento interno, suba até o link ou botão que o contém.
Investigue também de onde vem o nome: use a origem indicada pelo painel, quando disponível, e confira a marcação.
Exemplo
alt="Página inicial" pode fornecer o nome do link.Confirme o resultado no controle completo: o nome da imagem, sozinho, não comprova o nome do link.
Um botão de busca mostra apenas uma lupa. Ao selecionar o próprio <button>, você encontra papel “botão” e nome vazio. A imagem interna tem alt="" e não há outra fonte de nome. Qual diagnóstico é sustentado por essas informações?
Compare o texto visível, o nome calculado e a finalidade no contexto. O texto visível deve estar contemplado no nome, mas não é necessário que sejam literalmente iguais. Verifique também se a identificação comunica o destino do link ou a ação do botão.
Exemplo
Um link contém o texto “Baixar guia” e um ícone com alt="PDF". O nome calculado é “Baixar guia PDF”, e o destino é o guia nesse formato. O nome preserva o texto visível e acrescenta uma informação útil.
Dica
“Saiba mais” é um nome existente, não um nome vazio. Avalie se o contexto esclarece sobre o que é o link. Repetições merecem investigação quando dificultam distinguir finalidades diferentes; repetir “Contato” para a mesma página não é, por si só, um problema.
Relacione cada observação ao diagnóstico mais adequado. Todos os nomes foram conferidos no próprio link ou botão.
Toque em um item e depois no par correspondente.
Passo 4 de 6
Compare rótulos, nomes calculados e contexto de grupo para identificar problemas na identificação dos campos.
Selecione o próprio campo no inspetor e compare seu rótulo visível com o nome acessível calculado. Confira separadamente a descrição complementar e o valor atual: encontrar algum texto nessas propriedades não significa encontrar o nome esperado.
Exemplo
Rótulo visível: Nome completo.
Na inspeção:
Dica
Se o nome estiver vazio ou diferente do esperado, consulte sua origem, quando disponível. Na marcação, confira qual label está associado ao campo e, se usa for, qual id ele referencia. A proximidade visual não comprova a associação.
Relacione cada observação à interpretação adequada.
Toque em um item e depois no par correspondente.
Se a única identificação visível é um placeholder, preencha o campo e observe: a dica desaparece. O navegador pode usá-la como fonte do nome na falta de outra fonte, mas isso não oferece um rótulo visível persistente. Confira tanto a origem do nome quanto o rótulo associado.
Exemplo
Uma página tem os grupos “Endereço de entrega” e “Endereço de cobrança”, cada um com um campo rotulado “Cidade”.
Inspecione cada fieldset e confira o nome fornecido pela legend. Depois, confira o nome de cada campo. O contexto do grupo distingue as finalidades; não presuma que a legenda será incorporada ao nome “Cidade” nem que substituirá seu rótulo individual.
No grupo “Endereço de entrega”, um campo só exibe o placeholder “Cidade”. Ao digitar “Recife”, a dica desaparece. Neste caso, a inspeção mostra nome “Cidade”, com origem no placeholder. Qual é o diagnóstico?
Passo 5 de 6
Diferencie o que as ferramentas conseguem verificar do que exige julgamento humano e outras formas de teste.
Um campo destinado ao e-mail tem o rótulo “Dado” corretamente associado e o nome acessível “Dado”. Confirmar essa associação basta para afirmar que o campo comunica adequadamente sua finalidade.
O painel mostra informações expostas, mas não reproduz integralmente a experiência com tecnologias assistivas. Julgar se os títulos representam a organização do conteúdo e se os nomes são claros no contexto continua exigindo avaliação humana.
Dica
Essas abordagens complementam a inspeção; nenhuma, isoladamente, comprova acessibilidade completa.
Um verificador automático terminou sem alertas. O que esse resultado permite afirmar?
Passo 6 de 6
Revise uma página do seu site, registre evidências, faça ajustes necessários e confira o resultado sem ampliar indevidamente a conclusão.
Escolha uma página curta do seu pequeno site que contenha títulos, link, botão e campo. Registre o arquivo e o navegador com a versão usada.
Dica
Use os valores exibidos pelo navegador. Se não conseguiu inspecionar um elemento, registre a pendência. Um resultado esperado após editar o HTML ainda não é uma evidência de nova inspeção.
Exemplo
Exemplo ilustrativo de uma revisão:
O registro conecta evidência, diagnóstico, alteração e resultado — não apenas “corrigido”.
A correção usa apenas HTML nativo já conhecido.
<label for="email">E-mail</label>
<input type="email" id="email" name="email">Conclua a revisão da página escolhida. Corrija os problemas encontrados no arquivo com HTML conhecido, salve, atualize a página e inspecione novamente os elementos alterados.
Entregue a lista dos títulos em ordem e o registro de cada link, botão e campo. Inclua evidências, justificativa, ajuste e resultado da nova inspeção. Para elementos sem problemas, registre “mantido” e explique por quê; não faça alterações desnecessárias.
Finalize delimitando o que foi revisado, as pendências e os testes complementares ainda necessários.
Escreva pelo menos 150 caracteres (0/150).
Resumo
Estrutura válida, funcionamento e semântica precisam ser examinados de forma complementar.
Parabéns! Você concluiu: Conferir títulos e nomes acessíveis no navegador
Guarde seu registro e use o mesmo ciclo nas próximas alterações do site: observar, justificar, ajustar e conferir.
Você concluiu a trilha
Parabéns! Você passou por todos os tutoriais desta trilha.
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