Como criar gráficos acessíveis

Gráficos, mapas e infográficos estão presentes em nossas vidas, mas é quando essas informações não estão acessíveis?

Pessoas com deficiência, não conseguem compreender eles devido a falta de acessibilidade. Nesse artigo, vou te mostrar duas técnicas que podem melhorar isso.

Vamos lá?

O que são imagens complexas?

São representações visuais que contêm informações que não podem ser transmitidas através de uma sentença ou frase curta, como por exemplo:

• fluxogramas;
• organogramas;
• diagramas e ilustrações em que o texto da página depende da capacidade do usuário de compreender a imagem;
• infográficos;
• mapas mostrando locais ou outras informações como sistemas climáticos;
• os famosos CAPTCHAs.

Nesses cenário o atributo ALT não funciona bem, Dessa forma precisamos encontrar outras soluções. Escrevi um guia completo sobre como escrever textos alternativos.

Criando gráficos acessíveis

Como exemplo, vou usar o gráfico da pesquisa WebAim Million. Seu objetivo é mostrar os erros de acessibilidade das páginas na web.

Para criar gráficos acessíveis, podemos usar duas técnicas: tabelas semânticas e atributos ARIA.

Solução 1: usando tabelas

Essa solução é simples, basicamente vamos representar o gráfico em uma tabela HTML. Vale lembrar que marcar a tabela de forma semântica é importante.

Devemos colocar a tabela logo abaixo do gráfico, leitores de tela leem o HTML por ordem de declaração no DOM.

Dessa forma, usuários de leitores de tela terão várias formas de acesso, possibilitando assim, a navegabilidade nas informações.

Vamos usar duas abordagens com tabelas, a primeira será manter ela visível para todos, e a segunda exibiremos somente para os leitores de tela.

Exibindo a tabela

Para fins didáticos vou considerar somente o erro de baixo contraste e texto alternativo no exemplo. A estrutura HTML da nossa tabela será da seguinte forma:

Detalhe importante estou usando o atributo scope, ele define o cabeçalho de uma coluna ou linha. Iremos usar os seguintes valores:

• row: o cabeçalho refere-se a todas as células da linha a que pertence;
• col: o cabeçalho refere-se a todas as células da coluna a que pertence.

Quando navegamos com o leitor de telas ele identifica esses atributos e conseguimos ter uma navegação mais linear e fluída dentro da tabela.

Ocultando tabela visualmente

A única diferença da tabela anterior é uso de uma classe CSS para ocultar a tabela visualmente, dessa forma somente o leitor de tela irá consumir a informação.

Solução 2: usando atributos ARIA

Outra técnica interessante é utilizar o atributo aria-describedby, ele é utilizado para estabelecer um relacionamento entre widgets ou grupos e o texto que o descreve.

Também pode ser usado uma sequência de ids ou somente um. Ele não está limitado a controles de formulários. Pode ser usado em contextos globais dentro de um documento HTML.

Com o aria-describedby aplicado, o leitor de telas irá ler o atributo alt e logo após será direcionado ao conteúdo da