Accessibility

• Classes
• Mixins

Accessibility helpers and mixins in CodyFrame.

Classes #

A good example of the .sr-only 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 #

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 screen readers
}

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