Accessibility Tips & Tricks

KA Lite A11y Style Guide - Work in Progress

Font based icon sets

Irregardless of icon set you decide to use (Font Awesome, Glyphicons, etc...), here is something to keep in mind to ensure their accessibility. To render icon element invisible to screen readers you need to add aria-hidden="true" attribute, and then add a second span with text only for screen readers - class="sr-only":

<span class="fa fa-home" aria-hidden="true"></span>
<span class="sr-only">Home</span>

Use the same technique inside handlebars:

<span class="icon-{{ kind }}" aria-hidden="true"></span>
<span class="sr-only">{{ kind }}</span>

For detailed explanation, see the post by @hanshillen here: Making font based icon sets accessible

---

DO NOT use semantic tags to assign style to font based icons

Define additional class to style the icons according to your needs.

NO

<h1 class="glyphicon ...></h1>

YES

<span class="icon-h1 glyphicon ...></span>

CSS
.icon-h1 {
    (define your style here)
}

---

Elements with presentational content

Decorative images and graphics that do not have any functional, interactive, or structural relevance, should include role=”presentation”, preferably together with aria-hidden="true". Example:

<span class="glyphicon glyphicon-play-circle" aria-hidden="true" role="presentation"></span>

For detailed explanation with test cases, see this resource: HTML5 Accessibility: aria-hidden and role=”presentation”.