WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: VoiceOver screen reader with tabs

for

From: Brian Steele
Date: May 22, 2022 5:10PM

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