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.
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.
Hi @MarcoZ and welcome. Wow, it’s been like 2 years since I posted this. Thanks for the info and explanation.
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.
