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?
As you are tying yourself into 'Semantic-UI' as your framework of choice, as I see it you have two options:
icons.css component and swap out i.icon
references for span.icon then use a <span> element.<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.).