E-mail List Archives

Search E-mail List Archives for

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

From: Brian Steele
Date: Thu, May 19 2022 12:06PM
Subject: VoiceOver screen reader with tabs
No previous message | Next message →

I'm trying to create accessible tabs based on the MDN ARIA: tab role doc
example
<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example>.
The
idea is that, with the help of JavaScript, you navigate through the tabs
with ARROW keys – that way, once you select a tab, you can TAB directly
into its panel.

My example is here:
https://steeledev.wpengine.com/tabs/

That's working, but once I'm in a tabpanel, VoiceOver says, "You are
currently in a tab panel. To interact with items in this group, press
Control-Option-Shift-Down Arrow." That's not working – I can't find a way
to make VO read the contents of the panel.

I'd really appreciate it if someone could let me know if I'm on the right
track... is this accessible, and is there a way to make VO read the
contents of a tab panel?

Thanks for your help,

Brian

From: Jonathan Cohn
Date: Sun, May 22 2022 2:45PM
Subject: Re: VoiceOver screen reader with tabs
← Previous message | Next message →

Hello,
You are using VoiceOver on a Mac with Safari?
It sounds like you have VOiceOver navigation mode set to groups. Most VO users end up setting this up as dom, mode mode more closely resembles what Windows screen reader behavior is like.
Open up VoiceOver utility (in the Utilities directory under Applications) and select web. Then make sure the Navigation tab is open. You will then see a pair of radio buttons to chose navigation style, make sure this is set as "dom"
Usually the most difficult part of creating a set of tabs like this is making sure the tab from the tablets into the tab panel makes sense.

Best wishes,

Jonathan Cohn



> On May 19, 2022, at 14:06, Brian Steele < = EMAIL ADDRESS REMOVED = > wrote:
>
> I'm trying to create accessible tabs based on the MDN ARIA: tab role doc
> example
> <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example>.
> The
> idea is that, with the help of JavaScript, you navigate through the tabs
> with ARROW keys – that way, once you select a tab, you can TAB directly
> into its panel.
>
> My example is here:
> https://steeledev.wpengine.com/tabs/
>
> That's working, but once I'm in a tabpanel, VoiceOver says, "You are
> currently in a tab panel. To interact with items in this group, press
> Control-Option-Shift-Down Arrow." That's not working – I can't find a way
> to make VO read the contents of the panel.
>
> I'd really appreciate it if someone could let me know if I'm on the right
> track... is this accessible, and is there a way to make VO read the
> contents of a tab panel?
>
> Thanks for your help,
>
> Brian
> > > >

From: Brian Steele
Date: Sun, May 22 2022 5:10PM
Subject: Re: VoiceOver screen reader with tabs
← Previous message | No next message

Thanks for your help Jonathan, I wasn't aware of those settings. I just
checked that setting and it's already set to Web > Navigation > DOM order.

I was trying on a Mac with Firefox and Safari.

I've also tried with W3C Tabs Design Pattern and I'm getting the same
result, so I'll chalk this one up to me not being familiar with VoiceOver.

Btw, I also see that the W3C design patterns guide does not indicate which
examples are compatible with mobile browsers or touch interfaces - it
sounds like that's a whole nother can of worms!


On Sun, 22 May 2022 at 16:45, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:

> Hello,
> You are using VoiceOver on a Mac with Safari?
> It sounds like you have VOiceOver navigation mode set to groups. Most VO
> users end up setting this up as dom, mode mode more closely resembles what
> Windows screen reader behavior is like.
> Open up VoiceOver utility (in the Utilities directory under Applications)
> and select web. Then make sure the Navigation tab is open. You will then
> see a pair of radio buttons to chose navigation style, make sure this is
> set as "dom"
> Usually the most difficult part of creating a set of tabs like this is
> making sure the tab from the tablets into the tab panel makes sense.
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
> > On May 19, 2022, at 14:06, Brian Steele < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > I'm trying to create accessible tabs based on the MDN ARIA: tab role doc
> > example
> > <
> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example
> >.
> > The
> > idea is that, with the help of JavaScript, you navigate through the tabs
> > with ARROW keys – that way, once you select a tab, you can TAB directly
> > into its panel.
> >
> > My example is here:
> > https://steeledev.wpengine.com/tabs/
> >
> > That's working, but once I'm in a tabpanel, VoiceOver says, "You are
> > currently in a tab panel. To interact with items in this group, press
> > Control-Option-Shift-Down Arrow." That's not working – I can't find a way
> > to make VO read the contents of the panel.
> >
> > I'd really appreciate it if someone could let me know if I'm on the right
> > track... is this accessible, and is there a way to make VO read the
> > contents of a tab panel?
> >
> > Thanks for your help,
> >
> > Brian
> > > > > > > > >
> > > > >


--
*Brian Steele*