We’ve created an open source accordion component which is 100 per cent compliant with WAI-ARIA Authoring Practices, so you don’t need to worry about testing or amending the code for accessibility compliance. It’s free for developers to take and use for any project. 

Technical information and open source code on GitHub.

How we ensure accessibility

React Accessible Accordion 3.0 was built to fully comply with the World Wide Web Consortium (W3C) guidelines on accessible accordion components. We drew on established standards, previous work, and our own experience in human-centred design.

W3C’s guidelines feature:

  • A list of keyboard interactivity guidelines for motor-impaired users.
  • A list of semantic guidelines for visually impaired users on screen-readers.

Built on multiple iterations

We built on the existing groundwork of previous React Accessible Accordion versions. Version 1.0 was established early in 2017. Since then, we’ve made multiple iterations to reach what we now consider a 100 per cent spec-compliant component in terms of accessibility. 

It’s part of our ethos to build with a human-centred approach – keeping accessibility at the forefront of our decision-making, and at the foundation of every project. 

A long timeline of contributions to React Accessible Accordion between March 2017 and April 2019, featuring spikes throughout
Timeline of contributions to React Accessible Accordion

React Accessible Accordion 3.0 reduces cost and complexity

Ensuring disabled or impaired users are being catered for shouldn’t mean foregoing regular design or usability standards due to cost or complexity. Basic accessibility tools should be open source, standardised, and central to design and development. 

React Accessible Accordion 3.0 provides an accessible component, allowing developers and designers to focus efforts elsewhere.

Use React Accessible Accordion

We're stoked to see over 1,000,000 downloads so far. To download it yourself, give it a test, or find more information the React Accessible Accordion go to our GitHub: React Accessible Accordion 3.0 on GitHub

Tweet or email us if you use it! We’d love to see how other people have used the React Accessible Accordion 3.0.

Read the rest of our series on accessibility

How design systems help you create accessible digital experiences

Use a design system to create better processes for usable, accessible design.

5 ways to make your content more inclusive

With inclusive content, we can reach a diverse audience to inform, educate, and entertain simultaneously. Ruth, our content director, shares her top tips.

Designing for all with collaborative and diverse teams

In celebration of Global Accessibility Awareness Day 2019 (GAAD), we want to discuss how to create digital experiences that everyone can use. And it starts with the people who create them.

Get in touch

Let’s make the things that matter, better.