Tabela Periódica Acessível

Sobre as autoras

O que é uma tabela?

Imagine uma grande caixa de ovos, dentro dessa caixa, os ovos não estão jogados de qualquer jeito; eles estão organizados em espaços separados, lado a lado e um embaixo do outro.

Essa organização é o que chamamos de grade ou matriz. Se você já pegou em uma caixa de ovos, sabe que ela é formada por várias "casinhas", cada "casinha" guardando um ovo.

Quando você passa a mão tanto para a esquerda quanto para a direita, sente que existem linhas de ovos, que são as fileiras na horizontal (um do lado do outro).

table_rows

Já se for com a mão para cima ou para baixo vai sentir que existem as colunas de ovos, que são os ovos um embaixo do outro na vertical.

table_chart

Essa é a estrutura básica de uma tabela.

grid_on

• Linhas: Uma linha em uma tabela é exatamente isso: uma sequência de informações colocadas (organizadas) na horizontal.
• Colunas: Em uma tabela, as colunas são as informações organizadas na vertical, uma embaixo da outra.

Uma tabela é o resultado de juntar linhas e colunas. Onde uma linha e uma coluna se encontram, formam um espaço único, como uma "casinha" dentro da grade. Cada casinha é um lugar específico para guardar uma informação.

Essa "casinha" que se forma quando uma linha e uma coluna se cruzam é chamada de célula. Cada célula guarda um pedaço de informação, que pode ser um número, uma palavra, ou qualquer outro dado.

Como ler uma tabela com leitores de tela

Preste atenção em como o leitor de telas faz a leitura da tabela. Ele vai anunciar o cabeçalho (as colunas) primeiro, e depois vai ler cada linha com as informações. Quando ele vai passando pelas células, ele vai dizendo o nome da coluna antes de falar o valor (o que está dentro) daquela célula.

Existem diferenças em como cada leitor de telas faz a leitura de uma tabela.

No caso de leitores de tela de computadores de mesa e notebooks, como o NVDA (no Windows), ao chegar na tabela, ele anuncia a existência dela e informa a quantidade de linhas e colunas disponíveis. Caso exista uma descrição, ela também é lida, fornecendo o contexto sobre o conteúdo exibido.

Usando as setas para cima, para baixo, esquerda e direita do teclado, a pessoa pode percorrer cada célula da tabela. O NVDA identifica automaticamente o cabeçalho correspondente daquela linha ou coluna e anuncia junto com o valor da célula.

Por exemplo, se a célula tiver o número "70" na coluna de pontos, o NVDA dirá algo como "Pontos, 70". Isso garante clareza sobre o que aquele número quer dizer.

O NVDA consegue relacionar corretamente cada informação dentro da célula na tabela ao seu título na coluna, evitando que a leitura fique confusa (desde que a tabela esteja corretamente estruturada).

Com comandos específicos do NVDA, é possível ouvir novamente o título ou a descrição da tabela, isso ajuda a relembrar o contexto do que está sendo lido.

Já nos dispositivos móveis, em leitores como o TalkBack (Android) e VoiceOver (iOS), a navegação por tabelas é feita de maneira diferente. Nesses casos, você pode usar gestos específicos para navegar entre as células, linhas e colunas da tabela.

• No TalkBack, você pode usar a granularidade que é um recurso que permite alternar entre diferentes níveis de detalhes na leitura. Por exemplo, você pode alternar entre ler apenas a célula atual, a linha inteira ou a tabela completa e até mesmo soletrar o conteúdo da célula.
• No VoiceOver, você pode usar o Rotor, que é uma ferramenta de navegação que permite selecionar diferentes tipos de elementos na tela. Com o Rotor, você pode escolher navegar por células, linhas ou colunas da tabela e também consegue soletrar o conteúdo da célula.

para mais informações sobre o Google TalkBack, visite: Navegar no dispositivo com o TalkBack(abre em nova janela).

para mais informações sobre o Apple VoiceOver, visite: Usar o VoiceOver no iPhone(abre em nova janela).

Pode acontecer de leitores de tela do Android e iOS não anunciarem corretamente o cabeçalho da tabela, os títulos das colunas e linhas. A consequência disso é que a leitura das células pode ficar confusa, pois o leitor de telas pode não conseguir relacionar o valor da célula com o título correto da coluna ou linha e por consequência acabar lendo apenas o valor da célula, sem contexto.

Por isso é importante usar a granularidade no TalkBack e o Rotor no VoiceOver para garantir que você está navegando corretamente pela tabela e que consiga entender o contexto de cada célula.

Se tiver a oportunidade, valide a leitura da tabela com leitores de tela de computadores e notebooks, como o NVDA (Windows), JAWS (Windows), VoiceOver (Mac) e Orca (Linux), para garantir que a estrutura da tabela está correta e que a leitura está clara e compreensível.

Observação: Este problema não acontece na nossa tabela periódica acessível, pois apesar do nome, ela segue uma estrutura baseada em cartões como será explicado mais adiante nesta janela de funcionamento.

Teste de leitura de tabela

Aqui está um exemplo simples de tabela para você testar a leitura com seu leitor de telas. Lembre-se que para o leitor de telas anunciar corretamente o cabeçalho e os valores das células, a tabela precisa estar bem estruturada.

Experimente navegar por essa tabela usando as setas do teclado (em computadores) ou os gestos de navegação (em dispositivos móveis) para ver como o leitor de telas anuncia cada célula com o contexto correto.

O que é a tabela periódica dos elementos químicos?

A tabela periódica dos elementos químicos organiza os elementos, como oxigênio, hidrogênio, ouro, ferro entre outros. Ela não apenas lista os elementos, mas os organiza de uma forma que você pode entender as características de cada um só pela sua posição.

A estrutura dela segue a mesma lógica de linhas e colunas que já foi mostrada:

• Linhas (Períodos):

  As linhas são chamadas de Períodos. Existem 7 delas. Elas organizam os elementos em ordem crescente de número atômico (o número de prótons em cada átomo). Começando pelo Hidrogênio, que tem 1 próton, e seguindo da esquerda para a direita, o número atômico vai aumentando.

  A posição horizontal de um elemento, ou seja, o seu período, indica quantas camadas eletrônicas ele tem. Quanto mais para baixo na tabela, mais camadas de elétrons o elemento tem. Isso afeta o tamanho do átomo e o quão longe os elétrons mais externos estão do núcleo. Por exemplo, os elementos do Período 2 (segunda linha) são menores que os do Período 4 (quarta linha).

• Colunas (Grupos):

  As colunas são chamadas de Grupos. Existem 18 delas. Elementos que estão na mesma coluna, ou seja, no mesmo grupo, têm propriedades químicas parecidas. É como se todos os "parentes" estivessem juntos. Por exemplo, o grupo 18 é dos "Gases Nobres", que quase não reagem com outros elementos.

  A posição vertical, ou o grupo, agrupa os elementos com a mesma quantidade de elétrons na camada mais externa (elétrons de valência). Isso é o mais importante! A quantidade de elétrons de valência determina as propriedades químicas de um elemento, como a forma que ele se liga a outros átomos e se reage fácil ou não. É por isso que todos os elementos em um mesmo grupo, como o Lítio e o Sódio, reagem de forma parecida.

A tabela periódica não é apenas uma forma de organizar os elementos químicos de maneira estética; ela traz consigo um padrão de repetição chamado periodicidade, que permite prever várias propriedades dos elementos com base em sua posição. É por isso que são chamadas de propriedades "periódicas".

1. Quando se caminha da esquerda para a direita em uma mesma linha (período):
   • Afinidade eletrônica e energia de ionização aumentam: isso significa que, à medida que avançamos em um período, os elementos passam a atrair elétrons com mais facilidade e também se torna mais difícil remover um elétron de seus átomos. Ou seja, eles têm núcleos mais carregados positivamente, o que exerce maior atração sobre os elétrons.
   • Características não metálicas aumentam: elementos no lado direito dos períodos tendem a ganhar elétrons e formar íons negativos, comportando-se como não-metais típicos. Assim, substâncias como gases e halogênios aparecem nessa região.
   • Características metálicas diminuem: os elementos no lado esquerdo (como os metais alcalinos) têm forte tendência a perder elétrons e formar íons positivos. Porém, conforme avançamos para a direita, essa tendência diminui, reduzindo o caráter metálico.
2. Quando se caminha de cima para baixo em uma mesma coluna (grupo):
   • Raio atômico aumenta: os átomos ficam maiores porque, a cada nova linha da tabela, adiciona-se uma camada extra de elétrons ao redor do núcleo. Isso faz com que os elétrons mais externos fiquem progressivamente mais afastados.
   • Afinidade eletrônica e energia de ionização diminuem: como os elétrons mais externos estão cada vez mais distantes do núcleo, é mais fácil removê-los e mais difícil que o átomo atraia novos elétrons. Portanto, os átomos no topo da coluna costumam atrair elétrons com mais força do que os da parte inferior.

Esse padrão mostra que a posição de cada elemento na tabela periódica funciona como uma espécie de "código de barras", revelando características fundamentais como tamanho do átomo, facilidade em perder ou ganhar elétrons e se o elemento terá comportamento mais metálico ou não metálico.

Essa lógica de organização permite que, mesmo sem decorar cada propriedade isolada, seja possível deduzi-las a partir da posição do elemento na tabela.

Como funciona a tabela periódica acessível?

Em uma tabela periódica tradicional, a organização visual é fixa, com todos os elementos dispostos em uma única grande tabela. Isso funciona bem em telas maiores, como as de computadores de mesa, mas pode ser um desafio para dispositivos móveis, onde a tela é pequena e a pessoa precisa dar zoom, arrastar a tela horizontalmente (o chamado "swipe" ou "scroll").

Esses movimentos podem ser cansativos e dificultar a navegação, especialmente para pessoas com deficiências motoras ou visuais. Isso acontece porque a pessoa precisa fazer muitos movimentos para encontrar o que procura, o que pode dificultar o uso da tabela.

Esta aplicação se diferencia por não exibir a tabela completa de uma vez, optando por uma visualização mais modular.

Em vez de uma única tabela grande, a interface é adaptada para exibir os elementos de três formas principais, acessíveis através de botões.

Visualização por Períodos

Os elementos são dispostos em seções que correspondem aos períodos (as linhas horizontais da tabela). Isso quebra a tabela grande em partes menores e mais gerenciáveis, ideais para telas de smartphones, onde o conteúdo é apresentado de forma vertical.

Visualização por Grupos

Os elementos são organizados por grupos (as colunas verticais). Essa visualização permite que o usuário explore os elementos por suas propriedades químicas semelhantes, o que também é uma forma de navegação mais amigável para telas pequenas.

Visualização por Categorias

Os elementos são agrupados por suas categorias químicas, organizados em quatro grandes grupos principais:

• Metais
• Semimetais
• Não Metais
• Outros (Hidrogênio)

Essa forma de visualização agrupa os elementos com características químicas semelhantes, facilitando a compreensão de suas propriedades e comportamentos.

Por exemplo, dentro da categoria "Metais", você encontrará subcategorias como Metais Alcalinos, Metais Alcalinoterrosos, Metais de Transição, Lantanídeos, Actinídeos e Outros Metais.

Já em "Não Metais", estão agrupados os Não Metais propriamente ditos, os Halogênios e os Gases Nobres. O Hidrogênio, por ser único, tem sua própria categoria em "Outros".

Essa organização permite que o usuário explore a tabela periódica de uma forma mais didática, compreendendo as relações entre os elementos e suas classificações químicas.

Essa abordagem de usar botões e seções menores é fundamental para garantir a responsividade da aplicação. Em vez de forçar a adaptação de uma tabela grande a uma tela pequena, o design já foi pensado para o mobile.

Painel de Controle

Existe um painel de controle fixo na parte superior da janela onde é possível alternar entre a visualização por períodos, por grupos e por categorias, além de ser possível ativar ou desativar as cores na tabela.

Quando a visualização por períodos está ativada o painel de controle exibe uma seção chamada Navegue pelos períodos da tabela, com botões para cada um dos 7 períodos, além dos botões para os lantanídeos e actinídeos. Pressionando um desses botões, a pessoa é levada diretamente para a seção correspondente na página.

Já quando a visualização por grupos está ativada, o painel de controle exibe uma seção chamada Navegue pelos grupos da tabela, com botões para cada um dos 18 grupos, além dos botões para os lantanídeos e actinídeos. Pressionando um desses botões, a pessoa é levada diretamente para a seção correspondente na página.

E quando a visualização por categorias está ativada, o painel de controle exibe uma seção chamada Navegue pelas categorias da tabela, com botões organizados hierarquicamente pelas quatro grandes categorias: Metais (com subcategorias como Alcalinos, Alcalinoterrosos, Transição, etc.), Semimetais, Não Metais (incluindo Halogênios e Gases Nobres) e Outros (Hidrogênio). Pressionando um desses botões, a pessoa é levada diretamente para a categoria ou subcategoria correspondente na página, facilitando a navegação por tipo de elemento químico.

Cartões de Elementos Químicos

Cada elemento químico é apresentado em um cartão individual, que exibe informações essenciais como o símbolo, o nome e a posição que ocupa na tabela (no caso o período e a coluna).

Esses cartões são interativos: ao clicar com o mouse, tocar na tela touch ou pressionar Enter sobre eles, uma janela modal se abre, fornecendo informações detalhadas sobre o elemento, como Símbolo, Nome, Número Atômico, Número de Massa (massa atômica) e Configuração eletrônica.

Modal de Detalhes do Elemento

Quando você acessa um cartão de elemento, seja clicando, tocando ou pressionando Enter, uma janela modal é aberta com informações detalhadas.

Gerenciamento de foco: Ao abrir a modal, o foco é automaticamente direcionado para o primeiro elemento interativo (geralmente o botão de fechar no canto superior direito). Isso garante que pessoas que navegam por teclado ou usam leitores de tela saibam imediatamente onde estão e possam fechar a janela facilmente se desejarem.

Quando você fecha a modal, o foco retorna automaticamente para o cartão do elemento que você havia clicado. Isso evita que a pessoa se perca na página e precise procurar novamente onde estava antes de abrir a janela.

Estrutura semântica: A modal usa elementos HTML semânticos apropriados, com atributos ARIA role="dialog" e aria-modal="true". Isso informa aos leitores de tela que uma janela de diálogo foi aberta, alterando o modo de navegação.

Rotulagem acessível: Cada modal possui um título claro (o nome do elemento) que é anunciado quando a janela abre. As informações são organizadas hierarquicamente com títulos (<h2>, <h3>) que permitem navegação rápida por marcos de referência.

Informações apresentadas na modal

A janela modal de cada elemento apresenta as seguintes informações:

• Nome do elemento
• Ilustração do elemento
• Grupo
• Símbolo
• Número atômico
• Número de massa (massa atômica)
• Distribuição eletrônica: Esta é apresentada de duas formas complementares para garantir acessibilidade total:
  • Visual: Um diagrama ilustrativo mostrando o núcleo do átomo no centro e as camadas eletrônicas ao redor, com os elétrons distribuídos em suas respectivas posições. Esta representação visual ajuda quem enxerga a ter uma compreensão espacial de como os elétrons estão organizados.
    
    
  • Linear (textual): A notação científica padrão da distribuição eletrônica, apresentada em formato de texto sequencial. Por exemplo:
    
    Camada 1: 

      1s

    1

    A leitura dessa notação é direta, sequencial e construída usando atributos ARIA para garantir que leitores de tela anunciem corretamente cada parte da configuração eletrônica.

Essa combinação de recursos garante que um maior número de pessoas, independentemente de como acessa a informação (visual, auditiva, tátil), consiga compreender completamente as propriedades de cada elemento químico, respeitando as diferenças individuais e promovendo a inclusão no aprendizado de Química.