Accessibility

Patterns designed to consistently enhance the accessibility of websites/apps.

Screen reader content

The ch-reader class visually hides content, but still allows it to be present for a screen reader. For example, you might add the word 'Close' to a close icon.

<button class="ch-btn">
  <span class="ch-reader">Screen reader only content</span>
  Button label
</button>

Skip to main content link

When keyboard-only users interact with your site they use the tab key to jump from link to link. If you have a lot of links at the top of your page in header navigation or in a menu, they must tab through those every time they come to a new page just to reach the main content.

Providing a skip to main content link allows them to easily bypass this.

<body>
  <!--
    Add the ch-skip link directly after the opening body tag
    Assign the href to anchor to the main content of the page
  -->
  <a class="ch-skip" href="#main">Skip to main content</a>

  <main id="main">...</main>
</body>