In my last post My favourite accessible accordion pattern I discussed how you could use a combination of HTML elements, some JavaScript and some appropriate ARIA to create a fully accessible accordion component that could be used by everyone.

Recently one of our users asked us if there was a way for them to add a FAQ accordion on their WordPress site. There are many plugins available that allows you to add a frequently asked questions or FAQs section in WordPress. Forms FAQ ACORD is committed to helping you. This FAQ provides general answers to the questions we receive most often about our Forms. If you need additional information, please contact Member Services. With these accordion address books you can flip through names, addresses and phone numbers page by page or open up the entire address book like an accordion and look at all the pages at once. When you are done you bring your accordion address book together and the thin magnetic covers keep your address book closed.

Frank Palinkas left a comment on the post concerning the use of the <details> and <summary> HTML elements in accordions.

We always say that it’s good to use native controls wherever possible – see our future of accessibility podcast where I talked about the various custom dropdown elements I had encountered in various projects.

So I decided to do some more investigation to see whether or not these newer elements could safely be used to provide a native way of presenting accordions, that is also accessible to everyone.

The short answer is that support for these elements is fairly good in modern browsers, but it’s currently not as accessible as our suggested pattern. The longer answer is the rest of this blog post.

Using the `<details>` and `<summary>` elements

These two elements were first introduced with HTML5 some years ago, but so far they have not been widely used.

The idea is that together they can natively allow an area of content to be expanded and collapsed with user interaction – in other words, to create an accordion.

The <details> element contains all the content, and the <summary> element contains a short piece of text that summarises the rest of the content.

The <summary> element should be nested within the <details> element – in fact it should be the first child of the <details> element. So a typical structure would be:

If you want more technical details, I’d really recommend this background article on these elements. Here I’m going to look at the accessibility implications of using them.

My original accordion requirements

Let’s revisit my own requirements for an accessible accordion from the original post:

Can be operated by a mouse click.
Can be operated by touch – on smartphones, tablets or desktops/laptops with touch screens.
Can be operated by keyboard – important for sighted keyboard-only users, and desktop/laptop screen reader users.
Can be operated easily by speech recognition software, like Dragon NaturallySpeaking.
Can be operated easily by users with screen magnification tools.
Can be easily understood by screen readers – are they aware the component is interactive, and whether the content is hidden or not.
It must be possible to close all the accordion panels if required.
It is not reliant on JavaScript to reveal content
The accordion should look good, and signal functionality to sighted users.

This is still a good list, but thinking about new elements like <details> and <summary>, a final requirement should be added: that the solution is supported within browsers that people are using.

Testing `<details>` and `<summary>` against the requirements

For the purposes of testing how the <details> and <summary> elements perform, I have created a new test page that uses them.

The page features two examples. In the first one the <summary> contains just plain text. As I liked using a header in my previous test page to help screen reader users find sections they might be interested in, the second example contains a header inside the <summary> element. I’ll be looking out for mention of the header when testing with screen readers.

Browser support for `<details>` and `<summary>`

Not surprisingly, support for the elements is better with more modern browser versions, but that is not always true.

These screenshots from Firefox 64 show that this browser supports the elements. Firstly, the element as initially viewed on the page:

And then, once the user has interacted with the <summary> element.

The view in Chrome on Windows 10 is broadly similar.

However, Internet Explorer 11 does not support the elements at all and so all the text just appears on the page without any arrows. There is no interactivity supplied by the browser. See screenshot below.

So here’s my list of support for these elements in current browsers, as at January 2019:

Firefox 64 on Windows 10 – Supported
Chrome 71 on Windows 10 – Supported
IE11 on Windows 10 – No support
Edge 17 on Windows 10 – No support (Perhaps surprising for a newer browser. Support may emerge once Edge is based on Chromium.)
Chrome 71 on Android 8 – Supported
Edge 42 on Android 8 – Supported
Firefox 64 on Android 8 – Supported
Safari on iOS 11 – Supported
Safari on MacOS 10.14 Mojave – Supported

Full support details at Can I Use.

For browsers that don’t natively support <details> and <summary>, polyfills by mathiasbynens and LaurentGoderre exist to provide the functionality, but I haven’t tested them extensively.

Lets have a look at the other requirements, to see how <details> and <summary> stack up in terms of accessibility.

Requirement 1 – Operated with mouse click

Using desktop and laptop devices, all browsers that support the elements provide clickable interaction natively. Internet Explorer and Edge don’t provide this, but all the content is visible anyway.

Requirement 2 – Operated by touch

On mobile devices, using browsers that support the <details> and <summary> elements, the expanding and collapsing can be achieved by touching the <summary> element.

The same is true for laptops with touch screens.

Requirement 3 – Operated by keyboard

This is obviously important for sighted keyboard-only users, and desktop/laptop screen reader users.

On Windows/Mac desktops/laptops using browsers that support the elements, the <summary> element automatically becomes a tab stop on the page. Once focus is on the <summary> element, the full <details> content can be toggled by using either the enter key or the space bar. So the <summary> element is effectively treated as a <button> element.

On Android devices, it is also possible to use a Bluetooth keyboard to control all aspects of the phone without using the built-in Talkback screen reader. Testing with browsers on my Android phone with a Bluetooth keyboard shows that the elements are supported.

Requirement 4 – Operated easily by Dragon NaturallySpeaking

Dragon NaturallySpeaking is Windows based voice recognition software. It is often used by those with severe motor impairments to control their machines. It is also used by people who are dyslexic, and others with cognitive impairments.

Since Windows-based browsers that support <details> and <summary> seem to treat the <summary> elements as buttons, I’d be expecting it to be easy to issue the necessary voice commands to expand the sections.

However, Dragon works best with Internet Explorer 11, and as we have seen, IE11 doesn’t support the <details> element. So I’ve tried it with Chrome and Firefox instead using version 14 of Dragon NaturallySpeaking.

The good news is that it works as expected. I can say “click [summary text]” and it toggles the content open and closed as required.

Requirement 5 – Operated when screen magnification tools are running

The entire area of t

Using the <details> and <summary> elements

Faq Accordionaddress Users&rsquo; Concerns And Build Trust

Faq Accordionaddress Users’ Concerns And Build Trust