Day: January 12, 2019

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!