WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hidden text and mobile devices

for

From: Tim Harshbarger
Date: Aug 24, 2016 7:06AM

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
-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Helene VINH
Sent: Wednesday, August 24, 2016 3:10 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Hidden text and mobile devices

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 REMOVED>
www.amadeus.com