Invisibility

In some circumatances, you may need to hide stuff.

Visually hidden (screen reader only)

• visually-hidden (alias screen-reader-only)

The code CSS code for this utility class has been copied from Hide content (The A11y Project).

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

Keyboard users can also get to visually hidden elements when they tab through the webpage’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 screen-reader-only) can be used to hide a “skip link” such as the one at tabindex="1" on this webpage. Skip links can provide people who rely on assistive technologies with a means of skipping over your site’s main navigation (menubar or megamenu), if they are already familiar with it.

<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 four media query breakpoint widths in Codebase (xs, sm, md, and lg) 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’ll want to use md:hidden-below. At md (1024px, default) and above, the sidebar will be displayed.

✓ = displayed; ✗ = hidden