Tabs and accordions are headed containers that you can use to present content. They allow you to split up and organize long pages into more readable segments. You should use containers when you have lots of content that can be easily grouped or when you have information that is supplementary to the main purpose of the content.
For example:
- Using tabs to display information about different services within the same topic (i.e., how to report a missed bin collection and how to request a new bin).
- Using an accordion to display lengthy policies, rules, and regulations for your council meetings. This ensures that the information is available without taking up too much screen space when the page is loaded.
- Using accordions to build a frequently asked questions section for your council services.
- Using accordions to list what should go into each bin in your waste services.
The benefit of using containers for this information is that site visitors can quickly view the topics of the page and only need to expand the information they need.
There are built-in tabs for OC Service pages to display the methods of completing the service, as well as various content types, including OC Service and OC Department pages, with accordion panels in the supporting information.
When used correctly, tabs and accordions can offer significant benefits to site visitors. We’ve put together the following best practice tips for well-designed container content:
- Putting content in a tab or accordion is not an excuse to include unnecessary content. Container content should consist of brief text, bullet or numbered lists, images, or a call-to-action button link if you need to link to a page with more information. If your tabs or accordions extend far down the page, it may be a sign that the container should be its own page, or the content should be an OC General page with sections.
- Keep your containers to a maximum of 3-4 tabs and 5-6 accordions per page. If you find yourself going over this limit, it’s a sign to create another page. Additionally, tab titles shouldn’t be more than two words, and if tabs extend beyond the screen space, as on a mobile device, they will condense into a vertical stack.
- Having too many accordions or tabs on one page can affect the searchability of that page. If one page contains containers about different topics, users might struggle to find relevant content through search. This can also affect Google Analytics statistics, as you cannot tell if a user is viewing the page for topic A or topic B.
- When creating tabs and accordions, you can use various tools to insert interactive content. However, it is best to use only static content, such as text and images, as nesting interactive elements can be visually confusing and interfere with the container’s HTML.
- Choose your container headings wisely. Site visitors should know exactly what information they can find in a tab or accordion, particularly on pages often accessed through a mobile device. Opening accordions and switching between tabs can be disorientating on mobiles, so you don’t want users to go through unnecessary frustration trying to find the content they need.