WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: VoiceOver skips revealed content when using virtual cursor

for

From: Robert Fentress
Date: May 21, 2018 4:35PM

I've been cross-posting to the web-a11y on Slack, and it was suggested
that, since most of the folks on the WebAIM list are on Slack, I should not
do this. Therefore, this is the last I'll post here. For further
discussion, refer to the aria-patterns Slack channel on web-a11y. OK, here
it is:

I think the real issue is that the `<button>` element needs to be in a
separate block-level element, so wrapping the button in a `<div>` is
probably the best solution. I was trying to strip things down to their
simplest level, but I guess I stripped too far!


On Mon, May 21, 2018 at 6:22 PM, Robert Fentress < <EMAIL REMOVED> > wrote:

> Further experimentation reveals that if I move the following from the
> `<div>` to the `<ul>` inside the `<div>`, it appears to work:
>
> `id="drawer" class="hidden" role="group" aria-label="Menu"`
>
>
> Interesting.
>
> It also appears to work if I just wrap an extra `<div>` around the drawer.
>
> On Mon, May 21, 2018 at 5:46 PM, Robert Fentress < <EMAIL REMOVED> > wrote:
>
>> Hoping you folks can give me some idea of what is going on with the
>> following page
>> http://www.test.assist.vt.edu/sandbox/drawer/index.html
>>
>> It is a simple demonstration of a drawer pattern (just a *disclosure
>> widget*, really). The issue I'm encountering is that in *VoiceOver on
>> MacOS High Sierra*, after clicking the button that causes the drawer to
>> appear, *when I attempt to use the virtual cursor* (VO+right arrow) to
>> read the menu that appears, *it skips the revealed content entirely*.
>> This pattern works acceptably well on other screen readers, even VoiceOver
>> on iOS, but VoiceOver on MacOS High Sierra has this weird behavior, in my
>> opinion.
>>
>> I made a screen capture video demonstrating what VoiceOver is doing and
>> explaining what is going on with the code, if that'll help:
>> https://youtu.be/kGQ7-u9RBok
>>
>> I've only got automatic captions so far-sorry. They're quite *amazingly*
>> accurate, though, aside from the punctuation.
>>
>> *Any ideas on how to fix this*, short of setting focus to the revealed
>> content explicitly, which I'd rather avoid?
>>
>> Best,
>> Rob
>>
>> --
>> *Rob Fentress*
>> *Web Accessibility Solutions Designer*
>> Assistive Technologies at Virginia Tech
>> Electronic Business Card (vCard)
>> <http://search.vt.edu/search/person.vcf?person54847>
>> LinkedIn Profile
>> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
>> VT Zoom Personal Conferencing
>> <https://virginiatech.zoom.us/my/rob.fentress>
>>
>
>
>
> --
> *Rob Fentress*
> *Web Accessibility Solutions Designer*
> Assistive Technologies at Virginia Tech
> Electronic Business Card (vCard)
> <http://search.vt.edu/search/person.vcf?person54847>
> LinkedIn Profile
> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> VT Zoom Personal Conferencing
> <https://virginiatech.zoom.us/my/rob.fentress>
>



--
*Rob Fentress*
*Web Accessibility Solutions Designer*
Assistive Technologies at Virginia Tech
Electronic Business Card (vCard)
<http://search.vt.edu/search/person.vcf?person54847>
LinkedIn Profile
<https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
VT Zoom Personal Conferencing <https://virginiatech.zoom.us/my/rob.fentress>