0

So I'm working on updating the WCAG 2.0 accessibility of a site that uses Font Awesome icons. The issue is that the guidelines state that italics shouldn't be used. I know that using FA isn't actually italics, but when you do a code check, it comes up with a warning and I'm trying to limit any warnings, even if they are not a real issue. Does anyone have a good workaround for this?

Here's what the documentation says about italics: https://achecker.ca/checker/suggestion.php?id=117

Aaron
  • 237
  • 1
  • 7

2 Answers2

0

Use tag instead. Both the and elements are widely used for icons. You can read more in here: Should I use <i> tag for icons instead of <span>?

Philip Rabbett
  • 1
0

I don't believe that there's anything in WCAG 2.0 Guideline 1.4 that actually prohibits the usage of the <i> element.

A more relevant consideration would be to ask whether non-sighted users will understand the intent of your font-awesome glyphs. Just because something is compliant doesn't mean that it's actually useful to humans.

I recommend reviewing the Font Awesome Techniques for Accessibility, since it doesn't look like you're currently implementing them.

The two accessibility arguments for not using the <i> element are:

  1. Screen readers may not announce the change from regular to italicized text, since <i> is a presentational element, rather than a semantic element like <em>
  2. Large blocks of italicized text may be more difficult to read for persons with dyslexia

Since neither of these really apply to your situation, I would ignore this error.

Josh
  • 3,872
  • 1
  • 12
  • 13