<i> tags have exactly the same effect in most
web browsers, but there is a fundamental difference between them:
<em> have a semantic meaning
<i> only convey styling information like CSS.
<b> can have simply no effect on a some devices with limited display or when a screen reader software is used by a blind
- Display the text bold in normal browsers
- Speak with lower tone when using a screen reader such as Jaws
- in order to convey semantics, the
<i> tags shall never be used,
- in order to convey styling information, the
<i> should be avoided and CSS should be used instead.
Noncompliant Code Example
<i>car</i> <!-- Noncompliant -->
<b>train</b> <!-- Noncompliant -->
This rule is relaxed in case of icon
<i class="..." aria-hidden="true" /> <!-- Compliant icon fonts usage -->