Accessible vertical tabbed menu design

I’ve created an accessible vertical tabbed menu interface to use in my plugins’ admin screens, as needed. This is a proof of concept. I’m interested to hear any feedback or suggestions for improvement from those who are privy to accessibility needs.

This PoC demonstrates a tabbed interface with each tab “panel” having a title and single form input.

  • descriptive text for screen readers
  • visual focus styles
  • keyboard support when menu is active
    • Home
    • End
    • Tab
    • Shift+Tab
    • Left arrow
    • Up arrow
    • Right arrow
    • Down arrow

Note: The links across the top and bottom are just to show how Tab (and Shift+Tab) move out of the menu.

Working Prototype
https://codepen.io/codepotent/full/yLBVrrL

5 Likes

Hi there, cycling back to this old topic I found while browsing for anything accessibility related.

I just tried the linked pen, and found that with the keyboard, I have no chance to view anything other than the last tab. The reason being that changing focus immediately changes the selection/active tab panel, and tabbing through all of the tabs, similar to the arrow keys, also causes only the last panel to be active once I reach it.

According to the design pattern for tabs, arrow keys should change the tabs, and ideally, enter or space should actually select it, and cause the new tab panel to become the active one. Tab should then jump straight out of the tab list into the main tab panel onto the first focusable item there. The way it is right now, however, keyboard users, not even screen reader users, but those sighted people who use the keyboard and not a mouse, would have a hard time using this multi-tabbed interface.

Marco

4 Likes

Hi @MarcoZ and welcome. Wow, it’s been like 2 years since I posted this. Thanks for the info and explanation. :slight_smile:

I liked the idea of using vertical tabs for the plugin I was working on at the time (my onsite plugin directory) which has many textarea inputs in the admin. But, as you noted, the implementation was incorrect and, due to a seeming lack of interest – four upvotes, zero feedback – I decided to use the traditional horizontal tabs which have accessibility features baked-in already.

5 Likes