E-mail List Archives
Thread: Hidden text and mobile devices
Number of posts in this thread: 14 (In chronological order)
From: Helene VINH
Date: Wed, Aug 24 2016 2:10AM
Subject: Hidden text and mobile devices
No previous message | Next message →
Hello,
I have been working on a flight booking website which needs to be accessible to screen reader users.
We have been widely using the "hidden text" method, which consist of adding a sr-only class to elements targeting only screen reader users (element is positioned off the screen).
This is very useful to add some additional hidden instructions, or full text for abbreviations.
This works perfectly on desktop, but we recently encountered some issues on tablet, especially VoiceOver on iPad.
Although all the HTML content is read with swipe navigation, we noticed that all hidden text is not read with touch navigation, which is actually logic.
To give a concrete example: when we display a date in short format (Mon 26 Oct), we hide this element with aria-hidden, and add a sr-only text (Monday 26 October) for screen readers.
In tablet, the hidden text is not read on touch, nor the displayed text as it has been hidden with aria-hidden.
The only solution I found so far is to use the abbr tag:
<abbr title="Monday 26 October">Mon 26 Oct</abbr>
With this, VoiceOver will announce the full text on touch.
But when testing with JAWS/NVDA on desktop, only the short text is read...
So I am looking for a solution that can work for both tablets and desktop.
Has anyone encountered this problem before?
Any suggestion is welcome, thanks!
Best regards
Helene Vinh
Developer, AeRE Product User Interface
R&D-AIR-DGM-AEK-FED-ERP
Amadeus s.a.s.
T: +33 (0)4 97 15 88 43
= EMAIL ADDRESS REMOVED =
www.amadeus.com
From: Birkir R. Gunnarsson
Date: Wed, Aug 24 2016 4:39AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
I don't think you will find a single solution that will work
consistently on desktop as well as mobile with swipe and touch sadly.
Have you tried aria-label?
<span aria-label="Monday October first, 2016">10/01/16</span>
Technically, according to spec, the aria-label should override the
visible contents of the element, but support for this differs across
devices and settings. This might work on mobile, and you could switch
to hidden text once you reach a desktop breakpoint, worth a try. Then
again, you could use your current solution on mobile, switching to
hidden text on desktop breakpoint.
There are screen reader settings that enable the expansion of
abbreviations on desktop (Jaws has an expand abbreviations setting),
sadly thy are not on by default and, as many settings often are, are
not well known or much used.
On 8/24/16, Helene VINH < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
>
> I have been working on a flight booking website which needs to be accessible
> to screen reader users.
> We have been widely using the "hidden text" method, which consist of adding
> a sr-only class to elements targeting only screen reader users (element is
> positioned off the screen).
> This is very useful to add some additional hidden instructions, or full text
> for abbreviations.
>
> This works perfectly on desktop, but we recently encountered some issues on
> tablet, especially VoiceOver on iPad.
> Although all the HTML content is read with swipe navigation, we noticed that
> all hidden text is not read with touch navigation, which is actually logic.
>
> To give a concrete example: when we display a date in short format (Mon 26
> Oct), we hide this element with aria-hidden, and add a sr-only text (Monday
> 26 October) for screen readers.
> In tablet, the hidden text is not read on touch, nor the displayed text as
> it has been hidden with aria-hidden.
>
> The only solution I found so far is to use the abbr tag:
> <abbr title="Monday 26 October">Mon 26 Oct</abbr>
> With this, VoiceOver will announce the full text on touch.
> But when testing with JAWS/NVDA on desktop, only the short text is read...
>
> So I am looking for a solution that can work for both tablets and desktop.
> Has anyone encountered this problem before?
> Any suggestion is welcome, thanks!
>
> Best regards
>
> Helene Vinh
> Developer, AeRE Product User Interface
> R&D-AIR-DGM-AEK-FED-ERP
> Amadeus s.a.s.
> T: +33 (0)4 97 15 88 43
> = EMAIL ADDRESS REMOVED =
> www.amadeus.com
> > > > >
--
Work hard. Have fun. Make history.
From: Jamous, JP
Date: Wed, Aug 24 2016 4:52AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
Do you have the mean to find out through JS what platform is loaded and modify your markup based on whether it is Windows or iOS?
I do that a lot when I cannot find a happy medium. Use If Statements and alter the code accordingly.
**************************************************
Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team
The only limitations in life are those we set for ourselves
**************************************************
From: Helene VINH
Date: Wed, Aug 24 2016 6:06AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
Hello
Yes we can have a specific version for tablet and for desktop, but I was wondering if there is a solution that fits for both. If not, we will definitely have to do that :/
I didn't know there is a setting to expand abbreviations on JAWS! I thought this would be automatic.
I will have a try with aria-label as well.
Thanks for your input!
Helene Vinh
From: Tim Harshbarger
Date: Wed, Aug 24 2016 7:06AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
I think the only fool proof technique that works on Desktop that will also allow you to find the text via swiping or explore by touch is to make the text a visible part of the user interface.
For explore by touch to work, you have to have a touch target. Which means either the text has to be somewhere on the screen or it has to be programmatically associated with something where the screen reader will read that type of information as part of the element.
For controls, you typically could get explore by touch to work if you can associate the information using aria-describedby. But that doesn't work with static text or non-control elements.
You could place the text on the screen and make it transparent--but that is going to show up as white space on the UI and probably alter the look and feel. Honestly, this is yet another thing that would be useful to find out with some user testing. My theory is that on touch devices, screen reader users switch to swipe gestures when they encounter forms--probably because it is a bit too easy with explore by touch to miss something.
However, it sounds like you might be dealing with a table and behavior might be different in that situation.
An idea I have never tested might be to place the text in a div or span, ensure that the div or span takes up a large enough space on the user interface, but move the text outside the div or span
From: Jared Smith
Date: Wed, Aug 24 2016 7:29AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
> To give a concrete example: when we display a date in short format
> (Mon 26 Oct), we hide this element with aria-hidden, and add a
> sr-only text (Monday 26 October) for screen readers.
Why would "Mon 26 Oct" be any more confusing to a screen reader user
than to a sighted user? If this text is not understandable as is, it
should be expanded and made more useful for everyone. If it's not
confusing visually, providing much more verbose and lengthy text just
for screen reader users isn't creating an equitable experience.
Most screen readers have a setting for reading the expansion (title
attribute) for acronyms and abbreviations. I believe the default is to
not read these on Windows screen readers.
Jared
From: Jim Homme
Date: Wed, Aug 24 2016 7:33AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
Hi Jared,
Your last statement is correct. Furthermore, NVDA does not have a setting to change how it handles the abbrev and acronym tags, and I do not remember intentionally testing that tag with NVDA. JAWS has the setting that expands these tags off by default. I don't have Window-eyes installed right now, and don't know how it treats the tags. I would also need to intentionally test this with VoiceOver. I have an iPhone.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Birkir R. Gunnarsson
Date: Wed, Aug 24 2016 1:00PM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
I see (and have recommended) one use case for screen reader specific
text in datepicker/calendar grids, where the sighted user get the
month and day of week from caption/column header. Screen readers read
tables (let alone grids) so differently, that sometimes the only way
to ensure a consistent experience is to create screen reader only text
for the individual date buttons.
That is about the only use case I can think of, in general I totally agree.
Since the question to this list came from somebody in the airline
industry, I would not be super surprised if the scenario is a
datepicker.
On 8/24/16, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Jared,
> Your last statement is correct. Furthermore, NVDA does not have a setting to
> change how it handles the abbrev and acronym tags, and I do not remember
> intentionally testing that tag with NVDA. JAWS has the setting that expands
> these tags off by default. I don't have Window-eyes installed right now, and
> don't know how it treats the tags. I would also need to intentionally test
> this with VoiceOver. I have an iPhone.
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> E+R=O
>
>
From: Patrick H. Lauke
Date: Wed, Aug 24 2016 2:36PM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
On 24/08/2016 11:52, Jamous, JP wrote:
> Do you have the mean to find out through JS what platform is loaded and modify your markup based on whether it is Windows or iOS?
Reminder that "touch" isn't purely a mobile/tablet input mechanism.
There are in fact many hybrid/two-in-one laptops with touchscreens, and
even standalone touchscreens for desktop computers.
Also, a reminder that you can't really detect touchscreens -
https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
Related: is "explore by touch" really such a great concern? I always
thought this was more of a navigation of last resort for blind/VI
touchscreen users, when using swipe (with the different modes for also
navigating directly to headings, landmarks, etc) wasn't working all that
well.
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: Jim Homme
Date: Wed, Aug 24 2016 4:19PM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
Hi,
Reading by various things like headings would be for skimming, as you probably know. I'm not trying to insult your intelligence. Speaking only from my experience, when I first encounter a web page on my phone, I like to swipe through it all. Later, if I know what I'm looking for, I skip things. As a tester, I always use rightword swipes to go through a page so that I don't miss anything.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Patrick H. Lauke
Date: Wed, Aug 24 2016 4:23PM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
On 24/08/2016 23:19, Jim Homme wrote:
> Reading by various things like headings would be for skimming, as you probably know. I'm not trying to insult your intelligence. Speaking only from my experience, when I first encounter a web page on my phone, I like to swipe through it all. Later, if I know what I'm looking for, I skip things. As a tester, I always use rightword swipes to go through a page so that I don't miss anything.
Thanks for not insulting my intelligence, but you seem to have managed
not to answer my actual question, which was about "touch to explore".
P
>
From: Jim Homme
Date: Wed, Aug 24 2016 4:30PM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
Hi Patric,
You're right. Here is, once again, my personal answer. I haven't tried to poll other people who are blind. For websites, I usually do not navigate with touch exploration. I would do that most often if something is not working. One case in point recently was when I would try to check a box and somehow activated the buttons at the bottom of Safari. I had to manually scroll that part of the screen into the area where I could get at it with my finger, then put my finger on it, then touch the screen with another finger. In this case, double-tapping also did not work. I don't know of any good examination tools that would do nice things like inspect element that I can use with VoiceOver, so I didn't know what caused the issue.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Jamous, JP
Date: Thu, Aug 25 2016 7:02AM
Subject: Re: Hidden text and mobile devices
← Previous message | Next message →
Not touch screen. Rather screen resolution.
Check out the .NET framework and look under System.Web.Pages.Request.Browser. You will see what I am referring to right there. There is an array of things to capture.
If OS == "iOS" && ScreenSize => "1024X768" Then
It is an iPad and not an iPhone.
**************************************************
Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team
The only limitations in life are those we set for ourselves
**************************************************
From: Patrick H. Lauke
Date: Thu, Aug 25 2016 8:28AM
Subject: Re: Hidden text and mobile devices
← Previous message | No next message
On 25/08/2016 14:02, Jamous, JP wrote:
> Not touch screen. Rather screen resolution.
Don't try to guess one thing by testing another thing. Checking screen
resolution will only give you hints about screen resolution. It tells
you nothing else (does it have a touchscreen? Or is it a small-screen
device with a built-in trackball, or external mouse, or...). The rest is
all inferred, which will eventually lead to false positives/negatives.
> Check out the .NET framework and look under System.Web.Pages.Request.Browser. You will see what I am referring to right there. There is an array of things to capture.
>
> If OS == "iOS" && ScreenSize => "1024X768" Then
> It is an iPad and not an iPhone.
Once you get into browser sniffing like this, you're setting yourself up
for continuously adding more tests as new browsers/devices come along,
and you still risk false positives/negatives.
https://www.google.co.uk/search?q=browser%20sniffing
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