title: How do I make tag i WCAG 2.0 compatible?
body: <p>I'm using Semantic-UI framework and for the icons I have to use the <code>i</code> tag. Here is an example:</p>
  
  <pre><code>&lt;i class="icon search"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>I want to make my code compliant to WCAG 2.0 (level AA) and I'm using <a href="http://achecker.ca/checker/index.php" rel="nofollow noreferrer">AChecker validator</a>. For every line that contains <code>i</code> tag I get the following error:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>Since I can't replace it with <code>em</code> or <code>strong</code> because of the Semantic-UI components usage and because I'm not using <code>i</code> for <em>italic</em>, do you know how can I fix it or any work-around to get no errors by checker?</p>