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.
Alt-Text
In order to convey the same information, images must be have an image description, also known as '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 University of Montana 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.
Alt-Text Instructions
- From the edit window select the "Insert/edit image" button.
- Upload your image.
- In the "Image Description" field enter a description of the image being uploaded, this will be the alt-text
- Press ok and submit your changes
Add Meaningful Alt Text to Images
Alternative text (alt-text) is used to convey the subject matter of images used on your site. Alt text helps to ensure your website is accessible to people with visual impairments who might be using a screen reader. All images on your site must contain alt-text.
When adding an image to a page the alt text field is called the image description. Alt-text should meaningfully describe the content of the image as succinctly as possible without unnecessary details.
Bad Alt-text
monte-image
Better, but still needs to be improved Alt-text
Monte the Bear
Good Alt-text
Monte the mascot acrobatically dunking a basketball
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.