Transcrição Episódio 10 Podcast Todos na Web

A transcrição foi levemente editada para melhorar a fluidez e a leitura, mantendo o sentido e a intenção das falas originais.

[Reinaldo]
Olá, pessoal!
Eu sou Reinaldo Ferraz, especialista em acessibilidade digital do Ceweb.br. Sou um homem branco, de cabelos castanhos claros e lisos, olhos verdes, com uma barba cerrada que está ficando branca. Estou usando uma camisa preta com o logo do Ceweb. Meu sinal em Libras é fazer a letra C com a mão e passar no rosto, da orelha até o queixo, passando pela barba.
Bom, hoje eu vou conversar aqui com o Sidney e com a Cláudia. São dois grandes especialistas em acessibilidade digital que contribuíram muito para a construção dessa norma da ABNT, e eu queria que eles se apresentassem para o episódio de hoje.
________________________________________
[Cláudia]
Olá, eu sou a Cláudia Martin Nascimento. Agradeço por essa oportunidade de estar aqui com vocês.
Eu sou uma mulher branca, de pele clara, cabelos castanhos escuros na altura dos ombros e olhos castanhos escuros. Uso óculos. Estou vestindo uma malha preta com um casaquinho cinza por cima.
Sou designer por formação, trabalho com acessibilidade há mais ou menos 13 anos e hoje sou especialista em acessibilidade digital na minha empresa, Acesso para Todos.
________________________________________
[Sidney]
Olá, pessoas, eu sou o Sidney Tobias. Sou um homem de cabelos e olhos castanhos, nariz núbio, pardo. Hoje estou usando um pulôver marrom.
Meu sinal em Libras é formado pela letra “S”, que é a mão fechada, tipo um soquinho, com o polegar entre o indicador e o médio. Depois, a letra “Y” em Libras, com o dedo mínimo apontado para cima e o polegar também, elevando a mão para o alto.
Sou analista de sistemas da PRODAM e consultor de acessibilidade digital e comunicacional da Secretaria Municipal da Pessoa com Deficiência, a SMPED.
________________________________________
[Reinaldo]
Legal! Hoje o tema da nossa conversa é falar sobre cabeçalhos.
Cabeçalhos são itens importantes para a web e são fundamentais para estruturar uma página ou uma aplicação. Não se trata apenas de acrescentar cabeçalhos, mas também de trabalhar a hierarquia desses cabeçalhos.
E isso tem um impacto muito grande para a acessibilidade. Então, a ideia aqui é aproveitar a Cláudia e o Sidney para conversar e esclarecer essas dúvidas sobre o que devemos fazer para tornar as nossas páginas mais acessíveis, considerando uma estrutura de cabeçalhos adequada.
Bom, começando com uma introdução sobre esse tema, acho que vale a pena imaginar uma situação em que a gente tenha a leitura de um conteúdo todo em texto corrido, com uma quantidade enorme de textos, ou então em que esses textos tenham alguma diferenciação, mas sem diferenciação de tamanho, peso ou posicionamento na página.
Isso tem um impacto muito grande. Imagine ler um texto comprido sem nenhum cuidado com estruturação. Agora, imagine navegar em um site com todo o texto corrido e saber que há áreas importantes ali que estão marcadas visualmente, mas que muitas vezes não estão marcadas de forma correta.
Para começar, eu queria pedir para vocês contextualizarem um pouco essa questão dos cabeçalhos e explicarem por que eles são importantes, especialmente para usuários de leitores de tela, mas também em outros aspectos relacionados ao seu uso.
________________________________________
[Cláudia]
Bom, os cabeçalhos são títulos que existem na página. Incluímos títulos para identificar seções de conteúdo e, quando criamos esses cabeçalhos da forma correta, com a semântica adequada no HTML, organizamos o conteúdo visualmente.
Então, fica mais claro para quem enxerga a tela identificar as seções de conteúdo, percorrê-las mais rapidamente e entender como o conteúdo está organizado. Mas, além disso, os cabeçalhos criados com a semântica correta também são um importante mecanismo de navegação para pessoas com deficiência.
Quem não pode ver a tela e navega com um leitor de tela consegue percorrer partes da página a partir dos cabeçalhos de forma mais rápida e entender como esses conteúdos estão organizados. Consegue compreender a subordinação desses conteúdos e identificar qual conteúdo pertence a qual parte da página.
A norma ABNT 17225 traz requisitos e recomendações para que possamos criar os cabeçalhos de forma correta, seja por meio da semântica utilizada para organizar os títulos e seus diferentes níveis em uma ordem hierárquica e lógica. Tudo isso facilita a compreensão e a navegação pelas páginas.
________________________________________
[Sidney]
Então, eu, assim como outras pessoas cegas, que utilizam leitores de tela para navegar pela página. A pessoa que enxerga bate o olho e já vê aquela página inteira. Nós utilizamos principalmente os cabeçalhos.
Quando entramos na página, utilizamos a tecla de atalho “H” para acessar todos os cabeçalhos. Assim, já temos uma visão geral imediata de como aquela página está organizada. Se não há cabeçalhos, perdemos essa noção da organização da página.
________________________________________
[Reinaldo]
E acho que é bacana comentar sobre a norma da ABNT por ela ter uma área específica dedicada aos cabeçalhos. Isso mostra o quanto esse tema é importante. A norma traz uma série de orientações específicas para cabeçalhos, reforçando que esse é um componente fundamental do HTML para a acessibilidade.
Aproveitando esse ponto, eu queria fazer um comentário interessante. Quando falamos de cabeçalhos, estamos tratando de algo útil para qualquer profissional envolvido com desenvolvimento web. Seja um designer, que vai pensar no tamanho dos elementos da página; seja o pessoal de desenvolvimento, responsável por codificar os cabeçalhos com o peso semântico adequado; ou ainda o pessoal de conteúdo, que organiza toda a estrutura da página e faz a sua marcação.
Por isso, acho muito legal a norma ter um capítulo específico para falar sobre cabeçalhos, porque esse tema envolve todas as áreas. Todo mundo que trabalha com desenvolvimento de aplicações precisa conhecer a hierarquia de cabeçalhos, até porque utilizamos esse conceito no nosso dia a dia para produzir documentos.
Quando criamos um documento em um editor de texto, normalmente utilizamos cabeçalhos para estruturar o conteúdo. Então, se fazemos isso em um documento do Word, por que não faríamos no HTML?
Queria trazer um ponto para começarmos a discussão, relacionado principalmente às barreiras que ainda encontramos. Pode parecer estranho para quem está muito próximo do desenvolvimento, mas ainda existem páginas e aplicações que não utilizam cabeçalhos ou que não fazem a marcação dos blocos de conteúdo e de seus itens por meio de elementos de cabeçalho.
Gostaria que vocês comentassem um pouco sobre isso: sobre a utilização dos cabeçalhos, quais são as vantagens de aplicá-los e por que isso também é importante para a acessibilidade.
________________________________________
[Cláudia]
Quando colocamos cabeçalhos apenas de forma visual, ou simplesmente não utilizamos cabeçalhos, para uma pessoa que não pode ver a tela é como se ela estivesse diante de um grande bloco de texto corrido. Ela não consegue perceber quais são as partes do conteúdo, como esse conteúdo está organizado, e a leitura acaba ficando muito mais difícil.
Imagine que você está lendo uma notícia enorme e ela não está dividida em capítulos, títulos ou subtítulos. Ou imagine ler um livro que não tem um título na capa e não tem capítulos. Seria muito difícil fazer essa leitura.
Por isso, é muito importante que os cabeçalhos existam não apenas visualmente, mas também no código. No HTML, fazemos isso utilizando os cabeçalhos, os chamados “headers”, que vão do “H1” ao “H6”.
Temos seis níveis de cabeçalho. Começamos com o “H1”, que é o título principal e normalmente identifica o conteúdo da página. Depois temos o “H2”, que representa títulos secundários, seguido pelo “H3”, e assim sucessivamente até o “H6”.
Esses níveis de título permitem organizar a estrutura do conteúdo de forma lógica. Podemos pensar em uma hierarquia: temos um título de nível 1 e, dentro dele, vários títulos de nível 2. Dentro desses, podem existir títulos de nível 3, e assim por diante. Dessa forma, os cabeçalhos ajudam a organizar o conteúdo tanto visualmente quanto semanticamente.
Eu queria ouvir o Sidney sobre isso, porque ele consegue compreender essa organização dos conteúdos com mais facilidade e navegar entre essas partes do conteúdo utilizando os cabeçalhos.
________________________________________
[Sidney]
Sim, então é importante deixar isso bem claro: quando um título está visível, mas não foi definido como cabeçalho, para quem utiliza leitor de tela é como se não existisse cabeçalho algum ali. Nesse caso, ele não facilita a navegação. O resultado é a leitura de um único bloco de conteúdo, algo cansativo justamente pela falta de organização.
Agora, quando o conteúdo está organizado por cabeçalhos, eu consigo pular de um cabeçalho para outro até chegar exatamente ao ponto que me interessa. Posso localizar o conteúdo que quero ler e, a partir dali, fazer a leitura.
Por exemplo, pressiono a tecla “H” ou a tecla numérica correspondente aos níveis de cabeçalho. As teclas de “1” a “6” também funcionam como atalhos. Se pressiono “1”, vou diretamente para um cabeçalho de nível 1 e começo a leitura daquele conteúdo. Se percebo que não era exatamente o que eu procurava, pressiono “H” novamente e sigo para o próximo bloco de conteúdo. Isso facilita bastante a navegação.
Além disso, nós utilizamos essa estrutura de cabeçalhos para entender a própria organização da página. Como o nome sugere, trata-se de uma estrutura hierárquica, e as informações precisam estar organizadas dessa forma.
Se eu tenho um título principal, depois tenho um subtítulo, esse subtítulo corresponde ao nível 2. Se esse subtítulo ainda for subdividido, a próxima subdivisão será um nível 3, e assim por diante, até o nível 6.
Por ser uma estrutura hierárquica, não faz sentido pular níveis. Por exemplo, passar diretamente do nível 1 para o nível 4. Quando isso acontece, a impressão é de que alguma informação ficou faltando. Surge a dúvida: “Cadê o nível 2? Cadê o nível 3 desta página?”. E, infelizmente, ainda é comum encontrar situações assim, em que se pula do nível 1 para o nível 3 ou do nível 2 para o nível 5.
Outro problema frequente é a existência de dois cabeçalhos de nível 1 na mesma página. Isso gera a impressão de desorganização e levanta dúvidas sobre qual é, de fato, o assunto principal daquela página. Eu devo considerar o primeiro cabeçalho de nível 1 que encontrei? Ou o segundo? Quando isso acontece, a estrutura deixa de ser clara para quem está navegando, e isso acaba prejudicando a compreensão do conteúdo.
________________________________________
[Reinaldo]
O que acho interessante lembrar sobre a questão dos cabeçalhos é que diversas orientações de acessibilidade indicam que precisamos oferecer aos usuários formas de saltar conteúdos, localizar informações dentro da página e acessar áreas específicas com mais facilidade.
Os cabeçalhos também cumprem esse papel. Quando uma página não possui cabeçalhos, estamos retirando uma importante forma de navegação. Os usuários perdem uma referência para se localizar dentro da página e chegar rapidamente aos conteúdos mais importantes.
Eu fico imaginando a dificuldade que isso representa. Estávamos falando de páginas sem nenhum cabeçalho. Como fazer para navegar? Que elementos procurar? Como localizar o conteúdo dentro da página sem uma estrutura que organize essas informações?
Aproveitando esse ponto, queria trazer outra situação que percebo ser bastante comum no desenvolvimento. Muitas vezes, os cabeçalhos são utilizados, mas a hierarquia comentada pelo Sidney não é respeitada.
É comum encontrar páginas em que os cabeçalhos são usados apenas para controlar o tamanho do texto ou da fonte, sem considerar o peso semântico que eles carregam. Gostaria que vocês comentassem um pouco sobre essa prática de utilizar cabeçalhos apenas como recurso visual, para controlar o design da aplicação.
________________________________________
[Cláudia]
Quando alguém cria uma página e não conhece a importância semântica dos cabeçalhos, é natural que acabe utilizando esses elementos apenas pelo aspecto visual. A pessoa pode escolher um cabeçalho com base no tamanho que ele apresenta na tela, pensando apenas no design ou na forma como deseja apresentar as informações.
Por exemplo, alguém pode ter um H1 e um H2 na página e, em determinado momento, achar que o H5 tem exatamente o tamanho visual desejado para um determinado título. Então, utiliza um H5 apenas para obter aquele resultado visual. Quando isso acontece, surge o problema que o Sidney mencionou: a hierarquia da página é perdida.
É importante lembrar que os cabeçalhos foram criados com um propósito específico. Esse propósito é organizar as informações de forma lógica e hierárquica. Essa semântica é interpretada por tecnologias assistivas e também por agentes de usuário em geral.
Por isso, é fundamental respeitar o motivo pelo qual os cabeçalhos existem. Quando utilizamos cabeçalhos sem seguir uma hierarquia adequada, apenas para apresentar o conteúdo visualmente, podemos criar uma estrutura que faz sentido para quem vê a página, mas não para quem depende da semântica para navegar.
Nessa situação, uma pessoa que utiliza leitor de tela pode interpretar as informações de forma incorreta, porque tentará associar os cabeçalhos a uma ordem que, na prática, não existe. A hierarquia foi ignorada.
Por isso, é muito importante compreender essa semântica inerente aos cabeçalhos e utilizá-los dentro de uma estrutura lógica e coerente.
________________________________________
[Sidney]
Quando os cabeçalhos são utilizados pensando apenas na estética da página, isso se torna um problema porque se perde justamente essa organização que eles deveriam proporcionar.
É como abrir um livro e encontrar um índice desorganizado, sem capítulos claramente definidos. O que temos são blocos de informações e conteúdos soltos, sem uma relação clara entre si. Dessa forma, fica muito mais difícil entender como as partes do conteúdo se conectam.
Por isso, é tão importante seguir uma estrutura hierárquica. Essa organização ajuda a orientar quem está navegando pela página, especialmente as pessoas que utilizam leitores de tela. Quando a hierarquia é respeitada, fica mais fácil compreender a estrutura do conteúdo, localizar informações e navegar de maneira eficiente.
________________________________________
[Reinaldo]
Vocês comentaram bastante sobre a questão da semântica, e eu queria trazer um ponto que é muito comum no desenvolvimento. Tecnicamente, o HTML5 permite utilizar mais de um H1 na mesma página, inclusive dentro de diferentes seções. O próprio HTML consegue interpretar essa estrutura de forma hierárquica e compreender a existência de múltiplos H1 em uma mesma página.
Mas eu gostaria de ouvir a opinião de vocês do ponto de vista da acessibilidade, porque a norma ABNT 17225 traz uma orientação específica recomendando a utilização de apenas um H1 por página.
Queria que vocês comentassem um pouco sobre isso.
________________________________________
[Cláudia]
Sim. A orientação é utilizar apenas um H1 por página quando pensamos em acessibilidade, porque as tecnologias assistivas ainda não conseguem distinguir adequadamente um H1 de outro H1.
Como o H1 tem um papel muito importante na identificação do conteúdo principal de uma página, a existência de dois cabeçalhos de nível 1 pode gerar confusão. O leitor de tela pode não conseguir determinar qual deles realmente representa o conteúdo principal da página.
Consequentemente, o usuário também pode ficar em dúvida sobre qual dos H1 identifica de fato aquele conteúdo. Surge a pergunta: “Qual é o conteúdo mais importante desta página?”.
Essa incerteza pode fazer com que a pessoa se sinta perdida durante a navegação e não compreenda corretamente a estrutura da página nem a forma adequada de percorrer seus conteúdos.
________________________________________
[Sidney]
De fato, Reinaldo, o ideal é ter apenas um H1, embora tecnicamente seja possível colocar quantos quiser no HTML. O motivo é justamente a organização que isso proporciona.
Como a Cláudia comentou, se eu encontro dois H1 na mesma página, surge uma dúvida imediata: qual é, de fato, o assunto principal dessa página? O que ela está tentando me comunicar?
Vamos imaginar que eu esteja em um site de notícias. Eu posso me perguntar: “É uma página sobre esportes? É sobre meio ambiente? Qual é o foco principal? Qual é o objetivo dessa página?”.
Quando existe apenas um H1, essa dúvida não aparece. Fica claro que aquele é o assunto principal e que ele representa o objetivo daquela página.
Já quando existem dois ou mais H1, essa clareza se perde. A pessoa que está navegando pode ficar em dúvida sobre qual conteúdo deve ser considerado o principal, o que acaba prejudicando a compreensão da estrutura da página e da informação apresentada.
________________________________________
[Reinaldo]
Aproveitando que estamos falando de H1, existe uma dúvida bastante comum: se devemos ter apenas um H1 por página, o que exatamente deve ser definido como esse cabeçalho principal?
Já vi muitas pessoas perguntarem: “Devo colocar o logo?”, “Devo usar o título da notícia?”, “Devo colocar a parte principal do meu site?”. Afinal, qual seria a recomendação mais adequada?
Lembrei de um exemplo do meu próprio blog. Se não me engano, ele está estruturado dessa forma: na página inicial, o H1 corresponde ao nome do site, ao título principal do blog. Já nas páginas internas, o H1 passa a ser o título principal da notícia ou do post que está sendo exibido.
Mas eu queria ouvir a opinião de vocês sobre isso. O que pode ser considerado uma boa prática na definição de um cabeçalho de nível 1?
________________________________________
[Cláudia]
Essa é exatamente uma boa prática.
Inclusive, essa é a recomendação da própria ABNT. Na página inicial, o H1 deve identificar o site como um todo, funcionando como o principal identificador daquele ambiente. Já nas páginas internas, o H1 deve passar a identificar o assunto principal de cada página específica.
Dessa forma, a pessoa que está navegando consegue compreender facilmente onde está e qual é o tema principal do conteúdo que está sendo apresentado naquele momento.
________________________________________
[Sidney]
Eu concordo plenamente com essa orientação.
Quando entro em um site, encontro o H1 da página inicial identificando o próprio site. Depois, conforme navego pelo menu e acesso outras páginas, o H1 passa a identificar o conteúdo principal da página que estou visitando naquele momento.
Eu acho que essa é uma dinâmica muito boa de navegação. A pessoa não fica em dúvida sobre onde está nem sobre qual é o assunto principal que está sendo apresentado. A estrutura fica clara, previsível e fácil de entender.
Para mim, esse é o cenário ideal: cada página tem um único H1 que identifica claramente o seu conteúdo principal, ajudando o usuário a se localizar e compreender a organização do site.
________________________________________
[Cláudia]
Tem também uma informação muito importante: a gente não pode deixar uma página sem H1. Toda página precisa ter pelo menos um cabeçalho de nível 1.
O H1 é o elemento que identifica o conteúdo principal daquela página. Então, quando ele não existe, isso acaba prejudicando a compreensão da estrutura e da organização do conteúdo, tanto para quem usa tecnologias assistivas quanto para outros usuários.
Ou seja, é fundamental que cada página tenha um H1 bem definido, porque ele tem um papel central na identificação e na navegação do conteúdo.
________________________________________
[Reinaldo]
Legal. Então é bom saber que, pelo menos no meu blog, as coisas estão sendo feitas direitinho. Está dentro das recomendações e em conformidade com a norma.
Talvez ainda seja necessário ajustar alguns detalhes, já que a norma foi publicada recentemente e sempre aparece alguma coisinha para revisar ou melhorar.
Mas pensando em outros contextos, como navegação ou diferentes formas de organização de conteúdo, como poderíamos utilizar os cabeçalhos nesses casos? Quais seriam outras maneiras de aproveitar essa estrutura para facilitar a navegação e a compreensão das páginas?
________________________________________
[Cláudia]
Uma prática que se tornou muito comum na web é utilizar os cabeçalhos para organizar as diferentes regiões da página.
Como os cabeçalhos funcionam como uma importante ferramenta de navegação e permitem que o usuário se desloque rapidamente para áreas específicas, convencionou-se utilizá-los também para identificar determinadas regiões da interface. É comum, por exemplo, encontrar um cabeçalho na área de pesquisa, outro no menu principal de navegação e outro no rodapé.
Quando essa organização é adotada, o usuário consegue localizar e acessar essas áreas de forma muito mais rápida e eficiente. Assim, além de estruturarem o conteúdo principal da página, os cabeçalhos também podem servir como um recurso importante para orientar a navegação entre as diferentes regiões de um site ou aplicação.
________________________________________
[Sidney]
E eu agradeço quando fazem isso. Como eu comentei antes, quando a gente, que usa leitor de tela, entra em uma página, uma das primeiras coisas que faz é navegar pelos cabeçalhos.
É por meio deles que a gente consegue ter uma visão geral da estrutura da página. Então, rapidamente dá pra identificar coisas importantes: “Ah, tem uma área de busca”, “tem uma área de login”, “o rodapé tem determinadas informações”.
Quando essas regiões estão identificadas por cabeçalhos, a navegação fica muito mais simples e eficiente. A gente consegue localizar rápido o que procura sem precisar percorrer a página inteira para descobrir onde cada informação está.
________________________________________
[Reinaldo]
Legal. Acho que deu para perceber o quanto os cabeçalhos são importantes. Estamos chegando ao final do episódio e passamos quase vinte minutos falando apenas sobre cabeçalhos, ou seja, sobre um único componente do HTML.
Isso mostra não apenas a relevância desse elemento para a experiência de navegação, mas também o quanto a norma ABNT 17225 reforça a sua importância dentro da acessibilidade digital.
Para encerrar, eu gostaria de reforçar essa mensagem: os cabeçalhos são fundamentais e precisam ser utilizados de forma consciente. É importante estruturar e apresentar o conteúdo de maneira que facilite a navegação e a compreensão por parte dos usuários.
Mas, antes de concluirmos, gostaria de pedir que vocês deixassem suas considerações finais sobre esse tema.
________________________________________
[Cláudia]
Precisamos entender que os cabeçalhos são extremamente importantes, tanto para a organização visual das páginas quanto para as pessoas que não enxergam a tela. Isso acontece justamente por causa da semântica que eles carregam e por funcionarem como um importante mecanismo de navegação.
Por isso, vale a pena dedicar atenção aos cabeçalhos das nossas páginas e verificar se eles estão realmente cumprindo o seu papel. É importante analisar o contexto de cada página, porque, muitas vezes, criamos uma estrutura de cabeçalhos e acreditamos que tudo está funcionando bem. No entanto, para quem não enxerga a tela, essa organização pode não fazer o mesmo sentido.
Por essa razão, eu sempre recomendo buscar a opinião de pessoas com deficiência e entender se elas estão conseguindo compreender a informação e navegar pelo conteúdo da forma esperada. Essa validação ajuda a identificar problemas que, muitas vezes, passam despercebidos para quem está desenvolvendo ou avaliando a página apenas visualmente.
________________________________________
[Sidney]
Então, se você quiser usar títulos diferentes visualmente na sua página, use cabeçalhos para isso.
E não fica só no conteúdo principal, não. Sempre que fizer sentido, usa cabeçalhos também em áreas como login, busca, rodapé... Isso ajuda a identificar melhor as regiões da página e facilita bastante para quem usa leitor de tela.
Quanto mais clara e bem organizada estiver essa hierarquia de cabeçalhos, mais fácil vai ser pras pessoas entenderem a estrutura da página, achar o que precisam e navegar pelo conteúdo.
________________________________________
[Reinaldo]
Maravilha! Então, chegamos ao final de mais um episódio do podcast Todos na Web.
Agradeço a companhia de vocês e até a próxima!