WebAIM - Web Accessibility In Mind

E-mail List Archives

Hidden text and mobile devices

for

From: Helene VINH
Date: Aug 24, 2016 2:10AM

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