Accessibility

Hidden by default

Screen readers skip Mochi Icons unless you say otherwise. Each icon gets aria-hidden="true" on its own.

This is right most of the time, because an icon usually sits next to words that already say the same thing.

<button type="button">
  <CameraIcon />
  Take photo
</button>

Buttons with only an icon

If a button has no text, a screen reader has nothing to read. Give the button a name with aria-label. Leave the icon hidden.

import { CrossIcon } from "mochi-icons/CrossIcon";

<button type="button" aria-label="Close">
  <CrossIcon />
</button>

Icons that mean something on their own

Sometimes the icon is the only way to tell what something means, like a status. Then give the icon itself a name. Adding aria-label makes it visible to screen readers. Add role="img" too, so every screen reader reads it as an image.

<WifiIcon role="img" aria-label="Connected to Wi-Fi" />

A few more tips

• Make buttons big enough to tap. Aim for at least 44 by 44 pixels. Make the button bigger, not the icon.
• Don't use colour alone to show meaning. A red icon and a green icon look the same to many people. Add text or a different icon.
• Write the label for people. Say what the button does ("Close"), not what the picture is ("Cross").