Dynamic content components

General

The Libraries design system does not support dynamic content components. Hiding content with non-semantic HTML that requires inconsistently-supported ARIA is contradictory to the design system’s principles.

This decision will be continually revisited as more content is introduced to the Libraries’ web assets and as the web evolves and matures.

• Dynamic content components are unnecessarily difficult to navigate without a mouse. Often, they require special key commands to access, which may or may not work per people’s expectations. Links, however, have predictable behavior.
• Searching within the page will not include hidden content, which is misleading. If folks use a tool such as ctrl + f on the page, the in-page search function will not return any content that isn’t visually displayed.
• Dynamic content components require javascript to function, which also means if the javascript fails to load, the majority of content may be inaccessible. Creating the components as progressive enhancement may resolve this. A better experience is to bypass the potential failures of a javascript-dependent component and create well-sectioned succinct and accessible content.
• Simple elegant code that supports a sustainable web environment is a core principle of the design system. Non-semantic javascript-driven components contradict these principles.

Tabs

The Libraries design system does not support tabs.

Links do not fail. Tabs do.

Tabs also create an undesirable responsive layout. When the content within the tabs is longer than the space, often the tabs wrap onto multiple lines or labels are truncated. This becomes more pronounced on small screens, where the tabs may fill the visible space and a person may not notice the content updating below the tab interface.

Similar to the previous point, tabs create awkward limitations to tabs and tab labels.

Accordions

The Libraries design system does not support accordions.

The <details> element may be considered once browsers more fully support it. The <details> element generates a simple no-javascript widget to show and hide element contents. Global support for <details> is 97% as of December 2021, so consider use with caution.

Though <details> is a native element, it still hides content that cannot easily be searched for on the page. For this reason, support continues to be minimal and not offered via the design system.

Carousels

Carousels are sometimes used to present a lot of information in one place. However, for many years web industry experts have found them to be ineffective and challenging for people to use.

In Auto-forwarding carousels and accordions annoy users and reduce visibility, the Nielsen Normal Group's studies found carousel content is ignored. Auto moving content also causes challenges for people with attention disabilities such as ADHD. Moving content may make a page unusable. Carousels encourage the use of images, which also create a degraded experience for people who cannot visually access the graphics. Other usability oriented issues identified by Nielsen Norman regarding moving carousels:

• Moving UI elements usually reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it's taken away.
• Low-literacy users often don't have enough time to read the information before it's removed.
• International users also read more slowly if your site is not in their native language, and thus they won't be able to understand a panel if it's displayed only briefly.
• Single-item visibility is reduced by having to take turns being on display. The probability that users will spot the item they want is drastically reduced when only one thing is displayed at any given time; in the Siemens example, the discount deal is visible only 20% of the time.
• It's just plain annoying for users to lose control of the user interface when things move around of their own accord.
• Most important, because it moves, users automatically assume that it might be an advertisement, which makes them more likely to ignore it.

Jared Smith, author of the Do not use carousels, said this in an interview regarding the impacts on accessibility:

Beyond usability frustrations caused by carousels for all users, there are several distinct issues for users with disabilities. For auto-playing carousels, having content automatically disappear can cause loss of focus for screen reader and keyboard users that are reading or have keyboard focus on that content when it animates away. This can force the user back to the top of the page.

There also is no easy way to semantically or programmatically associate the controls for a carousel—often just numbers or dots—with the carousel content. This is especially difficult for users that cannot see the interface. The cognitive load and distraction caused by carousels can be especially difficult for some users with cognitive and learning disabilities.

Carousels pose more usability and accessibility concerns than are listed here.

The Libraries design system does not support carousels.

Tooltips

The Libraries design system does not support tooltips.

Tooltips hide potentially critical information that people may not be able to access. They may also provide on demand clarification for acronyms located farther down the page, so this is a pattern that may be available once an accessible javascript free solution is found.