Pular para o conteúdo
Observatóriov2026.51do Congresso Internacional de Design da Informação

Acessibilidade

O design da informação estuda como tornar a informação compreensível para qualquer pessoa. Por isso, esta plataforma procura atender ao mesmo critério. Esta página informa o que já foi feito para garantir a acessibilidade e o que ainda falta fazer.

Estrutura e navegação

  • O código de cada página indica a função de cada parte, como título, lista ou tabela. Cada página tem um único título principal (h1), e os subtítulos seguem em ordem, sem pular níveis.
  • Um atalho para ir direto ao conteúdo é o primeiro item alcançado pela tecla Tab.
  • Toda a plataforma pode ser usada pelo teclado. Um contorno visível marca o controle selecionado.
  • Quando você troca de seção, a seleção do teclado vai para o conteúdo. Assim, o leitor de tela, o programa que lê a página em voz alta, anuncia a página nova.
  • Cada seção tem o seu endereço. Isso permite abrir a seção diretamente e voltar pelo botão de voltar do navegador.
  • Em telas de toque, todo controle responde numa área de pelo menos 44 pixels de altura. Isso vale para os botões da faixa do alto, os itens do menu, o sumário da página, os termos das nuvens, os campos de filtro e o "ler a análise" de cada painel. Quando o controle é fino, como a pílula no pé do painel, a área que responde ao toque é maior do que o desenho do controle. Há três exceções: os links dentro de uma frase, os do mapa do rodapé e as palavras-chave e os selos dos trabalhos, junto com os nomes de autores no Catálogo, no celular. Elas estão explicadas no painel Cor, tamanho do texto e movimento.

Gráficos

O código de cada gráfico informa a sua função e traz uma descrição. Cada marca do gráfico, como uma barra ou um ponto, mostra um rótulo quando o ponteiro passa sobre ela. Esse rótulo também é lido pelas tecnologias assistivas, como o leitor de tela. As marcas clicáveis podem ser selecionadas pelo teclado e respondem às teclas Enter e Espaço.

Nenhuma informação depende só da cor. Cada marca traz escritos o nome da categoria e o valor, na dica que aparece sob o ponteiro, na legenda e na tabela do painel. Até nove séries, cada série tem um tom de cor diferente. Os tons foram escolhidos para ficarem o mais diferentes possível entre si. A partir da décima série, as cores se repetem, e a diferença passa a ser marcada também pelo tipo de traço, nas linhas, e pela textura, nas áreas empilhadas.

Além disso, todo painel tem a sua tabela, em "ver os dados", com os mesmos números usados no gráfico. Quem não consegue ler o gráfico pode ler a tabela e encontra a mesma informação.

Cor, tamanho do texto e movimento

  • Há um tema claro e um escuro. Na primeira visita, a plataforma usa o tema escolhido no sistema do seu aparelho.
  • O tamanho do texto usa uma unidade relativa, que acompanha o tamanho escolhido nas configurações do navegador. Nenhum texto de leitura fica menor do que esse tamanho.
  • A plataforma usa duas fontes, cada uma com uma função. O texto corrido usa IBM Plex Sans. A fonte monoespaçada, em que todas as letras têm a mesma largura, JetBrains Mono, é usada no que se lê como número: tabelas, valores, legendas e código.
  • Os controles têm área de toque de 44 pixels. Um modelo de IA (Claude) conferiu essa medida em cada elemento, numa tela de 375 pixels de largura. Nos gráficos, as marcas são pequenas. Por isso, a área que recebe o toque é a faixa inteira do dado: a linha inteira, no gráfico de barras; a coluna inteira, na série por edição; e um círculo de 44 pixels em volta do ponto, no gráfico de linhas. A norma prevê exceções, e a plataforma usa duas delas. A primeira é o link dentro de um parágrafo, que não pode crescer sem quebrar a linha do texto. A segunda é o controle cujo destino também está em outro controle com a área completa. É o caso do mapa do rodapé: os trinta links respondem numa área de 26 pixels, porque uma área maior cobriria a do link vizinho. Os pesquisadores responsáveis pediram que esses links voltassem à entrelinha do desenho. O modelo manteve o mapa assim porque os mesmos trinta destinos estão na coluna de seções, com área de 44 pixels. As palavras-chave e os selos dos trabalhos, como o do congresso e o do tipo, respondem numa área de 24 pixels, o mínimo da norma, e no Catálogo, no celular, os nomes de autores também. Com 44 pixels, cada um virava um retângulo alto, e as áreas de linhas vizinhas se sobreporiam. No Catálogo, um toque em outra parte do bloco abre a ficha do trabalho.
  • Cada gráfico está ligado, no código, aos textos que o descrevem. A frase sob o título serve de descrição curta. A análise no pé do painel serve de descrição longa. O leitor de tela anuncia essas descrições e permite chegar até elas.
  • Quando o sistema do aparelho pede menos movimento na tela, a rolagem suave e as transições são desligadas.
  • Quando a cor indica uma categoria, a categoria também aparece escrita. Nas barras de Referências, a origem do nome aparece na dica do ponteiro, na tabela de dados e na legenda. No quadro de conceitos, a situação de cada conceito aparece na dica de cada etiqueta e na tabela de dados, e as etiquetas são agrupadas por situação, na ordem da legenda. Nas etiquetas do Catálogo, a categoria aparece escrita na dica. Nos gráficos de linhas, o tipo de traço muda junto com a cor.
  • Nos botões de voltar, a cor indica o tipo de retorno. O rosa volta ao filtro de onde você veio e mantém o item do menu na mesma cor. A lavanda desfaz o último passo dentro da seção, por exemplo de uma ficha para a pessoa, ou de uma pessoa para outra. O marinho leva para fora da plataforma. Nenhum dos três depende da cor: cada botão traz uma seta antes do rótulo, e o rótulo diz o destino por extenso.
  • O contraste é a diferença de luminosidade entre uma cor e o fundo. Ele é medido como uma razão, e quanto maior o número, mais fácil é ver a cor. O contraste dos tons que mostram dados foi medido contra o fundo do painel, nos dois temas. O cinza cheio das barras fica em 4,1:1 no tema claro. O cinza claro fica em 2,2:1, abaixo dos 3:1 que a norma pede para elementos gráficos. Os pesquisadores responsáveis mantiveram essa exceção, porque cada barra traz o valor escrito ao lado, o nome à esquerda e a categoria por extenso. Assim, nenhuma informação depende de enxergar aquele tom. A lavanda, o azul-água, o verde-limão e o rosa claro ficam entre 1,2:1 e 2,2:1, pelo mesmo motivo, e no tema claro nunca são usados como cor de texto.
  • Quando o ponteiro passa sobre um gráfico de linhas, abre-se uma caixa em que cada linha aparece no tom da sua série. Os tons claros ficam abaixo de 4,5:1. Essa exceção também foi mantida, pelo mesmo motivo. O tom liga a linha da caixa à linha do gráfico, e o mesmo valor está na dica da coluna, que o leitor de tela anuncia, e na tabela de "ver os dados".
  • O cartograma é o mapa feito de células. A borda das suas células, e a dos botões que trocam a medida mostrada, fica em 1,3:1 contra o fundo da página. Esse valor está abaixo dos 3:1 pedidos para a borda de um componente. Essa exceção também foi mantida. Ali, a borda só separa um vizinho do outro. Cada peça é identificada pelo preenchimento e pelo rótulo escrito dentro dela. Nos botões, o que está selecionado aparece com a cor cheia, ao lado dos outros.

O que ainda falta

A WCAG, as diretrizes internacionais de acessibilidade para conteúdo da web, é a referência desta seção. Ainda não foi feita uma auditoria formal com a versão 2.1 dessas diretrizes, no nível AA. O que existe são as medidas descritas acima. O modelo as adotou durante a construção da plataforma e as conferiu por inspeção. Nenhuma ferramenta certificada foi usada.

Os gráficos mais densos, como a rede de coocorrência e a matriz de correlação, são difíceis de percorrer pelo teclado, uma marca de cada vez. Por isso, para esses gráficos, o caminho recomendado é a tabela de dados.

Quando há até sete séries, elas se distinguem só pelo tom. A série de sete cores foi escolhida em 04/10/2026, com a identidade da Sociedade Brasileira de Design da Informação. Um programa escrito pelo modelo simulou a deuteranopia e a protanopia, que são as formas de dicromacia em que falta o canal do verde ou o do vermelho. Nessa simulação, duas cores vizinhas na série ficam a uma distância de pelo menos 0,143 no tema claro e 0,104 no tema escuro, acima do limite de 0,100 que a plataforma usa. O par mais parecido da série, o azul-água e o rosa claro, fica a 0,037, e por isso as duas cores nunca aparecem lado a lado. Quem não distingue esses tons pode ler o nome da categoria, que está na dica, na legenda e na tabela. A partir da oitava série, a cor se repete e a distinção fica com o tipo de traço e com a textura.

Se você encontrar alguma dificuldade de acesso, escreva e conte qual foi. O caminho está em Contato.