The Markup & CSS

Icons With text

The icons that are tightly-coupled with text (example View Tree from the image below) are mostly supplementary, and accessibility concerns are low since we're offering them the full text on the page.

Markup

<h3>
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h3>

CSS

 /* ****************************************************
 *  Icons with Text
 ******************************************************/ 
[data-icon]:before {
  font-family: 'genicons'; 
  content: attr(data-icon);
  speak: none;
}

.icon-font{
  font-family: 'genicons';
}

Standalone Icons

The icons that are standalone (example the drop-down arrow on each node in the image below) have more accessibility concerns, so we'll address that with some CSS which will allow the screen-readers to read the text.

Markup

<a href="#" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

CSS

/* ***********************************************************************
 *  Icons without Text (special markup for screen-readers)
 *************************************************************************/ 

.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}