{"id":20833,"date":"2024-12-16T11:34:58","date_gmt":"2024-12-16T16:34:58","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?page_id=20833"},"modified":"2025-06-09T08:26:45","modified_gmt":"2025-06-09T12:26:45","slug":"alt-text-should-appear-on-some-images","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/alt-text-should-appear-on-some-images\/","title":{"rendered":"Alt text should appear on some images"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Alt text should appear on some images\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>Alt text describes briefly the content of a photo or other image via a screen reader, where that image has a purpose that is informative.&nbsp;<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The purpose of alt text is to enable people with visual disabilities to discover what the content of a picture is.<\/li>\n\n\n\n<li>It provides context that other users receive from seeing the details of the picture.&nbsp;<\/li>\n\n\n\n<li>Bear in mind that being informative can convey mood or atmosphere as well as simply relating factual information about what is in an image<\/li>\n\n\n\n<li>Alt text should contain one hundred characters or fewer<\/li>\n\n\n\n<li>It is not necessary when the image is purely decorative<\/li>\n\n\n\n<li>It is <strong class=\"myprefix-text-bold\">always<\/strong> necessary when an image is being used as link, but in this situation it would describe the outcome of clicking on the image.<\/li>\n\n\n\n<li>Alt text can also help with cognitive load and\/or processing for some users. Some users might be able to see the image but not quickly interpret what they are seeing. Properly descriptive alt text can help with this. <\/li>\n<\/ul>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/2024\/11\/Screenshot-2024-11-11-at-2.19.37%E2%80%AFPM.png\" alt=\"Students from diverse racial groups and of different genders gather in the comfortable Library lounge at ÐÓ°ÉÔ­´´\" class=\"wp-image-20834\" style=\"width:400px\"\/><\/figure>\n\n\n\n<p>When, for example, the image above is used on a page that is aiming to help recruit students it requires alt text. In this example, the alt text used reads:<br><br><em>Students from diverse racial groups and of different genders gather in the comfortable Library lounge at ÐÓ°ÉÔ­´´<\/em><\/p>\n\n\n\n<p>One area of practice that can help with usability as well is considering this: If you are using the image on a page and you think that people using screen readers do&nbsp;<strong>not<\/strong>&nbsp;need to have this information read to them, then does the image have a purpose at all, even for those who aren&#8217;t using a screen reader?<\/p>\n\n\n\n<h2 id=\"example-of-less-accessible-practices\" class=\"wp-block-heading\">Example of less accessible practices<\/h2>\n\n\n\n<p>One example of a way to&nbsp;<em>not<\/em>&nbsp;use is when identifying the people in an image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"541\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/06\/Nelson-Mandela-and-Pele.jpg\" alt=\"An elderly, grey-haired black man wearing a colourful tunic shakes hands with a slightly younger black man wearing a suit. \" class=\"wp-image-21306\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/06\/Nelson-Mandela-and-Pele.jpg 612w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/06\/Nelson-Mandela-and-Pele-512x453.jpg 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/06\/Nelson-Mandela-and-Pele-320x283.jpg 320w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/figure>\n\n\n\n<p>This is not the correct alt text to use with this image: <em class=\"myprefix-text-italic\">Pele (left) and <em class=\"myprefix-text-italic\">Nelson Mandela<\/em> (right)<\/em><\/p>\n\n\n\n<p>In this situation is better to have alt text that reads: <em class=\"myprefix-text-italic\">An <em class=\"myprefix-text-italic\">elderly<\/em><\/em>, <em class=\"myprefix-text-italic\">grey-haired black man wearing a colourful tunic shakes hands with a slightly younger black man wearing a suit. <\/em><\/p>\n\n\n\n<p>You can also add a caption to describe them in other ways: <em class=\"myprefix-text-italic\">Ernest Hemingway, the great American writer, with revolutionary leader of Cuba, Fidel Castro.<\/em><\/p>\n\n\n\n<h2 id=\"additional-benefits\" class=\"wp-block-heading\">Additional benefits<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Usability<\/strong>: i) If images don&#8217;t load for some reasons, users will gain insight from the alt text ii) what is not always clear in an image can be clarified by reading the alt text. <\/li>\n\n\n\n<li><strong>SEO<\/strong>: Google uses alt text to help rank pages. Alt text is critical in how Google create results for image searches. <\/li>\n\n\n\n<li><strong>Marketing<\/strong>: As alt text can convey something about the ambience of a place (for example, a campus) alt text can help sell the university. For instance, accurate alt text should mention that students in a photos are from a range of different racial groups when that is the case. Users with visual disabilities and from different racialized groups will thus learn that they are represented on campus, from accessing the alt text. <\/li>\n<\/ul>\n\n\n\n<h2 id=\"what-wcag-says\" class=\"wp-block-heading\">What WCAG says<\/h2>\n\n\n\n<p>Robotic scans cannot discern if an image in general use is purely decorative or if it is informative. Therefore there is no error listed in WAVE.<\/p>\n\n\n\n<p>(Be sure to&nbsp;<a href=\"https:\/\/app.pope.tech\/result-documentation\">learn more about errors and alerts<\/a>.)<\/p>\n\n\n\n<p>From WCAG:<\/p>\n\n\n\n<p>&#8220;In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information.&#8221;<\/p>\n\n\n\n<p>You can&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">consult WCAG&#8217;s decision tree<\/a>&nbsp;to see all options around alt text.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\">Learn more about WCAG says about this issue<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make sure images that need it have a concise description of what is being conveyed in a picture.<\/p>\n","protected":false},"author":6,"featured_media":21243,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[18,20,14,25,22],"class_list":["post-20833","page","type-page","status-publish","has-post-thumbnail","hentry","cu_page_type-accessibility","cu_page_type-alt-text","cu_page_type-general","cu_page_type-homepage-featured","cu_page_type-images"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/comments?post=20833"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20833\/revisions"}],"predecessor-version":[{"id":21320,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20833\/revisions\/21320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media\/21243"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=20833"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=20833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}