1

I'm using Semantic-UI framework and for the icons I have to use the i tag. Here is an example:

<i class="icon search"></i>

I want to make my code compliant to WCAG 2.0 (level AA) and I'm using AChecker validator. For every line that contains i tag I get the following error:

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

Success Criteria 1.4.4 Resize text (AA)

Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.

Since I can't replace it with em or strong because of the Semantic-UI components usage and because I'm not using i for italic, do you know how can I fix it or any work-around to get no errors by checker?

smartmouse
  • 13,912
  • 34
  • 100
  • 166
  • Possible duplicate of [How do I make Font Awesome WCAG 2.0 compatible?](http://stackoverflow.com/questions/23015537/how-do-i-make-font-awesome-wcag-2-0-compatible) – Shannon Young Jan 27 '17 at 10:53
  • It's not a duplicate. In that question the solution is to use `span` that works with Font Awesome. I'm not using FA, as I write in my question I'm using Semantic-UI. – smartmouse Jan 27 '17 at 11:20
  • how do i make this work in wordpress? – ps138 Jul 25 '21 at 18:19

1 Answers1

1

As you are tying yourself into 'Semantic-UI' as your framework of choice, as I see it you have two options:

  1. Change the source icons.css component and swap out i.icon references for span.icon then use a <span> element.
  2. Actually address the accessibility issue, instead of trying to work around it. Judging by the icon you are using <i class="icon search"></i> looks like users of assistive technologies would need an alternate description.

Font Awesome have some pretty good advice:

Icons with semantic or interactive purpose

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.).

http://fontawesome.io/accessibility/

Shannon Young
  • 1,536
  • 1
  • 17
  • 26
  • The option 2 doesn't work: achecker doens't validate it. Besides, FA accessibility seems not to be compliant with WGAG 2.0, since achecker keeps returning errors. – smartmouse Jan 27 '17 at 13:43
  • 1
    Well your issue is with the framework and its choice of icon font implementation. – Shannon Young Jan 27 '17 at 14:17