E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Robert Fentress
Date: Mon, May 21 2018 3:46PM
Subject: VoiceOver skips revealed content when using virtual cursor
No previous message | Next message →

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>

From: Robert Fentress
Date: Mon, May 21 2018 4:22PM
Subject: Re: VoiceOver skips revealed content when using virtual cursor
← Previous message | Next message →

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

From: Robert Fentress
Date: Mon, May 21 2018 4:35PM
Subject: Re: VoiceOver skips revealed content when using virtual cursor
← Previous message | Next message →

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

From: Patrick H. Lauke
Date: Mon, May 21 2018 7:15PM
Subject: Re: VoiceOver skips revealed content when using virtual cursor
← Previous message | Next message →

On 21/05/2018 23:35, Robert Fentress 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.

Fake news...

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: Robert Fentress
Date: Tue, May 29 2018 11:11AM
Subject: Re: VoiceOver skips revealed content when using virtual cursor
← Previous message | No next message

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