E-mail List Archives
Thread: Menus and other pop-ups in voiceover on iOS
Number of posts in this thread: 11 (In chronological order)
From: Mark Magennis
Date: Fri, Jun 15 2018 5:21AM
Subject: Menus and other pop-ups in voiceover on iOS
No previous message | Next message →
Hi everyone.
I'm just starting to test a website on iOS. Never done this before and it's proving very difficult to use. I have a couple of specific questions.
First, I'm wondering, using voiceover with no keyboard, how does the user dismiss a pop-up such as a menu without selecting? AFAIK there is no equivalent gesture for the Escape key which would be used on desktop. I can dismiss a <select> control which Voiceover announces as a "picker", because when I tap outside the control, Voiceover tells me to "double tap to dismiss popup". But if I tap outside a menu (div role="menu") it selects whatever element I've tapped on.
Second, there's the issue of how to navigate between items within the menu. When the menu is open, swipe right and left seem to emulate down arrow by moving focus to the next or previous menu item. But this doesn't work consistently. It repeatedly and randomly jumps back to the first item every now and again. If I ever reach the last item, the next swipe goes outside the menu, so the menu is not modal like it is on desktop.
Aside from these two specific issues, can anyone point to good resources about coding web menus, dialogs, etc. that will work well with Voiceover on iOS.
Thanks,
Mark
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
From: Jonathan Cohn
Date: Fri, Jun 15 2018 7:42AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
The equivalent of escape in VoiceOver gestures is the two finger scrub. Put two fingers on the screen and move back and forth once quickly.
Jonathan
> On Jun 15, 2018, at 7:21 AM, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi everyone.
>
> I'm just starting to test a website on iOS. Never done this before and it's proving very difficult to use. I have a couple of specific questions.
>
> First, I'm wondering, using voiceover with no keyboard, how does the user dismiss a pop-up such as a menu without selecting? AFAIK there is no equivalent gesture for the Escape key which would be used on desktop. I can dismiss a <select> control which Voiceover announces as a "picker", because when I tap outside the control, Voiceover tells me to "double tap to dismiss popup". But if I tap outside a menu (div role="menu") it selects whatever element I've tapped on.
>
> Second, there's the issue of how to navigate between items within the menu. When the menu is open, swipe right and left seem to emulate down arrow by moving focus to the next or previous menu item. But this doesn't work consistently. It repeatedly and randomly jumps back to the first item every now and again. If I ever reach the last item, the next swipe goes outside the menu, so the menu is not modal like it is on desktop.
>
> Aside from these two specific issues, can anyone point to good resources about coding web menus, dialogs, etc. that will work well with Voiceover on iOS.
>
> Thanks,
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
> > > >
From: Patrick H. Lauke
Date: Fri, Jun 15 2018 7:52AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
On 15/06/2018 14:42, Jonathan Cohn wrote:
> The equivalent of escape in VoiceOver gestures is the two finger scrub. Put two fingers on the screen and move back and forth once quickly.
Not tested, but: to my knowledge though, this does not send/emulate any
particular keystroke (i.e. it doesn't "pretend" that ESC was pressed),
nor can it be detected via JavaScript.
>> Second, there's the issue of how to navigate between items within the menu. When the menu is open, swipe right and left seem to emulate down arrow by moving focus to the next or previous menu item.
Just picking up on this from Mark's original email, worth noting that
it's not emulating down arrow, but rather it's simply moving the virtual
cursor forward in the document (so akin to using AT reading keys - it's
not emulating any keystroke or anything of that nature)
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: glen walker
Date: Fri, Jun 15 2018 8:38AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
Sometimes my swipe left/right gets a little lazy and doesn't move exactly
horizontally. I might "hook" a little bit at the end so the swipe becomes
more of a up/down instead of left/right. I'm not sure where the threshold
is where iOS determines it's a horizontal vs a vertical swipe, but that
could possibly cause your "random" movement, depending on what your rotor
is set on. Left/right should move to the next item in the DOM. Up/down
will move to the next item specified by the rotor.
Glen
From: Mark Magennis
Date: Fri, Jun 15 2018 9:02AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
Thanks Patrick, I didn't really mean "emulate". Bad choice of words. I meant "has the same effect as". Re: two finger scrub, I've tried this and 2 finger Z-shape, both of which I've seen referred to as 'Escape', but they don't emulate it or even have the same effect.
Mark
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: 15 June 2018 14:52
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
On 15/06/2018 14:42, Jonathan Cohn wrote:
> The equivalent of escape in VoiceOver gestures is the two finger scrub. Put two fingers on the screen and move back and forth once quickly.
Not tested, but: to my knowledge though, this does not send/emulate any particular keystroke (i.e. it doesn't "pretend" that ESC was pressed), nor can it be detected via JavaScript.
>> Second, there's the issue of how to navigate between items within the menu. When the menu is open, swipe right and left seem to emulate down arrow by moving focus to the next or previous menu item.
Just picking up on this from Mark's original email, worth noting that it's not emulating down arrow, but rather it's simply moving the virtual cursor forward in the document (so akin to using AT reading keys - it's not emulating any keystroke or anything of that nature)
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: Mark Magennis
Date: Fri, Jun 15 2018 9:14AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
Thanks Glen, but it's definitely not my wonky finger (though it can be wonky at times). It's random on this element alone.
Is it definitely the case that swipe right/left simply reads the next/previous item in the DOM? The DOM that I see in the desktop browser is pretty simple and is as you'd expect for a menu - a <ul role="menu"> where each <li> contains an <a role="menutiem">. Nothing gets swapped around during interaction. I wonder could the DOM served to the tablet be different?
Do you know of a way to view the DOM on a tablet? Or the DOM served to a tablet, through a tablet emulator perhaps?
Mark
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: 15 June 2018 15:39
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
Sometimes my swipe left/right gets a little lazy and doesn't move exactly horizontally. I might "hook" a little bit at the end so the swipe becomes more of a up/down instead of left/right. I'm not sure where the threshold is where iOS determines it's a horizontal vs a vertical swipe, but that could possibly cause your "random" movement, depending on what your rotor is set on. Left/right should move to the next item in the DOM. Up/down will move to the next item specified by the rotor.
Glen
From: Mark Magennis
Date: Fri, Jun 15 2018 9:17AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
Should probably have said "created by the browser on the tablet" not "served to the tablet".
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Mark Magennis
Sent: 15 June 2018 16:15
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
Thanks Glen, but it's definitely not my wonky finger (though it can be wonky at times). It's random on this element alone.
Is it definitely the case that swipe right/left simply reads the next/previous item in the DOM? The DOM that I see in the desktop browser is pretty simple and is as you'd expect for a menu - a <ul role="menu"> where each <li> contains an <a role="menutiem">. Nothing gets swapped around during interaction. I wonder could the DOM served to the tablet be different?
Do you know of a way to view the DOM on a tablet? Or the DOM served to a tablet, through a tablet emulator perhaps?
Mark
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: 15 June 2018 15:39
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
Sometimes my swipe left/right gets a little lazy and doesn't move exactly horizontally. I might "hook" a little bit at the end so the swipe becomes more of a up/down instead of left/right. I'm not sure where the threshold is where iOS determines it's a horizontal vs a vertical swipe, but that could possibly cause your "random" movement, depending on what your rotor is set on. Left/right should move to the next item in the DOM. Up/down will move to the next item specified by the rotor.
Glen
From: glen walker
Date: Fri, Jun 15 2018 9:40AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
Some websites do serve up different html depending on the device/browser.
I've seen different code generated for Internet Explorer than for Firefox,
but it has to be an intentional thing by the developer. It's not uncommon
but is generally frowned upon as a general practice except as a last resort
(speaking with my software engineering hat on).
You can "view source" if you have a bookmarklet, or at least that's how I
do it. Here's the one that I use:
function()
{
var a=window.open('about:blank').document;
a.write('<!DOCTYPE html><html><head><title>Source of ' location.href
'</title><meta name="viewport" content="widthÞvice-width"
/></head><body></body></html>');
a.close();
var b=a.body.appendChild(a.createElement('pre'));
b.style.overflow='auto';
b.style.whiteSpace='pre-wrap';
b.appendChild(a.createTextNode(document.documentElement.innerHTML))
}
That's a "prettified" version for readability. It essentially creates a
new page with a shell of html then adds a <pre> element containing your
original page's innterHTML. The following is a urlencoded version that you
can copy/paste into a new bookmarklet. (I can explain how to create a
bookmarklet separately if needed).
javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22widthÞvice-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();
From: Patrick H. Lauke
Date: Fri, Jun 15 2018 9:49AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
On 15/06/2018 16:17, Mark Magennis wrote:
> Should probably have said "created by the browser on the tablet" not "served to the tablet".
Using Chrome or Firefox Developer Tools on desktop (with their
"responsive" modes), or - if it's just media query based - simply
resizing the desktop browser window/zooming in to trigger the relevant
queries - may work.
Failing that, you'd need to start looking at setting up a proper remote
debugging environment (where developer tools on your desktop machine
connect to the browser instance on your mobile/tablet device).
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: Steve Green
Date: Fri, Jun 15 2018 9:56AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | Next message →
The instructions for setting up a remote debugging environment are at:
Android: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_sourceÜc&utm_medium=redirect&utm_campaign 16q3
iOS: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: 15 June 2018 16:50
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
On 15/06/2018 16:17, Mark Magennis wrote:
> Should probably have said "created by the browser on the tablet" not "served to the tablet".
Using Chrome or Firefox Developer Tools on desktop (with their "responsive" modes), or - if it's just media query based - simply resizing the desktop browser window/zooming in to trigger the relevant queries - may work.
Failing that, you'd need to start looking at setting up a proper remote debugging environment (where developer tools on your desktop machine connect to the browser instance on your mobile/tablet device).
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: Mark Magennis
Date: Fri, Jun 15 2018 10:09AM
Subject: Re: Menus and other pop-ups in voiceover on iOS
← Previous message | No next message
Thanks Steve and Patrick. I'll take a look at that.
Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: 15 June 2018 16:57
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
The instructions for setting up a remote debugging environment are at:
Android: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_sourceÜc&utm_medium=redirect&utm_campaign 16q3
iOS: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: 15 June 2018 16:50
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Menus and other pop-ups in voiceover on iOS
On 15/06/2018 16:17, Mark Magennis wrote:
> Should probably have said "created by the browser on the tablet" not "served to the tablet".
Using Chrome or Firefox Developer Tools on desktop (with their "responsive" modes), or - if it's just media query based - simply resizing the desktop browser window/zooming in to trigger the relevant queries - may work.
Failing that, you'd need to start looking at setting up a proper remote debugging environment (where developer tools on your desktop machine connect to the browser instance on your mobile/tablet device).
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