Techniques

Accessibly Hiding text

Elements are visually, but not not semantically, hidden using an .a11y-hidden class. This technique comes from the spec/tacular Sass include:

bower install spectacular --save-dev

@import spec/tacular;

.a11y-hidden {
 @extend %accessibly-hidden;
}

Which results in:

.a11y-hidden {
  position: absolute;
  height: 1px; width: 1px; 
  overflow: hidden;
  top:0;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Custom Styled <input type="checkbox">

Similarly to the Toggle Visibility section of the You Don't Need JavaScript for That post, native <input type="checkbox"> are used but cleverly hidden.

$topMost:99999;
input[type="checkbox"] {
  appearance:none;
  background:transparent;
  position:absolute;
  z-index:$topMost;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  cursor:pointer;
}

This makes the <input type="checkbox"> elements invisible but still clickable checkboxes that encompass their parent.

Each <input type="checkbox"> has an important sibling. A <div> that immediately precedes them to be selected using the adjacent + selector.

<input type="checkbox" ...>
<div></div>

We can make the div "checkbox" look however we want while being styled through a native <input type="checkbox">. This is nice because it allows for custom design control while preserving the inherent accessibility of native inputs.

input[type="checkbox"]:focus + div {
  background:darken(#F9FAFA,8%);
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}

input[type="checkbox"]:checked + div {
  background: #64D481;
  border-color: #404853;
}

input[type="checkbox"]:checked:focus + div {
  background: lighten(#64D481,9%);
  border-color:rgba(81, 203, 238, 1);
}