{"id":17738,"date":"2022-05-27T14:00:42","date_gmt":"2022-05-27T18:00:42","guid":{"rendered":"https:\/\/carleton.ca\/webworkshops\/?page_id=17738"},"modified":"2022-08-11T14:26:10","modified_gmt":"2022-08-11T18:26:10","slug":"what-is-alt-text-and-when-to-use-it","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/","title":{"rendered":"What is Alt Text and When to Use It"},"content":{"rendered":"<p>Estimated time to complete: 12 minutes<\/p>\n<h2>Module<\/h2>\n<h3>What is alt text?<\/h3>\n<p>Alt text is simply a text alternative to non-textual content, often an image.<\/p>\n<p>Thinking back to module 1, you can likely come up with some reasons why alt text is vital to a site&#8217;s accessibility. There are indeed many reasons why alt text is important:<\/p>\n<ul>\n<li>Primarily, alt text allows users with a screen reader to have this assistive technology describe the contents of the image to them. This enables users with visual disabilities who cannot see the contents of the image to access this content in an alternate way.<\/li>\n<li>Additionally, if an image cannot load due to an error or demands on the network, alt text enables users to still receive the information conveyed in the image.<\/li>\n<li>Similarly to the previous point, if an image&#8217;s resolution is not high enough for the details to be conveyed, or if a low colour contrast makes the image difficult to perceive, alt text provides an alternative way to access the information contained in the image.<\/li>\n<li>Aside from accessibility reasons, alt text also helps search engines identify images and direct users to relevant pages, which can boost relevant traffic to your website.<\/li>\n<\/ul>\n<p>However, the main goal of accessibility is to enable access to persons with disabilities. Alt text is a necessary addition to graphics, especially when it comes to screen readers:<\/p>\n<blockquote><p>Speech synthesizers with screen reader software can give the blind person spoken output of what is on the computer display. However, the synthesizer can only speak text that is displayed on the screen. The increasing use of graphics leaves the synthesizer speechless. (Coombs, <em>Assistive technology in third level and distance education<\/em>, 2000)<\/p><\/blockquote>\n<h3>When should I use alt text?<\/h3>\n<p>One mistake alt text beginners often make is to provide alt text for every image. While the enthusiasm is appreciated, not every image needs alt text.<\/p>\n<p>A good rule of thumb for alt text is to use it when the image conveys some piece of information not otherwise given textually. If the image adds meaning to the surrounding content, then that meaning must be replicated in the alt text.<\/p>\n<p>Here are a few examples:<\/p>\n<h4>1) Image is decorative: alt text not necessary<\/h4>\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>&#8220;Celebrations and other gatherings are frequently held in Carleton&#8217;s scenic quad. Faculty, students, and staff all enjoy the outdoor environment.&#8221;<\/p>\n<p>Here, the image provides nothing more than an illustration of the text. Having a description of the image would not add much to the information provided, so alt text is not needed.<\/p>\n<h4>2) Information appears in text: no need for alt text<\/h4>\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>&#8220;The sculpture <em>Locavore<\/em> by Mary Anne Barkhouse depicts a snowshoe hare on a pillar, being observed by a Western coyote.&#8221;<\/p>\n<p>As the information that the image provides appears in the text itself, adding alt text describing the sculpture would be redundant.<\/p>\n<h4>3) Information in image that does not appear in text: alt text needed!<\/h4>\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><em>&#8220;Locavore<\/em>, a bronze sculpture by Mary Anne Barkhouse was installed on the Carleton University quad in 2015. The sculpture draws attention to relationships between animals in nature, and the balance of the ecosystem.&#8221;<\/p>\n<p>In this context, the image provides further information on how the sculpture represents &#8220;relationships between animals&#8221;. Therefore, this information should be replicated in the image&#8217;s alt text. Possible alt text could be similar to the text in the previous example: &#8220;<em>Locavore<\/em> depicts a snowshoe hare on a pillar, being observed by a Western coyote.&#8221;<\/p>\n<p>If you&#8217;re unsure whether or not to put alt text on an image, consider whether you would be missing any information if the image was not there. Whatever information you would be missing should then be added as alt text, or, if extensive, worked into the surrounding text.<\/p>\n<h2>Video<\/h2>\n<div class=\"content__video\"><iframe loading=\"lazy\" title=\"Module 3: Images - What is Alt Text and When to Use It\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Nq-CsE92R6c?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-what-is-alt-text-and-when-to-use-it\" aria-expanded=\"false\" aria-controls=\"slideme-module-3-images-what-is-alt-text-and-when-to-use-it\" class=\"slideme__heading slideme__trigger\">Module 3: Images - What is Alt Text and When to Use It<\/a><\/dt><dd class=\"slideme__description\" id=\"slideme-module-3-images-what-is-alt-text-and-when-to-use-it\" aria-hidden=\"true\"><p><\/p>\n<p><span style=\"font-weight: 400;\">Welcome to module 3 of our accessibility training. This module will address making images accessible, with a special focus on using alt text effectively.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Alt text, or alternative text, is text that is provided as an alternative to non-textual content, such as an image. Like many components of accessible design, there are many ways in which alt text can benefit the user.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Users with visual disabilities might use a screen-reader to assist them with accessing web content. Adding alt text to an image allows that image to be conveyed out loud by the screen reader.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">An image might not load if there is an error or the network is overloaded. Alt text allows the information in the image to still be conveyed, even if the image is not able to be loaded.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">An image with low resolution or colour contrast may not be perceivable depending on the monitor it\u2019s displayed on, and the user. Again, alt text provides the information without the photo needing to be perceived.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Aside from accessibility reasons, alt text also helps search engines identify your images and direct relevant traffic to your website.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">A common mistake made by alt text beginners is to put alt text on every single image. There are actually a few situations where images should not be given alt text.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The general rule of thumb is that alt text should convey the meaning of the image. If the image does not add meaning to the surrounding content, or if that meaning is already stated in the surrounding text, then alt text is unnecessary.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To help illustrate this rule, let\u2019s look at an image in a few different contexts. Take a moment to consider this image. There are several elements that could be important, depending on the context: the sculpture, the gathering of people, even the greenery. Which of these should go in alt text, as well as whether or not alt text is actually needed depends on context.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is an example of content that this image might be placed next to: \u201cCelebrations and other gatherings are frequently held in Carleton\u2019s scenic quad. Faculty, students, and staff all enjoy the outdoor environment.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this case, the image provides nothing more than an illustration of the text. Having a description of the image, such as \u201cCarleton\u2019s quad\u201d would not add much to the meaning of the content, so no alt text is necessary.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Alt text is also unnecessary if the information or meaning that the image conveys is already represented in the text itself. For example, if this image were placed with text that read: \u201cThe sculpture <\/span><i><span style=\"font-weight: 400;\">Locavore<\/span><\/i><span style=\"font-weight: 400;\"> by Mary Anne Barkhouse depicts a snowshoe hare on a pillar, being observed by a Western coyote,\u201d then repeating a description of the sculpture would be repetitive. As the meaning that the image provides appears in the text itself, alt text is not necessary in this case.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The previous two examples showed situations where alt text was not needed. However, you are sure to also encounter situations where the image does need alt text. In the simplest terms, an image needs alt text when it conveys information or meaning not already represented in the surrounding content.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is one example of a situation where alt text would be needed. The surrounding text reads: <\/span><i><span style=\"font-weight: 400;\">\u201cLocavore<\/span><\/i><span style=\"font-weight: 400;\">, a bronze sculpture by Mary Anne Barkhouse was installed on the Carleton University quad in 2015. The sculpture draws attention to relationships between animals in nature, and the balance of the ecosystem.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this situation, the image provides additional, relevant information to the text, namely how the sculpture depicts relationships between animals. Therefore, alt text containing this information needs to be added. For example, the alt text could read something like: \u201c<\/span><i><span style=\"font-weight: 400;\">Locavore<\/span><\/i><span style=\"font-weight: 400;\"> depicts a snowshoe hare on a pillar, being observed by a Western coyote.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Though it can sometimes be challenging to distinguish whether or not a situation calls for alt text, you can always return to the rule of thumb: any information that would be missing if the image was removed should be included as alt text or worked into the surrounding text.<\/span><\/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\/how-to-write-good-alt-text\/\"  rel=\"noopener noreferrer\">Next: How to write good alt text<\/a>\n\t<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Estimated time to complete: 12 minutes Module What is alt text? Alt text is simply a text alternative to non-textual content, often an image. Thinking back to module 1, you can likely come up with some reasons why alt text is vital to a site&#8217;s accessibility. There are indeed many reasons why alt text is [&hellip;]<\/p>\n","protected":false},"author":51,"featured_media":0,"parent":17707,"menu_order":1,"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>What is Alt Text and When to Use It - Web Workshops<\/title>\n<meta name=\"description\" content=\"Estimated time to complete: 12 minutes Module What is alt text? Alt text is simply a text alternative to non-textual content, often an image. Thinking\" \/>\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\/what-is-alt-text-and-when-to-use-it\/\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 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\/what-is-alt-text-and-when-to-use-it\/\",\"url\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/\",\"name\":\"What is Alt Text and When to Use It - Web Workshops\",\"isPartOf\":{\"@id\":\"https:\/\/carleton.ca\/webworkshops\/#website\"},\"datePublished\":\"2022-05-27T18:00:42+00:00\",\"dateModified\":\"2022-08-11T18:26:10+00:00\",\"description\":\"Estimated time to complete: 12 minutes Module What is alt text? Alt text is simply a text alternative to non-textual content, often an image. Thinking\",\"breadcrumb\":{\"@id\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/#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\":\"What is Alt Text and When to Use It\"}]},{\"@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":"What is Alt Text and When to Use It - Web Workshops","description":"Estimated time to complete: 12 minutes Module What is alt text? Alt text is simply a text alternative to non-textual content, often an image. Thinking","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\/what-is-alt-text-and-when-to-use-it\/","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/","url":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/","name":"What is Alt Text and When to Use It - Web Workshops","isPartOf":{"@id":"https:\/\/carleton.ca\/webworkshops\/#website"},"datePublished":"2022-05-27T18:00:42+00:00","dateModified":"2022-08-11T18:26:10+00:00","description":"Estimated time to complete: 12 minutes Module What is alt text? Alt text is simply a text alternative to non-textual content, often an image. Thinking","breadcrumb":{"@id":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-3-images\/what-is-alt-text-and-when-to-use-it\/#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":"What is Alt Text and When to Use It"}]},{"@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\/17738"}],"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=17738"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages\/17738\/revisions"}],"predecessor-version":[{"id":18318,"href":"https:\/\/carleton.ca\/webworkshops\/wp-json\/wp\/v2\/pages\/17738\/revisions\/18318"}],"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=17738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}