Layout

Invisibility

In some circumatances, you may need to hide stuff.

visually-hidden (alias sr-only)

This CSS visually removes an element from the page, but a screen reader will still percieve it and include it in the spoken read-through of the page content.

Keyboard users can also get to visually hidden elements when they tab through the web page’s accessibility tree (tab index). When someone tabs onto a visually hidden element, it becomes visible on the page.

Therefore, for example, visually-hidden (or sr-only) can be used to hide a “skip link” such as the one on this page. Skip links can provide people who rely on assistive technologies with a means of skipping over the site’s main navigation if they are already familiar with it. We do also extend into a custom skip-link component.

<a
  id="skip-link"
  href="#page-main-content"
  tabindex="1"
  class="visually-hidden"
>
  Skip to main content
</a>

<!-- Website main navigation  would go here -->
...

<div id="page-main-content">
  ...
</div>

Responsive hiding

The media query breakpoint widths in Carbon (xxs, xs, sm, md, lg, xl and xxl) have both hidden-below and hidden (i.e. hidden-above) utility classes.

The *:hidden-below classes hide stuff on viewport widths from zero up to (max-width: variable - 1px).

So, for example, if you want to hide a sidebar on an iPad in portrait orientation but not on an iPad in landscape orientation, then you can use md:hidden-below. At md (1024px, default) and above, the sidebar will be displayed.

Visually hidden (screen reader only)

Responsive hiding