Avoid images of text when possible
Applicable Role(s): Content Creator, Developer
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.
- 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.
<p><img alt="Make a Difference, Support CSE" src="/files/2019-06/makedonation.jpg" /></p>
<div class="block block--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>
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.