Did you know that accessibility is built-in to McGill’s digital standards? The Web Content Accessibility Guidelines (WCAG) is an internationally recognized set of guidelines to ensure accessibility for web users. Many governments and organizations, including Quebec, refer to the WCAG standards as the guiding practice for their jurisdiction. In this series, I will be introducing the WCAG guidelines, sharing examples, and easy ways to implement them.
Guidelines 1.1: Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
What does this mean?
Information on the website that is not text (e.g. images, icons, charts, graphs, emojis) is available in text form.
Get in the habit of including alt text every time you upload an image or diagram to the website. It is easier to do this upfront than to go back and correct missing alt text later. Adhering to this guideline doesn’t mean you should avoid using images, infographics or other engaging visuals. Visual representations of information can be more accessible than text to some users, as it can be easier to digest than paragraphs of text. Instead of shying away from using visuals, learn about different ways to offer text alternatives, via alt text, captions, or accompanying in-text descriptions of content.
What NOT to do:
- Start an alt text description with “image of”. This is redundant for screen readers!
- Include alt text for visuals that are purely decorative (e.g. a divider line)
- Focus on what the image looks like, instead of what it is being used to convey. The best alt text is (relatively) concise – describe without honing in on unimportant details.
- DO: Ask yourself, “What information would the reader be missing out on if this image wasn’t there?” The answer to that question should guide your alt text writing.
Accessibility Advisor’s suggested resources:
These are some of the links that I have found to be most helpful. Once you get the hang of writing alternative text for non-text content, you won’t need to consult these anymore!
- Alternative Text – WebAIM
- WebAIM is often my go-to website for all things web & accessibility
- Writing Effective and Accessible Alt Text tutorials by Clarissa Peterson, via Gymnasium
- Accessible Infographics – CSUN Universal Design Center
- CSUN is a leader for all things IT/tech & accessibility, and host a great resource repository!
- Accessible Images, Icons and Emojis – Up Your A11y
- I liked the examples of alt text used
- Alternative text versions of images and diagrams – McGill Web Services
Rachel Desjourdy is the Accessibility Advisor in the Office of the Provost and Vice-Principal (Academic). She is available to support the McGill community in becoming more inclusive and accessible, and welcomes questions and feedback at rachel.desjourdy [at] mcgill.ca.
