2 minutes reading time
WCAG: 1.4.5 Images of Text (Write it Out)
Just like green cocktails with fancy umbrellas, there is a time and a place for images of text. Those experiencing visual impairment will have a much easier time using your site if you use text, rather than images of text, since screen readers can pick up regular text without the need for alt text, and those experiencing visual impairment can more readily manipulate it. Accordingly, WCAG 1.4.5 asks that you opt to use text on your site in order to ensure that visually impaired readers will be able to read your website, while providing options to maximize the visual appeal of your text.
Text Never Looked So Good
Even though images of text are a great way to make your blog pop, there are numerous creative options right at your fingertips for including stylized text on your site. Here are just a few examples:
- You would like to style a heading in a particular way. Rather than using bitmap images or some other type of graphic to ensure the font, color, and size you want, you can use CSS to achieve the same goal.
- You are trying to set apart a quotation on your site. As with the previous example, you can use CSS to position the quotation and its attribution on the page, as well as italicize the text and set whichever size, color, font, and decoration you desire.
- You plan to include an image of text on your site, but you still want it to be customizable for those experiencing visual impairment. You present a dynamically generated image using server-side scripting on your page, and the site includes controls for users to change the font size as well as the foreground and background colors.
There are a small handful of exceptions when it is okay to use images of text.
- If text is included in an image that contains other visual elements. Take a look at the infographic titled, "The Ultimate Guide to a Healthy Workday", included here as an example.
- If it is deemed essential for the text to be presented in a particular way that is unachievable by other means. This includes logos and brand names, but it can be potentially difficult to ascertain in other situations when something is truly "essential", so use your best judgement and err on the side of caution.
- If an image of text can be customized by the user to meet his or her requirements. This would include the example we discussed in the previous section regarding dynamically generated images.