Transcrição Episódio 15 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á, eu sou Reinaldo Ferraz, especialista em acessibilidade digital do Ceweb.br.
Eu sou um homem branco, de cabelo castanho liso, tenho uma barba cerrada branca e estou usando uma camisa preta com o logo do Ceweb. O meu sinal em Libras é a mão em formato de "C", com a qual começo a fazer um movimento da orelha até o queixo, em volta da barba.
Hoje estou aqui com dois especialistas em acessibilidade digital, que participaram ativamente da construção da norma da ABNT e têm muita propriedade para falar sobre o tema que vamos conversar hoje. Então, queria dar as boas-vindas para a Cláudia e o Sidney e pedir que eles se apresentem antes de começarmos.
________________________________________
[Cláudia]
Olá, obrigada.
Sou Cláudia Martin Nascimento. Sou uma mulher branca, de cabelos castanhos escuros e olhos castanhos escuros. Uso óculos. Estou vestindo uma malha preta e um casaquinho cinza.
Sou designer por formação e trabalho com web desde o início da minha carreira. Trabalho com acessibilidade há cerca de 13 anos e, hoje, tenho a minha empresa, Acesso para Todos, que tem como foco a acessibilidade digital.
________________________________________
[Sidney]
Olá, pessoas. Eu sou Sidney Tobias.
Sou um homem pardo, de cabelos e olhos castanhos, nariz núbio. Hoje estou usando um pulôver marrom.
Meu sinal em Libras é formado pela letra "S" em Libras, que é a mão fechada, como um soquinho, com o polegar entre o indicador e o dedo médio. Depois, vem a letra "Y" em Libras, com o dedo mínimo e o polegar apontados para cima, e a mão sobe.
Sou analista de sistemas da Prodam e consultor de acessibilidade digital e comunicacional da Secretaria Municipal da Pessoa com Deficiência (SMPED).
________________________________________
[Reinaldo]
Legal. Hoje vamos falar de um tema bem interessante para a acessibilidade: as regiões dos sites.
As regiões são áreas definidas semanticamente no código. É a partir delas que conseguimos identificar determinadas áreas dentro da estrutura de uma página web. A ideia aqui é conversar com a Cláudia e o Sidney para entender o que podemos fazer para utilizar essas regiões de uma forma mais acessível.
Para começar a falar sobre regiões, vamos tocar em um assunto que já apareceu em vários outros episódios: a semântica. As regiões estão diretamente relacionadas à semântica da página.
Se temos uma página bem estruturada, com as regiões bem definidas, conseguimos oferecer recursos importantes aos usuários, especialmente aos usuários de leitores de tela. Esses recursos ajudam na localização dentro da página.
Então, eu queria começar perguntando para vocês sobre a importância do uso dessas regiões semânticas no código HTML, considerando esse contexto da acessibilidade.
________________________________________
[Cláudia]
As regiões da página ajudam a marcar e a comunicar as áreas importantes das páginas web, como a área de navegação, o cabeçalho, o conteúdo principal e o rodapé.
Quando marcamos essas áreas da página como regiões, conhecidas em inglês como landmarks, elas passam a servir como um mecanismo de navegação, assim como os cabeçalhos. Isso permite que as pessoas com deficiência naveguem rapidamente entre essas áreas, identifiquem cada uma delas e se desloquem pela página com mais agilidade, utilizando softwares específicos, plugins para o navegador ou outros recursos de tecnologia assistiva.
A ABNT NBR 17225 traz requisitos e recomendações para que a estrutura da página seja construída de forma semanticamente correta, justamente para facilitar essa navegação. Fazemos isso por meio da semântica do HTML e também da semântica da especificação ARIA.
Sidney, quer comentar?
________________________________________
[Sidney]
Sim. Quando essas regiões estão marcadas, isso facilita muito. No meu caso, por exemplo, que sou uma pessoa cega e utilizo um software leitor de telas, consigo encontrar essas regiões facilmente, navegar de uma para outra e até pular alguma delas.
Isso facilita a navegação, economiza tempo e é superimportante.
________________________________________
[Reinaldo]
Acho que essa questão das regiões não é apenas uma questão técnica. Não se trata simplesmente de fazer a marcação no código. Ela beneficia diversas áreas de atuação.
Se a gente pensar em alguém que trabalha com design e vai construir um wireframe, a estrutura de uma aplicação, essa pessoa precisa entender a importância dessas regiões da página e como essa estrutura funciona para conseguir desenhá-la de forma adequada. No desenvolvimento, é preciso compreender o peso semântico que cada uma dessas regiões tem. Cada região possui um papel específico e serve para marcar um determinado tipo de conteúdo.
Então, esse é mais um tema relacionado à semântica do HTML que envolve diferentes áreas de atuação.
A gente já falou, em vários episódios, sobre a importância da semântica. Estamos abordando pontos específicos desse assunto. Já falamos de cabeçalhos, de codificação, de links e de botões. Há uma série de elementos importantes, mas a semântica vai muito além disso. Existem vários outros itens importantes para a acessibilidade que ainda não mencionamos. Se pensarmos, por exemplo, em parágrafos... Imagens também, embora esse seja um tema que já abordamos.
Por isso, acho que dedicar um episódio às regiões é muito importante para mostrar o quanto elas são relevantes para a acessibilidade.
Eu queria começar perguntando para vocês, especialmente, sobre áreas em que acrescentamos conteúdo. Existe um conceito de que, se eu tenho duas áreas com determinados conteúdos, não preciso identificá-las. Isso é equivocado, não é? A gente precisa identificar essas áreas, principalmente por questões de acessibilidade.
________________________________________
[Cláudia]
Sim. Primeiro, as regiões precisam identificar as áreas de conteúdo de acordo com o tipo de conteúdo.
Se eu tenho, por exemplo, uma área de navegação com itens de navegação, preciso organizá-la em uma região de navegação, que, no HTML, pode ser o elemento <nav> e, na especificação ARIA, o role="navigation".
Esse é um papel de navegação atribuído por meio da especificação ARIA, mas isso pode não ser suficiente. Se você tem duas áreas de navegação em uma mesma página, como a pessoa vai saber que conteúdo existe em cada uma delas? Essa semântica de navegação será apresentada da mesma forma para o usuário que não enxerga a tela.
Vamos pegar um exemplo para ficar mais prático. Imagine uma loja virtual com dois menus de navegação. Um deles contém links mais institucionais, com informações sobre a empresa, políticas de troca e endereço. O outro reúne as categorias de produtos.
Se o Sidney chegar a essas duas áreas e ambas estiverem marcadas apenas com <nav>, ele vai pensar: "Tudo bem, eu sei que aqui é uma área de navegação, mas o que tem nela? Onde vou encontrar um produto específico?".
Então, ele precisará entrar naquele conteúdo e percorrer os links para entender que tipo de informação existe ali. Isso atrasa a navegação.
Quando identificamos essas áreas repetidas de forma específica, ajudamos o usuário a compreender melhor o conteúdo. Podemos fazer isso, por exemplo, com rótulos da especificação ARIA. O aria-label é uma forma de fazer isso.
Se eu pegar o primeiro menu e definir o aria-label como "menu institucional" e, no outro <nav>, definir "menu de categorias de produtos", o Sidney vai chegar até essas áreas, saber que se trata de uma navegação e identificar imediatamente que tipo de conteúdo existe em cada uma delas.
Assim, ele consegue perceber logo de início se aquela é a área que procura ou não.
________________________________________
[Sidney]
Veja só: quando a gente está navegando utilizando um software leitor de telas, naturalmente já gasta mais tempo, porque a navegação visual é muito mais rápida.
Então, se acontecer como no exemplo que a Cláudia deu, em que existem dois menus que não estão identificados por ARIA, vou precisar entrar naquela região usando a seta direcional para descobrir que conteúdo existe ali. Esse é um tempo a mais que estou gastando.
Facilitaria muito se tudo estivesse corretamente marcado, porque eu não precisaria ficar buscando essas informações pelo contexto.
________________________________________
[Reinaldo]
Eu queria até te perguntar, Sidney: imagino que, quando existem várias áreas marcadas da mesma forma, elas acabam se misturando. Para quem utiliza um leitor de telas, isso pode fazer com que a pessoa se perca durante a navegação.
________________________________________
[Sidney]
É como se fosse um único bloco de conteúdo. Então, preciso fazer uma leitura contínua, de cima para baixo, para conseguir entender melhor a página.
Se as áreas estivessem bem definidas, isso não seria necessário, e eu ganharia bastante tempo.
________________________________________
[Reinaldo]
Então, é importante fazer essa marcação semântica das áreas. Como a Cláudia comentou, no cabeçalho utilizamos o elemento <header>; no rodapé, o <footer>; para o conteúdo principal, temos o <main> e as <section>.
Eu queria aproveitar para tirar uma dúvida. Antes do HTML5, fazíamos essas marcações com atributos de ARIA, utilizando os landmarks. Naquela época, por exemplo, usávamos uma <div> e atribuíamos um role="banner" para indicar que aquilo era um cabeçalho, ou um role="contentinfo" para identificar informações secundárias.
A gente ainda precisa utilizar esses atributos de ARIA, mesmo tendo os elementos semânticos do HTML5?
________________________________________
[Cláudia]
Na verdade, uma das coisas mais interessantes que o HTML5 trouxe foi justamente a semântica pronta, que já vem completa.
Então, se usamos um elemento como o <nav>, por exemplo, teoricamente não precisaríamos adicionar também um role="navigation" em ARIA.
Mesmo assim, alguns desenvolvedores preferem associar as duas abordagens para garantir maior compatibilidade com algum agente de usuário que, eventualmente, não interprete corretamente o HTML5. Hoje isso é bem difícil, porque a maioria dos navegadores já oferece suporte ao HTML5 e a toda a semântica que ele traz. Mas, se você quiser garantir essa compatibilidade, pode associar as duas semânticas.
Além disso, o ARIA oferece algumas semânticas que o HTML, por si só, não possui. Nesses casos, podemos usar a semântica do ARIA para complementar o HTML e ajudar em situações em que apenas os elementos HTML não são suficientes.
________________________________________
[Reinaldo]
Agora eu queria passar para outra questão. É muito comum as pessoas perguntarem: “Eu tenho uma página em que as áreas estão todas visualmente marcadas. Será que também preciso fazer esse ajuste no código? Preciso incluir a marcação semântica mesmo sabendo que, visualmente, tudo está claro para uma pessoa que enxerga?”
Bom, estamos falando de acessibilidade, então acho que a resposta é não: apenas a marcação visual não é suficiente. Mas eu queria ouvir mais detalhes de vocês.
________________________________________
[Cláudia]
Não, com certeza isso não é suficiente. Quem enxerga consegue compreender essas áreas da página com muita clareza. Já quem não enxerga a tela pode perceber todo esse conteúdo como um único bloco de informações, sem conseguir distinguir onde começa o conteúdo principal e onde começa o rodapé.
Isso torna a navegação muito mais confusa, porque a pessoa não está vendo o que está na tela. Ela começa a percorrer as informações e pensa: "Ah, meu Deus, será que eu já estou no rodapé? Onde será que eu estou?"
Sem essa organização semântica, a pessoa acaba ficando perdida e desorientada durante a navegação.
Por isso, é muito importante que essas áreas estejam marcadas como regiões não apenas visualmente, mas também na semântica da página.
________________________________________
[Sidney]
O fato de uma página parecer organizada para quem enxerga — a pessoa olha e pensa: "Está tudo organizado" — não significa que ela esteja acessível.
É importantíssimo ter essas marcações. Se eu quiser chegar rapidamente à área de busca, por exemplo, basta que ela esteja corretamente marcada. Se eu quiser ir para o rodapé, consigo chegar rapidamente. Se eu quiser voltar para o menu, também.
Quando essas regiões estão corretamente identificadas, a navegação fica muito mais ágil. Se não estiverem, tudo acaba dando mais trabalho.
________________________________________
[Reinaldo]
Acho que vale a pena relembrar essa questão da marcação semântica, porque já abordamos outros temas que também têm relação com ela. Temos um episódio sobre formulários, por exemplo, em que falamos da importância de rotular corretamente os campos. Isso também está relacionado à semântica.
Falamos sobre o uso correto dos cabeçalhos e dos tipos de campos de formulário. Um exemplo é o campo de telefone: quando ele está marcado corretamente, ao preencher o formulário em um dispositivo móvel, em vez de aparecer um teclado alfanumérico, aparece o teclado numérico. São benefícios que vão muito além das regiões da página. A semântica, de forma geral, traz diversas vantagens para toda a experiência de navegação.
________________________________________
[Cláudia]
Sim, a semântica é muito, muito importante.
________________________________________
[Reinaldo]
Acho que há outro aspecto interessante que comentamos lá no começo do episódio. Falamos sobre áreas com conteúdos que se repetem, mas existem algumas regiões que, idealmente, não devem ser repetidas. São áreas que precisam ter uma identificação única.
Queria que vocês comentassem um pouco sobre isso.
________________________________________
[Cláudia]
Sim. Existem algumas áreas cuja recomendação é que apareçam apenas uma vez na página, justamente para evitar confusão durante a navegação. Um exemplo é a área de conteúdo principal, representada pelo elemento <main>.
Se eu tiver duas áreas marcadas como conteúdo principal, nenhuma delas será, de fato, a principal.
Imagine o exemplo de uma loja virtual. Suponha que existam duas vitrines de produtos: em uma delas há roupas e, na outra, acessórios. Se as duas estiverem marcadas como conteúdo principal, isso pode gerar dúvidas.

Sidney, eu queria ouvir você. Como seria a sua compreensão desta página?
________________________________________
[Sidney]
Isso me geraria dúvida.
A gente sempre espera encontrar, em uma página, um cabeçalho, um rodapé e uma área de conteúdo principal. Se existem duas áreas principais, qual é o propósito disso? Qual é o objetivo da página?
Isso acaba causando confusão. O ideal é que exista apenas uma área de conteúdo principal.
________________________________________
[Cláudia]
Exatamente. Nesse exemplo, o Sidney pode ficar em dúvida: afinal, qual é o conteúdo principal? A página fala de roupas? Fala de acessórios? Do que ela trata?
Por isso, existem algumas regiões que devem aparecer apenas uma vez na página. É o caso do cabeçalho, representado pelo elemento <header> ou pelo role="banner" em ARIA; da área de conteúdo principal, representada pelo <main>; e do rodapé, representado pelo <footer> ou pelo role="contentinfo" em ARIA.
Essas três regiões devem existir apenas uma vez em cada página.
________________________________________
[Reinaldo]
Bom, já estamos chegando à parte final do nosso episódio.
Hoje tratamos de um tema bastante específico, falando apenas sobre regiões da página, mas isso mostra o quanto esse assunto é importante. A norma ABNT NBR 17225 dedica uma seção específica a esse tema para mostrar que existem regiões que não podem ser repetidas e que precisam estar corretamente marcadas de forma semântica.
Essas regiões são importantes para que o usuário consiga se localizar durante a navegação e também para tornar a página, e a aplicação como um todo, mais robusta, com cada área devidamente definida de forma programática.
Então, o recado que eu queria deixar é: procure entender e estudar um pouco mais sobre as regiões semânticas do HTML. Há muita coisa importante para aprender e que pode contribuir para melhorar o nosso código utilizando esses elementos.
E, para encerrar, queria deixar um espaço para que vocês deixem uma mensagem final sobre este episódio e sobre o tema das regiões.
________________________________________
[Cláudia]
Acho que as regiões talvez não sejam tão conhecidas quanto os cabeçalhos, mas também são muito importantes, porque ajudam a comunicar as áreas mais importantes da página.
Quando fazemos essas marcações, a página se torna mais robusta, como o Reinaldo comentou, e passa a ser melhor interpretada por diferentes agentes de usuário, sejam os próprios navegadores, sejam as tecnologias assistivas.
Além disso, ela também se torna mais compreensível para pessoas que não podem ver a tela, mas que conseguem identificar os blocos de informação presentes nas páginas web.
________________________________________
[Sidney]
Então, quanto mais você conseguir deixar a sua página fácil de navegar para quem utiliza leitores de tela, melhor. Essa organização faz toda a diferença.
Isso é bom para a sua página e também para quem vai navegar por ela.
________________________________________
[Reinaldo]
Maravilha! Com isso, encerramos mais um episódio do podcast Todos na Web.
Obrigado pela companhia e até a próxima!