{"id":557,"date":"2020-11-30T21:19:47","date_gmt":"2020-11-30T15:49:47","guid":{"rendered":"https:\/\/www.createagile.com\/blog\/?p=557"},"modified":"2020-11-30T21:19:47","modified_gmt":"2020-11-30T15:49:47","slug":"image-alt-text-web-accessibility","status":"publish","type":"post","link":"https:\/\/www.createagile.com\/blog\/image-alt-text-web-accessibility\/","title":{"rendered":"Image Alt Text &#038; Web Accessibility"},"content":{"rendered":"<p>Web accessibility is such an important consideration for website owners because you could be unknowingly creating barriers to your site for those with a disability.<\/p>\n<p>Adding alternative text to your website images is a critical part of web accessibility and helps visually impaired users navigate your site. Failing to offer alt text on images is also a common complaint in ADA lawsuits. While this may sound like a technical step, it\u2019s actually very easy to add alt text in WordPress.<\/p>\n<h3>What is an Image Alt Text?<\/h3>\n<p>Alternative text or \u201calt text\u201d (also incorrectly called \u201calt tags\u201d) is the written text that describes the appearance and function of an image on a web page.<\/p>\n<p>Screen reading tools rely on alt text to describe the images on the website to visually impaired visitors.\u00a0 You may also hear the terms \u201calt text\u201d or \u201calt tags\u201d mentioned in relation to search engine optimization, but their primary purpose is web accessibility.<\/p>\n<h3>Why is Alt Text Important?<\/h3>\n<p>Understanding and adding alt text to images on your website is so important for several reasons:<\/p>\n<ul>\n<li>Images are used extensively on all websites, so they can become great barriers when they are not accessible.<\/li>\n<li>Adding alt text to images is a WCAG 2.1 requirement. The WCAG stands for Web Content Accessibility Guidelines and it is considered the global legal standard for web accessibility.<\/li>\n<li>Failing to provide alt text on images is the most common cause for filing an ADA lawsuit against businesses for non-accessible websites<\/li>\n<\/ul>\n<h3>How Do You Write Good Alt Text?<\/h3>\n<p>Your website is made up of various types of images. Some may be decorative and graphical, while others convey important information.<\/p>\n<p>The W3C Web Accessibility Initiative provides one of the best resources on writing alternative text here:\u00a0<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3.org\/WAI\/tutorials\/images\/<\/a><\/p>\n<p>Here are a few guidelines for common types of images on your site:<\/p>\n<ul>\n<li><strong>Informative:<\/strong>\u00a0these are often pictures and illustrations that represent information and add context to the messaging on the page. For these images, the text alternative should be a short description of the image.<br \/>\nFor example, a stock image on a service page or an image of a product in a product catalog.<\/li>\n<\/ul>\n<ul>\n<li><strong>Functional:<\/strong>\u00a0if the image is also a link, then the text alternative should describe the functionality of the link and not the visual image.<br \/>\nFor example, an image representing a case study or a featured product that links to a specific page.<\/li>\n<\/ul>\n<ul>\n<li><strong>Decorative:<\/strong>\u00a0if the image\u2019s sole purpose is to add visual decoration to the page and doesn\u2019t convey any information, then you can skip the alternative text. For example, a background image of geometric shapes used in a panel on a web page.<\/li>\n<\/ul>\n<p>In addition to considering the role of the image on the website, here are some tips for writing accurate alt text:<\/p>\n<ul>\n<li>Describe the image as specifically as possible<\/li>\n<li>Keep it relatively short. (Most screen readers cut off the alt text after 125 characters)<\/li>\n<li>Don\u2019t include \u201cpicture of\u201d or \u201cimage of\u201d in your alt text.<\/li>\n<li>Avoid stuffing keywords into your alternative text<\/li>\n<\/ul>\n<h3>How Do You Add Alt Text in WordPress?<\/h3>\n<p>As a content management system, WordPress makes it very easy to add alt text to each image.<\/p>\n<p>When you upload an image to the media library, there is a field to enter the Alternative Text for the image (see below). WordPress recently added a link to the Web Accessibility Initiative\u2019s\u00a0<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\" target=\"_blank\" rel=\"noopener noreferrer\">guide on alt text<\/a>\u00a0that provides further tips on writing good alt text.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-561\" src=\"https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip.png\" alt=\"\" width=\"1308\" height=\"564\" srcset=\"https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip.png 1308w, https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-300x129.png 300w, https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-1024x442.png 1024w, https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-768x331.png 768w\" sizes=\"auto, (max-width: 1308px) 100vw, 1308px\" \/><\/a><\/p>\n<p>If you are utilizing the visual editor or Page Builder and already uploaded an image and inserted it into a post, you can select the edit option and add the alternative text in the image editing interface.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-563\" src=\"https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-2.png\" alt=\"\" width=\"1090\" height=\"571\" srcset=\"https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-2.png 1090w, https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-2-300x157.png 300w, https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-2-1024x536.png 1024w, https:\/\/www.createagile.com\/blog\/wp-content\/uploads\/2020\/11\/tempsnip-2-768x402.png 768w\" sizes=\"auto, (max-width: 1090px) 100vw, 1090px\" \/><\/a><\/p>\n<p>When you upload an image to your WordPress site, you\u2019ll notice that the title will automatically populate and take the name of the image file. You can edit the title in these areas as well.<\/p>\n<p>However, the title of the image does not impact and help with web accessibility. You\u2019ll need to enter an alternative text for the image if it\u2019s not solely decorative.<\/p>\n<p>If you have any questions on adding alt text to images, feel free to reach out to our team.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web accessibility is such an important consideration for website owners because you could be unknowingly creating barriers to your site&hellip;<\/p>\n","protected":false},"author":2,"featured_media":564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,66,25,38,67],"tags":[],"class_list":["post-557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-seo-2","category-web-design","category-web-development","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/posts\/557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/comments?post=557"}],"version-history":[{"count":1,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/posts\/557\/revisions"}],"predecessor-version":[{"id":565,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/posts\/557\/revisions\/565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/media\/564"}],"wp:attachment":[{"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/media?parent=557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/categories?post=557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.createagile.com\/blog\/wp-json\/wp\/v2\/tags?post=557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}