Day 42: Researching Custom Menus

Published on 11 Jan 2019

• journal
• was
• aria
• patterns
• techniques
• widgets

Under the weather again, cold symptoms that just won't let go. Regardless, I put in half an hour today, since some studying is better than no studying. Which is why this challenges exists in the first place: to keep making progress, albeit slowly.

• Watched Invisible submenus and focus with NVDA and Firefox (YouTube).
• Compared code of a Bootstrap navbar I've coded in the past with Harvard's Online Accessibility code for a good link with submenu items.
• Read up on what W3C had to say about custom menus.

After spending a couple days learning what a custom modal needs to be accessible, and then making an attempt myself to code it, I felt more confident moving ahead to review more patterns and their expected keyboard interactions.

Today I looked over a custom menu with submenu items that open when interacted with. A few things I learned:

• W3C has 3 examples of menus that can be considered accessible.
  • The navigation menu item with subitems can be coded as an anchor link with a list of links underneath,
  • Action menus can be coded as buttons, and actions within the menu can be focused with .focus() or aria-activedescendent.
• Expected keyboard interactions for menus with focus on the button include:
  • Enter or Spacebar: opens the menu and places focus on the first menu item.
  • (Optional) ▼/▲ (Down or Up Arrows): opens the menu and moves focus to the first or last menu item.
• Keyboard behaviors needed after the menu is open are described in separate widget documentation: 3.14 Menu or Menu bar.