Tabs
UCS webmasters occasionally use the Tabs component to present content in easily digestible chunks.
AEM editors can update WYSIWYGs and other components contained within a tab.
Uses
Webmasters use tabs to present information in a way that reduces cognitive load. They only use tabs when the information can be divided into 2-3 chunks that don't need to be viewed simultaneously.
For example, Concordia's Centraide campaign website uses tabs to show employees who wish to make a donation how much pay will be deducted per pay, per day or per year. You can quickly scan the tabs, decide which one is most relevant to you, and click to view that content. Try it out yourself:
| Per pay | After tax |
|---|---|
| $8 | $5.35 |
| $10 | $6.38 |
| $12 | $7.42 |
| $20 | $11.56 |
| $30 | $16.74 |
| Leadership donation | After tax (leadership) |
| $48 | $26.06 |
| Per day | After tax |
|---|---|
| $0.57 | $0.38 |
| $0.71 | $0.45 |
| $0.85 | $0.53 |
| $1.42 | $0.82 |
| $2.14 | $1.19 |
| Leadership donation | After tax (leadership) |
| $3.42 | $1.86 |
| Per year | After tax |
|---|---|
| $208 | $139.08 |
| $260 | $166.01 |
| $312 | $192.93 |
| $520 | $300.64 |
| $780 | $435.26 |
| Leadership donation | After tax (leadership) |
| $1,248 | $677.59 |
Notice that:
- The tabs help users drill down to the information they're looking for.
- The label for the active tab is burgundy, while the labels for the inactive tabs are grey. This sets the active tab apart visually.
Each tab contains at least one AEM component, which contains the actual content. In the Centraide example, each tab contains a short table. This creates a consistent experience across the tabs, saving visitors time and making it easier for them to digest the content.
Tabs only work on desktop display. On mobile display, tabs are automatically converted to accordions.
Best practices
Adding a tabs component
Tabs only work well in select situations. If you think your website would benefit from tabs components, please contact your Communications Advisor. They'll help you determine whether tabs are the best solution for your website.
Editing content within an existing tab
When you open the Tabs component for editing, the tab labels will display horizontally. The tab content will display vertically, within yellow rectangles. For example:
Within the relevant yellow rectangle, double click on the content you'd like to edit, then follow the component best practices.
Accessibility
- In the Tab component settings, ensure each Label is clear and concise, ideally 1-2 words
- When you're editing a WYSIWYG contained within a tab, ensure the text has proper headings and short paragraphs
- When you're editing a table contained within a tab, ensure it has proper headings
- If you include an image within a tab, provide clear alt text
