{"id":17740,"date":"2022-05-27T14:02:17","date_gmt":"2022-05-27T18:02:17","guid":{"rendered":"https:\/\/carleton.ca\/webworkshops\/?page_id=17740"},"modified":"2022-08-11T14:26:39","modified_gmt":"2022-08-11T18:26:39","slug":"how-to-write-good-alt-text","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/","title":{"rendered":"How to Write Good Alt Text"},"content":{"rendered":"<p>Estimated time to complete: 8 minutes<\/p>\n<h2>Module<\/h2>\n<h3>How do I write good alt text?<\/h3>\n<h4>Content<\/h4>\n<p>At its most basic, alt text should describe the image. However, it&#8217;s often not possible to concisely describe every element of the image, and that approach gives a ton of unnecessary information.<\/p>\n<p>A better approach is to describe what the image\u00a0<em>means<\/em> in the context of where it is used. Why is the image there? What information is it meant to convey to the user?<\/p>\n<h4>Context<\/h4>\n<p>There are many contexts in which this photo could be relevant, and for each one you would want to adjust the alt text to focus on what it means in that particular context.<\/p>\n<p>Here are three examples of different alt text for the same image in various contexts:<\/p>\n<p><strong>1) In an article about Indigenous art installations in Ontario:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-17732 size-medium\" src=\"https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-240x157.jpg\" alt=\"Sculpture Locavore in Carleton quad\" width=\"240\" height=\"157\" srcset=\"https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-240x157.jpg 240w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-400x261.jpg 400w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-160x105.jpg 160w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-768x502.jpg 768w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-1536x1004.jpg 1536w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-360x235.jpg 360w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-200x131.jpg 200w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore.jpg 1920w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/>Potential alt text: <em>Locavore<\/em>, by Indigenous artist Mary Anne Barkhouse: a sculpture installation in Carleton University&#8217;s quad that depicts a snowshoe hare and a Western coyote.<\/p>\n<p>This alt text highlights the Indigeneity of the artist, the medium of art, and the location, because those are all relevant to the article&#8217;s subject.<\/p>\n<p><strong>2) In an article about representations of predator-prey relationships in art:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-17732 size-medium\" src=\"https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-240x157.jpg\" alt=\"Sculpture Locavore in Carleton quad\" width=\"240\" height=\"157\" srcset=\"https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-240x157.jpg 240w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-400x261.jpg 400w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-160x105.jpg 160w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-768x502.jpg 768w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-1536x1004.jpg 1536w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-360x235.jpg 360w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-200x131.jpg 200w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore.jpg 1920w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/p>\n<p>Potential alt text: a bronze sculpture depicting a snowshoe hare on a pedestal, observed by a Western coyote. The pedestal places the hare a short distance above the coyote.<\/p>\n<p>This alt text underlines the artistic details of the sculpture, including how the animal subjects are positioned in relation to one another &#8211; details that would be relevant to this article.<\/p>\n<p><strong>3) In an article about the unveiling of the sculpture on Carleton&#8217;s campus:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-17732 size-medium\" src=\"https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-240x157.jpg\" alt=\"Sculpture Locavore in Carleton quad\" width=\"240\" height=\"157\" srcset=\"https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-240x157.jpg 240w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-400x261.jpg 400w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-160x105.jpg 160w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-768x502.jpg 768w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-1536x1004.jpg 1536w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-360x235.jpg 360w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore-200x131.jpg 200w, https:\/\/carleton.ca\/webworkshops\/wp-content\/uploads\/Locavore.jpg 1920w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/p>\n<p>Potential alt text: a gathering of Carleton community members in the quad, foregrounded by the new sculpture, <em>Locavore<\/em>.<\/p>\n<p>This alt text brings the gathering in the background into focus, as the article concentrates on the event of the unveiling rather than the sculpture itself.<\/p>\n<h4><\/h4>\n<h4>Concise<\/h4>\n<p>In each of these examples, the alt text only points out details in the image that are relevant to the overall meaning of the article. Details like the green grass and the trees in the background do not add much to any of the example articles, so they have been omitted from the alt text. Try capture the meaning of the image in a precise, clear, and concise manner.<\/p>\n<h2>Video<\/h2>\n<div class=\"content__video\"><iframe loading=\"lazy\" title=\"Module 3: Images - How to Write Good Alt Text\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Bq17ut1mMis?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3>Video Transcript<\/h3>\n<div class=\"slideme\"><dl class=\"slideme__list\"><dt class=\"slideme__term\"><a href=\"#slideme-module-3-images-alt-text\" aria-expanded=\"false\" aria-controls=\"slideme-module-3-images-alt-text\" class=\"slideme__heading slideme__trigger\">Module 3: Images - Alt Text<\/a><\/dt><dd class=\"slideme__description\" id=\"slideme-module-3-images-alt-text\" aria-hidden=\"true\"><p><\/p>\n<p>Welcome to module 3 of our accessibility training. This video will focus on writing good alt text.<\/p>\n<p>Good alt text has three general traits:<\/p>\n<ul>\n<li>Good alt text describes the content of the image, more specifically the content of the image that is relevant and meaningful to the surrounding text. This leads into the next element of good alt text.<\/li>\n<li>As we explored in the last module, context is key when it comes to determining whether alt text is needed. It\u2019s also important for determining what should be written in the alt text. We\u2019ll explore this further in the next couple slides.<\/li>\n<li>Finally, good alt text is concise. Not every detail of the image will be relevant to the surrounding content. So don\u2019t waste your reader\u2019s time on unnecessary information in the image.<\/li>\n<\/ul>\n<p>As we go through the following examples of alt text in different contexts, try to keep in mind how the suggested alt text is concise, and describes the contents of the image.<\/p>\n<p>As we discussed in the last module, this photo could be used in many different contexts. Assuming you have already determined that the photo needs alt text in each of these following contexts, we\u2019ll create different alt text to fit each scenario.<\/p>\n<p>Our first example article is about Indigenous art installations in Ontario. From this topic, we can already draw out some relevant information from the photo, such as the Indigeneity of the artist, the medium and subject of the art, and the location. Therefore, some potential alt text could be: \u201cLocavore, by Indigenous artist Mary Anne Barkhouse is a sculpture installation in Carleton University\u2019s quad that depicts a snowshoe hare and a Western coyote.\u201d<\/p>\n<p>Other contexts would lead to other elements of the image being put into focus. Our second example article shifts focus to representations of predator-prey relationships in art. This would require different elements to be drawn out in the alt text, such as the artistic detail of the sculpture, as well as a description of the animals and their relative position to one another. Alt text for the image in this context could be: \u201ca bronze sculpture depicting a snowshoe hare on a pedestal, observed by a Western coyote. The pedestal places the hare a short distance above the coyote.\u201d<\/p>\n<p>In our final example of context for this image, it appears in an article about the unveiling of the sculpture at Carleton. This article might draw the gathering in the background into focus, as the topic of the article is about the event of the unveiling, rather than the sculpture itself.<\/p>\n<p>Potential alt text could therefore be: \u201ca gathering of Carleton community members in the quad, foregrounded by the new sculpture, Locavore.\u201d<\/p>\n<p>While these are just three examples of the many ways in which an image like this might be used, hopefully this gives you an idea of how context plays a role in determining alt text. To review, good alt text should describe the contents of the image, that are relevant to the image\u2019s context, in a concise way.<\/p>\n<p><\/p><\/dd><dl><\/div>\n\n<div class=\"u-center-text\">\n\t<p>\n\t\t<a class=\"button__red button__red--solid\" href=\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/alt-text-for-linked-images-and-images-with-text\/\"  rel=\"noopener noreferrer\">Next: Alt Text for Linked Images and Images with Text<\/a>\n\t<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Estimated time to complete: 8 minutes Module How do I write good alt text? Content At its most basic, alt text should describe the image. However, it&#8217;s often not possible to concisely describe every element of the image, and that approach gives a ton of unnecessary information. A better approach is to describe what the [&hellip;]<\/p>\n","protected":false},"author":51,"featured_media":0,"parent":17707,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","_mi_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":"","_links_to":"","_links_to_target":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Write Good Alt Text - Web Workshops<\/title>\n<meta name=\"description\" content=\"Estimated time to complete: 8 minutes Module How do I write good alt text? Content At its most basic, alt text should describe the image. However, it&#039;s\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/\",\"url\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/\",\"name\":\"How to Write Good Alt Text - Web Workshops\",\"isPartOf\":{\"@id\":\"https:\/\/carleton.ca\/webworkshops\/#website\"},\"datePublished\":\"2022-05-27T18:02:17+00:00\",\"dateModified\":\"2022-08-11T18:26:39+00:00\",\"description\":\"Estimated time to complete: 8 minutes Module How do I write good alt text? Content At its most basic, alt text should describe the image. However, it's\",\"breadcrumb\":{\"@id\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/carleton.ca\/webworkshops\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibility Training\",\"item\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Module 3: Images\",\"item\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Write Good Alt Text\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/carleton.ca\/webworkshops\/#website\",\"url\":\"https:\/\/carleton.ca\/webworkshops\/\",\"name\":\"Web Workshops\",\"description\":\"Carleton University\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/carleton.ca\/webworkshops\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Write Good Alt Text - Web Workshops","description":"Estimated time to complete: 8 minutes Module How do I write good alt text? Content At its most basic, alt text should describe the image. However, it's","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/","url":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/","name":"How to Write Good Alt Text - Web Workshops","isPartOf":{"@id":"https:\/\/carleton.ca\/webworkshops\/#website"},"datePublished":"2022-05-27T18:02:17+00:00","dateModified":"2022-08-11T18:26:39+00:00","description":"Estimated time to complete: 8 minutes Module How do I write good alt text? Content At its most basic, alt text should describe the image. However, it's","breadcrumb":{"@id":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/how-to-write-good-alt-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/carleton.ca\/webworkshops\/"},{"@type":"ListItem","position":2,"name":"Accessibility Training","item":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/"},{"@type":"ListItem","position":3,"name":"Module 3: Images","item":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/"},{"@type":"ListItem","position":4,"name":"How to Write Good Alt Text"}]},{"@type":"WebSite","@id":"https:\/\/carleton.ca\/webworkshops\/#website","url":"https:\/\/carleton.ca\/webworkshops\/","name":"Web Workshops","description":"Carleton University","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carleton.ca\/webworkshops\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"acf":{"banner_image_type":"none","banner_button":"no"},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages\/17740"}],"collection":[{"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/comments?post=17740"}],"version-history":[{"count":3,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages\/17740\/revisions"}],"predecessor-version":[{"id":18319,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages\/17740\/revisions\/18319"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages\/17707"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/media?parent=17740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}