Icon Functional Accessibility

Accessibility Requirements

Requirements Specific to Functional Icons

Regardless of whether the icon is a glyph font or an image, all icons presented in the interface require some level of intervention to allow the application to meet accessibility requirements.

IF the icon is presented as a glyph font with no associated text-­based label:

• The actual icon text character must be hidden to screen readers.
• A text equivalent specific to the icon’s contextual meaning must be supplied in a neighboring span tag using the “sr­-only” CSS class.

From the Calendar Icon Example Above

<a href="#">
   <span class="icon-nav">
      <span class="icon-calendar" aria-hidden="true"></span>
   <span class="sr-only">Calendar</span> </span>
</a>

In the above example:

• The “icon-­nav” span creates the clickable item.
• The “icon­-calendar” span supplies the visually­ based icon.
• The “icon­-calendar” span also hides the glyph character from screen readers using the aria­-hidden attribute.
• The “sr­-only” span supplies the screen reader with the appropriate text to read aloud.

The “sr-­only” class at it appears in CSS:

.sr­only {
    position: absolute; 
    width: 1px;
    height: 1px; 
    margin: ­1px; 
    padding: 0; 
    overflow: hidden;
    clip: rect(0, 0, 0, 0); 
    border: 0;
    }

If the icon is presented as a glyph font WITH associated linked text­:

• The actual icon text character and its associated link must be hidden to screen readers.
• A text equivalent specific to its contextual meaning should not be supplied.

<div class="icon-array">
  <span class="icon-nav">
    <span class="icon-selected">
      <a href="#" aria-hidden="true">
        <span class="icon-info" aria-hidden="true"></span>
      </a>
      <a href="#"> 
        <span class="nav">Task Status</span>
      </a>
    </span>
  </span>
  <span class="icon-nav">
    <a href="#" aria-hidden="true">
      <span class="icon-calendar" aria-hidden="true"></span>
    </a>
    <a href="#">
      <span class="nav">Calendar</span>
    </a>
  </span>
  <span class="icon-nav">
    <a href="#" aria-hidden="true">
      <span class="icon-attach" aria-hidden="true"></span>
    </a>
    <a href="#">
      <span class="nav">Attachments</span>
    </a>
  </span>
  <span class="icon-nav">
    <a href="#" aria-hidden="true">
      <span class="icon-back-in-time" aria-hidden="true"></span>
    </a>
    <a href="#">
      <span class="nav">History</span>
    </a>
  </span>
  <span class="icon-nav">
    <a href="#" aria-hidden="true">
      <span class="icon-comment" aria-hidden="true"></span>
    </a>
    <a href="#">
      <span class="nav">Comments</span>
    </a>
  </span>
</div>

In the above example:

• The “a” tag for icon and the “a” tag for the associated text make duplicate clickable objects.
• The “a” tag for the icon and the icon itself are hidden from screen readers using the aria-­hidden attribute while for sighted users, the icon is still clickable.

If the icon is presented as a glyph font IN a button with text:

• The actually icon text character must be hidden to screen readers.
• A text equivalent specific to its contextual meaning should not be supplied.

From the Wizard Button Example Above

<button class="btnDefault-left">
   <span class="icon-angle-left" aria-hidden="true"></span> 
   <span class="prev-next-text">Previous</span>
</button>

In the above example:

• The “button” tag creates the clickable object.
• The “icon-­angle-­left” span supplies the visually­-based icon.
• The “icon­-angle­-left” span also hides the glyph character from screen readers using the aria-­hidden attribute.
• The “prev-­next­-text” span presents the the text in the button that is also read aloud by the screen reader.

IF the icon is presented as an image with no associated text­-based label:

• The linked image must include the “alt” attribute with the text equivalent specific to its contextual meaning.

From the W3C Example Above

<a href="http://www.w3.org/">
   <img src="http://www.w3.org/WAI/tutorials/img/w3c-796023c4.png" alt="W3C home">
</a>

In the above example:

• The “a” tag surrounding the image tag creates the clickable object.
• The “alt” attribute in the image tag supplies the alternate text that is read aloud by the screen reader.