E-mail List Archives

Search E-mail List Archives for

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

From: Vemaarapu Venkatesh
Date: Tue, Jan 23 2018 8:58AM
Subject: Ways to make graphs accessible
No previous message | Next message →

Hello all, Greetings!


I am eagerly looking for guidance on how to make the graphs accessible. Can
some experts out here suggest me the reliable and best approaches to make
graphical representation of data accessible to screen reader users and also
of great help if some one redirects me to useful articles on this concept.

Thanks,
Venkatesh

From:
Date: Tue, Jan 23 2018 9:07AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

On 23/01/2018 15:58, Vemaarapu Venkatesh wrote:
> I am eagerly looking for guidance on how to make the graphs accessible. Can
> some experts out here suggest me the reliable and best approaches to make
> graphical representation of data accessible to screen reader users and also
> of great help if some one redirects me to useful articles on this concept.

SVG is one possibility. It scales without loss of quality, text content
in SVG is accessible with Assistive Technologies (ATs), it's stylable
with CSS, and you can use ARIA to make some basic improvements for
screen reader users.

I wrote about making SVG line graphs more accessible here:
https://tink.uk/accessible-svg-line-graphs/


Léonie.


>
> Thanks,
> Venkatesh
> > > > >

--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = Carpe diem

From: Bim Egan
Date: Tue, Jan 23 2018 10:25AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

Thanks Léonie,
That is absolutely brilliant!

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
Of Léonie Watson
Sent: 23 January 2018 16:07
To: WebAIM Discussion List; Vemaarapu Venkatesh
Subject: Re: [WebAIM] Ways to make graphs accessible


On 23/01/2018 15:58, Vemaarapu Venkatesh wrote:
> I am eagerly looking for guidance on how to make the graphs
> accessible. Can some experts out here suggest me the reliable and best
> approaches to make graphical representation of data accessible to
> screen reader users and also of great help if some one redirects me to
useful articles on this concept.

SVG is one possibility. It scales without loss of quality, text content in
SVG is accessible with Assistive Technologies (ATs), it's stylable with CSS,
and you can use ARIA to make some basic improvements for screen reader
users.

I wrote about making SVG line graphs more accessible here:
https://tink.uk/accessible-svg-line-graphs/


Léonie.


>
> Thanks,
> Venkatesh
> > > archives at http://webaim.org/discussion/archives
> >

--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = Carpe diem
http://webaim.org/discussion/archives
---
This email has been checked for viruses by AVG.
http://www.avg.com

From: Birkir R. Gunnarsson
Date: Tue, Jan 23 2018 10:29AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

That's one thing you quicly learn in the world of digital
accessibility. Leonie is consistently brilliant. ;)

Thanks for the article



On 1/23/18, Bim Egan < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks Léonie,
> That is absolutely brilliant!
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Léonie Watson
> Sent: 23 January 2018 16:07
> To: WebAIM Discussion List; Vemaarapu Venkatesh
> Subject: Re: [WebAIM] Ways to make graphs accessible
>
>
> On 23/01/2018 15:58, Vemaarapu Venkatesh wrote:
>> I am eagerly looking for guidance on how to make the graphs
>> accessible. Can some experts out here suggest me the reliable and best
>> approaches to make graphical representation of data accessible to
>> screen reader users and also of great help if some one redirects me to
> useful articles on this concept.
>
> SVG is one possibility. It scales without loss of quality, text content in
> SVG is accessible with Assistive Technologies (ATs), it's stylable with CSS,
> and you can use ARIA to make some basic improvements for screen reader
> users.
>
> I wrote about making SVG line graphs more accessible here:
> https://tink.uk/accessible-svg-line-graphs/
>
>
> Léonie.
>
>
>>
>> Thanks,
>> Venkatesh
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
> --
> @LeonieWatson @ = EMAIL ADDRESS REMOVED = Carpe diem
> > > http://webaim.org/discussion/archives
> >
>
> ---
> This email has been checked for viruses by AVG.
> http://www.avg.com
>
> > > > >


--
Work hard. Have fun. Make history.

From:
Date: Tue, Jan 23 2018 11:17AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

Thanks Bim and Birkir.

SVG and ARIA support is still something of a "wild frontier", but it's
getting better all the time. It often needs a bit of hacking to get
where you need to be, but with simple visualisations like this you can
get reasonably close.
Doug Schepers has written a proof of concept for what screen reader
interaction with data visualisations could be like. It's worth playing
with if you have time:
http://describler.com/#intro

From: Bim Egan
Date: Tue, Jan 23 2018 11:31AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

Thanks for that too Léonie,

Fortunately for the rest of us you have a trail-blazing spirit and the depth
of knowledge needed to avoid hacks that could do damage.



-----Original Message-----
From: Léonie Watson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: 23 January 2018 18:18
To: WebAIM Discussion List; Birkir R. Gunnarsson; = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Ways to make graphs accessible

Thanks Bim and Birkir.

SVG and ARIA support is still something of a "wild frontier", but it's
getting better all the time. It often needs a bit of hacking to get where
you need to be, but with simple visualisations like this you can get
reasonably close.
Doug Schepers has written a proof of concept for what screen reader
interaction with data visualisations could be like. It's worth playing with
if you have time:
http://describler.com/#intro




---
This email has been checked for viruses by AVG.
http://www.avg.com

From: Vemaarapu Venkatesh
Date: Wed, Jan 24 2018 1:48AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

Thank you very much Léonie for this great article. Is it recommendable to
make charts accessible using SVG and how far this technique is compatible
with various browsers and screen readers. Can we say the conventional
methods like accompanying the description along with the image in the same
page, providing a link to description next to the image etc. are better in
terms of understandability and implementation over using SVG.
I am trying to understand the challenges and no doubt the article is an
amazing one to learn the technique.

Thanks,
Venkatesh

From:
Date: Wed, Jan 24 2018 2:55AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

Léonie makes great points, and we have taken her advice when it comes to making SVG charts accessible.

Take a look at http://www.highcharts.com for more information on our charts in particular.

Making data visualizations accessible is not an easy task, and I think it is important not to get locked in a single track. Much of the accessibility comes from the design of the chart. Are the colors of adequate contrast and understandable by people with varying forms of color blindness? Are the fonts readable? Are you using difficult language? In addition to design, we can provide tools to better understand the chart, particularly for screen reader users. This of course includes a text description of the chart, and what the chart is meant to convey - similar to an alt-text for an image. It also includes making the chart data available in table format, and making the SVG itself explorable by a screen reader. We are also experimenting with modalities such as sonification, to better provide an overview of the data.

The advantages of using SVG are several. Firstly, you can create dynamic and interactive charts for your sighted users. Interactive functionality such as drill down can even improve the cognitive accessibility aspects of the chart, and e.g. dynamic zooming functionality can make a chart much easier to understand. Secondly, you can make the SVG itself accessible to screen reader and keyboard-only users.

Best regards,
Øystein Moseng
Core Developer
Highsoft AS
@oysteinmoseng

> On 24 Jan 2018, at 09:48, Vemaarapu Venkatesh < = EMAIL ADDRESS REMOVED = > wrote:
>
> Thank you very much Léonie for this great article. Is it recommendable to
> make charts accessible using SVG and how far this technique is compatible
> with various browsers and screen readers. Can we say the conventional
> methods like accompanying the description along with the image in the same
> page, providing a link to description next to the image etc. are better in
> terms of understandability and implementation over using SVG.
> I am trying to understand the challenges and no doubt the article is an
> amazing one to learn the technique.
>
> Thanks,
> Venkatesh
> > > >

From:
Date: Wed, Jan 24 2018 5:46AM
Subject: Re: Ways to make graphs accessible
← Previous message | Next message →

On 24/01/2018 09:55, Øystein Moseng wrote:
>
> Making data visualizations accessible is not an easy task, and I think it is important not to get locked in a single track. Much of the accessibility comes from the design of the chart. Are the colors of adequate contrast and understandable by people with varying forms of color blindness? Are the fonts readable? Are you using difficult language?

This is good advice. All of these things need to be considered,
regardless of the format of the data visualisation itself.

> The advantages of using SVG are several. Firstly, you can create dynamic and interactive charts for your sighted users. Interactive functionality such as drill down can even improve the cognitive accessibility aspects of the chart, and e.g. dynamic zooming functionality can make a chart much easier to understand. Secondly, you can make the SVG itself accessible to screen reader and keyboard-only users.
>


If you do decide to use SVG, you need to think about the underlying
structure of the data right from the beginning. The order of SVG
elements in the code doesn't necessarily have an effect on how the SVG
is displayed visually, but it is important when you come to add the
ARIA. It's the same as thinking about the separation between HTML and
the way CSS controls the way it's displayed visually.

Much will also depend on the data in the visualisation. If there is a
logical relationship between the data and an available structure, then
SVG can work. For example the line graph in the article becomes a table
under the hood. The flowchart in the latest version of the W3C Process
uses a nested list structure under the hood [1].

In terms of support, it's a matter of trial and error. Quite a lot just
works, but quite a lot doesn't for no obvious reason. Certain
browser/screen reader combinations work better than others.


Léonie
[1] https://w3c.github.io/w3process/

From: Vemaarapu Venkatesh
Date: Thu, Jan 25 2018 7:51AM
Subject: Re: Ways to make graphs accessible
← Previous message | No next message

Thanks Léonie and Øystein Moseng for the patient elaboration of the
scenario and making me understand the concept. This is really great stuff
and helpful.
Thank you so much.

Regards,
Venkatesh