Photo by rivage on Unsplash
4. Alt text
Screen readers cannot display images but can read aloud text labels that describe them. Alternative (alt) text is needed to describe the content and function of the image and any text that is part of an image.
DO
Describe images
alt=”an apple”
DON’T
Use meaningless descriptions
alt=”appl2_small.gif”
Fixing issues with UDOIT
Problem 1: Alternative text should not be the image filename
Meaning
The alternative text of an image is the filename (the file’s original name), instead of descriptive alternative text (text that describes the picture).
How to fix it
In UDOIT Advantage, click the Review button for more information. Enter a short description for your image. If the image is purely decorative, check the box labelled Mark image as decorative and click Save.
Change the alternative text in UDOIT to something meaningful and click save. For example, this alt text is currently set to the image file name “gify.gif,” which is not meaningful.
Problem 2: Image elements should have an “alt” attribute
Meaning
All images should have alternative text or have been marked as decorative.
How to fix it
In UDOIT Advantage, click the Review button for more information. Add new alt text to the text field in the UDOIT tool and click save.
In UDOIT, give the image alt text that is meaningful. For example, this alt text says “A test tube with green dye. A beaker of red dye is about to be mixed with the green dye.”
Problem 3: Alternative text is more than the maximum allowed characters
Meaning
All images should have alternative text or have been marked as decorative.
UDOIT dialog box displaying that alt text is over the 150 character limit.
How to fix it
In UDOIT Advantage, click the Review button for more information. Add new alt text to the text field in the UDOIT tool and click save.
UDOIT dialog showing the new alt text under 150 characters.
Problem 4: Alt text for images within links should not be empty
Meaning
Hyperlinked images should contain alt text.
How to fix it
In UDOIT Advantage, click the Review button for more information. Add new alt text into the text field and click save.
In UDOIT, give the image alt text that is meaningful. For example, this alt text says “Course contacts.”
Problem 5: Decorative images should have empty alternative text
Meaning
If an image is just for decoration, it should not have an alt text description.
How to fix it
In UDOIT Advantage, click the Review button for more information. Check the box labelled Mark image as decorative and click save.
In UDOIT, if an image is purely decorative and conveys no meaning on the page, mark the image alt text as decorative via the checkbox.
Getting it right in Canvas
In the Canvas rich content editor, click on any image and select Image options. Enter a short description for your image. If the image is purely decorative, check the box labelled Decorative Image and click Done.
Tips to avoid problems
- Keep alt text short, no more than 150 characters.
- For images containing text such as graphs and diagrams, provide supporting text and relevant data before or after the image. Alternatively you may also provide screen readable versions as a document or PDF.
Image options in Canvas showing the alt text field with placeholder text. A checkbox allows you to mark the image as purely decorative.
Page added 27/05/2024