Listas e tabelas

Neste episódio, conversamos sobre o uso acessível de listas e tabelas, elementos muito comuns na Web para apresentar dados tabulares, como relatórios e planilhas e para agrupar conteúdo e para facilitar a navegação. As especialistas Cláudia Martin Nascimento e Sandyara Peres explicam como apresentar dados e agrupar conteúdos de forma estruturada e sem criar barreiras, garantindo que todas as pessoas compreendam as informações apresentadas.

A produção deste podcast não seria possível sem o apoio da Embaixada do Reino Unido, da Secretaria de Governo Digital do Ministério da Gestão e da Inovação em Serviços Públicos e com a parceria do W3C Chapter São Paulo, Movimento Web para Todos e Acesso para todos.

Participantes

Host: Reinaldo Ferraz
Convidados: Cláudia Martin Nascimento e Sandyara Peres
Produção: Espiral Interativa, Ceweb.br e Comunicação NIC.br
Estúdio de gravação: 3 Telas
Roteiros: Espiral Interativa, Acesso para Todos, Ceweb.br
Recursos de acessibilidade:
Tradução e Interpretação de Libras-Português
Tradutora: Jade Moia
Legendas: Espiral Interativa e Ceweb.br

Link para transcrição do episódio: https://nic.br/pagina/transcricao-todos-na-web-11/

Redes Sociais:

https://www.youtube.com/nicbrvideos/
https://x.com/comuNICbr/
https://www.telegram.me/nicbr/
https://www.linkedin.com/company/nic-br/
https://www.instagram.com/nicbr/
https://www.facebook.com/nic.br/
https://www.flickr.com/NICbr/

Veja também:

https://nic.br
https://ceweb.br

Termos e expressões utilizados ao longo do episódio:

Bullet (marcador): símbolo usado para destacar itens em uma lista. Exemplo: os pontinhos, quadrados ou traços usados para listar tópicos em uma apresentação ou documento.

Cabeçalho de tabela: célula que identifica o significado dos dados apresentados em uma linha ou coluna. Exemplo: em uma tabela de alunos, os cabeçalhos podem ser "Nome", "Turma" e "Nota".

Dados tabulares: informações organizadas em linhas e colunas dentro de uma tabela. Exemplo: uma planilha com produtos, preços e quantidades.

Descrição de tabela: texto que ajuda a explicar o conteúdo e a organização de uma tabela.

Exemplo: Uma explicação indicando que a tabela apresenta os resultados de vendas por mês e por região.

E-commerce: loja virtual onde produtos ou serviços são vendidos pela internet. Exemplo: um site onde a pessoa pode escolher produtos, adicionar ao carrinho e finalizar a compra.

Encontrabilidade: facilidade com que uma pessoa consegue localizar uma informação e entender seu contexto. Exemplo: saber rapidamente a qual coluna pertence um dado dentro de uma tabela.

Hierarquia: organização das informações em níveis ou categorias. Exemplo: uma lista principal contendo subitens relacionados a cada tópico.

HTML: linguagem usada para estruturar páginas na Web. Exemplo: é o código que define títulos, parágrafos, listas, tabelas, links e outros elementos de uma página.

Layout: forma como os elementos visuais são organizados em uma página. Exemplo: a posição de menus, imagens, textos e botões em um site.

Leitor de telas: tecnologia assistiva que lê em voz alta o conteúdo da tela para pessoas cegas ou com baixa visão.

Lista: conjunto de itens organizados em sequência para facilitar a leitura e a navegação. Exemplo: uma lista de ingredientes de uma receita ou uma lista de links de um menu de navegação.

Lista de definições: lista que relaciona um termo ao seu significado ou uma pergunta à sua resposta. Exemplo: um glossário que apresenta palavras e suas explicações.

Lista não ordenada: lista em que a ordem dos itens não altera o significado da informação. Exemplo: uma lista de ingredientes ou uma lista de materiais necessários.

Lista ordenada: lista em que a ordem dos itens é importante. Exemplo: o passo a passo de uma receita ou as etapas para preencher um formulário.

Manutenção de código: atividade de atualizar, corrigir ou melhorar o código de uma aplicação de software após sua criação. Exemplo: alterar a aparência de todas as listas de um site sem precisar modificar cada item individualmente.

Menu de navegação: conjunto de opções que ajuda a pessoa a encontrar diferentes áreas de um site ou aplicativo. Exemplo: os links "Início", "Produtos", "Contato" e "Sobre nós".

Navegação: forma como uma pessoa percorre e acessa conteúdos em um site ou aplicativo. Exemplo: passar de um menu para outro ou encontrar uma informação específica em uma página.

Responsividade: capacidade de um site ou aplicativo se adaptar a diferentes tamanhos de tela. Exemplo: um conteúdo que funciona bem tanto em um computador quanto em um celular.

Semântica: forma de indicar claramente qual é a função ou o significado de cada elemento em uma página. Exemplo: informar ao navegador que um conjunto de itens é uma lista ou que determinada informação é um cabeçalho.

Semântica nativa: uso dos elementos já existentes na linguagem HTML para representar corretamente cada tipo de conteúdo. Exemplo: utilizar uma lista para representar itens de uma lista, em vez de simular visualmente esse comportamento com parágrafos e símbolos.

Submenu: grupo de opções que aparece dentro de uma opção principal de navegação. Exemplo: dentro do menu "Produtos", aparecerem as categorias "Celulares", "Notebooks" e "Acessórios".

Tabela para layout: uso inadequado de tabelas apenas para organizar visualmente uma página, sem apresentar dados. Exemplo: utilizar uma tabela para posicionar imagens e textos lado a lado.

Tecnologia assistiva: recursos e ferramentas que ajudam pessoas com deficiência a utilizar computadores, celulares e outros dispositivos. Exemplo: leitores de tela, teclados adaptados, ampliadores de tela e linhas Braille são exemplos de tecnologias assistivas.

Além dos termos que comentamos aqui, a Norma ABNT 17225 traz uma seção de termos e definições que pode complementar seu entendimento e apoiar você nessa jornada.