Make Font Awesome icons more accessible
Icon fonts aren't accessible by default as, unlike images, they don't have an alt description.
Updating this issue following feedback from @mthompson in the accessibility channel.
We started looking at Font Awesome's recommendation to distinguish between icons that are 'decorative', ie not useful and screen readers can ignore, hidden with aria-hidden="true"
; vs 'semantic', this is meaningful and important, e.g. a bookmark icon.
However, @mthompson said "icons are not really decorative elements (which are commonly excluded). They are functional... Even with decorative it requires a good understanding of what needs to be included and what should be hidden, depending on context and purpose of the decorations. A good rule of thumb is to question why a particular graphic is there and would hiding it be discriminatory or helpful."
I turned then to the WCAG guidelines on icons (should have started there) and they don't recommend using aria-hidden="true"
. They instead suggest role="img"
with aria-label
, e.g. <span class="icon icon-email" role="img" aria-label="Email"></span>
.
This isn't what Civi docs or help icon classes do. So this issue has three steps:
-
update the docs, to suggest best practice for icons: https://docs.civicrm.org/dev/en/latest/framework/ui/#icons -
update the icon helper functions that auto-generate icon markup -
bulk update icons in the Civi UI. It may be that the font-awesome name is helpful in most instances so this could be done by script… e.g. turning <i class="crm-i fa-birthday-cake" aria-hidden="true"></i>
into<span class="crm-i fa-birthday-cake" role="img" aria-label="birthday cake"></span>
(emphasis isn't supported for aria-label).