WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: VoiceOver skips revealed content when using virtual cursor

for

From: Robert Fentress
Date: May 29, 2018 11:11AM

I wanted to pass on the results of my further experimentation. Wrapping
the `<button>` in a `<div>` tag solves the problem, as does wrapping the
drawer `<div>` in another `<div>`. However, wrapping the `<button>` in a
`<span>` tag does not solve the problem, even if the `<span>` tag has had
the style "display: inline-block" to it. So, my conclusion is that there
must be a block-level boundary of some sort between the `<button>` and the
drawer `<div>` in order for VoiceOver's virtual cursor not to skip the
revealed content. Does that sound like a valid inference?

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

> 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>
>



--
*Rob Fentress*
*Web Accessibility Solutions Designer*
Accessible 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>