Accessibility ConsiderationsSince icon fonts themselves aren't announced to screen readers (especially if using the PUA space), it's important to always include the accompanying label text, even if it's hidden off-screen. In cases where the icon text is itself converted into the icon font (some libraries do this), you'll want to be careful the label text isn't announced twice. - Always include the icon label, even if it's hidden off-screen using
.sr-only , except when... - Your method converts the label into the icon font, don't include the accompanying label so the label isn't announced twice.
- Make sure to always use the PUA space so the entities don't conflict with common web entities.
- Icons that are purely visual/decoration should not be announced as they'd be a distraction. Only functional/actionable icon fonts should be focusable.
Accessibility Resources:As always, use valid, semantic, proper HTML markup to optimize accessibility. W3 HTML Validator WebAim WAVE |