WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hidden text and mobile devices

for

From: Helene VINH
Date: Aug 24, 2016 6:06AM

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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jamous, JP
Sent: 24 August 2016 12:52
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Hidden text and mobile devices

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

**************************************************

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, August 24, 2016 5:40 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Hidden text and mobile devices

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
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.