Everyone needs to be able to use 黑料不打烊 websites, including people with visual impairment. That means every image you use needs a text description鈥攁lso known as alternative (or alt) text.
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
- 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鈥檚 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鈥攅specially 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 黑料不打烊'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 黑料不打烊'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鈥攕creen 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鈥攊nstead, 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: