Accordions

Overview

What's an accordion?

An accordion is a useful tool in managing the content on a web page. It lets us take a page which might otherwise be overwhelming and break it down into manageable blocks for our users, like this:

Why does it matter?

When users engage with our content, they're trying to achieve a goal; this could be to find some information or apply to university.

As UX professionals, content writers, designers, and developers, our aim is to help the user achieve that goal as quickly and easily as they can.

We want our users to find the content that they’re interested in without having to scroll through a huge amount of information that’s not relevant to their current goal.

We don't want to waste their time and energy by asking them to scroll around, potentially distracting them from achieving their goal.

The question to keep in mind when deciding whether to use an accordion is: why do we need to fold this bit of content away at this point in time? Does it help or hinder the user?

Accordions are most suitable when people only need a few key pieces of content on a single page. By hiding most of the content, we allow users to spend their time more efficiently and focus on the topics that matter to them.

Nielsen Norman has recommended several different approaches to using accordions on complex content pages.

page comparison when accordions are used

Figure 1. Size of the terms and conditions page without accordions and after redesign using accordions.

Does it have accessibility benefits?

Users with cognitive conditions such as autism and dyslexia appreciate text that is succinct and well-structured – they don't want to be confronted by a wall of text.

Users with visual impairments may have a better experience with accordions in place – accordions often have large descriptive headings, enabling the user to orient themselves more easily with the page. Accordions can also provide users with larger target areas to select.

Are there accessibility concerns?

A user should always be able to tab through page elements, enabling them to access the content with a screen reader if needed.

Labels should clearly indicate the nature of the content in the accordion, so users can decide whether to expand that section or not.

Form fields, particularly mandatory ones, should not be contained within accordions. Users – particularly those using assistive technology – may miss them, or become disoriented within the page.

Accordions in the design framework

Design

We have used left aligned chevrons in the accordion pattern:

We use a '+' elsewhere in DF to denote the ability to add something to a page, so a chevron is visually distinct from this.

Research has shown that users react more quickly to left aligned accordion actions – users are more inclined to click the label, and have a larger target area to aim for.

We have stripped the colour out of accordions in this release. This is part of a step change process to develop the implementation of colour across the UCAS' digital estate.

Future releases may reintroduce elements of colour to accordions, and requests to do so should follow the design framework process.

Rules/guidelines for using accordions

These must be applied, for the most suitable and consistent experience:

Content

Accordions should be used for small amounts of content. They are not designed for more than a couple of paragraphs or so.

Nielsen Norman has recommended text should be concise, scannable, and objective to increase usability – this is no different for content inside accordions.

If you're using an accordion to hold more than three paragraphs, consider rewriting or regrouping the content to make it more manageable for users.

Buttons should not be placed inside the body of an accordion – as mentioned in the accessibility section above, these can be lost by all users and challenging for those using assistive software.

Grouping

When you're structuring content, consider how the accordions will be grouped on the page to make the best use of the design pattern.

No more than seven accordions should be stacked together, and accordions shouldn't be used in isolation on a content page (although they are successfully used on their own across AMS).

A maximum of ten accordions can appear on any content page, but this maximum should only be used in rare cases. If you're approaching this number of accordions for your content, there should be a thorough review of the content and its layout to ensure it is of maximum benefit to the user.

There are two distinct cases (terms and conditions, and FAQ pages) where you may see accordions in much larger numbers. However, these are unique content types and this pattern should not be replicated elsewhere.

example of FAQ accordion

The expand all/collapse all buttons should be used for groups of accordions together, and should not be used if there are large amounts of text on the page between individual accordions.

Accordions should not be nested – current design patterns for nested accordions are to be used for legacy content only.

You might like to read

Patterns in action

Default accordion

Default layout and behaviour with optional expand/collapse controls.

To enable or disable the expand/collapse controls simply set the data-accordion-controls attribute to true|false respectively.

Highlight accordion with toggle

To add a highlight to the accordion control tabs simply add the accordion--highlight class to the enclosing ul.

To enable toggling behaviour, add the attribute data-accordion-mode="toggle" to the enclosing ul

Accordions with buttons

You can add small buttons to any accordion__toggle element by adding the class accordion__toggle--buttons. You should also wrap the text and button(s) inside the accordion__toggle with <span> tags to maintain the text underline on hover and maintain their alignment when one or more buttons are used.

If you would like the buttons to be on the right of the accordion__toggle simply add the class accordion__toggle--buttons-right.

Please make sure you prevent propagation of any click event on buttons used to prevent them triggering the show/hide of the accordion.

  • Libero nobis repellendus quaerat mollitia laboriosam sit consectetur nulla perferendis harum labore ad tenetur

Accessibility

To ensure accordions remain accessible to screen readers and alternative input devices please pay close attention to the markup examples and refer to the documentation for explanation.

Accordions within prose

Consectetur ut voluptatum dignissimos dignissimos illo omnis blanditiis sit sit qui. quisquam explicabo sint qui et tempore eum repudiandae placeat ut asperiores sunt quia nesciunt ipsa. molestiae excepturi quia suscipit voluptas nihil ea doloribus. accusamus ratione consequatur et id quidem et corporis doloribus architecto voluptate sunt nulla. ut adipisci perspiciatis beatae placeat ipsam doloribus aut at et ex. autem labore et blanditiis qui aut sed quasi consequatur est quo doloribus maiores quia. et recusandae voluptatem enim autem et est nesciunt fugit ad ea et quam Consequatur dolore possimus nihil tenetur enim illum dolorem aut ad consequatur. praesentium et vitae magni temporibus odit voluptatem quae et a. sit necessitatibus minus adipisci quos laudantium ullam officiis dolores qui suscipit ut molestiae in.

Non aliquid quidem corporis. quidem aut et quae nihil maiores unde aliquam eos magnam et velit eligendi exercitationem. et sunt deserunt voluptatum reiciendis qui officiis et nihil qui repellat saepe non ut. sed fugiat quam at asperiores voluptas ut dolore totam reprehenderit ut placeat. esse vero voluptate facilis ratione eum nemo pariatur debitis sint praesentium nihil similique omnis consequuntur. omnis accusantium omnis distinctio delectus quam et fugiat placeat soluta totam quaerat possimus possimus molestias. aperiam omnis voluptatem esse Rerum quia nihil atque amet ratione voluptatum incidunt qui labore ut et voluptas. dolores vel voluptas qui non sed libero numquam est perspiciatis ad. recusandae quae ut voluptatem molestiae placeat. id molestiae quia harum vero voluptates omnis. doloribus qui facilis voluptatem a deleniti laudantium animi et. necessitatibus voluptate consequatur molestiae eligendi est quia adipisci ullam.

Molestias quam rem vel beatae. veritatis aut molestiae qui omnis. eos est ut maiores consequatur qui quae saepe tenetur voluptatum quisquam Eius veniam laborum labore ab tempora animi unde sint. voluptas quis quasi repellat laudantium. et dicta eum deserunt cupiditate porro est et. et pariatur culpa nemo porro molestiae cupiditate. soluta rerum eligendi qui id laboriosam eligendi iusto reiciendis.

Nisi et reprehenderit ea et qui unde vitae ducimus beatae qui cum quasi alias. consectetur sed eum laudantium provident eligendi. aut natus officiis adipisci aspernatur eum cumque minus rerum laboriosam eveniet. culpa ut impedit quia. maiores adipisci vel commodi laboriosam explicabo Aut non ut distinctio provident inventore at accusantium qui quas quia sit rerum. non et accusamus modi sit in quia quae. nostrum dolorum aliquam et aperiam harum odit perspiciatis officiis et esse laudantium ipsum provident. ut odit quas deleniti sint nostrum rerum dolorem. sit molestiae voluptatem iste distinctio quo necessitatibus consequatur optio dolorem cupiditate consequuntur autem et magni. in tenetur accusamus tempore debitis fugiat aspernatur nostrum aliquam qui non iusto aut nobis. ea quisquam est eaque sint est expedita magni quae est et voluptatum.

Sit quo ea omnis cupiditate alias quas. qui consectetur earum aut consequatur provident. itaque pariatur soluta perspiciatis harum nisi quisquam et ducimus et pariatur cum et est accusamus Laudantium sapiente qui dolorem. explicabo tempore et dolore perferendis eligendi. qui adipisci aperiam autem qui dolores animi aut quidem non accusantium qui dolores iusto. est voluptatem earum corporis et quaerat. incidunt aut facilis eum et et quae vel praesentium cupiditate doloribus quos dolorem non.

Back to top