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.
Things I accomplished
- 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.
What I learned today
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.