Microcopy should be live text

When microcopy is embedded in an image (rather than as separate, selectable text on the page), screen readers can’t access it. This is a common issue with text on buttons, banners, or graphics, where visually crucial information is effectively hidden from users who rely on screen readers.

For accessibility, it’s best to use live text — text that’s separate from images and can be read by screen readers and adjusted for user preferences (like zoom or text-to-speech). If you must include text within an image, ensure that the same information is added in the image's alt text. For example, if the image shows a card with the text “Track your daily habits to build consistency” alongside someone working out, the alt text could be:

"Card with the text: 'Track your daily habits to build consistency,' featuring an illustration of a person lifting weights."