0

I have a basic tabbed menu, built with Jquery. The tabbed content is a list of links displayed via html.

If you hover over the tab the information shows. If you use the VoiceOver application and the keyboard the tab header shows the hover state, yet the content will not display.

At this point if you toggle voiceOver off, the content will display.

Anyone have any resources on this? Do we need to add a click state to the tabbed menu instead of hover? I was told that screen readers do not do well with hover menus.

Any help would be most welcome.

Thanks in advance!

user1689274
  • 373
  • 1
  • 4
  • 14

1 Answers1

0

When you arrive at a link with VoiceOver (there will be a silver outline, and VoiceOver will read the contents), the browser fires a focus event.

Capture onFocus or onFocusIn for that tab. If you support desktop users, this will also be helpful for your keyboard-only users.

Also, make sure that your tabs are role="tab", and have a parent with role="tabgroup" If they're buttons, VO reads "About Us, button, double tap to...", and the user might be confused. If they're links, VO reads "About US, link, double tap to...", and the user assumes they're moving to a new page and will wait for the "new page loaded" sound. If they're tabs, VO reads "About Us, tab, 5 of 6, double tap to...", and the user understands that there's a tab, a tabpanel exists somewhere, and where they are in the list of tabs.

Juli
  • 36
  • 3