{"id":3445,"date":"2024-09-11T14:52:00","date_gmt":"2024-09-11T18:52:00","guid":{"rendered":"https:\/\/www.bates.edu\/wordpress\/?p=3445"},"modified":"2024-09-17T15:23:52","modified_gmt":"2024-09-17T19:23:52","slug":"alt-text-accessibility-improvement","status":"publish","type":"post","link":"https:\/\/www.bates.edu\/wordpress\/2024\/09\/11\/alt-text-accessibility-improvement\/","title":{"rendered":"Alternative Text and Web Accessibility"},"content":{"rendered":"\n<p>One of the most powerful ways we can improve the accessibility of our website is the creation of <em>alternative text<\/em> for images. Alternative text, or <em>alt text<\/em>, is a concise text description conveying the content or purpose of an image. Of our website\u2019s 36,000 images, some are missing alt text \u2014 therein lies our opportunity. This morning we introduced a feature in WordPress that will remind site managers to provide alt text before publishing new content. This reminder prompt will help us get closer to our accessibility goal of 100% of images having alt text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What&#8217;s Alt Text? Here&#8217;s an Example.<\/h2>\n\n\n\n<p>Check out the highlighted <em>Alternative Text<\/em> field in the right side of the screenshot below, &#8220;A piece of comb, oozing with wild honey.&#8221; Optimal alt text is descriptive, but also concise. For images that also have captions, the alt text can be simpler, to avoid redundancy. Alt text doesn&#8217;t appear visually on the frontend of the website, but it still provides value to the overall user experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"524\" src=\"https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/Screenshot-2024-08-27-at-10.09.54\u202fAM-900x524.webp\" alt=\"A piece of comb, oozing with wild honey.\" class=\"wp-image-3462\" srcset=\"https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/Screenshot-2024-08-27-at-10.09.54\u202fAM-900x524.webp 900w, https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/Screenshot-2024-08-27-at-10.09.54\u202fAM-400x233.webp 400w, https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/Screenshot-2024-08-27-at-10.09.54\u202fAM-768x447.webp 768w, https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/Screenshot-2024-08-27-at-10.09.54\u202fAM-1078x628.jpg 1078w, https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/Screenshot-2024-08-27-at-10.09.54\u202fAM.webp 1128w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption class=\"wp-element-caption\">A screenshot of the Alternative Text field when placing an image in WordPress.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Who is Asking for Alt Text?<\/h2>\n\n\n\n<p>Two of the largest advocates for alt text are the World Wide Web Consortium (W3C) \u2014 the main international standards organization for the web \u2014 and the United States Department of Justice \u2014 the government department tasked with the enforcement of federal law.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Who Benefits From Alt Text?<\/h2>\n\n\n\n<p>The short answer is, &#8220;everyone.&#8221; But here&#8217;s a more specific breakdown of who benefits from alt text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users of search engines, including the new generation of AI-fueled tools.<\/li>\n\n\n\n<li>Users wanting more information about an image.<\/li>\n\n\n\n<li>Users of screen readers, text to speech software, and non-graphical browsers.<\/li>\n\n\n\n<li>Users not loading images.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Alt Text Creation Tips<\/h2>\n\n\n\n<p>Again, alt text is a brief text description of an image. But more specifically, this description should focus on the content of the image as it relates to the overall content of the page it&#8217;s on. In other words, you&#8217;re not obligated to describe all of the elements of the image, only the elements that are relevant to your page&#8217;s content.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Tips<\/h6>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Describe the image&#8217;s content within the context of a page.<\/li>\n\n\n\n<li>For images that are link to other pages, describe the <em>purpose<\/em> of the link. e.g. &#8220;Follow us on Instagram.&#8221;<\/li>\n\n\n\n<li>Keep it concise. A few words; a sentence at most. 125 characters is a good guide.<\/li>\n\n\n\n<li>Don\u2019t start with \u201cimage of,\u201d but do specify medium if not photo. Ex. Illustration, painting, logo, etc.<\/li>\n\n\n\n<li>Minimize redundancy by avoiding duplication of surrounding text. E.g. caption or page text.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Alt Text Edge Cases<\/h2>\n\n\n\n<p>Since multiple factors inform what optimal alt text is, it&#8217;s hard to prescribe absolute rules for the creation of alt text. Here are a few examples that demonstrate how alt text rules can break down.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">The rare case when alt text isn&#8217;t required<\/h6>\n\n\n\n<p>Practically speaking, all images need alt text. Per the W3C guidelines, though, there is one small exception: decorative images. And while it&#8217;s ultimately more accessible to implement decorative images with CSS rather than HTML, the W3C does allow the practice. In these rare instances when decorative images are implemented with HTML, the most accessible option is to keep their alt text fields empty. <\/p>\n\n\n\n<h6 class=\"wp-block-heading\">What&#8217;s missing in bulk alt text and accessibility reports <\/h6>\n\n\n\n<p>Conversely, just because alt text exists, that doesn\u2019t mean that it conveys the \u201ccontent or purpose\u201d of the image. If a site manager is populating alt text fields with irrelevant content such as &#8220;Image,&#8221; then their web pages won&#8217;t be accessible, even though their alt text fields are populated. The practice of populating alt text fields just to populate them will get your content to pass most bulk accessibility tests, but it won&#8217;t make your content more accessible to your audiences. For this reason, regularly reviewing your images&#8217; alt text individually (and not in bulk) is recommended.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Choose concision over detail<\/h6>\n\n\n\n<p>More descriptive alt text isn\u2019t better; concise alt text is better. When detailed descriptions are needed, rely on your primary page content and image captions. While it&#8217;s true that businesses optimizing their content for search engine results do rely on long, descriptive alt text, they are valuing traffic volume over web accessibility. Since we&#8217;re elevating accessibility, we can choose concision in our alt text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>One of the most powerful ways we can improve the accessibility of our website is the creation of <em>alt text<\/em> for images. We have the opportunity to create alt text for many images on www.bates.edu. Thanks for your help in moving us closer to our accessibility goal of 100% of images having alt text.<\/p>\n\n\n\n<section class=\"wp-block-bates-shortcodes-highlight highlight-box is-style-blue\">\n<h3 class=\"wp-block-heading\">Alt Tags vs. Alt Text, a Technical Note<\/h3>\n\n\n\n<p>You&#8217;ll hear both terms in the conversation. <em>Alt tags<\/em> are the HTML containers for alt text. <em>Alt text<\/em> is the text that populates these containers. Per the World Wide Web Consortium (W3C), all images need alt tags, but not all images require alt text.<\/p>\n\n\n\n<p>Here&#8217;s what a populated alt tag looks like in the context of an image&#8217;s HTML. Fortunately our CMS, WordPress, takes care of adding alt tags to every image for us. We just need to focus on populating the text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;img fetchpriority=&#8221;high&#8221; decoding=&#8221;async&#8221; width=&#8221;900&#8243; height=&#8221;600&#8243; src=&#8221;https:\/\/www.bates.edu\/wordpress\/files\/2024\/08\/240725_Hathorn_honeybee_9783_hjb-900&#215;600.webp&#8221; <strong><span style=\"text-decoration: underline;\">alt=&#8221;A piece of comb, oozing with wild honey.&#8221;<\/span><\/strong> class=&#8221;wp-image-3448&#8243;&gt;<\/li>\n<\/ul>\n<\/section>\n\n\n\n<h3 class=\"wp-block-heading\">Additional Resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">Web Accessibility in Mind<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/accessibility.huit.harvard.edu\/describe-content-images\">Harvard Digital Accessibility<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wcag.com\/blog\/good-alt-text-bad-alt-text-making-your-content-perceivable\/\">WCAG Alt text<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/images.html#alt\">Web Hypertext Application Technology Working Group<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>One of the most powerful ways we can improve the accessibility of&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_hide_ai_chatbot":false,"_ai_chatbot_style":"","associated_faculty":[],"_Page_Specific_Css":"","_bates_restrict_mod":false,"_batesModPostContentOverride_prepend":false,"_batesModPostContentOverride_append":false,"_batesModPostContentOverride_append_before_footer":false,"_table_of_contents_display":false,"_table_of_contents_location":"","_table_of_contents_disableSticky":false,"_is_featured":false,"footnotes":"","_bates_seo_meta_description":"","_bates_seo_block_robots":false,"_bates_seo_sharing_image_id":0,"_bates_seo_sharing_image_twitter_id":0,"_bates_seo_share_title":"","_bates_seo_canonical_overwrite":"","_bates_seo_twitter_template":""},"categories":[1],"tags":[],"class_list":["post-3445","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/posts\/3445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=3445"}],"version-history":[{"count":20,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/posts\/3445\/revisions"}],"predecessor-version":[{"id":3526,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/posts\/3445\/revisions\/3526"}],"wp:attachment":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=3445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/categories?post=3445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/tags?post=3445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}