Accordion

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

• As someone using the component, I want to be able to understand the content within an accordion from its title alone, so that I don't have to expand and search through each accordion to find what I'm looking for.
• As a keyboard-only user, I want to be able to expand the accordion in order to find the information that I need.
• As a keyboard-only user, I want to be able to see which of the accordions I'm currently interacting with.
• As a screen reader user, I want to be able to know that I can interact with the accordions and whether they're currently expanded or collapsed.

Test steps

Use these steps to check that the accordion component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to each instance of the accordion component using the Tab key.
3. Verify that the heading element used is an appropriate heading level (maintaining the page's hierarchy).
4. Verify that the heading is meaningful and provides sufficient context to the content within the accordion when expanded.
5. Check that the accordion's meaningful title is announced, as well as whether the accordion is expanded or collapsed.
6. Using the Space or Enter key, toggle the accordion open, and then check that content within it is announced by the screen reader as expected.
7. Using the Space or Enter key, toggle the accordion closed, and then check that the now hidden content within the accordion is not announced by the screen reader as expected.
8. Verify that if the Space key is used for activating the accordion, that the viewport does not scroll.

---

Avoiding accessibility barriers

We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:

• It's possible to use content in the accordion's light green title smaller than 18.5px. This results in an insufficient colour contrast ratio. To prevent this, check that any content used has a text size larger than 18.5px.
• When adding mixed content to the accordion's title, a fixed width may prevent the component from reflowing correctly. To prevent this, ensure that fixed widths are not specified on the component.

---