Another sick day, so I spent 30 minutes looking over information about a custom accordions.
Thing I accomplished
- Read the WAI Authoring Practice for a custom accordion.
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!
