Accessibility

Decorative icons#

Icons are hidden from screen readers by default (aria-hidden), since most sit beside a text label that already says it all.

Icons that carry meaning#

An icon that stands alone, such as an icon-only button, needs a name: put aria-label on the button, or give the icon a title (it is then announced as an image).

<button className="ki-trigger" aria-label="Delete">
  <Trash />
</button>

Motion#

• Motion plays on keyboard focus as well as on pointing, so keyboard users see the same thing.
• Reduced motion turns every icon’s motion off.
• Loops pause while the page is hidden.