WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Hiding inaccessible charts from screen readers?

for

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

From: Greg Jellin
Date: Fri, Aug 23 2019 11:23AM
Subject: Hiding inaccessible charts from screen readers?
No previous message | Next message →

Happy Friday Everyone,

I'm seeking opinions on the best practice for a page that has an
inaccessible graphical chart with an accessible tabular version of the
data below it. Would it be better to hide the inaccessible graphic from
SR users so that they go straight to the accessible table, or should the
inaccessible graphic remain as it is by default with a link just above
it to the accessible table?

Appreciate your feedback!

Greg

From: Lucy GRECO
Date: Fri, Aug 23 2019 11:25AM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

HI:
WHY NOT USE A TOOL LIKE HIGHCHARTS TO RENDER A MORE ACCESSABLE CHART AND
MAKE IT ACCESSABLE ALL AROUND
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces



On Fri, Aug 23, 2019 at 10:23 AM Greg Jellin < = EMAIL ADDRESS REMOVED = > wrote:

> Happy Friday Everyone,
>
> I'm seeking opinions on the best practice for a page that has an
> inaccessible graphical chart with an accessible tabular version of the
> data below it. Would it be better to hide the inaccessible graphic from
> SR users so that they go straight to the accessible table, or should the
> inaccessible graphic remain as it is by default with a link just above
> it to the accessible table?
>
> Appreciate your feedback!
>
> Greg
>
> > > > >

From: Brian Lovely
Date: Fri, Aug 23 2019 11:30AM
Subject: Re: [External Sender]Hiding inaccessible charts from screen readers?
← Previous message | Next message →

Lucy's suggestion is good. However, if you can't do that for some reason, I
would tend toward hiding the chart. I do have one question, however: is the
accessible version of the chart adjacent to the graphic chart? I would
expect a screen reader user to encounter the chart in the same context as a
sighted user. As long as the visual chart and the accessible chart are in
the same location, simply hide the inaccessible visual chart.

...or follow Lucy's advice and build an accessible chart.

On Fri, Aug 23, 2019 at 1:26 PM Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:

> HI:
> WHY NOT USE A TOOL LIKE HIGHCHARTS TO RENDER A MORE ACCESSABLE CHART AND
> MAKE IT ACCESSABLE ALL AROUND
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
>
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaccess.berkeley.edu&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=5EBAJPMTcNE04HVQ6kbw_GQkHKoqOqU5Tdpthi4JO_o&e=
> Follow me on twitter @accessaces
>
>
>
> On Fri, Aug 23, 2019 at 10:23 AM Greg Jellin < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Happy Friday Everyone,
> >
> > I'm seeking opinions on the best practice for a page that has an
> > inaccessible graphical chart with an accessible tabular version of the
> > data below it. Would it be better to hide the inaccessible graphic from
> > SR users so that they go straight to the accessible table, or should the
> > inaccessible graphic remain as it is by default with a link just above
> > it to the accessible table?
> >
> > Appreciate your feedback!
> >
> > Greg
> >
> > > > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=SHygNhU6loHj_zd487E8rzcd5csP-Z00rLORI88xH5E&e=
> > List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=zJscZBXYBWPEM69mnAVfDPnDAOoA4q1COCYW5kTFovQ&e=
> > > >
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=SHygNhU6loHj_zd487E8rzcd5csP-Z00rLORI88xH5E&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=zJscZBXYBWPEM69mnAVfDPnDAOoA4q1COCYW5kTFovQ&e=
> >


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Greg Jellin
Date: Fri, Aug 23 2019 12:08PM
Subject: Re: [External Sender]Hiding inaccessible charts from screen readers?
← Previous message | Next message →

Thanks Lucia, your suggestion would be ideal, but this client is not
going to be able to implement that solution at this point.

Brian, The accessible version of the chart is directly below the
inaccessible graphical version. Thus, the accessible tabular version
will be equal in the flow.

Thanks!

Greg

On 8/23/2019 10:30 AM, Brian Lovely via WebAIM-Forum wrote:
> Lucy's suggestion is good. However, if you can't do that for some reason, I
> would tend toward hiding the chart. I do have one question, however: is the
> accessible version of the chart adjacent to the graphic chart? I would
> expect a screen reader user to encounter the chart in the same context as a
> sighted user. As long as the visual chart and the accessible chart are in
> the same location, simply hide the inaccessible visual chart.
>
> ...or follow Lucy's advice and build an accessible chart.
>
> On Fri, Aug 23, 2019 at 1:26 PM Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
>
>> HI:
>> WHY NOT USE A TOOL LIKE HIGHCHARTS TO RENDER A MORE ACCESSABLE CHART AND
>> MAKE IT ACCESSABLE ALL AROUND
>> Lucia Greco
>> Web Accessibility Evangelist
>> IST - Architecture, Platforms, and Integration
>> University of California, Berkeley
>> (510) 289-6008 skype: lucia1-greco
>>
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaccess.berkeley.edu&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=5EBAJPMTcNE04HVQ6kbw_GQkHKoqOqU5Tdpthi4JO_o&e=
>> Follow me on twitter @accessaces
>>
>>
>>
>> On Fri, Aug 23, 2019 at 10:23 AM Greg Jellin < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> Happy Friday Everyone,
>>>
>>> I'm seeking opinions on the best practice for a page that has an
>>> inaccessible graphical chart with an accessible tabular version of the
>>> data below it. Would it be better to hide the inaccessible graphic from
>>> SR users so that they go straight to the accessible table, or should the
>>> inaccessible graphic remain as it is by default with a link just above
>>> it to the accessible table?
>>>
>>> Appreciate your feedback!
>>>
>>> Greg
>>>
>>> >>> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=SHygNhU6loHj_zd487E8rzcd5csP-Z00rLORI88xH5E&e=
>>> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=zJscZBXYBWPEM69mnAVfDPnDAOoA4q1COCYW5kTFovQ&e=
>>> >>>
>> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=SHygNhU6loHj_zd487E8rzcd5csP-Z00rLORI88xH5E&e=
>> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=GX5Ahc17BrHzC9nvulFZVYmnjcbrFP2wT9BCTGq-5dY&s=zJscZBXYBWPEM69mnAVfDPnDAOoA4q1COCYW5kTFovQ&e=
>> >>
>

From: Jonathan Avila
Date: Fri, Aug 23 2019 1:03PM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

HI Greg,, I'm not sure how you intend to hide the chart from screen reader users -- but I'd recommend not trying to detect a screen reader and then hiding the chart visually as there are a lot of people with low vision and other disabilities who may want the visual chart and need the table of data.

Jonathan

From: Greg Jellin
Date: Fri, Aug 23 2019 2:15PM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

Thanks Jonathan, We intend to hide the chart from AT using aria-hidden.
We won't be doing any detection or hiding the chart visually.

Greg

On 8/23/2019 12:03 PM, Jonathan Avila wrote:
> HI Greg,, I'm not sure how you intend to hide the chart from screen reader users -- but I'd recommend not trying to detect a screen reader and then hiding the chart visually as there are a lot of people with low vision and other disabilities who may want the visual chart and need the table of data.
>
> Jonathan
>
>

From: Jonathan Avila
Date: Fri, Aug 23 2019 3:10PM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

HI Greg, just be careful when using aria-hidden that you don't use it on any focusable elements unless you take those elements out of the tab order.

Jonathan

From: Greg Jellin
Date: Fri, Aug 23 2019 3:13PM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

Great advice Jonathan!

On 8/23/2019 2:10 PM, Jonathan Avila wrote:
> HI Greg, just be careful when using aria-hidden that you don't use it on any focusable elements unless you take those elements out of the tab order.
>
> Jonathan
>
>

From: glen walker
Date: Sat, Aug 24 2019 12:54PM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

You don't necessarily have to hide the chart. You could have alternative
text for the chart that is a brief summary and then say a table of data
follows the chart.

From: Jared Smith
Date: Sat, Aug 24 2019 12:59PM
Subject: Re: Hiding inaccessible charts from screen readers?
← Previous message | Next message →

> You don't necessarily have to hide the chart. You could have alternative
> text for the chart that is a brief summary and then say a table of data
> follows the chart.

This is what I'd recommend. I think a very succinct, high level
alternative text is useful for the chart itself, then the full
alternative comes below. This is the approach we take with our survey
result articles, such as at
https://webaim.org/projects/screenreadersurvey7/

Jared

From: Mark Magennis
Date: Mon, Aug 26 2019 6:41AM
Subject: Re: [EXTERNAL]Hiding inaccessible charts from screen readers?
← Previous message | Next message →

I agree with Glen and Jared. The way you might approach this is to think "might a sighted user just glance at the chart and get the information they need from that rather than reading the data table?". If they might just glance at the chart, then ask yourself "what is the essential information they will get from glancing at the chart?". If you can get this across in a sentence then this might give you your succinct, high level alternative text. It could be something like "sales increased sharply from $2.2m between 2000 and 2010 remaining steady around $6m until 2016 and declined to $5.2m in 2017". If you think this is essentially what the chart is there to get across then you're in business. But if you think there is much more essential info than this but still not so much that you can't get it across in a paragraph, then consider writing that paragraph.

If you can do this, it will make it much easier for a user to understand than having to read through a data table.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist


From: Greg Jellin
Date: Mon, Aug 26 2019 4:04PM
Subject: Re: [EXTERNAL]Hiding inaccessible charts from screen readers?
← Previous message | No next message

Thanks everyone for the great feedback!

Greg

On 8/26/2019 5:41 AM, Mark Magennis wrote:
> I agree with Glen and Jared. The way you might approach this is to think "might a sighted user just glance at the chart and get the information they need from that rather than reading the data table?". If they might just glance at the chart, then ask yourself "what is the essential information they will get from glancing at the chart?". If you can get this across in a sentence then this might give you your succinct, high level alternative text. It could be something like "sales increased sharply from $2.2m between 2000 and 2010 remaining steady around $6m until 2016 and declined to $5.2m in 2017". If you think this is essentially what the chart is there to get across then you're in business. But if you think there is much more essential info than this but still not so much that you can't get it across in a paragraph, then consider writing that paragraph.
>
> If you can do this, it will make it much easier for a user to understand than having to read through a data table.
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
>