WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Hidden Items read out by Voiceover and Talkback

for

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

From: Graham Armfield
Date: Mon, Mar 23 2015 9:09AM
Subject: Hidden Items read out by Voiceover and Talkback
No previous message | Next message →

I'm working with a team who have a site that has a normal horizontal menu
for larger screen sizes, and a hamburger menu for smaller screen widths.
The breakpoint is controlled by media queries - much as you'd expect, and
the menu that's not required is hidden using display:none. Additionally,
the top level list <ul> has been given the aria-hidden="true" attribute and
value. I've been in to check all this.

This works as expected on laptop/desktop, but on iOS and Android devices
the hidden (desktop) menu items are still being read out in Voiceover and
Talkback.

Does anyone have any ideas why that might be?

Thanks

Graham Armfield



coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

From: Patrick H. Lauke
Date: Mon, Mar 23 2015 9:16AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

On 23/03/2015 15:09, Graham Armfield via WebAIM-Forum wrote:
> I'm working with a team who have a site that has a normal horizontal menu
> for larger screen sizes, and a hamburger menu for smaller screen widths.
> The breakpoint is controlled by media queries - much as you'd expect, and
> the menu that's not required is hidden using display:none. Additionally,
> the top level list <ul> has been given the aria-hidden="true" attribute and
> value. I've been in to check all this.
>
> This works as expected on laptop/desktop, but on iOS and Android devices
> the hidden (desktop) menu items are still being read out in Voiceover and
> Talkback.
>
> Does anyone have any ideas why that might be?

Sorry to ask the obvious question, but: are you absolutely sure that
display:none and aria-hidden="true" are actually present? Is there any
chance that styling/attribute isn't being correctly applied? Got a URL
for testing, perhaps even a minimal test case?

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Graham Armfield
Date: Mon, Mar 23 2015 9:37AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

Thanks for your fast response Patrick.

Yes I have checked they are there in the desktop - in Firebug and Chrome
inspector. I know that doesn't guarantee they are there on Android browser
and in Safari on an iOS device - I'm not sure how I'd check that really.

Sadly the work is under NDA so no URL I'm afraid.


Regards
Graham Armfield



coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

On Mon, Mar 23, 2015 at 3:16 PM, Patrick H. Lauke via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:

> On 23/03/2015 15:09, Graham Armfield via WebAIM-Forum wrote:
>
>> I'm working with a team who have a site that has a normal horizontal menu
>> for larger screen sizes, and a hamburger menu for smaller screen widths.
>> The breakpoint is controlled by media queries - much as you'd expect, and
>> the menu that's not required is hidden using display:none. Additionally,
>> the top level list <ul> has been given the aria-hidden="true" attribute
>> and
>> value. I've been in to check all this.
>>
>> This works as expected on laptop/desktop, but on iOS and Android devices
>> the hidden (desktop) menu items are still being read out in Voiceover and
>> Talkback.
>>
>> Does anyone have any ideas why that might be?
>>
>
> Sorry to ask the obvious question, but: are you absolutely sure that
> display:none and aria-hidden="true" are actually present? Is there any
> chance that styling/attribute isn't being correctly applied? Got a URL for
> testing, perhaps even a minimal test case?
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >

From: Patrick H. Lauke
Date: Mon, Mar 23 2015 9:51AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

On 23/03/2015 15:37, Graham Armfield wrote:
> Yes I have checked they are there in the desktop - in Firebug and Chrome
> inspector. I know that doesn't guarantee they are there on Android
> browser and in Safari on an iOS device - I'm not sure how I'd check that
> really.

Remote debugging? e.g. for Android
https://developer.chrome.com/devtools/docs/remote-debugging


--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Léonie Watson
Date: Mon, Mar 23 2015 9:57AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

Graham Armfield wrote:
"This works as expected on laptop/desktop, but on iOS and Android devices the hidden (desktop) menu items are still being read out in Voiceover and Talkback."

I've just created a very basic test case based on the code below. VO on iOS ignores the list as expected. I can't find the charger for my Android thing, so can't confirm with TB I'm afraid.

<ul style="display:none;" aria-hidden="true">
<li>Apples</li>
<li>Pears</li>
</ul>

Test case available here for now:
http://tink.uk/test.html

Léonie.

--
@LeonieWatson Tink.UK Carpe diem

From: Greg Wocher
Date: Mon, Mar 23 2015 11:31AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

Hello,
I just tested this on my Samsung Galaxy S4 using the latest versions of
TalkBack and Chrome. The list is getting ignored on the test page as it
should.

Regards,
Greg Wocher

Follow me on Twitter @GWocher

On 3/23/2015 11:57 AM, Léonie Watson via WebAIM-Forum

From: Birkir R. Gunnarsson
Date: Mon, Mar 23 2015 7:09PM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

aria-hidden="true" is required for Voiceover on iOS to ignore content.
With that in place though, I have not had issues with Voiceover not
reading what it shouldn't.
Does it read the content on swiping or explore by touch or both?
Leonie, any difference if you put a focusable item into the list? It
should not make a difference, but just for completeness sake we could
look at it.
Thanks



On 3/23/15, Greg Wocher via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> I just tested this on my Samsung Galaxy S4 using the latest versions of
> TalkBack and Chrome. The list is getting ignored on the test page as it
> should.
>
> Regards,
> Greg Wocher
>
> Follow me on Twitter @GWocher
>
> On 3/23/2015 11:57 AM, Léonie Watson via WebAIM-Forum
> > > >


--
Work hard. Have fun. Make history.

From: Robert Fentress
Date: Thu, Mar 26 2015 7:25AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

Hi, Birkir.

I haven't played around with this much, but here is a post from Roger
Johansson that suggests visibility:hidden, in addition to
display:none, may sometimes also be necessary.
http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Following the link trail further back, you see a Gez Lemon post that
spells out the details. That piece is from 2007 and focuses on JAWS
and Window-Eyes, so I don't know how relevant it is to VO on iOS, but
worth taking a look at, maybe.
http://juicystudio.com/article/screen-readers-display-none.php

Best,
Rob

On Mon, Mar 23, 2015 at 9:09 PM, Birkir R. Gunnarsson
< = EMAIL ADDRESS REMOVED = > wrote:
> aria-hidden="true" is required for Voiceover on iOS to ignore content.
> With that in place though, I have not had issues with Voiceover not
> reading what it shouldn't.
> Does it read the content on swiping or explore by touch or both?
> Leonie, any difference if you put a focusable item into the list? It
> should not make a difference, but just for completeness sake we could
> look at it.
> Thanks
>
>
>
> On 3/23/15, Greg Wocher via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>> Hello,
>> I just tested this on my Samsung Galaxy S4 using the latest versions of
>> TalkBack and Chrome. The list is getting ignored on the test page as it
>> should.
>>
>> Regards,
>> Greg Wocher
>>
>> Follow me on Twitter @GWocher
>>
>> On 3/23/2015 11:57 AM, Léonie Watson via WebAIM-Forum
>> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > --
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061

From: Patrick H. Lauke
Date: Thu, Mar 26 2015 7:31AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

On 26/03/2015 13:25, Robert Fentress wrote:
> I haven't played around with this much, but here is a post from Roger
> Johansson that suggests visibility:hidden, in addition to
> display:none, may sometimes also be necessary.
> http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
>
> Following the link trail further back, you see a Gez Lemon post that
> spells out the details. That piece is from 2007 and focuses on JAWS
> and Window-Eyes, so I don't know how relevant it is to VO on iOS, but
> worth taking a look at, maybe.
> http://juicystudio.com/article/screen-readers-display-none.php

I tested this recently (at least the display:none not being enough and
visibility:hidden also being required) in recent Window-Eyes version,
and it seems that's an antiquated bug that's been fixed.

https://github.com/twbs/bootstrap/pull/15755
https://twitter.com/jitendravyas/status/562940090553733121

I still suspect that the original problem here is something far simpler
(correct CSS not actually being applied correctly), but until we can get
confirmation (via remote debugging/inspection of the actual code in
question), there's not much more we can try to do here... (particularly
as it doesn't seem to be a reproducible problem).

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: James Nurthen
Date: Thu, Mar 26 2015 2:40PM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

VO certainly shouldn't read content which is hidden using display:none
although I have found a number of cases recently where it does. One of
these was even a <script> element where the JavaScript source was getting
read by voiceover.

I have a few bugs to log.....

On Thu, Mar 26, 2015 at 6:31 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 26/03/2015 13:25, Robert Fentress wrote:
>
>> I haven't played around with this much, but here is a post from Roger
>> Johansson that suggests visibility:hidden, in addition to
>> display:none, may sometimes also be necessary.
>> http://www.456bereastreet.com/archive/201205/hiding_visible_
>> content_from_screen_readers_with_aria-hidden/
>>
>> Following the link trail further back, you see a Gez Lemon post that
>> spells out the details. That piece is from 2007 and focuses on JAWS
>> and Window-Eyes, so I don't know how relevant it is to VO on iOS, but
>> worth taking a look at, maybe.
>> http://juicystudio.com/article/screen-readers-display-none.php
>>
>
> I tested this recently (at least the display:none not being enough and
> visibility:hidden also being required) in recent Window-Eyes version, and
> it seems that's an antiquated bug that's been fixed.
>
> https://github.com/twbs/bootstrap/pull/15755
> https://twitter.com/jitendravyas/status/562940090553733121
>
> I still suspect that the original problem here is something far simpler
> (correct CSS not actually being applied correctly), but until we can get
> confirmation (via remote debugging/inspection of the actual code in
> question), there's not much more we can try to do here... (particularly as
> it doesn't seem to be a reproducible problem).
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >

From: Birkir R. Gunnarsson
Date: Thu, Mar 26 2015 7:59PM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | Next message →

My experience was directly related to display: none not being
sufficient for VoiceOver )(we were developing some accessible modals
for a client).
Putting aria-hidden="true" along with the display: none solved the
problem .. at least for VO versions prior to 8.2 (have not tested with
the latest and, I hope, greatest).
I definitely recommend giving it a shot over display: none and
visibility: hidden being used together.
At least I have not seen that bug recently, though one never knows
with all the versions and updates going on out there.
Cheers
-B


On 3/26/15, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> VO certainly shouldn't read content which is hidden using display:none
> although I have found a number of cases recently where it does. One of
> these was even a <script> element where the JavaScript source was getting
> read by voiceover.
>
> I have a few bugs to log.....
>
> On Thu, Mar 26, 2015 at 6:31 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> On 26/03/2015 13:25, Robert Fentress wrote:
>>
>>> I haven't played around with this much, but here is a post from Roger
>>> Johansson that suggests visibility:hidden, in addition to
>>> display:none, may sometimes also be necessary.
>>> http://www.456bereastreet.com/archive/201205/hiding_visible_
>>> content_from_screen_readers_with_aria-hidden/
>>>
>>> Following the link trail further back, you see a Gez Lemon post that
>>> spells out the details. That piece is from 2007 and focuses on JAWS
>>> and Window-Eyes, so I don't know how relevant it is to VO on iOS, but
>>> worth taking a look at, maybe.
>>> http://juicystudio.com/article/screen-readers-display-none.php
>>>
>>
>> I tested this recently (at least the display:none not being enough and
>> visibility:hidden also being required) in recent Window-Eyes version, and
>> it seems that's an antiquated bug that's been fixed.
>>
>> https://github.com/twbs/bootstrap/pull/15755
>> https://twitter.com/jitendravyas/status/562940090553733121
>>
>> I still suspect that the original problem here is something far simpler
>> (correct CSS not actually being applied correctly), but until we can get
>> confirmation (via remote debugging/inspection of the actual code in
>> question), there's not much more we can try to do here... (particularly as
>> it doesn't seem to be a reproducible problem).
>>
>> P
>> --
>> Patrick H. Lauke
>>
>> www.splintered.co.uk | https://github.com/patrickhlauke
>> http://flickr.com/photos/redux/ | http://redux.deviantart.com
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> >>
> > > >


--
Work hard. Have fun. Make history.

From: Graham Armfield
Date: Fri, Mar 27 2015 3:06AM
Subject: Re: Hidden Items read out by Voiceover and Talkback
← Previous message | No next message

Thanks to everyone for your comments.


Regards
Graham Armfield



coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>