Gráficos acessíveis com Google Charts

Postado por: Pedro Rogério em

A algum tempo atrás o Google lançou uma API capaz de gerar gráficos passando os parâmetros por uma URL, semelhante a essa:



http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

O gráfico gerado é esse:

Google Charts API

Basta você colocar a URL no atributo src da tag img que o gráfico é gerado dinamicamente. Mas, é totalmente inacessível, pois usuários que navegam com imagens desabilitadas não veriam nenhuma informação sobre o gráfico gerado. Aí é onde entra Chris Heilman membro do grupo de Acessibilidade do Yahoo, que descobriu uma técnica que pode gerar gráficos de torta a partir de uma tabela e permitir que usuários de browsers não convencionais possam ter acesso aos dados do gráfico.

Google Charts

Para que funcione, devemos inserir um código JavaScript no final da página onde conseguimos melhorar de forma rápida a acessibilidade dos gráficos gerados.

Referências

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

9 Responses to “Gráficos acessíveis com Google Charts”

  1. Bacana, mas muitas pessoas com deficiência visual desabilitam o JavaScript e ai?

  2. Interessante. Mas, pouco útil!

  3. Rafael

    olah amigo
    eu li seu post sobre temas para wordpress
    eu baixei varios temas, q veem zipados, soh q naum sei como usar
    eu keria saber tbm c tem algum risco em baixa-los de sites desconhecidos
    me ajude por favor

  4. @ Cristian,

    É aí onde entra o gráfico estilo excel, quem não tem suporte a JavaScript não vê o gráfico de torta e sim o outro gráfico!!!

  5. renato

    Aow esses graficos sao muito lokos msm hen…

  6. eu quero fazer um grafico,sobre uma pesquisa que eu fiz de mercado para,profissionais da educação física.

Leave a Reply