An accessible accordion component built using vanilla JavaScript, HTML and CSS.
assets
- SVGs for the accordion's toggle.src/css
- styling for thebutton
andaccordion
components,reset
styles and any styling associated withlayout
andtext
. These are all imported byindex.css
.src/js
- JavaScript split into components:button
andaccordion
. Both are imported and initialised inmain.js
.
- The title of each
accordion header
is contained in an element with rolebutton
. - Each
accordion header button
is wrapped in an element with roleheading
that has a value set for aria-level that is appropriate for the information architecture of the page (h2
in this case). - If the
accordion content
associated with anaccordion header
is visible, the header button element hasaria-expanded
set totrue
. If the panel is not visible,aria-expanded
is set tofalse
. - When the accordion content is collapsed the accordion content is
hidden
from the accessibility tree. - The
accordion header button
element hasaria-controls
set to the ID of the element containing theaccordion content
.
- Making the entire panel clickable means users are unable to highlight any content text. If there are more interactable elements such as links, these would need to be factored into the accordion component logic to prevent event propagation.
- If I added cursor pointer to the entire panel, it would be difficult to the user to distinguish when they are interacting with the button or closing the panel, especially as there is no hover state designed for the button.