Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Deck of Cards
idcomponent_details
Card
idusage
defaulttrue
labelUsage

Usage

Icons by themselves

The following are some examples of icons being used by themselves:

Icons with accompanying label text

The following are some examples of icons accompanied by their label:

Quick summary of features:

  • Icon fonts allow flexibility and scalability in color, style, and size. When a larger icon is needed, a new image doesn't need to be created.
  • Icon fonts can take the same CSS properties as a link, a button, or any other stylable element.

When to use this component:

  • Icon fonts should be used any time there's need for an icon. They are to replace all image icons in all Kuali application interfaces.
Card
idicon-font
labelIcon font

Icon font

Global icons

(Icon fonts chosen for the main set go here)

Kuali Coeus

asdf

COI

asdf

KS

asdf

KFS

asdf

View a full list on the Kuali Design Guide.

Card
iddemos
labelDemos

Demos

Icons by themselves

Code Block
<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

Code Block
<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.

Card
idaccessibility
labelAccessibility Considerations
nextAfter0
Section

Accessibility Considerations

asdf

  • asdf

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.

Accessibility Resources:

As always, use valid, semantic, proper HTML markup to optimize accessibility and usability of modals.

W3 HTML Validator
WebAim WAVE 

Card
idkeyboard-shortcuts
labelKeyboard Shortcuts

Keyboard Shortcuts

Since navigation is a primary rule when using anything on the Web, keyboard functionality should be maintained. Using proper, semantic code will help with this.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.

Card
idcomponent_discussion
titleResearch and Discussion
labelResearch & Discussion

Research and Discussion

None at this time.