OverviewImages of text are inaccessible to users for a few reasons:They cannot be accessed by assistive technology, such as screen readers or text-to-speech software.It's a bad experience on mobile (students predominantly use their phones to access web content)Low vision users may struggle with images of text: JPG and PNG images of text cannot be scaled up by users with low vision without becoming blurryImages must be high quality or they become blurry when zoomed in. Best Practices Include the details from the image of text in the webpage content (e.g. date of event, announcement, etc.)Include what the image is of in the alt text and where the equivalent version of the details is located (e.g. “Event poster for Princeton Research Day, details in content”)Avoid images of text altogether if you can. Example Let's say you've created a poster for your department's event and want to post it on your website. That's perfectly okay to do, but what about screen reader users who cannot access the image? How will they access the event details?You could include the details in the alt text, but since you cannot structure alt text content, the event details would read as one, long run-on sentence without headings or bulleted lists.Instead, provide the details of the event somewhere else on the page as text so that it can be accessed two ways.Note: Even if the information is in the content of the page, the image of text still requires alt text, (e.g. “Open house event flyer. Event details in content.”A structured webpage with the event details will allow screen reader and mobile users to quickly access the event details.To structure the event details on a webpage, make sure it includes:HeadingsLists Open House Flyer Why is this better? In order to make the image of text accessible, include the details on the webpage itself like our example.The text will adjust to the small screen size of a mobile device.The text can be enlarged without becoming blurry.A screen reader user can navigate the event details by heading instead of listening to them as a run-on sentence in the alt text.The poster is still visible for sighted users.You can also include the poster as an optional download. Open House Flyer Program of the Department Open HouseAll interested or curious sophomores are cordially invited. Food will be served.DateTuesday, February 21stTime12:30 PM to 1:30 PMLocation209 Prospect House FAQ What about images of text on social media? You can put images of text on social media, but make sure the content from the image is available in the alt text or in the social media post itself.For more information on social media accessibility, see the posting to social media accessibility guidelines. Can I use images of text for block quotes? Please do not use images of text for block quotes. There is a block quote option in Sitebuilder that will produce the same effect, but remain accessible. If you need a block quote option that's styled differently, reach out to Web Development Services.Other content management tools, such as Wordpress, also have blockquote options. Testing for Accessibility Test Use this image bookmarklet or automated testing tool like WAVE to discover images on a page Are there images of text? If yes, can you set as live text or provide alternative format? Exceptions Things like logos, charts, and graphs can have text set as part of the image as long as alternative text is authored to provide equivalent access. Applicable WCAG Success Criteria SC 1.4.5 Images of Text Resources WebAim's article on issues with enlarged text
