Invisible Yet Focusable

These two mixins are one of my favorites. Flexible and useful for creating accessible interfaces.

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
@mixin screen-reader-only() {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@mixin undo-screen-reader-only($position: unset) {
  position: $position;
  opacity: 1;
  pointer-events: auto;
}

They are quite handy when hiding something visually.

By using mixins rather than classes we can keep working in pure CSS when showing/hiding the elements instead of reaching for JS to toggle classes.

Another benefit these mixins have (over display:none and visibility:hidden) is that the element can still receive focus, and when it does, we can undo the mixin to show the element. Again, no JS needed. In the cards below, try pressing Shift+Tab to jump to the play button on the previous card.