Avoid images of text when possible
Applicable Role(s): Content Creator, Developer
Overview
Images of text have numerous accessibility concerns. Users with low vision may need to increase the font size, which doesn't work well with images and cause text to look pixelated. Some users may customize the display of web content to make it accessible, and images of text can't be customized to their preference.
Best Practices
- Real text should be used whenever possible. Real text is more compatible on mobile devices, with screen readers and other text to speech software than images of text.
- Use CSS or other styling technologies rather than relying on an image to achieve a certain visual appearance.
Pattern Examples
Instead of:
Code
<p><img alt="Make a Difference, Support CSE"
src="/files/2019-06/makedonation.jpg" /></p>
Rendered image
Do this:
Code
<div class="block wwu-beyond-basics-block
dark-blue-bg text-align-center
sans-serif-headings uppercase">
<h3>Make a Difference</h3>
<p>Support CSE</p>
<p>
<a class="cta square light-green"
href="#">
Donate Now (demo link only)
</a>
</p>
</div>
Rendered block
Make a Difference
What's the Difference?
The colors of the background, text, and link are managed through CSS in the second example, which means the text is real text instead of an image. This method has many benefits:
- Your content will respond better to users increasing the font size in their browser or zooming in on the content, without losing readability.
- It will render as real text to screen readers, digital braille displays, and speech recognition software, among other assistive technology.
- The font spacing, line height, font style, etc., can be customized by the user for their needs.
- It will be easier for search engines to discover your content, improving your SEO.
- Your content will be easier for the browser to load on poor cellular or WiFi networks. Images contain a lot more data than text, and can make a page slower to load.