{"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":"2026-07-15T08:27:42","modified_gmt":"2026-07-15T12:27:42","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>Alternative text (alt text) provides a written description of images so that people who cannot see them can still understand their meaning.<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<p>Screen readers read alt text out loud to describe images. Without it, users may miss important information or context that images provide.<\/p>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Write short, clear descriptions that explain the meaning of the image<\/li>\n\n\n\n<li>Include important text that appears inside the image<\/li>\n\n\n\n<li>Use empty alt text (<code>alt=\"\"<\/code>) for decorative images<\/li>\n\n\n\n<li>Focus on the purpose of the image, not every visual detail. For example, in a picture of people, describe them (age, race, gender location) rather than their names<\/li>\n\n\n\n<li>This helps people enduring a higher cognitive load as well as folks who can&#8217;t see the image for any reason<\/li>\n<\/ul>\n\n\n\n<p>There should be no confusion between alt text and a caption. Caption specifies, for example, who or what is identifiable in a photo. Alt text gives a physical description. So for example:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-1024x569.jpeg\" alt=\"An older black man in a white shirt and with grey hair is embraced by a man in military fatigues, sporting a large grey beard\" class=\"wp-image-21455\" style=\"width:600px\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-1024x569.jpeg 1024w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-512x284.jpeg 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-320x178.jpeg 320w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-768x427.jpeg 768w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-1536x853.jpeg 1536w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela.jpeg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">President of South Africa Nelson Mandela meets with President Fidel Castro of Cuba<\/figcaption><\/figure>\n\n\n\n<p>This is good practice: the alt text describes the images so the user with a screen reader knows what kind of people are being described &#8211; gender, race, age, clothing. Meanwhile, the caption identifies the people and their positions. <\/p>\n\n\n\n<h2 id=\"example-of-poor-practice\" class=\"wp-block-heading\">Example of poor practice<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-1024x569.jpeg\" alt=\"An older black man in a white shirt and with grey hair is embraced by a man in military fatigues, sporting a large grey beard\" class=\"wp-image-21455\" style=\"aspect-ratio:4\/3;object-fit:cover;width:600px\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-1024x569.jpeg 1024w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-512x284.jpeg 512w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-320x178.jpeg 320w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-768x427.jpeg 768w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela-1536x853.jpeg 1536w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/mandela.jpeg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Two men, one is black, one is hispanic. The man on the left wears a white shirt.<\/figcaption><\/figure>\n\n\n\n<p>In this example, there are issues with the alt text and the caption:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nelson Mandela and Fidel Castro are not identified, <\/li>\n\n\n\n<li>there is no alt text,<\/li>\n\n\n\n<li>the caption describes what people who are accessing the content visually can already see anyway.<\/li>\n\n\n\n<li>Reference to one person on the left is not useful either.<\/li>\n<\/ul>\n\n\n\n<p>The other side is adding alt text where none is needed. If this picture is used on a page about the sea:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"750\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/image.png\" alt=\"Image of the sea. It's blue and it has waves.\" class=\"wp-image-21461\" style=\"width:300px\" srcset=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/image.png 500w, https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2026\/07\/image-320x480.png 320w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>it does not require any alt text &#8211; it is purely decorative, not illustrative. It certainly doesn&#8217;t need the alt text we placed on it: <em class=\"myprefix-text-italic\">Image of the sea. It&#8217;s blue and it has waves.<\/em><\/p>\n\n\n\n<h2 id=\"additional-benefits\" class=\"wp-block-heading\">Additional benefits<\/h2>\n\n\n\n<p>Alt text supports accessibility and improves how content works across different devices and platforms.<\/p>\n\n\n\n<h3 id=\"usability\" class=\"wp-block-heading\">Usability<\/h3>\n\n\n\n<p>Helps all users understand images when they don\u2019t load or when browsing quickly.<\/p>\n\n\n\n<h3 id=\"seo\" class=\"wp-block-heading\">SEO<\/h3>\n\n\n\n<p>Search engines use alt text to understand images, which can improve visibility in search results.<\/p>\n\n\n\n<h3 id=\"marketing\" class=\"wp-block-heading\">Marketing<\/h3>\n\n\n\n<p>Ensures key messages in visuals are communicated clearly to all users.<\/p>\n\n\n\n<h2 id=\"what-wcag-says\" class=\"wp-block-heading\">What WCAG says<\/h2>\n\n\n<div class=\"not-prose cu-quote cu-component-spacing\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cWhen using the img element, <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H37.html\">specify a short text alternative<\/a> with the alt attribute\u2026 the alt text should convey the same meaning as the image.\u201d<\/p>\n<\/blockquote>\n<\/div>\n\n\n<h2 id=\"checklist\" class=\"wp-block-heading\">Checklist<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Meaningful image?<\/strong> Add clear alt text<\/li>\n\n\n\n<li><strong>Decorative image?<\/strong> Do not enter any alt text<\/li>\n\n\n\n<li><strong>Functional image (link\/button)?<\/strong>  Describe the action<\/li>\n\n\n\n<li>Ensure Alt text conveys the <strong>same meaning or purpose<\/strong> as the image <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H37.html\">[w3.org]<\/a><\/li>\n\n\n\n<li>Alt text is <strong>short and specific<\/strong> (no \u201cimage of\u2026\u201d)<\/li>\n\n\n\n<li>No <strong>duplicate or redundant text<\/strong><\/li>\n\n\n\n<li>Complex images have a <strong>brief alt + longer description nearby<\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/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":21474,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20833\/revisions\/21474"}],"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}]}}