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>