Comment rendre tag i WCAG 2.0 compatible?

Question

J'utilise le framework Semantic-UI et pour les icônes, je dois utiliser la balise i. Voici un exemple:

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

Je veux faire mon code conforme à WCAG 2.0 (niveau AA) et j'utilise AChecker validator. Pour chaque ligne qui contient i tag je reçois l'erreur suivante:

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. 

Puisque je ne peux pas le remplacer par em ou strong en raison des composants sémantiques-UI utilisation et parce que je ne suis pas en utilisant i pour italic, savez-vous comment puis-je résoudre ce problème ou toute autre solution pour éviter les erreurs par vérificateur?

Answer 1

Comme vous vous liez en « sémantique-UI » comme cadre de choix, comme je le vois, vous avez deux options:

1. changer la source icons.css composants et échanger sur i.icon références pour span.icon puis utilisez un élément <span>.
2. Corrigez le problème d'accessibilité au lieu d'essayer de contourner le problème. A en juger par l'icône que vous utilisez <i class="icon search"></i> ressemble à des utilisateurs de technologies d'assistance auraient besoin d'une autre description.

polices Impressionnant ont une assez bons conseils: [? Comment puis-je faire polices Impressionnant WCAG 2.0 compatible]

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/