WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hidden text and mobile devices

for

From: Birkir R. Gunnarsson
Date: Aug 24, 2016 4:39AM

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


--
Work hard. Have fun. Make history.