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

3 Likes