Need help with something you've read on this page or seen in one of our instructional videos? Waterloo instructors can
connect with CEL's Agile Development Team to schedule a live consult with a multimedia developer.
Alt tags provide web users with a text alternative to images, and as such are an important accessibility feature of online content. In the teaching and learning context, alt tags are a potential aid to students who are blind, visually impaired, or to those who are challenged by cognitive disabilities that limit their ability to understand the intent and purpose of an image from the visual alone. Well-written and intentional alt tags can create an inclusive environment for users who use them through assistive technologies.
CEL strives to meet the needs of all our online learners as laid out in our public Accessibility Statement, and as such we endeavor to provide alt tags where at all possible.
On this page:
What will I need to do?
If working with a CEL project team...
When you provide your content (e.g., in a Word document), you can include the text that should appear as the alt tag alongside the image. Your CEL developer will attach the alt tag to the image in the finished webpage. In the event you do not initially provide alt text in your content, you may be asked by your Online Learning Consultant to provide them.
If working independently...
Inserting alt tags directly into LEARN, the CMS, or Microsoft Word is easy. Guidelines are available to guide you through the process:
Important Tips Before You Start
Does every image need an alt tag?
No.
The following scenarios do not require alt tags:
- purely decorative images (e.g., borders, "eye candy", etc.),
- an image that contains text only and that text is also stated nearby, and
- images that are fully described by the surrounding context (e.g., in preceding paragraphs or in a figure description). For these scenarios an empty (blank) alt tag (e.g.,
alt="") is used.
Example
Figure 1: The Welcome to Fabulous Las Vegas Nevada sign lit up with bright lights welcomes visitors to the city.
OlgaCanals/iStock via Getty Images
A blank alt tag, or simply "Figure 1", can be used as the alt tag for this image as no new information is provided by the image—all relevant details are captured by the figure caption. It is entirely possible that a descriptive figure caption might negate the need for a long alt text or reduce it to only a few words.
What are the best practices for authoring alt tags?
Alt tags take some practice to write effectively. Here are a few things to keep in mind:
Figure 2: Most browsers will show the alt tag to users when an image cannot be loaded.
© University of Waterloo
- Keep alt tags short and succinct. There is no technical limit to alt tag lengths—they should be as descriptive as they need to be; however, when using assistive technology (e.g., a screen reader), very long alt tags can disrupt or distract from the rest of the content. Wherever possible, aim for under three sentences or 140 characters. You do not need to include words like "An image of…" or "Picture of…".
- Create useful image file names. In the absence of an alt tag, assistive technology will often provide the file name of the image to the user. A descriptive file name such as Gros-Morne-National-Park.jpg is more helpful than something generic like Image-1.jpg.
- Review for spelling and grammar errors. Alt tags are part of a page's content and are read to a user in the order they appear on the page. They should be reviewed for spelling and grammar as you would for any other content.
- Do not duplicate alt tags. Unless the image and its purpose are repeated, each image on a page should have a unique alt tag. (e.g., rather than 3 x “Golden Gate Bridge”: Golden Gate Bridge at sunset illustrating profile; Golden Gate Bridge from above illustrating span; Golden Gate Bridge at rush hour).
- Alt tags should describe nuances, characteristics, and possibly emotions if they are relevant to the content being presented
How to Determine What to Write for Your Alt Tag
Context is everything
Context is arguably the largest factor in deciding what to include in an alt tag.
Consider the following surrounding content, image, and associated figure caption.
Gros Morne National Park is a UNESCO World Heritage Site due to its physical features, like glacier-carved fjords, and interesting scenery. "The geology of the park in particular illustrates the concept of plate tectonics, and has shed important light on geological evolution and its processes." (Wikipedia, 2022)
Photawa/iStock via Getty Images
Depending on the context of why this photo was included there are a number of possible, simultaneously correct, alt tags.
Geography/Earth Sciences Context
Alt tag: The fjords of the Park are characterised by sheer cliffs and narrow gorges. Dense, shrub-like vegetation lines the walls of the cliffs which rise more than a hundred feet over the water.
Note the use of descriptive language that further expands on the specific features of the image. Words such as "dense" and "sheer" assist the user in identifying key aspects of the image they might miss if they are unable to view the image. In other contexts, the physical descriptions related to the image may not be as relevant to the audience and can be omitted. It may also be important to consider if this is the first time students have seen a fjord. Is it reasonable to assume they know what that means and what its characteristics are? Students' prior knowledge of the material should guide the amount of detail you need to include in your alt tag. If you feel the description you've given may be valuable to all students, consider adding more details to the surrounding content instead.
History/Economic Context
Alt tag: A boat passes through a fjord.
Since so much information was provided in the figure caption and surrounding content, there may not be a need for a long alt tag. Remember that information should not be present in the alt tag that cannot be easily seen in the image. For example, we shouldn't identify the boat as a sightseeing boat unless you believe that can clearly be seen from the image. Perhaps if discussing the economic impacts of the Park and it's effect on local employment, the type of boat may be important. If that fact is relevant to the content, consider updating the figure caption or surrounding content to include that fact or including a more cropped version of the photo.
Recreation and Tourism Context
Alt tag: Seasonal boat trips through the fjords of the Park are a popular way to take in the breathtaking scenery.
In this context, the fact a fjord is shown may not be relevant. We could have just as easily chosen another photo of Gros Morne that would have showcased the scenery and tourism potential of the area. In this context, the image provides a sense of positive affect, which can be conducive to students' learning and makes the content more memorable but likely isn't necessary for the student to understand the course concepts, thus the alt tag has a less technical description.
Due to the wide variety of possible alt tags, your expertise as the subject matter expert is important when thinking about why a particular image is included in the content. If in doubt, your Online Learning Consultant (OLC) is available to consult on particular alt tags and can potentially connect you with others at CEL to assist with what to include in your alt tags.
How do I deal with complex or challenging-to-describe images?
Complex images such as graphs, mathematical visuals, structural formulas, schematics, maps, and infographics can be especially challenging to write alt tags for. Depending on the context, an accurate alt tag could be many paragraphs long to describe all the information from the image. If your alt tag is more than two or three sentences, often the best option is to include an image description as close to the image as possible using one of the options listed below.
In both of the following cases, you are allowing all students to see more information about the image, not just those using assistive technologies.
Using a Show/Hide Element
This provides students a method to show or hide the image description and is typically found directly under the image. Given this method is in-line with the content, it is less disruptive to student learning and allows for additional formatting (e.g., bulleted lists) that isn't possible in an alt tag.
In this case, use the alt tag to alert the user there is an image description and where it is located (e.g., following the image).
Example
Figure 4: A Piper diagram is used in some EARTH science classes to represent the chemistry of a water sample.
© University of Waterloo
Show/hide image description
The diamond shape of the Piper diagram is labelled as follows.
- Top left: Sulfate plus Chloride (SO4 + Cl) with scale from 0 at the left to 100 at the top
- Top right: Calcium plus Magnesium (Ca + Mg) with scale from 0 at the right to 100 at the top
- Bottom left: Sodium plus Potassium (Na + K) with scale from 0 at the left to 100 at the bottom
- Bottom right: Bicarbonate plus Carbonate (HCO3 + CO3) with scale from 0 at the right to 100 at the bottom
The diamond shape of the Piper diagram can be split into four equal, smaller sub-diamond shapes. This is done by drawing a line from point 50 along the Sulfate plus Chloride side to point 50 on the Bicarbonate plus Carbonate side, and by drawing a line from point 50 along the Sodium plus Potassium side to point 50 on the Calcium plus Magnesium side.
The diamond with outside edges along Sulfate plus Chloride and Calcium plus Magnesium represents Calcium Sulfate waters.
The diamond with outside edges along Calcium plus Magnesium and Bicarbonate plus Carbonate represents Sodium Chloride waters.
The diamond with outside edges along Sodium plus Potassium and Bicarbonate plus Carbonate represents Sodium Bicarbonate waters.
The diamond with outside edges along Sulfate plus Chloride and Sodium plus Potassium represents Calcium Bicarbonate waters.
Linking to Another Page
Sometimes it can be easier to include the image description as a hyperlink to a new description webpage. The link should be added as close to the image as possible, possibly in the image caption. This method is visually appealing as it takes up very little space on the page; however, the link redirects students away from the main content.
This method can be especially useful for providing students with the tabular data used to generate graphs and charts, although the caption should capture the main point the image is supposed to provide.
Example
Figure 5: Atlantic Canada has the highest proportion of persons aged 65 years and over. Description
Statistics Canada, 2021 Census of Population.
How can I make writing alt tags easier?
Include more detail in surrounding content.
Images are not usually viewed in isolation; they have surrounding text and captions that also have relevant information. Alt tags should not replicate this information. Similarly, extra information not visible in the image, should not be included in alt tags. Ensure crucial information isn't "hidden" in the image alone.
Providing information in an accessible format (e.g., through electronic text on a webpage) outside of the image is a key principle of Universal Design as it assists all users, not just those who can (or cannot) access the image.
Electronic text has the unique advantage that it is presentation neutral. That is, it can be rendered visually, auditorily, tactilely, or by any combination. As a result, information rendered in electronic text can be presented in whatever form best meets the needs of the user. It can also be easily enlarged, spoken aloud so that it is easier for people with reading disabilities to understand, or rendered in whatever tactile form best meets the needs of a user.
Ensure that you note, either nearby to the image or in the figure caption, the main point that you are trying to make by including the image. This is especially important for data-dense images such as charts and graphs. In these cases, you may also want to provide the user with a more accessible alternative to the image by including a table of values adjacent to the graph or chart.
Where can I find other resources?
The following websites are excellent resources for additional examples and best practices.
- Poet: How To Describe Images
Provides excellent guidelines including quick exercises on different types of images and what should be noted for image alt tags.
- W3C: An Alt Decision Tree
This comprehensive site has a decision tree to help you decide what type of image you are dealing with and what information should be considered.
References
Statistics Canada. 2022. (table). Census Profile. 2021 Census of Population. Statistics Canada Catalogue no. 98-316-X2021001. Ottawa. Released April 27, 2022.
https://www12.statcan.gc.ca/census-recensement/2021/dp-pd/prof/index.cfm?Lang=E (accessed July 5, 2022).
W3C. (2016, October 7). Understanding WCAG 2.0. Retrieved April 13, 2022, from https://www.w3.org/TR/UNDERSTANDING-WCAG20/complete.html
Wikipedia contributors. (2022, January 25). Gros Morne National Park. In Wikipedia, The Free Encyclopedia. Retrieved 17:21, April 12, 2022, from https://en.wikipedia.org/w/index.php?title=Gros_Morne_National_Park&oldid=1067943677