{"id":20953,"date":"2024-12-16T11:34:59","date_gmt":"2024-12-16T16:34:59","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?page_id=20953"},"modified":"2025-06-09T08:12:25","modified_gmt":"2025-06-09T12:12:25","slug":"no-text-conveying-meaning-in-images","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/no-text-conveying-meaning-in-images\/","title":{"rendered":"Convey meaning in text, not 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                        Convey meaning in text, not 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>Images should not have text that is attempting to convey a meaning or message.<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<p>Text in an image is not accessible to those with visual disabilities. This does not just include the legally blind. Often text is neither large nor contrasted enough to read in images, especially when on a phone. Screen readers cannot access text in images. <\/p>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<p>Place messaging or critical information in text above or below an image. A good example is <a href=\"https:\/\/science.carleton.ca\/cu-events\/science-cafe-is-social-media-addictive\/\">this image and text combination<\/a> which we have also shown a screenshot of here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/2024\/12\/Screenshot-2024-12-13-at-14.02.39.png\" alt=\"Illustration of what a text outlining an event should look like. You can find the info by clicking the link above this image\" class=\"wp-image-20954\" style=\"width:463px;height:auto\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Additionally, the image in this example could have alt text that reads something like, &#8220;A young Asian person on their own reads on their phone in their apartment which overlooks an exciting streetscape&#8221;.<\/li>\n<\/ul>\n\n\n\n<p>The information above the image is crucial &#8211; it would easily be read to the user who employs a screen reader in a perfectly accessible and logical manner. <\/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>If an image is used to hold the information by embedding text into it, then it is much less accessible:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/2024\/12\/science-cafe.png\" alt=\"Science Cafe event - is social media addictive?\" class=\"wp-image-20955\"\/><\/figure>\n\n\n\n<p>Now the image holds all the event information, it had become entirely inaccessible to those with visual disabilities. This is a great example of how a disability exists on a spectrum. We might think of those with a visual ability as being legally blind and using a screen reader.<\/p>\n\n\n\n<p>However the information in this image is now inaccessible to someone who is simply long-sighted &#8211; that&#8217;s 60% of the population. <\/p>\n\n\n\n<p>But the effect is also the same for someone viewing the event on a phone &#8211; it is impossible for almost anyone to read. The text is small and poorly contrasted with its inconsistent background. Making this image bigger doesn&#8217;t necessarily help. <\/p>\n\n\n\n<p>The data also becomes less portable.  A user cannot copy and paste the info into a text message to a friend.<\/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 class=\"myprefix-text-bold\">Usability<\/strong>: This content is less usable for everyone. It is harder to read, especially on a phone. It is not translatable in a browser. You cannot copy and paste the text.<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">SEO<\/strong>: None of the text is discoverable by a search engine. <\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">Marketing<\/strong>: A poor user experience like this does not reflect the university&#8217;s high standards, nor its commitment to accessibility. <\/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>From WCAG:<\/p>\n\n\n\n<p>&#8220;If authors can use text to achieve the same visual effect, they should present the information as text rather than using an image.&#8221;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/images-of-text-no-exception.html\">What WCAG says about this issue<\/a>.<\/p>\n\n\n\n<p>Does not generate an alert in WAVE (as it undetectable by software).<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images should not have text that is attempting to convey a meaning or message.<\/p>\n","protected":false},"author":6,"featured_media":0,"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,14,22,23],"class_list":["post-20953","page","type-page","status-publish","hentry","cu_page_type-accessibility","cu_page_type-general","cu_page_type-images","cu_page_type-text-and-hyperlinks"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20953","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=20953"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20953\/revisions"}],"predecessor-version":[{"id":21311,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20953\/revisions\/21311"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=20953"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=20953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}