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? On Wed, Mar 4, 2015 at 11:57 AM, cnaan aviv <[email protected]> wrote: > Hi Daniel, > > Looks like a bug in Google Charts Library > <https://developers.google.com/chart/interactive/docs/gallery>. > > 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 > <http://getfirebug.com/> 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 <[email protected]> >> 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 [email protected]. >>> To post to this group, send email to [email protected]. >>> Visit this group at http://groups.google.com/ >>> group/google-visualization-api. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >> - 978-394-1058 >> [email protected] 5CC, Cambridge MA >> [email protected] 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 [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
