*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Accordion
- Nick Harris
The Accordion component lets users show and hide sections of related content on a page.
Usage
Do’s
Use accordion when you have multiple related pieces of content.
Use accordion when only some of the content items are relevant to any one user. FAQs are a great example as not all questions are of interest to everyone.
Anatomy
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | Open icon | SVG | Mandatory | |
2 | Item title | Text | Mandatory | |
3 | Close icon | SVG | Mandatory | |
4 | Accordion content | Any component | Any | Mandatory |
Visual style
Accordions come in two style options (beyond the standard colour theming). The two main visualisations of accordions are: accordion and disclosure.
Disclosure accordion style is visually less prominent by reducing size and removing borders. Disclosures will generally be restricted to a single draw and is used to house peripheral content that isn’t relevant to all users. Two examples of this are product ingredient pack details and video transcripts.
Editorial
Keep accordion titles short, but long enough to clearly communicate what a user can expect to find inside. This is especially required for unsighted users.
Behaviour
Accordion items are collapsed by default.
Each accordion is individually controlled with a toggle between expanded and collapsed.
Each accordion includes hover, focus and disabled and active states. CSS ‘focus-visible’ will remove visual focus for mouse-controlled accordions.
Mouse click or touch on the accordion title will toggle between expand and collapse.
Once focused, Enter or Space on a keyboard will toggle expand or collapse.
Items within an accordion ‘list’ can be traverse forwards with tab and backwards with shift+tab.
Where Javascript is disabled, all accordions are expanded by default and expand/collapse controls are not present.
Accessibility
The control is a <button> which toggles aria-expanded between “true” and “false”.
Where there is more than one accordion draw and it forms a list, nesting items with an unordered list will tell screen-readers how many items are in the accordion set.
The icon is deliberately placed before the title (left on LTR languages and right on RTL languages) to aid users of screen magnifiers, who may not be able to see the status if it was right aligned on a wide accordion.
Collapsed content shouldn’t be visible to users or screen-readers. (e.g. display:none).
Accordions can be configured to accommodate multiple semantic elements.
<section>Use when the drawer title is a semantic heading. Wrapping the content in a section means that we can programmatically determine headings and this will make the heading a child of the heading that came before (e.g. a section header H2)<div>Use when the drawer title is not a heading (e.g. a paragraph). Using section here would create a section without a heading which is bad practice.<dl>Most appropriately used for FAQ lists and although it looks the same, it should be noted that the drawer titles will not be headings semantically and so won't be as easily navigable by screen-reader users, but the list will appear to them.<summary>Accordions are for multiple items. Do not use<summary>in accordions.