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.
Icons can have a decorative, meaningful, or actionable functionality that will help add visual feedback to a section or an element.
Decorative icons do not represent important content, they are used in layouts or for non-informative purposes and do not appear within a link.
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 example
This is an example where meaningful icons are used in a table to indicate the status of a product.
|check_circleStatus: success||SUSE Product Design System|
|cancelStatus: error||EOS Design system|
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.