Images

Images are an important feature of the visual experience of a website, but sometimes you can have too much of a good thing. 

The Web Content Accessibility Guidelines (WCAG) recommend avoiding using images of text if you expect the text to be read by the user, unless it's necessary such as in a logo or brand name, in which case the alt text should be the same as the text in the image.

Section 1.4.9 of WCAG: Images of Text (No Exception): Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)

The best time and place to use images is to add visual appeal to a page and to support the content of the page, but NOT to use an image to communicate that content. 

For instance a news or events posting can have photographs integrated within the page, but the images should NOT use text to communicate any portion of the actual posting. 

Below is an example of an image that should NOT be used on a website:

 

When posting an image it's good to include the text as a separate addition underneath the actual image. 

Below is a good example:

Above image: The Saint Mary's Art Gallery hosts beautiful shows year round of local, national and international art.

ALT (Alternative) Text

The alternative "alt" tag is additional information that is added to an image when it is first uploaded to the media library. This tag gives alternative information for an image if person visiting a web page cannot view it as a result of several possibilities such as a slow connection, an image error of some sort, or if the user uses a screen reader.

When a screen reader encounters and image, it reads the alt text to the user to describe what is in the image. This is why it is very important that when a user uploads an image into the media library that appropriate alt text is also added to that image.

When you add a new image to the media library the third field on the page is where you ad the alt text.

he image above shows where the description  alt text should be added when a new image is loaded to the T4 media library.

How To Write Good Alt Text

• Describe what is in the photo in a concise, descriptive, direct manner.
• Take the context of the image and the page it is displayed on into account as well.
• Descriptions can be a sentence or two, but it's good to keep it between 5-20 words.
• Do NOT use phrases like "picture of", or "photo of". It's already known that it's a photo....no need to state the obvious. 
• Do NOT use acronyms.
• Alt descriptions can, and should, use proper sentence structure and punctuation.

Further resources on writing effective alt tags

• Microsoft: Everything you need to know to write effective alt text.
• W3C: An alt Decision Tree.

Examples of Alt Text

	Good alt text for image on the left: 1) Student speaking with career fair representative. 2) A Saint Mary's university student with their back to the camera speaking with a career fair advisor who is facing the camera while showing a brochure. Poor alt text for image on the left: 1) Photo of two people standing. 2) Image of two people talking.
	Good alt text for image on the left: 1) Maple syrup jars. 2) A row of three maple syrup jars on a table. Two plastic jars on the left and one glass jar on the right. Poor alt text for image on the left: 1) Image of jars on a table
	Good alt text for image on the left: Man in wheelchair on a stage presenting an award to a female student who is stading on the floor next to the stage. A male speaker is in the background standing at a podium. Poor alt text for image on the left: Picture of a man presenting and award.