STATUS: In draft
The accordion component lets users show and hide sections of related content on a page, to simply the interface where necessary.
Use When
You have multiple related pieces of content.
Only some of those content items are relevant to any one user. FAQs are a great example as not all questions are of interest to everyone.
Don’t Use When
All users need to see the content.
The content within the accordion is very complex or can cause slow page loads.
Related/Similar Components
A Table of Contents and sections with headings can equally allow a user to skip to the relevant subset of content for their needs, without hiding it visually.
Tabs also hide and reveal content, but cannot be used when the content within each tab needs to be compared, because only one tab panel is visible at a time.
A ‘subtle’ accordion is not only less visualy prominent but should not be stacked into multiple draws.
Key Content
Item | Type | Notes |
Control | Icon | Not content editable |
Title | Simple Text (Rich TBC) | |
Content | Rich Text Area | MVP Simplcity |
*Content can be quite flexible. The accordion is effectively just a container.
Visual Style
Accordions come in a few style options (beyond the standard colour theming). The two main visualisations of accordions are the (default) accordion and the subtle accordion.
Subtle accordion style is visually less prominent by reducing size and removing borders. Subtle accordions 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.
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 focussed, Enter or Space on a keyboard will also expand or collapse.
Once focussed, hitting tab or the down arrow moves to the next accordion title. The last title in the set loops back to the first.
Once focussed, hitting shift+tab or the up arrow moves to the previous accordion title. The first title in the set loops back to the last.
When focussed anywhere on the accordion set, home moves focus to the first accordion title.
When focussed anywhere on the accordion set, end moves focus to the last accordion title.
Where Javascript is disabled, all accordions are expanded by default and expand/collapse controls are not present.
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.
Accessibility
The expanding and collapsing control is a <button>
Expansion and collapsing of accordions must toggle aria-expanded between “true” and “false”
Nesting accordion buttons inside an unordered list item will tell screen-readers how many accordions are in the set. Avoid nesting in lists if there is only one item.
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.
The content type that is presented within the accordion could (is likely to) change the required semantic HTML. FAQs for example are most appropriately created as description lists <dl> with description terms <dt> and description details <dd>.
Being able to set accordion titles as headings can help screen-reader users navigate to find them as navigation by headings is a frequent method of building a mental model of the page. Headings may not be required in all use cases.
It is yet to be determined if aria-labels for accordion titles are needed. Editorial guidance suggests that the text should be reflective and clear as to the content within.
Research is being undertaken to determine whether there is a need for hidden text to give more context to unsighted users such as “expand the” [accordion title], etc. It may be that aria-expanded is enough.
Analytics & Data
Accordion titles and panels must be able to be individually selected to be used as click triggers within Google Tag Manager.
Future Expansion
Users who have expanded a panel and left the page, if returning in the same session (and assuming functional cookie consent) will return to find the expanded/closed status remembered.
The contents within the accordion panel is likely to be restricted to a Rich Text Area for launch, but could grow to house any reasonable content types.
It is likely that accordions will interact with the Reckitt Data Layer, passing the expand/contract signal and the accordion name to Google Tag Manager, to then filter to GA and other systems.
Behaviours may expand to allow Content Editors to mark whether any accordions should default to open.
Wider Conversations that may impact this
Heading Control: Where accordion titles are semantic headings, their heading level may changed depending on the accordions context on the page.
Progressive Enhancement: Elements requiring Javascript to “operate” should be placed with Javascript. It is therefore anticipated that accordions, in the absence of Javascript are open by default and without controls.
Inspiration from elsewhere
...