#Material ui accordion plus
These icons might be an arrow pointing down or to the right, a caret, a plus sign, or a chevron pointing down, among others. Icons, which typically appear to the left or right of the section titles, indicate there’s more content available if clicked. These are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking. HeadersĪccordion headers contain section titles. While the design of an accordion varies by site and purpose, its user interface is made up of three elements. If you don’t have the in-house support or budget required to meet accessibility standards, then it’s better to use plain text.įor an in-depth look at what an accordion is, when to use it, and the advantages and disadvantages it has, check out this video by Niki Tisza: When you don’t have the resources to make it accessible: Accordions must be accessible, which is an additional development effort.That way you won’t be forcing users to decide which headings to click on and to click on them one at a time, which can be cumbersome. When readers will need to click on the majority of accordion items: If users need to open the majority of accordion items, then it’s better to reveal all the content instead of hiding some.Let’s look at some reasons why you wouldn’t want to use an accordion.
When readers will be viewing your site from smaller screens: If you’re challenged with fitting a lot of content on a small screen like a mobile device, then an accordion can help give readers an overview of what the page is about and reduce how much they need to scroll.ĭespite its many benefits, an accordion is not always the best choice for your website design.FAQ pages often use an accordion because many readers are coming to find an answer to one or two questions only. When readers only need a few key pieces of information: If readers only need some information on a page, then an accordion can help them more easily and efficiently find the information they’re looking for.Let’s look at some use cases in which you should use an accordion. When to Use an AccordionĪn accordion can improve the user experience - if used for the right reason and the right content. Either way, they get to decide what their reading experience is. Or they may scroll past the menu altogether. In the example above, readers may only click on the first header to learn the dimensions and weight of the Yogaline Mat and skip the rest. This gives people control over what to read, and when, which can enhance their user experience. Here’s an example of an accordion menu used on a FAQ page of a website: It’s also ideal for mobile sites since it reduces how much a user has to scroll. This design pattern is ideal for breaking down longform or complex content into digestible chunks. When clicked on (or triggered by a keyboard interaction or screen reader), these headers will either reveal or hide associated content. In web design, an accordion is a type of menu that displays a list of headers stacked on top of one another.