WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: VoiceOver screen reader with tabs

for

From: Jonathan Cohn
Date: May 22, 2022 2:45PM

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