Transcrição Episódio 11 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, com uma barba que já está ficando quase toda branca, e estou usando uma camiseta preta do Ceweb.
Hoje estou aqui com duas especialistas em acessibilidade digital, a Cláudia e a Sandyara, e gostaria de pedir para elas se apresentarem antes de a gente começar o nosso episódio.
________________________________________
[Cláudia]
Olá, eu sou a Cláudia Martin Nascimento. Sou uma mulher de pele clara. Tenho cabelos castanhos escuros, mais ou menos na altura dos ombros. Tenho olhos escuros também, castanhos. Uso óculos e estou vestindo uma camiseta azul, com a manga em um azul um pouquinho mais escuro.
Sou designer de formação e trabalho com web há bastante tempo e com acessibilidade há 13 anos. Trabalho com acessibilidade na minha empresa, Acesso para Todos, onde sou cofundadora.
________________________________________
[Sandyara]
Oi, pessoal, tudo bom? Meu nome é Sandyara Peres, mais conhecida como Sandy. Sou uma mulher de pele clara, com cabelos castanhos na altura dos ombros e mechas desbotadas na lateral direita. Tenho sardas abaixo dos olhos e hoje estou vestindo uma camiseta preta de gola alta e um colar colorido de estrelinhas.
Sou designer de produto com foco em acessibilidade. Já atuo há algum tempo no setor financeiro e bancário.
________________________________________
[Reinaldo]
Legal, obrigado.
Agradeço muito por vocês estarem aqui para a gente falar de um tema muito interessante e específico, que é sobre listas e tabelas.
Bom, listas e tabelas são coisas comuns de encontrar na web. Basicamente, listas servem para organizar determinados conteúdos e também para navegação. Já as tabelas são utilizadas para apresentar dados tabulares, mas há questões de acessibilidade que também precisam ser contempladas nessas tabelas. É isso que a gente vai ver aqui no episódio de hoje.
Bom, a gente vai falar sobre listas e tabelas e eu queria trazer primeiro um contexto para a gente entender por que isso é importante de discutir. Imagine um cenário em que você tem um texto corrido, sem marcação nenhuma. Ou mesmo na navegação: se você tem uma navegação confusa, isso pode ser complicado se não houver uma marcação adequada. E o mesmo vale para tabelas.
Imagine que a gente tem tabelas muito grandes, muito complexas, e que talvez sejam difíceis de navegar. Isso tem um impacto muito forte na navegação de pessoas com deficiência. Acho que é isso que a gente vai começar a abordar aqui.
Primeiro, queria perguntar para a Clau — na verdade, comentar com ela sobre a norma da ABNT e a relação dela com esses itens. A gente está trazendo aqui este podcast sobre a norma, e ela aborda vários detalhes relacionados a listas e tabelas, né, Clau?
________________________________________
[Cláudia]
Sim, quando a gente usa listas e tabelas de forma correta, a gente organiza os conteúdos na tela. Então, visualmente, eles ficam melhor estruturados. Mas a maneira correta de usar isso de forma semântica também ajuda as pessoas com deficiência, porque listas e tabelas servem como um mecanismo de navegação.
A norma ABNT 17225 traz esses requisitos e recomendações para ajudar a gente a construir listas e tabelas de uma forma visual, mas também semântica. Por exemplo, agrupar itens de mesma natureza quando a gente for criar listas de itens, de acordo com o tipo de conteúdo.
As tabelas normalmente têm dados que se relacionam entre si. Esses relacionamentos também precisam estar claros para todo mundo, de forma semântica. Então, quando a gente cria listas e tabelas de forma correta, semanticamente adequada, isso ajuda todo mundo a compreender essas informações.
________________________________________
[Reinaldo]
A Cláudia já começou comentando um pouco sobre essa questão relacionada à formatação e ao uso adequado de listas e tabelas. Mas eu queria tratar da primeira barreira relacionada, principalmente, às listas.
A gente tem a criação de listas de forma apenas visual, que é a mesma coisa que fazer uma lista no Word com tracinhos ou com asteriscos.
Eu queria que vocês comentassem um pouco sobre isso. Qual é o impacto para as pessoas com deficiência de listas que são apresentadas apenas de forma visual para o usuário?
________________________________________
[Cláudia]
É comum que algumas pessoas construam listas de forma somente visual, mas, semanticamente, elas não têm informação de que são listas de itens.
Por exemplo, você pode colocar asteriscos antes de cada item da lista ou um tracinho, como você mesmo falou, e colocar uma quebra de linha após cada item. Visualmente, isso vai parecer uma lista, mas, para quem não enxerga a tela, não vai fazer nenhum sentido, porque a pessoa não vai entender aquilo como uma lista.
Essas quebras de linha podem atrapalhar, por exemplo, a leitura com o leitor de telas, e ele não vai conseguir fazer uma navegação eficiente por esses itens.
Você quer comentar também o seu ponto de vista, Sandy?
________________________________________
[Sandy]
Quero. Eu tenho uma teoria própria de que a gente nasceu em um mundo de redes sociais e, por fazer muita publicação, e até porque muitas das redes sociais não tinham recursos de listagem, todo mundo começou a fazer listas visuais com asteriscos, hífens, apenas números, enfim. Então, a gente, por si só, não tem uma prática de escrita utilizando os elementos corretos.
E eu creio que a navegação mais impactada seja a navegação com leitores de tela. Vamos pegar aqui o exemplo de uma receita. Uma receita que tem vários itens, várias medidas. Às vezes, a pessoa só quer saber o quarto item daquela lista. Normalmente, quando a pessoa coloca isso em apenas um parágrafo, tudo vai ser lido como um bloco único.
Então, a pessoa vai ter que esperar toda aquela verbalização para chegar ao quarto item. Ou seja, isso tira totalmente a autonomia da pessoa usuária.
________________________________________
[Reinaldo]
E isso impacta também a questão hierárquica dentro de uma lista. Quando você falou da receita de bolo, eu fiquei imaginando uma receita em que você tem subtópicos. Então, o que a pessoa faz? Coloca três espaços e um outro tracinho ali. Isso acaba trazendo ainda mais problemas.
E o que a gente precisaria fazer, então, para garantir que isso seja acessível para as pessoas com deficiência?
________________________________________
[Cláudia]
As listas não podem ser apenas visuais. A gente tem que construí-las com semântica adequada no próprio código, na programação. No caso aqui, estamos falando de HTML.
No HTML, a gente tem tipos diferentes de listas. Então, de acordo com o tipo de conteúdo, usamos um tipo de lista ou outro.
Por exemplo, se a gente tem essa receita de bolo que a Sandy comentou, temos uma lista de ingredientes e depois um passo a passo da receita. Os ingredientes não têm uma ordem específica. Você pode pegar primeiro o ovo e depois a farinha. Para esse tipo de situação, usamos listas não ordenadas, representadas pela tag "<ul>" no HTML.
Já quando a ordem dos itens faz diferença, como no passo a passo da receita, você não pode colocar um passo na frente do outro. Primeiro é preciso juntar os ingredientes para depois misturá-los. Você não pode inverter essa sequência. Nesse caso, usamos as listas ordenadas, representadas pela tag "<ol>" no HTML.
Temos ainda outro tipo de lista, as listas de definições, que agrupam pares de informações. Por exemplo, um termo e sua definição, ou uma pergunta e uma resposta. Nesse caso, usamos a tag "<dl>" no HTML, que representa as listas de definições.
________________________________________
[Sandy]
Corroborando o que a Clau comentou, acho que a importância do uso da semântica correta está, claro, em permitir uma melhor navegação com leitores de tela. Assim, a pessoa consegue acessar a informação que quer, no contexto de que precisa, com autonomia.
Mas eu ouso dizer também que isso facilita a estilização depois. Se eu quero estilizar os marcadores, o tipo de numeração, ou se, de repente, utilizar algarismos romanos faz mais sentido no meu contexto do que algarismos numéricos, tudo isso fica mais simples.
Então, até mesmo pensando em manutenção de código, fica muito mais fácil trabalhar dessa forma.
________________________________________
[Reinaldo]
É, e isso que vocês estão falando sobre listas e semântica tem uma relação que não é apenas textual, porque hoje a gente utiliza listas até na navegação.
É muito comum encontrar menus de navegação criados como listas, com menus e submenus. E aí existe a possibilidade de o usuário, principalmente quem utiliza leitor de tela, saber que está chegando a um item de menu e que aquele é, por exemplo, o item 1 de 5.
Então, essa semântica é muito importante. E eu queria entrar um pouco mais neste tópico. A gente está falando sobre listas e semântica, mas também vale aprofundar esses outros usos das listas.
Por exemplo, no caso da criação de um menu para estruturar a navegação, qual é a importância de usar listas para esse tipo de conteúdo?
________________________________________
[Cláudia]
Quando a gente faz isso, ajuda na navegação, principalmente para pessoas que usam tecnologias assistivas.
O leitor de telas consegue entender que aquilo é uma lista, que aquela lista tem uma determinada quantidade de itens, e consegue navegar tanto de item em item quanto de uma lista para outra.
Então, isso também serve como um mecanismo de navegação e permite que a pessoa navegue facilmente por esses itens. Por isso é importante criar esse tipo de conteúdo utilizando listas.
________________________________________
[Reinaldo]
Legal. Acho que a gente poderia ficar falando sobre isso por muito mais tempo. É impressionante: estamos aqui conversando, já se passaram alguns bons minutos e estamos há quase dez minutos falando sobre listas, sobre um elemento específico do HTML. É um papo muito nerd, né?
Vocês querem comentar mais alguma coisa especificamente sobre listas?
________________________________________
[Cláudia]
Sim, eu quero!
________________________________________
[Reinaldo]
Ai, está vendo?
________________________________________
[Cláudia]
A gente tem uma recomendação importante: as listas devem ser criadas para agrupar itens de mesma natureza. Então, isso é algo a que a gente precisa prestar atenção.
Mesmo quando você vai criar menus com listas ou uma lista de itens qualquer, é importante que cada lista agrupe itens da mesma natureza. Como assim?
Se você tem, por exemplo, um menu com diversos links de navegação e, junto dessa lista, coloca um número de telefone, isso não faz muito sentido. A pessoa começa a navegar achando que está dentro de um grupo de navegação e, de repente, encontra um número de telefone. Não são itens da mesma natureza.
Agora imagine uma página de e-commerce, uma loja virtual. Você tem uma lista com os produtos adicionados ao carrinho e, junto dessa mesma lista, coloca produtos que a pessoa pode gostar, produtos relacionados aos que ela escolheu. Para quem não está enxergando a tela, se todos esses produtos estiverem na mesma lista, pode parecer que existem mais itens no carrinho do que realmente foram adicionados. Isso pode levar a uma compreensão incorreta da informação.
Por isso, é importante lembrar também desse cuidado.
________________________________________
[Sandy]
Eu também queria reforçar a importância das listas para a simplificação do conteúdo, seja visualmente, seja no conteúdo textual como um todo.
Quando a gente transforma um conteúdo que estava em parágrafos em uma lista com marcadores, para facilitar a compreensão, como acontece em muitos slides que usamos no dia a dia, isso também facilita a comunicação.
Então, tudo o que envolve normas e boas práticas de conteúdo, como espaçamento de texto e contraste, também se aplica às listas. Acho que é mais um reforço mesmo.
________________________________________
[Reinaldo]
Legal, agora chega de falar de listas. Vamos falar um pouco sobre tabelas.
As tabelas também são muito comuns na web. E eu acho que a questão prática delas é que, muitas vezes, a gente publica tabelas muito grandes e complexas. Mesmo com referências visuais, às vezes fica difícil relacionar uma linha a uma coluna. Algumas tabelas agrupam colunas, agrupam linhas, e isso acaba tornando a compreensão mais complicada.
Por isso, eu queria começar trazendo uma primeira pergunta também relacionada à semântica. Acho que a gente vai falar bastante sobre semântica neste podcast, não só neste episódio. Quando falamos de tabelas sem semântica adequada, estamos falando de uma barreira importante para pessoas com deficiência.
Eu queria que vocês comentassem um pouco sobre isso. Qual é o impacto de tabelas que não utilizam uma semântica adequada em HTML?
________________________________________
[Cláudia]
As tabelas relacionam dados. Elas servem para organizar informações que se relacionam entre si de forma estruturada.
Quando a gente não tem essa semântica, visualmente a tabela pode até parecer simples de entender, mas, no código, tudo vira uma bagunça. Ninguém consegue compreender corretamente qual informação está relacionada a qual informação.
Então, a ausência da semântica correta em tabelas representa uma grande barreira. Quer complementar, Sandy? Como é, para você, a navegação em tabelas? E a compreensão?
________________________________________
[Sandy]
Acho que, se a gente for trazer um exemplo prático de tabela, imagine uma situação em que eu relaciono o nome da pessoa, o nome do pai e o nome da mãe.
Se eu não tiver a marcação correta dos cabeçalhos da tabela, pode ser que eu esteja em uma célula qualquer e não saiba se aquela informação se refere ao nome do pai, ao nome da mãe ou ao nome da própria pessoa.
Acho que, quando a gente fala de semântica em tabelas, o principal sinônimo é a encontrabilidade. É ter certeza de que aquela informação está vinculada.
________________________________________
[Reinaldo]
E aí, quais cuidados a gente precisa ter para contemplar essa semântica no HTML e na construção de tabelas?
________________________________________
[Cláudia]
A gente tem que usar a semântica adequada. No HTML, existe o elemento "table", que é o elemento correto para a criação de tabelas, e ele possui seus próprios elementos filhos.
Por exemplo, as linhas são criadas com a tag "<tr>", as células de dados com a tag "<td>" e também temos os cabeçalhos.
Justamente os cabeçalhos são os elementos mais importantes, porque a gente precisa vincular as informações. Eles são criados com a tag "<th>" no HTML.
Quando a gente faz isso, e a pessoa chega a uma célula de dados usando um leitor de telas, o leitor anuncia tanto a informação daquela célula quanto a informação do cabeçalho correspondente. Dessa forma, a pessoa consegue entender os relacionamentos entre os dados. Por isso, os cabeçalhos são tão importantes.
Além disso, existem outros cuidados. A gente precisa colocar um título na tabela para identificar o conteúdo apresentado. Fazemos isso com a tag "<caption>" no HTML. Quando esse título é vinculado à tabela por meio do "<caption>", fica mais fácil para quem usa leitor de telas. Ao chegar à tabela, o leitor anuncia o título, permitindo que a pessoa saiba do que se trata aquele conteúdo e decida se quer ou não explorar a tabela para entender os relacionamentos apresentados.
E tem mais uma coisa: quando a gente trabalha com tabelas complexas, como essas que você mencionou, com muitos cabeçalhos, colunas e linhas, a compreensão pode ser mais difícil para algumas pessoas, principalmente para pessoas com deficiência cognitiva.
Por isso, a recomendação é incluir uma descrição para essas tabelas, explicando que tipo de conteúdo elas apresentam e como as informações estão organizadas. Essa descrição pode aparecer no próprio conteúdo da página ou estar vinculada semanticamente à tabela.
Tudo isso ajuda as pessoas a compreender as informações de forma mais fácil.
________________________________________
[Sandy]
Perfeito!
________________________________________
[Reinaldo]
Cláudia, você comentou sobre a questão do título e eu queria tirar uma dúvida. Já percebi isso em desenvolvimento e acho que é algo bastante comum.
Você falou sobre o título das tabelas utilizando o elemento "<caption>" dentro da própria tabela, mas é muito comum encontrar cabeçalhos antes das tabelas e, nesses casos, as pessoas acabam não utilizando o "<caption>".
O que vocês recomendam nessa situação? Dá para usar esse tipo de solução? É melhor focar no "<caption>"?
________________________________________
[Cláudia]
Bom, na minha opinião, para tabelas, é melhor usar o "<caption.". Mas nada impede que você também coloque um cabeçalho para ajudar o usuário a chegar até a tabela de forma mais rápida.
Porém, os leitores de tela possuem recursos específicos para navegação por tabelas. Então, quando a pessoa quer encontrar uma tabela, ela utiliza esses recursos e chega até ela independentemente de existir um cabeçalho antes ou não.
Dependendo do contexto, esse cabeçalho pode ajudar a organizar melhor as informações na página.
O que você acha?
________________________________________
[Sandy]
Eu ia comentar exatamente isso.
Acho que vale a pena entender o contexto, principalmente verificar se existe algum conteúdo entre a seção, o título da seção e a tabela. Dependendo desse contexto, pode valer a pena inserir um cabeçalho para facilitar a navegação.
Caso contrário, o próprio "<caption>" já resolveria esse problema.
________________________________________
[Reinaldo]
Bom, agora vamos falar de outro tópico, outra barreira: o uso de tabelas para organizar conteúdo visual, o que a gente costuma chamar de uso de tabelas para layout.
Falando nisso, começo a lembrar dos anos 2000, quando eu desenvolvia sites usando tabelas e recortava aquele monte de imagens desenhadas no Photoshop.
Mas eu queria que vocês explicassem por que essa prática não é recomendada e por que ela não é adequada para garantir acessibilidade.
________________________________________
[Cláudia]
Eu tenho que fazer uma confissão aqui: eu também sou dessa época e cheguei a criar sites usando tabelas. Quando surgiu o movimento "tableless", eu fiquei assustadíssima. Pensei: "O que é isso?". Depois, a gente foi aprendendo.
E, apesar de hoje essa prática não ser tão comum, ela ainda existe. Alguns desenvolvedores continuam usando tabelas para organizar visualmente o conteúdo na tela.
Isso não é uma boa prática, principalmente quando essa tabela vem acompanhada de semântica, porque o leitor de telas vai começar a estabelecer relações entre os dados. O problema é que essa tabela, na verdade, não existe como uma tabela de dados. Ela está ali apenas no código para organizar visualmente o conteúdo.
Então, imagine a confusão que acontece quando um leitor de telas começa a associar todas essas informações como se fossem dados relacionados.
Por isso, quando uma tabela é utilizada apenas para apresentação visual ou organização de layout, a recomendação é remover completamente a semântica de tabela.
________________________________________
[Sandy]
Olha, eu já sou da geração Z, então não peguei a época da criação de sites com tabelas.
Eu já comecei a trabalhar em um contexto em que existia o Flex no CSS, que permite lidar muito melhor com esse tipo de necessidade, principalmente quando a gente pensa em responsividade.
Quando trabalhamos com tabelas para estruturar layouts, não necessariamente conseguimos fazer com que aquele elemento se adapte adequadamente a telas menores, seja em desktops com resoluções reduzidas ou até mesmo em dispositivos móveis.
________________________________________
[Reinaldo]
Nossa, eu lembro da construção de tabelas para layout.
A gente criava tabelas muito complexas, com blocos de células que eram unidos usando "<span>", "<role=...>" e outros recursos.
________________________________________
[Cláudia] E tinha o Dreamweaver, lembra?
O Dreamweaver já fazia todo o trabalho de cortar as imagens e montar automaticamente as tabelas prontinhas com todos os elementos visuais.

Que horror, né?

________________________________________
[Reinaldo]
Eu usava — só para abrir um parêntese aqui, gente — uma ferramenta do Photoshop chamada ImageReady, que depois foi incorporada ao próprio Photoshop.
Ela pegava a imagem criada no Photoshop, você fazia as marcações e a ferramenta cortava automaticamente todas as partes da imagem, inserindo tudo dentro de uma tabela.
________________________________________
[Cláudia]
Eu usei! Eu achava aquilo maravilhoso.
Depois é que eu fui perceber o problema que aquilo causava.
________________________________________
[Sandy]
Gente, eu sou uma pessoa que nunca tocou em um disquete na vida.
Vocês estão falando dessas coisas e eu estou tentando imaginar como era. Que absurdo!
________________________________________
[Reinaldo]
A web passou por muita coisa para chegar ao que é hoje, viu?
Bom, gente, sobre tabelas, vocês querem comentar mais alguma coisa? Alguma dica ou boa prática para construir tabelas de forma mais acessível?
________________________________________
[Cláudia]
Acho que a gente precisa ter cuidado com o uso das tabelas, porque elas são muito importantes, mas devem ser utilizadas para apresentar dados tabulares, ou seja, dados que se relacionam entre si e que podem ser organizados em linhas e colunas.
Não devemos utilizar tabelas para criar layouts.
Também é preciso ter cuidado com as tabelas do ponto de vista visual, porque nem todo mundo tem facilidade para compreender informações apresentadas nesse formato. Por isso, quando as tabelas são muito complexas, é interessante oferecer alternativas em outros formatos para apresentar as mesmas informações.
________________________________________
[Sandy]
Acho que a primeira provocação é: esse conteúdo realmente precisa ser uma tabela?
Essa é a primeira reflexão. E, se realmente precisar ser uma tabela, ela deve ser bem construída tanto do ponto de vista semântico quanto visual.
Quando a gente fala de tabelas complexas que precisam de uma descrição de apoio, essa descrição existe justamente para complementar a compreensão, e não para ser a única forma de entendimento da informação.
Então, é importante definir claramente, seja visualmente, seja por meio de recursos auditivos, o que é uma coluna, onde está o cabeçalho e como a linha de cabeçalho se diferencia das linhas de conteúdo, e assim por diante.
________________________________________
[Reinaldo]
Legal. Bom, a gente já está caminhando para o final do episódio.
Só para fazer uma recapitulação técnica, conseguimos falar por bastante tempo sobre listas e tabelas. Eu acho impressionante, porque adoro esse tipo de conversa.
Mas acho legal que a gente conseguiu mostrar como a semântica é extremamente importante para listas e tabelas. E não apenas para listas e tabelas: existem outros componentes do HTML que também dependem fortemente de uma marcação semântica adequada.
A principal mensagem que eu levo da conversa de vocês é que precisamos reforçar a semântica em todo o conteúdo que desenvolvemos. Toda marcação deve ser semântica, e não apenas no caso de listas e tabelas.
Para encerrar o episódio, eu queria pedir uma palavra final de cada uma de vocês.
________________________________________
[Cláudia]
Eu vou emendar com o que você falou: a semântica é muito importante.
De preferência, devemos utilizar a semântica nativa do HTML. É uma semântica que já vem pronta e que entrega as informações ao usuário de forma completa.
Então, sempre que pudermos, devemos usar a semântica nativa do HTML.
________________________________________
[Sandy]
Acho que o exercício da semântica não vale apenas para quem desenvolve, mas também para quem desenha a experiência.
No momento em que eu entendo a semântica dos componentes e dos elementos que estão à minha disposição, consigo fazer uma reflexão: será que aquele conteúdo que eu quero transmitir funciona melhor como um parágrafo, uma tabela ou uma lista?
Qual é a melhor forma para o usuário entender e interagir com aquele conteúdo?
________________________________________
[Reinaldo]
Bom, pessoal, chegamos ao fim de mais um episódio do Podcast Todos na Web.
Espero vocês no próximo episódio.
Até a próxima!