Remaining accessible with hidden elements

When hiding an element with display: none, it becomes inaccessible to screen readers and will not be read to the user. Sometimes that’s fine, but in other cases this will make the site hard to use for people with screen readers.

Using the Sass placeholder selector to reduce repetitive code in the output, an element can be hidden with an alternative method that remains accessible to screen readers.

%visuallyhidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

Usage

<button class="mobile-navigation-trigger">  
  <b class="visually-hidden">Open the navigation</b>
  <img src="img/mobile-navigation-icon.svg">
</button>

.visually-hidden {
  @extend %visuallyhidden;
}

More useful Sass mixins here.