Day 42: Researching Custom Menus

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

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s