Day 43: Quick Look over Accordion Keyboard Interactions

Another sick day, so I spent 30 minutes looking over information about a custom accordions.

Thing I accomplished

What I learned today

Expected keyboard interactions with accordion headers include:

  • Enter or Space: With focus on the header, collapses or expands panel
  • Tab: Moves focus to the next focusable element; includes the entire page
  • Down Arrow or Up Arrow (Optional): Moves focus to next or previous accordion header
  • Home (Optional): Moves focus to the first accordion header
  • End (Optional): Moves focus to the last accordion header

It was interesting to me to see WAI’s code example made use of dl, dt, dd, and button within the accordion. Progressive enhancement!

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