WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?

for

From: Christophe Strobbe
Date: May 12, 2011 7:57AM

Dear Birkir,

On Wed, 11 May 2011 22:07:13 +0000, "Birkir R. Gunnarsson"
< <EMAIL REMOVED> > wrote:
> A more longterm goal would be to get all images on web pages into SVG
> format (SVT is one of the core technologies of html5). ViewPlus has
> done a lot of work interpreting SVG images non-visually or through
> tactile interfaces.
> Certainly it is stll work in progress, but definitely something to
> keep in mind when selecting technologies. SVG, I believe, has good
> browser support and works well on most browsers, both on PC and mobile
> platforms, though I am not sure that SVG is what you'd call accessible
> out of the box form for chart right now.

Browser support is one thing, accessible browser support another...
I looked into SVG accessibility a few years ago and the results were
depressing. The best I got was getting JAWS + Firefox to speak the content
of the title element as a direct descendant of the svg element, but nothing
else (e.g. not the description element).
The report is still available at
<http://webcc.fit.fraunhofer.de/downloads/projects/bentoweb/deliverables/BenToWeb_D4.5_rev.pdf>;.
When that report was written, keyboard access to SVG content was still
undefined and there was no way to add WAI-ARIA roles and properties. Since
then, SVG Tiny 1.2 added support for roles (see
<http://www.w3.org/TR/SVGTiny12/struct.html#RoleAttribute>;) and a section
on user agent accessibility (see
<http://www.w3.org/TR/SVGTiny12/access.html#SVGUAAccessibilityGuidelines>;).
If user agent support for SVG accessibility features has not improved, we
are probably still stuck with the same problems as four years ago.

So creating charts in SVG could be beneficial for people who need to
resize content but not for people who rely completely on screen readers.

I have not evaluated the jQuery library.

Best regards,

Christophe

> I'll look more into this and post to this list if I come across ore
> accurte info.
> Probably not exactly what you're looking for for right now, but I
> think it's definitely something to keep in mind.
>
>
> On 5/11/11, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
>> PD,
>> That actually sounds interesting and brings another question. Is it
>> enough
>> to have only an accessible data table available along with the chart?
>> In other words, can I assume that by providing the table I am providing
a
>> "description"?
>>
>> Thanks
>> Giovanni
>>
>> ----- Reply message -----
>> From: "Patrick Dunphy" < <EMAIL REMOVED> >
>> Date: Wed, May 11, 2011 2:34 pm
>> Subject: [WebAIM] Using Jquery or CSS to create accessible charts. Is
>> this a
>> real solution for accessibility?
>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>>
>> For a recent project I worked on we required several pie charts on over
>> 300
>> pages. Because these pages were generated by a highly customized CMS,
>> HTML5
>> and dynamic capabilities weren't really an option.
>>
>> We went low-tech & leveraged Google Charts to create these static
images.
>> To keep the data in an accessible format, we reused the data to create
>> the
>> charts to created accessible data tables which we then positioned
>> offscreen
>> via CSS.
>>
>> Probably not what you're looking for but I'd be interested to hear
>> people's
>> thoughts on this usage.
>>
>> Thanks!
>> -PD
>>
>>
>>
>>
>>
>> On Wed, May 11, 2011 at 2:37 PM, Giovanni Duarte
>> < <EMAIL REMOVED> >wrote:
>>
>>> Hi,
>>> I am wondering if any of the solutions available for creating charts
are
>>> REALLY accessible. I found a list of Jquery libraries (
>>>
>>>
http://www.instantshift.com/2010/03/09/50-free-resources-for-charts-and-grap
>>> hs-solution/ ) and CSS libraries
>>> (http://sixrevisions.com/css/css_techniques_charting_data/ ).
>>>
>>> I have two questions about these solutions:
>>> 1. Are these truly accessible? Can a screen reader "understand" the
>>> chart?
>>> 2. Is an impaired user able to understand the chart by having the
screen
>>> reader only? Do you think an alternative description is still
necessary?
>>>
>>> What I am trying to determine is if we should invest time and
resources
>>> to
>>> use this type of Jquery libraries or if we should only concentrate on
>>> the
>>> use of descriptions.
>>>
>>> Thanks,
>>> Giovanni

--
Christophe Strobbe
K.U.Leuven - Dept. of Electrical Engineering - SCD
Research Group on Document Architectures
Kasteelpark Arenberg 10 bus 2442
B-3001 Leuven-Heverlee
BELGIUM
tel: +32 16 32 85 51
www.docarch.be
Twitter: @RabelaisA11y