✎ Technique: Text and images of text

Source: https://accessibility.huit.harvard.edu/technique-use-real-text Parent: https://accessibility.huit.harvard.edu/design-readability

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options provided by online content editors should allow you to update the style for that text.

Only in extreme circumstances, such as when a logo is used, should you provide an image of text rather than text. If you do this, you'll need to provide that same text as the image’s text alternative so that screen-reader users can access the text.

Examples

✗ Bad example

In a WYSIWYG editor, it is possible to upload an image of some text (let's say, "delicious pancakes") and insert it into the page with alternative text that matches the text exactly:

<img src="/path/to/text.png" alt="delicious pancakes" />

One disadvantage here is that screen readers will, in some contexts, read the alternative text with "graphic" appended, and you might not want the user to know that the text is really an image. In addition, text that’s inside an image isn’t translatable into different languages, selectable for copy/paste, or resizable without degrading its quality.

✓ Use CSS and web fonts

Write the text as text in the editor and let the publishing system apply styling.

Behind the scenes, the text will be styled using web fonts and CSS properties such as background, text-shadow and color.

.pancakes-text {\ font-family: PancakeFont, FallbackFont, sans-serif;\ color: SandyBrown;\ text-shadow: 0.02em 0.02em 0 Brown,\ 0 0 0.5em violet;}

Code editor

You can experiment with CSS text styling in this code editor, using the above rules as a starting point.