CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Accessibility

The 📁 base/_accessibility.scss file contains utility classes and mixins that can help you make your content more accessible.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

Classes #

Class Description
.sr-only hide content to all users, except those visiting your website using a screen reader

A good example of this class in use is the counter component, where we hide the "Notifications" label for all users (we rely on a visual approach so that it's clear the element represents a notification), but we make this content available to assistive technologies:

<span class="counter">8 <i class="sr-only">Notifications</i></span>

Mixins #

Mixin Description
srHide hide content to all users, except those visiting your website using a screen reader
srShow reveal content that was visually hidden

Here's an example of how to use those mixins to change the visibility of an element:

.component span {
  @include srHide; // visually hide the span element - it is still accessible to SR
}

.component--is-visible span {
  @include srShow; // visually reveal the span element
}

Project duplicated.