In part thirteen of this series we consider Font Awesome accessibility.
(Link to Part 1 of this series – basics)
(Link to Part 2 of this series – icons)
(Link to Part 3 of this series – colour)
(Link to Part 4 of this series – size)
(Link to Part 5 of this series – colour & size combinations)
(Link to Part 6 of this series – rotating)
(Link to Part 7 of this series – fixed width icons)
(Link to Part 8 of this series – list icons)
(Link to Part 9 of this series – pulling icons)
(Link to part 10 of this series – animating icons)
(Link to part 11 of this series – stacking)
(Link to part 12 of this series – stack and colour)
Accessibility is something that should always be in our minds as e-learning professionals.
With our thoughts on icon accessibility in mind, if an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating the Moodle site aurally.
Alternatively, if an icon conveys meaning in your content or navigation, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
Here’s a simple example:
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i> <span class="sr-only">Refreshing...</span>
Notice the aria-hidden=”true” statement?
That’s all that is needed to ensure that screen readers skip this, and do not announce it. Instead, the <span class=”sr-only”>Refreshing…</span> statement instructs … you guessed it … screen-readers to say “Refreshing”.
Another example might be:
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i> <span class="sr-only">Saving now, please wait a moment.</span>
Making your Font Awesome content highly accessible in this way doesn’t take too much effort, and can really help some people … so why not !?