Font Awesome and Moodle, Part 13 – accessibility

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 !?

Latest posts by Stuart Mealor (see all)

Stuart Mealor

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development. His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Add a reply or comment...

%d bloggers like this: