An image of text is an image that has text as the main content that is meant to be readable by the user.
Tips for writing the alt text:
1) The alt text should be an exact match to the text that appears in the image.
Examples:
<img src="img/quote1.jpg" alt="There are no limits to what you can accomplish, except
the limits you place on your own thinking. - Brian Tracy" />
Even though this image has a background of a climbing rope and people rock climbing, the main content of the image is the quote. Therefore, the alt text should be reflective of the quote and its author, rather than the images that appear in the background.
<img src="img/card.png" alt="Surprise! 45 is the new age for regular colon screenings." />
This is an image from a client site I worked on at work for the American Cancer Society Birmingham Alabama chapter. They were wanting to make a site to raise awareness for colon cancer. The site allows you to send a funny card to a loved one encouraging them to get screened. The alt text for these cards needed to be the exact wording pictured, so that non-visual users could still pick an appropriate invite to send.
You can view the full site and entire collection of cards here on the Cordially Stop Cancer site.
Important Notes:
1) If the image that you are using is simple text that could be placed in the markup of the page and styled using CSS to match the original image, this is preferred. Actual text is easier to work with, manipulate, and style than an image. It also isn't going to become pixelated or distorted when resized.
Summary
Images that contain text as the main content that are intended for people to read need to have alt text that contains the exact same text. This way non-visual users will have the text contents of the image read aloud.
Top comments (0)