Accessibility

Arrows are widely used to point or indicate direction or to represent progress of order. Using correct icon consistently across all SUSE products requires a well-defined set of rules.


General

Icons can have a decorative, meaningful, or actionable functionality that will help add visual feedback to a section or an element.

Decorative icons

Decorative icons do not represent important content, they are used in layouts or for non-informative purposes and do not appear within a link.

Decorative icons
How to use this element

Example
Code

Meaningful icons

Icons with a purpose such as indicating a state/status of a service, application, etc., must provide a clear description for screen readers, independently from the ligature name proximity to its meaning.

For example, using EOS icons, the ligature "open_in_new" will render the arrow icon and the screen reader will read "open_in_new", however:

  • Relying on the ligature removes the option of adding the translation of the action's description.
  • While "open in new" may sound sufficient to users not visually impaired, consider that users relying on assistive technology require more information. Using the 'sr-only' class with a description such as "open the website in a new tab" is more meaningful.
Meaningful icons
How to use this element

Example
Code

Meaningful icons example

This is an example where meaningful icons are used in a table to indicate the status of a product.

Product status
StatusCompany
Status: successSUSE Product Design System
Status: errorEOS Design system

Actionable icons

Actionable icons are found inside a button element and therefore the accessibility rules of buttons takes precedence. To find examples and guidelines about icons in buttons, check the buttons accessibility page.

Actionable icons
How to use this element

Example
Code