Acessibilidade

• Marcação semântica, com um único h1 por página e hierarquia de títulos sem salto.
• Atalho para pular ao conteúdo, primeiro elemento do foco.
• Navegação completa por teclado, com anel de foco visível em todo controle.
• A cada troca de seção o foco vai para o conteúdo, para que o leitor de tela anuncie a página nova.
• Endereço próprio por seção e por recorte, o que permite chegar direto, enviar o estado a outra pessoa e voltar pelo histórico.
• O botão de retorno diz de onde se veio, e não apenas “voltar”: quem entrou num trabalho a partir de um recorte volta ao recorte.

Cada gráfico traz embaixo um controle “ver os dados” que abre a mesma informação em tabela semântica, com cabeçalho de linha e de coluna. É a etapa de detalhes sob demanda: quem lê por leitor de tela, quem precisa do número exato e quem quer copiar a série chegam ao mesmo lugar.

As barras horizontais dos rankings são desenhadas em marcação, e não em SVG de biblioteca: cada linha continua sendo um item de lista e um botão, e por isso entra na navegação por teclado, o que a barra horizontal do Recharts não faz.

Nenhuma leitura depende só de cor. Onde a cor classifica, como na procedência dos autores citados, a mesma informação aparece na legenda, na dica do ponteiro e na tabela de dados.

• Tema claro e escuro, com a preferência do sistema respeitada na primeira visita.
• Corpo de texto em unidade relativa, que acompanha o ajuste do navegador.
• Área de toque confortável nos controles, e alvo de clique que cobre a linha inteira nas listas.
• Transições curtas, desligadas quando o sistema pede movimento reduzido.
• O foco muda a cor de fundo, e não a opacidade: um controle em foco continua com o mesmo contraste de texto que tinha em repouso.
• A série de cores é a mesma nos dois temas, para que uma linha não troque de identidade quando o leitor troca de tema.
• A cor diz que tipo de volta um botão dá, e ela nunca vai sozinha. Rosa é recorte: liga a página ao Catálogo filtrado por ela, e sai do recorte quando se está dentro dele; o item do menu acende na mesma cor. Ciano é passo: desfaz o último movimento dentro da seção. Grafite é saída: leva para fora da plataforma. A redundância que sustenta a convenção: cada botão traz a seta antes do rótulo e o destino escrito por extenso, de modo que nada dependa de enxergar o tom. Na primeira vez em que você encontra cada um deles, um aviso ao lado do botão diz o que ele faz; ele não toma o foco, sai sozinho e some para sempre depois de visto.
• A mancha do gráfico é clara de propósito, e os cinco tons ficam na mesma faixa de luminosidade: é o que deixa o realce de sobrevoo, num rosa forte, visível sobre qualquer um deles. É exceção assumida, por decisão de projeto: os tons claros ficam abaixo dos 3:1 que a norma pede para objeto gráfico, e por isso todo valor vem escrito ao lado da marca, a categoria vem em palavra na legenda e na dica, e todo painel traz a sua tabela. Nada depende de enxergar o tom.

Uma auditoria formal contra a WCAG 2.1 no nível AA ainda não foi feita. Existem as medidas acima, adotadas durante a construção, e verificação por inspeção, não por ferramenta certificada.

Os gráficos mais densos, como a rede de coautoria e a de coocorrência de termos, são difíceis de percorrer por teclado marca a marca. A tabela de dados é, para eles, o caminho recomendado.

Se você encontrar uma barreira, o relato é a melhor contribuição possível. O caminho está em Contato.