"table with data for screen readers"

[Adam Dubinsky]

Hi there!

I am trying to update a webpage to make a chart accessible. The chart has a lot of data, so describing it all in alt text isn't feasible. So, I would like to create an accessible table for screen readers so that visually impaired users can access the date displayed in the chart.

Alas, I'm not a programmer/developer; I have minimal javaScript (but my markup and CSS is pretty good!). So I've been plucking code from the Google Charts samples and fiddling. I have created the chart I want, and I have also added a table pulling from the same data:

 chart.draw(data, options);

        

  table.draw(data, {showRowNumber:false});

The table shows up, and I can always position it off-screen. However, 

The October 6, 2014 release notes say:

• Accessibility
• Adding table with data for screen readers.
• Fix for text with auras.
• More accessibility fixes/tweaks.

So I wanted to see if there's any more information on that. Is drawing a table from the same data the way to go, or is there some specific function for creating an accessible table that screen readers will access when encountering the chart?

(Apologies for being such a novice. Any guidance would help!)

Thanks,

Adam

[Daniel LaLiberte]

Adam,

I'm glad you spoke up about the new accessibility feature, which is still undocumented.  Basically, when you draw a chart, the accessibility table for the chart is also generated and embedded in the page invisibly.  It is in a div after the svg, and has an attribute aria-label="A tabular representation of the data in the chart."

Hope that helps.  Let us know if this doesn't meet your needs.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Adam Dubinsky]

Wow! That is AMAZING!

Yes, I see it using the developer tools.

Thank you for your great work!

[Adam Dubinsky]

Hi Daniel,

It looks like one of our QA people used JAWS to test the page I made that included a chart, but JAWS didn't present the tabular data.

Do you happen to know if there are any browser restrictions (e.g., Chrome only) or Reader restrictions (Google screen reader vs. JAWS)?

I'll try to get more info from QA. Any updated information on screen reader compatibility would help.

Thanks!

Adam

On Monday, November 17, 2014 1:21:29 PM UTC-8, Daniel LaLiberte wrote:

Adam,

I'm glad you spoke up about the new accessibility feature, which is still undocumented.  Basically, when you draw a chart, the accessibility table for the chart is also generated and embedded in the page invisibly.  It is in a div after the svg, and has an attribute aria-label="A tabular representation of the data in the chart."

Hope that helps.  Let us know if this doesn't meet your needs.

On Mon, Nov 17, 2014 at 4:02 PM, Adam Dubinsky <lawro...@gmail.com> wrote:

Hi there!

I am trying to update a webpage to make a chart accessible. The chart has a lot of data, so describing it all in alt text isn't feasible. So, I would like to create an accessible table for screen readers so that visually impaired users can access the date displayed in the chart.

Alas, I'm not a programmer/developer; I have minimal javaScript (but my markup and CSS is pretty good!). So I've been plucking code from the Google Charts samples and fiddling. I have created the chart I want, and I have also added a table pulling from the same data:

 chart.draw(data, options);

        

  table.draw(data, {showRowNumber:false});

The table shows up, and I can always position it off-screen. However, 

The October 6, 2014 release notes say:

• Accessibility
• Adding table with data for screen readers.
• Fix for text with auras.
• More accessibility fixes/tweaks.

So I wanted to see if there's any more information on that. Is drawing a table from the same data the way to go, or is there some specific function for creating an accessible table that screen readers will access when encountering the chart?

(Apologies for being such a novice. Any guidance would help!)

Thanks,

Adam

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

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Jim Wilson]

Hi Adam,

Looking at the Histogram example page[1], there's a div in there that looks like this:

<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;" aria-label="A tabular representation of the data in the chart."><table><tbody><tr><th>Dinosaur</th><th>Length</th></tr>

<tr><td>Acrocanthosaurus (top-spined lizard)</td><td>12.2</td></tr>

...

</tbody></table></div>

I tested in both Chrome and Firefox, without any SR enabled, so I would hope that JAWS would pick that up, not sure why it wouldn't be read.

[1] https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram_54adeef75ab49642cd2dc2b24f0f5eb0.frame?hl=en

-- Jimbo

[Adam Dubinsky]

I haven't checked that page in JAWS yet, but when I use ChomeVox, the reader won't find the table. It will select the chart and simply read out "A chart."

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/k2Kk772j2no/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Adam Dubinsky]

Scratch that--

I was able to access the table using ChromeVox--it just took a few tries to navigate to it.

However, the generated table is not accessible, as the headers have no scope to associate them with related data cells. A screen reader user essentially gets a list of data with no organization. (For example, I made a chart with work-related fatality statistics. Users hear the row of column headers, then they'll just hear a mess of 20 years worth of data, row by row.)

It would be ideal if each table header could have a scope (scope="col" or scope="row").

[cnaan aviv]

Hi Daniel,

Looks like a bug in Google Charts Library.

It have a new feature adding a div with aria-label="A tabular representation of the data in the chart." that holds the data of your graph in a table.

It is discussed here: https://groups.google.com/forum/#!topic/google-visualization-api/k2Kk772j2no

But for me it created a bug in the css causing the whole screen to be very wide with a bottom scroll. After some investigations with Firebug I noticed the

aria-label="A tabular representation of the data in the chart." have a style="position: absolute; left: -10000px" causing this endless horizontal scroll.

The solution for me was to add in the css a "display:none":

.small_graph svg + div {display:none;}

http://www.jobstrends.co.il

Here is a link to my post: http://breakpo.blogspot.co.il/2015/03/looks-like-bug-in-google-charts-for.html

On Monday, November 17, 2014 at 11:21:29 PM UTC+2, Daniel LaLiberte wrote:

Adam,

I'm glad you spoke up about the new accessibility feature, which is still undocumented.  Basically, when you draw a chart, the accessibility table for the chart is also generated and embedded in the page invisibly.  It is in a div after the svg, and has an attribute aria-label="A tabular representation of the data in the chart."

Hope that helps.  Let us know if this doesn't meet your needs.

On Mon, Nov 17, 2014 at 4:02 PM, Adam Dubinsky <lawro...@gmail.com> wrote:

Hi there!

I am trying to update a webpage to make a chart accessible. The chart has a lot of data, so describing it all in alt text isn't feasible. So, I would like to create an accessible table for screen readers so that visually impaired users can access the date displayed in the chart.

Alas, I'm not a programmer/developer; I have minimal javaScript (but my markup and CSS is pretty good!). So I've been plucking code from the Google Charts samples and fiddling. I have created the chart I want, and I have also added a table pulling from the same data:

 chart.draw(data, options);

        

  table.draw(data, {showRowNumber:false});

The table shows up, and I can always position it off-screen. However, 

The October 6, 2014 release notes say:

• Accessibility
• Adding table with data for screen readers.
• Fix for text with auras.
• More accessibility fixes/tweaks.

So I wanted to see if there's any more information on that. Is drawing a table from the same data the way to go, or is there some specific function for creating an accessible table that screen readers will access when encountering the chart?

(Apologies for being such a novice. Any guidance would help!)

Thanks,

Adam

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

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

Hi Cnnan,

Without looking too deep, I bet the problem you are seeing with the horizontal scroll showing up for the invisible accessibility table is due to the page using "direction: rtl".  We need to reverse where we hide the table in that case, to use right: -10000px instead of left: -10000px.   Judging from http://www.html5accessibility.com/tests/hidden2013.html there is still no better way to make the accessibility table invisible on the page (taking no space) but visible to screen readers.   If anyone knows a better way, let us know.

Adam, I'm sorry I missed your last message; must have been the pre-holiday chaos combined with trying to finish up the v40 release cycle.  We should be able to add the scope attributes to the accessibility tables both for column headers (scope="col") and also use the domain column for row headers (scope="row").  Does that sound right to you?

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Adam Dubinsky]

Hi Daniel!

I completely forgot about this! Thanks for bumping it back up. That solution sounds right to me!

Thanks,

Adam

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.