WebAIM - Web Accessibility In Mind

E-mail List Archives

VoiceOver screen reader with tabs

for

From: Brian Steele
Date: May 19, 2022 12:06PM

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