Accessibility issues

1,468 views
Skip to first unread message

snarf1974

unread,
Dec 6, 2011, 7:01:45 AM12/6/11
to Google Visualization API
Hi,

I really love Google charts.

I would like to use Google charts to display all the charts for a
Government organisation. However, there appears to be no fallback if
the browser has javascript turned off. Is there anything I can do to
serve up an alternative if javascript is turned off?

The government website I'm working on has a strict accessibility
policy. Does Google Charts comply with W3C? Are screen readers like
JAWS able to read Google Charts?

I would really love to use Google charts, but fear I won't be able to
if it isn't accessible.

I would really appreciate a response.

Many Thanks
Snarf1974

Roni Biran

unread,
Dec 6, 2011, 8:59:05 AM12/6/11
to google-visua...@googlegroups.com
Hi,

The accessibility issue was actually discussed a month ago.
I think that the Visualization charts comply with it in regard to size, fonts, color schemes, legends positioning etc. that you can control and alter as you wish.
As for JavaScript fallbacks, it does not have one, however you can write one yourself with and use in need the image charts API (http://code.google.com/apis/chart/image/). It does not use JavaScript and just draws an image. This is a service provided by Google to render charts online.

Hope this helps a little :-)

Best of luck,


Snarf1974

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.


Riccardo Govoni ☢

unread,
Dec 6, 2011, 8:59:27 AM12/6/11
to google-visua...@googlegroups.com
Google interactive charts (http://code.google.com/apis/chart) are heavily dependent on javascript (the entire charts package is one big javascript library) and won't work if javascript is disabled. On the contrary Google Image Charts (http://code.google.com/apis/chart/image/) are rendered as plain images, hence they will work if javascript is disabled, although obviously screen readers won't be able to understand the contents of the image.

Screen-readers aside, your best option could be to fallback to Google Image charts when javascript is disabled, and use Google interactive charts otherwise. Note however, that the two have different APIs, so supporting both and falling back from one to the other might not be simple.

-R.

Snarf1974

Scott Glenister

unread,
Dec 12, 2011, 5:10:14 AM12/12/11
to google-visua...@googlegroups.com
Hi Riccardo,

Thanks for your help, I am so tempted to use Google interactive charts, and have google image charts as the fallback when javascript is disabled. However I need it to be super accessible because it's going to be on a government website:

ARIA support now included

Though this approach to creating charts and graphs is inherently accessible — the table data remains in the page markup for screen readers and browsers that don't support JavaScript — we realized that the canvas element needed ARIA attributes to better identify it as a visualization. In the latest update to Visualize, we edited the plugin to automatically assign two ARIA attributes to the chart container to more clearly identify its purpose to screen readers:

  • role="image" – tells screen readers that the chart is purely visual, and can therefore be skipped
  • aria-label="Chart representing data from: [table caption value]" – specifically identifies the chart's content as belonging to the associated table


Riccardo Govoni ☢

unread,
Dec 13, 2011, 3:51:31 AM12/13/11
to google-visua...@googlegroups.com
Hi Scott,

You can still achieve the same results described in the article with Google Charts. First, you have access to the container where the chart is rendered into, so you can attach both the role and aria-label attributes to it. Second, you can always render the chart contents as table, either using a plain HTML table or using the Google Charts table visualization, which actually renders using HTML elements, so it more screen-reader friendly than other charts.

Would that work?

-R.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

NMU

unread,
Aug 23, 2012, 11:11:11 AM8/23/12
to google-visua...@googlegroups.com
Hi,
I'm in the same position as OP. I'm creating line and table charts using google viz for government websites. The JavaScript part of it doesn't concern me. If a user has JS turned off, most of the governments sites wont work anyways and we've never heard any complaints on the JS part of it.

What i want to know is if I use the Table chart visualization, can it be read by screen readers? Can a line chart visualization be read by screen readers? Or is the more accessible way to use the google Line chart visualization and then hard code the Table version in HTML? I'd prefer not to code anything in HTML since the Line/Table visualizations are easily swappable.

Thanks.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

NMU

unread,
Aug 23, 2012, 11:15:19 AM8/23/12
to google-visua...@googlegroups.com
I also forgot to mention that I don't understand what/how to use role and aria-label attributes to make the line/table viz accessible. If you could explain or use an example that would be great. BTW - All my data is DB driven and created on the fly.

asgallant

unread,
Aug 23, 2012, 1:33:48 PM8/23/12
to google-visua...@googlegroups.com
Yes, Table visualizations should be readable by screen readers (they are just stylized HTML).  I doubt that any of the other charts are readable by screen readers, but maybe someone out there has an ingenious idea of how to do it.  You can create both a chart and table representation of your data using the API, which should cover the accessibility requirements.

To add the ARIA info, I believe all you need to do is add "role" and "aria-label" parameters to the chart's div tag:

<div id="chart_div" role="image" aria-label="This is what the screen reader reads"></div> 

I haven't used ARIA, so I'm not 100% certain of that, but a google search should help you there.
Reply all
Reply to author
Forward
0 new messages