Guidance for Placing Images on the University of Maine System Website
The University of Maine System website follows the Associated Press Online Stylebook (External Site) is required to follow the WCAG 2.1 AA web accessibility standards (External Site) due to the Office of Civil Rights (OCR) Resolution. Because of the OCR Resolution, a priority for the website is all content prioritizes accessible web content, which requires both consistency and accuracy.
Please review your web content for errors in accessibility and images using this guidance.
How can I place accessible images on my subsite?
Images can be photographs, infographics, graphic design elements such as logos and much more. For accessibility reasons, all images require alt text, which is an alternative description for an image for visitors who rely on assistive technology such as screen readers, and information that is conveyed in images must be able to be conveyed in alt text. Please note that images that cannot be fully described in under 125 characters, such as complicated images, graphs and charts, require additional steps to make accessible. Please see our page on complicated images such as graphs and charts.
As often as possible, images on the University of Maine System website should be purely decorative, which means that they should not be considered essential for conveying information that a user may need.
Graphics with text embedded, or “text in image”
Many site owners and editors consider webpages more engaging when pages include images, such as an eye-catching infographic or an image with text in a special layout. Whenever you are adding an image to your page, it is both an accessibility requirement to include written text on your page that repeats the text in the image.
Please see our page on alt text for general guidelines surrounding alt text.
Please see our page on complicated images such as graphs and charts.
Additional guidelines which must be followed for graphic images can be found below.
Ensure proper color contrast
Proper color contrast ratios must be achieved in order for an image to be perceivable to those who are color blind or who have low vision, as discussed in our page on color contrast ratios for accessibility.
Bold Your Text
Go bold!
Images with fine lines or thin/light fonts can be particularly difficult to understand when viewed on a small screen, such as a mobile device. Because your images are likely to be viewed on such a smaller screen, it is important to create the image in a way that is simple to understand at a distance. If fine details of your image are difficult to discern when viewed from a distance, consider a simpler design with bolder image elements.