Day 43: Quick Look over Accordion Keyboard Interactions

Published on 12 Jan 2019

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

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

• Read the WAI Authoring Practice for a custom accordion.

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/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!