Use Text Instead of Images of Text
- Customizable: The image of text can be visually customized to the user’s requirements.
- Essential: A particular presentation of text is essential to the information being conveyed (e.g., logotypes).
Why It Matters
Real text is flexible; users can resize it without loss of quality, change colors, fonts, and spacing using browser settings or assistive technology. Images of text are typically fixed, pixelate when enlarged, and cannot be easily customized, making them difficult for users with low vision or reading disabilities (like dyslexia) to read. Screen readers rely on alt text for images of text, which might be missing or inadequate.
Fixing the Issue
Use actual HTML text styled with CSS whenever possible. Avoid using images solely to display text with specific styling (like unique fonts, shadows, or gradients) – achieve these effects with CSS instead. If an image of text must be used, ensure it falls under the ‘essential’ exception (like a brand logo) or the ‘customizable’ exception (which is rare in practice on the web). Always provide accurate alt text for essential images of text.
