Image Accessibility
Images are an important component of web site design. They can convey a sense of place and a call to action. Their placement and design go a long way to creating compelling and engaging web content. There are just a few things that must be kept in mind when you incorporate images on a site to make sure that the images you use are accessible for everyone.
Size
The new Cascade template has a program, called 'Image Zoomer,' that will automatically resize your image to the correct size, depending on where you are adding the image. If you upload an image that is meant to cover the entire width of your site, a 1200px wide image will work in almost every situation. The Image Zoomer will resize the image as appropriate and it will display well on almost any screen size. But for many purposes, especially if you are adding an image to a Block, 800px wide will be sufficient.
Images are usually the largest component of a website when it comes to the total size of a site. Web pages need to work for users that are limited in available bandwidth compared to our connections on campus. Take care not to use raw images straight from modern digital cameras as these are often files that can be multiple megabytes in size. As a rough guide, try to keep your images below 500kb in size.
Alternate Text
In order to convey the same information, images must be have an image description, also known as alternate text or 'alt-text.' This is added to the Image Description field. Make sure everyone can get the picture of what the site is conveying by filling this in every time.
At times, properly providing an image description can be tricky. Take an image of a graph for example, it might be tempting to set the alt text to something like "A graph showing graduation rates" but this would not convey the same information as the image. You must provide a description that is functionally the same as the information in the image. In this case you would need to list the numerical information shown in the graph in the alt text.
But normally, providing and Image Description is straightforward. Just describe clearly what is in the image. If there are people in the image, their names in the description if it is important to the image. If not, you can just use something like, 'People in front of Main Hall on the 91次元 Campus.'
UM principles for creating alternative text include:
- Focus on the purpose for the inclusion of the visual information in the text.
- Write concise descriptions that move from general info to specifics.
- Consider context and objectivity when determining what to write.
- Always consider your audience in tone and language.
- As a best practice, do not use alt-text that is longer than 125 characters. In addition to being tedious to read, some screenreaders will cut off alt-text at that character limit.
Contact Accessible Technology Services (ATS) at 406-243-4357 for more information.
Avoid Using Text-Based Images
Screen readers cannot read text that is part of an image. The best practice is to type text directly on your page. If a text-based image must be used, the text should be typed into the image description as alt text.
New AI alternative text option
For images used inside the WYSIWYG editor, Cascade now provides an option for AI generated alt text. This can be used by pressing the 'Suggest' button under the Image Description field. While these results are often useful, please review them before accepting and add specific information if needed.