Potenciální problémy icon fontů
Co
Použitím icon fontu mohou být jeho ikonky přepsány některými uživateli.
Proč je to problém
Narozdíl od SVG, ikonky icon fontů jsou namapovány na unicode body (unicode points) a interpretovány jako text. To může vést k problémům s přístupností.
Aby nedošlo k přepsání zavedených, smysluplných znaků a symbolů, většina sad icon fontů mapuje své ikonky do tzv. unicode Private Use Areas. Problém nastává, když si uživatelé nastaví vlastní fonty: ikonky jsou nahrazeny symboly "chybějícího znaku" (viz Zdroje).
Např. dyslektici si občas nastavují své vlastní fonty pro zlepšení čitelnosti.
Doporučení
Implementace ikonografie jako inline SVG.
Příklad řešení:
<button>
<svg class="icon icon--text" focusable="false" aria-hidden="true">
<use xlink:href="static/images/icons-all.svg#icon-download"></use>
</svg>
<span>Smazat</span>
</button>
Zdroje
Spec
Zařízení: MacBook
Prohlížeč: Safari + Chrome