Everyone needs to be able to use McGill websites, including people with visual impairment. That means every image you use needs a text description—also known as alternative (or alt) text.
- How to add an image with alt text in the old McGill Web Management System (WMS)
- How to add an image with alt text in the new WMS
Why alt text matters
Screen reader tools help people with visual impairment navigate websites by reading text aloud. To describe images, they read out alt text added by a site editor.
Making websites accessible to all is the right thing to do. It's also a legal requirement.
Bonus benefits
- If an image fails to load, alt text will show instead.
- Alt text helps search engines understand your content, boosting your site's visibility.
How to write good alt text
There's no perfect formula for writing amazing alt text, but these 7 tips can guide you:
- Consider context. Why did you choose this image for this page? In the new WMS, you can customize the alt text when re-using an image to tailor it to that page.
- Be descriptive. Convey all relevant information and sentiments the reader would be missing without the image.
- Be concise.
- Don't say "image of," but do say if it’s an illustration, painting, or cartoon.
- Don't include non-visual information about the image's subject (this would go in a caption).
- Don't repeat information mentioned in the surrounding text.
- Avoid making assumptions about age, gender, disability, ethnicity, or relationships—especially when these details are not directly relevant.
In the new WMS, alt text is a mandatory field for all images. While purely decorative graphics shouldn't have alt text, it's best to avoid meaningless images altogether.
Example of context-specific alt text
In an article about early autumn in Montreal:
On a sunny day at McGill's lower field, students in fall clothing lounge on the grass and stroll along paths. Leaves on the many trees lining the field are starting to turn yellow. A cyclist in a blue jacket passes in the foreground. In the background, tall office buildings rise against the clear blue sky.
In an article about cycling on campus:
On a sunny day, a person in a sporty outfit with a bright blue jacket and white helmet rides a rental bike along a campus roadway beside McGill's lower field, where groups of students sit in the grass near trees with green and yellow leaves.
Using AI to generate alt text
While artificial intelligence (AI) tools are capable of writing alt text, the quality is inconsistent.
You can use alt text generated by AI as a starting point, but editing it yourself is the only way to ensure the final product cuts the mustard and is context-specific.
Images with embedded text
Avoid images with embedded text—screen readers can't parse them.
- If you do use an image with relevant text in it, such as a screenshot, infographic, or diagram, you must include a text alternative that conveys all the same information.
If the embedded text or visual data is long or complex, don't use alt text—instead, give the details in the page's body text or link to a separate page with a text version.
- For data, consider using a table or bulleted list.
Translating alt text
Images on pages with a French and English version need their alt text translated.
The process for adding translated alt text to images depends on:
- Whether you are using the old or new WMS.
- Whether the image is found directly on the page or in a block.
Find steps for each scenario in the IT knowledge base:
- How to translate alt text of images on a page (old WMS)
- How to translate alt text of images on a page (new WMS)
- How to translate alt text of images in blocks (old WMS)
- How to translate alt text of images in blocks (new WMS)