Purpose: Collect and identify icons and icon fonts and define their proper usage.
Category: Icons, iconfonts
- UXI JIRA Created (insert link above)
- Component Specification draft complete
- UXI code review complete
- Reconcile with UIM and KRAD existing designs
- Conduct user testing (if needed)
- Routed for review with Kuali UX Working Group and UX/KRAD Working Group
- Reviewed with KAI
- Rice JIRA Created (in KULRICE Project)
- KRAD Implementation complete
- Component released (insert rice release version below)
Icons can help quickly identify actions. They're a common visual language which can, in most cases, help bridge language gaps. Icon fonts are essentially that - fonts that are icons, meant to replace graphic icons. Icon fonts are scalable, easier to manage, and have more uses than standard graphic images. The scaling comes in handy for the varying resolutions that exist.
- Icons by themselves
- Icons with accompanying label text
Since we're using icon fonts which can't be included in this Wiki, please see the Design Guide for an up-to-date list of the icons.
View a full list on the Kuali Design Guide.
Icons by themselves
<a href="#" class="icon icon-help"><span class="sr-only">Help</span></a>
Note that we're including the label, but we're hiding it off-screen. This is so the links meaning can still be understood (as icons won't be announced typically).
Icons with accompanying label text
<a href="#" class="icon icon-help">Help</span></a>
Note that this setup is the same as the above except we're not hiding the label. It will read the same but the label will appear next to the icon.
Since 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.
As always, use valid, semantic, proper HTML markup to optimize accessibility.
W3 HTML Validator
Icons that are purely decoration should never receive focus. Contrastingly, icons that serve a function should be focusable using the
Tab key. They should visually appear as if they are focused.
Research and Discussion
None at this time.