E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Murray Inman
Date: Thu, May 31 2018 4:28PM
Subject: Pie Charts in Survey Results
No previous message | Next message →

Jared,
Great work on the survey! Thank you!

What tool do you use to make the pie charts in the Survey of Web
Accessibility Practitioners #2 Results
<https://webaim.org/projects/practitionersurvey2/>? I like them!

MURRAY INMAN
RIO SALADO COLLEGE | http://riosalado.edu
Director, Instructional Media and Technology
Lead, Rio Accessibility Council
2323 West 14th Street Tempe, AZ 85281
480-517-8561 | = EMAIL ADDRESS REMOVED =

From: Jared Smith
Date: Thu, May 31 2018 4:59PM
Subject: Re: Pie Charts in Survey Results
← Previous message | No next message

Murray Inman wrote:

> What tool do you use to make the pie charts in the Survey of Web
> Accessibility Practitioners #2 Results
> <https://webaim.org/projects/practitionersurvey2/>? I like them!
>

Thanks! And, hey everyone, our survey results have been published! There's
some really interesting stuff in there that you may find interesting and
insightful.

I'm using the Google Charts API... with a fair amount of tweaking for
better accessibility. Their charts will create an embedded data table of
the chart data, but it's not highly accessible and is coded to be presented
only to screen reader users. For each chart, I've copied/pasted this
dynamically generated table into static HTML below each chart (thus I only
have to define the data once) and then manually added the accessibility
markup (basically just global copy/paste to add a caption and table
headers). This could probably be done dynamically instead, if desired.

There are some oddities and ARIA silliness that Google has added to the
charts themselves - which are SVG. I added scripting to hide the SVG
element with aria-hidden="true", hide the embedded table with CSS
display:none, remove the SVG's aria-label (to ensure it won't be read), and
remove the table's aria-label (which is always aria-label="A tabular
representation of the data in the chart." - SUPER informative, eh?). I then
define the entire chart element as role="img" and give it a descriptive
ARIA label.

You can review the code of the page (with the jQuery near the bottom) to
see how this is done.

The result is that everyone gets the shiny, sexy chart and an accessible
data table. The chart is presented to screen readers as an image with a
succinct alternative text (via aria-label) with the full chart data
accessible via the data table. I'd be happy to hear feedback or
recommendations on this.

One possible limitation is that the mouse interactivity/tooltips with the
chart segments are not keyboard accessible. Because this data is already
fully accessible via the data table, and because making these keyboard
accessible would introduce numerous tab stops, repetition, and likely
confusion for screen reader users, I opted to not attempt this.

Thanks,

Jared Smith