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 accomplishedPermalink for "Thing I accomplished"
- Read the WAI Authoring Practice for a custom accordion.
What I learned todayPermalink for "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/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
button within the accordion. Progressive enhancement!