When editing inside accordions, you are presented with the same WYSIWYG editor as when using a content block. As such, the same accessibility principles mentioned throughout this web guide still apply.  The only exception to this is how you use the heading hierarchy with accordions.

1. How are accordions accessible?

A common question about accordions revolves around how exactly these ‘hidden’ sections of content are accessible.

In short, accordion titles are defined as ‘buttons’ in code. This means that they can be clicked on, often shown visually by the open or closed arrow to the right of the title. However, as they are technically buttons, browsers also understand that they are interactive and can be clicked on, or navigated with a keyboard

The toggled ‘state’ is also communicated. If an accordion is closed, technologies will understand that it is ‘collapsed’, or ‘expanded’ if the accordion is open. This is optimal for screen readers, as they read the accordion title, understand that it can be opened, and then receive information about the state. Once clicked, they will read out the updated state and if opened, they will be able to access the now visible content.

2. Headings in accordions

Whilst editing accordions is similar to editing regular content blocks, the one aspect of editing that does differ is how we think about the hierarchy of headings.

As you can imagine, an accordion is treated as a ‘section’ of the page – much like how headings handle sections, illustrated on the previous page. In line with this thinking, the button used to title an accordion is in fact a heading. It starts a section beneath the accordion.  Should you choose to have child headings inside the accordion, it creates sub-sections to that. This is illustrated below – you can see how similar it is to heading sections.

In newer versions of the accordion block, you are given a choice of which level heading to begin the accordion with. Use this selector in accordance with the rest of your content.

If the accordion is the first part of content on the page, you would set the title as a Heading 2, following with Heading 3s in the accordion content. If the accordion follows a content block that has an Heading 2 in, and your accordion can be treated as part of that Heading 2 ‘section’, then use a Heading 3 for the accordion title and start accordion content with Heading 4s. If your accordion is somewhat separate from that content above, just use the same level heading for the title to create a new section.

The important note is that accordions only differ visually – they still structure content in the same way.  

To recap, using the web editor, here is how the diagram would work:

Page title (Heading 1) - this is on the Banner and not in the content

Accordion 1 (set as Heading 2)

Some content

Sub-section 1 (Heading 3)

Some more content

Section 2 (Heading 2)

Some more content