WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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

From: Giovanni Duarte
Date: Wed, May 11 2011 12:36PM
Subject: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
No previous message | Next message →

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

From: Patrick Dunphy
Date: Wed, May 11 2011 1:33PM
Subject: Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
← Previous message | Next message →

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 ADDRESS 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
>
>

From: giandre
Date: Wed, May 11 2011 1:57PM
Subject: Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>
>

From: Birkir R. Gunnarsson
Date: Wed, May 11 2011 4:15PM
Subject: Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
← Previous message | Next message →

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.
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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>>
>>

From: Christophe Strobbe
Date: Thu, May 12 2011 7:57AM
Subject: Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
← Previous message | Next message →

Dear Birkir,

On Wed, 11 May 2011 22:07:13 +0000, "Birkir R. Gunnarsson"
< = EMAIL ADDRESS 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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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

From: Joshue O Connor
Date: Thu, May 12 2011 8:21AM
Subject: Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
← Previous message | Next message →

Hi Christophe,

Thanks for posting your research on SVG A11y.

I look forward to reading it :-)

Cheers

Josh

NCBI: Celebrating 80 Years

********************************************************************
National Council for the Blind of Ireland (NCBI) is a company
limited by guarantee (registered in Ireland No. 26293) .
Our registered office is at Whitworth Road, Drumcondra, Dublin 9.
NCBI is also a registered Charity (chy4626).

NOTICE: The information contained in this email and any attachments
is confidential and may be privileged. If you are not the intended
recipient you should not use, disclose, distribute or copy any of
the content of it or of any attachment; you are requested to notify
the sender immediately of your receipt of the email and then to
delete it and any attachments from your system.

NCBI endeavours to ensure that emails and any attachments generated
by its staff are free from viruses or other contaminants. However,
it cannot accept any responsibility for any such which are
transmitted. We therefore recommend you scan all attachments.

Please note that the statements and views expressed in this email
and any attachments are those of the author and do not necessarily
represent the views of NCBI


********************************************************************

From: Patrick Dunphy
Date: Thu, May 12 2011 8:33AM
Subject: Re: Using Jquery or CSS to create accessible charts. Is this a real solution for accessibility?
← Previous message | No next message

My thinking for doing this was the data represented via the visualization
(i.e. pie chart) needed an alternative to give context for those that can't
see the image itself. The data table achieved this goal - so in this case I
would believe this to be enough.

Ours was a simple case (population groups broken into segments of mother
tongue, ethnic origin, etc) but I wouldn't think it's a one size fits all
scenario. It may work but that depends on the complexity of the data you're
trying to represent.

Thanks!
-PD





On Wed, May 11, 2011 at 3:54 PM, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> >
> >