Accordions and Tabs

Accordions and tabs can be beneficial if these best practices are followed.

Misusing the accordions/tabs snippet can make your website challenging to navigate. While shortening page content and hiding some content can make a page seem less daunting, they are not a one-size-fits-all solution to making your site user-friendly or easily found in search engines.

WHEN AND WHEN NOT TO USE ACCORDIONS

Best Practices

• Take note of heading structure on your page and set snippet Heading Level field properly. 
  • If you have a Heading 2 above your accordion/tab, your Heading Level should be H3. If you do not have a heading above your accordion/tab, Heading Level should be H2.
  • Continue proper heading structure within the snippet content section. If your Heading Level is H3, ensure headings within content are H4-H6.
• If you have limited content within each tab/accordion, use headings instead. Users prefer to scroll down well-organized web pages (that include headers) to find useful content. Forcing users to click into a snippet to find valuable content is not recommended.
• Accordions/tabs cannot be used within each other and will not publish.
• Use simple headings. Users scan website headings to find the content they are looking for. Search engines also use headings when ranking your pages. Using headings that include terms that your users are searching for can increase SEO performance.

Frequently Asked Questions Pages

Use the Omni Analytics to ensure that your Frequently Asked Questions pages are getting web traffic. In most cases, FAQ pages are not getting viewed and are hard for users to navigate. If this is the case, it is recommended to adjust page content to be more easily digestible to readers or remove FAQ pages from your website altogether. 

Follow FAQ page solutions below. Content shouldn't be duplicated on your site. If you have page content elsewhere on your site, use the FAQ page to link to existing information versus duplicating content.

FAQ Page Solution 1

Some FAQs are presented as more narrative text vs separate question/answer pairs. In these cases, observe the following practices:

• When taking content out of accordions, find opportunities for grouping like topics together under a single H2. Then break out sub-topics by utilizing H3 headings.
• Where necessary, drill content down even further by utilizing H4-H6 headings.

Solution 1 Example

FAQ Page Solution 2

FAQ pages with a limited number of questions with short answers should just be presented as questions as headers with exposed text answers, rather than in accordions.  

In these cases, use H2s for the questions and answers as paragraph text. If answers necessitate being broken out further, utilize H3-H6 headings.

SOLUTION 2 EXAMPLE

FAQ Page Solution 3

FAQ pages with a large number of question/answer pairs, with very long answers, or with other narrative text in addition to the FAQ content might be candidates to remain in accordions. In these cases:

• Consider grouping like questions together under one H2. 
• Maintain the established hierarchy of the accordion label being the H3, and separating sections within the accordion with H4 headings.
• Where possible, shorten accordion labels so they don’t overwhelm the user.
• Include an introductory sentence or statement to the FAQ’s. FAQ’s should not be alone on the page without any context. 
• Use Google Analytics event tracking to pull out any content that is heavily accessed. This should be on-page content - not in accordions. Reorder the FAQ’s to present the most frequently accessed information first.
  • Go to: Behavior > Events > Pages
  • Run  filter: Include Page Containing /human-resources/
  • Click Apply
  • Click on the page you want to go further on.
  • Click Accordions under Event Category
  • Click the page
  • You’ll get a list of accordion clicks.

SOLUTION 3 EXAMPLE