{"id":26,"date":"2023-01-04T08:00:41","date_gmt":"2023-01-04T16:00:41","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=26"},"modified":"2025-09-26T12:21:01","modified_gmt":"2025-09-26T19:21:01","slug":"images","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/images\/","title":{"rendered":"Images"},"content":{"rendered":"<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"importance-of-images\">Importance of Images<\/h2>\n\n\n\n<p>Images can add visual interest to the content, help people orient themselves within the content, and provide complementary information to assist with understanding the content. However, images can create barriers when they are not accessible. Images that are not accessible may cause people to miss contextual information conveyed by images, and images with motion may adversely affect some viewers.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n<section  class=\"wsu-section wsu-width--full wsu-spacing-after--large\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"alternative-text\">Alternative Text<\/h2>\n\n\n\n<p class=\"wsu-spacing-after--small\">To improve the accessibility of images, a textual substitute called alternative text (alt text) is provided to meaningfully convey image content or function. Alt text has several benefits, including:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">Assistive technology<\/a> can read alternative text in place of images to help people with visual or cognitive impairments.<\/li><li>Web browsers and other applications can present the alternative text when images do not load.<\/li><li>Search engines use alternative text when indexing web pages.<\/li><\/ul>\n\n\n\n<p class=\"wsu-spacing-after--small\">Alternative text can be provided in two ways:<\/p>\n\n\n\n<ol type=\"1\"><li>By using <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/application-formatting-tools\/\">application formatting tools<\/a> (e.g., an alternative text field or HTML alt tag), or<\/li><li>By placing visible text near the image (e.g., a caption).<\/li><\/ol>\n\n\n\n<p><\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n<p><\/p>\n\n    <\/div><\/section>\n\n\n<h2 id=\"images-with-text\">Images With Text<\/h2>\n\n\n<div class=\"wsu-row wsu-row--sidebar-right\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<p class=\"wsu-spacing-after--small\">Plain text should be used to convey information rather than images of text unless:<\/p>\n\n\n\n<ul><li>the presentation of the text is essential to the information being conveyed, and<\/li><li>the presentation cannot be reproduced with the technology being used (e.g., a logo or traffic sign).<\/li><\/ul>\n\n\n\n<p>If an image with text is necessary, all text that is part of the image must be duplicated as alt text by using <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/application-formatting-tools\/\">application formatting tools<\/a> or by placing visible text near the image on the page.<\/p>\n\n\n\n<p><\/p>\n\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2022\/05\/images-cougars-only-parking.jpg\" alt=\"Sign with Washington State University logo that reads Reserved Parking Cougars Only.\" class=\"wp-image-104\" width=\"186\" height=\"272\" srcset=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2022\/05\/images-cougars-only-parking.jpg 248w, https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2022\/05\/images-cougars-only-parking-135x198.jpg 135w\" sizes=\"(max-width: 186px) 100vw, 186px\" \/><\/figure>\n\n\n\n<p><strong>Example:<\/strong> Alternative text for the image above might be, \u201cSign with Washington State University logo that reads Reserved Parking Cougars Only.\u201d<\/p>\n\n<\/div>\r\n\n<\/div>\n\n<section  class=\"wsu-section wsu-width--full wsu-spacing-after--large\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"decorative-images\">Decorative Images<\/h2>\n\n\n\n<p>Decorative images are those that do not convey important content, are used only for layout or aesthetic purposes, or do not have a function (e.g., are not links). Decorative images must be implemented in a way that can be ignored by assistive technology. This will improve the experience for people using assistive technology.<\/p>\n\n\n\n<p class=\"wsu-spacing-after--small\"><strong>Example<\/strong>: A divider created using multiple dot images.<br><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><img class=\"wp-image-105\" style=\"width: 28px\" src=\"https:\/\/s3.wp.wsu.edu\/uploads\/sites\/2986\/2023\/10\/images-dot.png\" alt=\"dot\"><\/p>\n\n\n\n<p>If each of the images included \u201cdot\u201d as alternative text, assistive technology would consider the images important and read, \u201cGraphic dot. Graphic dot. Graphic dot. Graphic dot. Graphic dot.\u201d This creates a poor experience.<\/p>\n\n<\/div>\r\n\n<\/div>\n    <\/div><\/section>\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"linked-images\">Linked Images<\/h2>\n\n\n\n<p>Alternative text is required on linked images and must describe the link action, <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/link-destination\/\">destination<\/a>, or function instead of the image content.<\/p>\n\n\n\n<p>If an image without alternative text is the only content in a link, assistive technology may read the image file name or the URL which does not help people understand the link action, destination, or function.<\/p>\n\n\n\n<p>Alternative text on linked images can be provided using <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/application-formatting-tools\/\">application formatting tools<\/a> or as adjacent visible text within the link.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n<section  class=\"wsu-section wsu-width--full wsu-spacing-after--large\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"complex-images\">Complex Images<\/h2>\n\n\n\n<p>Complex images are intended to convey a lot of information such as flyers, charts, graphs, diagrams, and maps. When an equivalent textual substitute cannot be provided as short alternative text, the textual substitute must be provided elsewhere. Options include:<\/p>\n\n\n\n<ul class=\"wsu-spacing-after--xxsmall\"><li>A detailed description and\/or a data table adjacent to the image on the same page.<\/li><li>A link to a separate page with detailed information about the image. The link can be adjacent to the image or the image itself can be linked.<\/li><\/ul>\n\n\n\n<p>When using these options, alternative text is still necessary on complex images. It should describe the image in general terms or, if the image is linked, the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/link-destination\/\">link destination<\/a>.<\/p>\n\n<\/div>\r\n\n<\/div>\n    <\/div><\/section>\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"images-with-motion\">Images with Motion<\/h2>\n\n\n\n<p>Some people may experience adverse reactions to animated content (e.g., blinking\/flashing, scrolling, animated backgrounds).<\/p>\n\n\n\n<p>Provide a way to pause, stop, or hide any movement that starts automatically, lasts for more than five seconds, or flashes more than three times in any one-second period.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<section  class=\"wsu-section  wsu-width--full wsu-position--relative\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-lines-gray  wsu-decorator--white\" style=\"bottom:-15px;left:-15px;height:60%;width:60%\"><\/div>\n\n<div class=\"wsu-container wsu-spacing-bottom--xxmedium wsu-spacing-padding-left--xxmedium wsu-spacing-padding-right--xxmedium wsu-border--add-top wsu-border--color-autumn wsu-spacing-top--medium wsu-color-background--white wsu-spacing-after--xxmedium wsu-position--relative wsu-zindex--level-1 wsu-notch--small\" >\r\n    \n\n<h2 id=\"common-errors\">Common Errors<\/h2>\n\n\n\n<p>These common errors hinder the accessibility and usability of images:<\/p>\n\n\n\n<ul class=\"wsu-list--style-arrow\"><li>Images that are not decorative are missing alternative text.<\/li><li>Alternative text does not meaningfully describe the image content or function.<\/li><li>Images that contain text (e.g., images of event flyers) do not duplicate the text as alt text.<\/li><li>Complex images are not described in detail.<\/li><li>Images with motion cannot be paused, stopped, or hidden by the viewer.<\/li><\/ul>\n\n<\/div>\n<\/div>\n    <\/div><\/section>\n\n<section  class=\"wsu-section  wsu-width--full wsu-color-background--white\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-lines-gray\" style=\"top:-20px;right:-20px;height:40%;width:40%\"><\/div>\n\n<div class=\"wsu-callout  wsu-color-background--gray-5 wsu-callout--color-vineyard wsu-notch--small wsu-position--relative\" >\r\n        \n\n<h2 id=\"best-practices\">Best Practices<\/h2>\n\n\n\n<p class=\"wsu-spacing-after--xsmall\">Follow these best practices to improve the accessibility and usability of images in your digital content.<\/p>\n\n\n\n<ul class=\"wsu-list--style-arrow\"><li>Keep the alternative text short (less than 150 characters) and use proper punctuation.<\/li><li>Adjust alternative text so it is meaningful within the context of the content the image is used with.<\/li><li>Ensure page content makes sense when images are hidden and replaced by their alternative text.<\/li><li>Duplicate all meaningful text that is part of an image as alternative text.<\/li><li>Describe complex images in detail.<\/li><li>Use visible text such as a caption for information meant for everyone, e.g., image copyright\/attribution.<\/li><li>Do not begin the alternative text with phrases such as \u201cimage of,\u201d \u201cphoto of,\u201d or \u201cgraphic of\u201d as <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technology<\/a> automatically announces images.<\/li><li>Provide a way to pause images with auto-playing motion.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n<\/div>\r\n\n<\/div>\n    <\/div><\/section>\n\n<section  class=\"wsu-section  wsu-width--full wsu-color-background--gray-5\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-block-gray\" style=\"bottom:-15px;left:-15px;height:60%;width:60%\"><\/div>\n\n<div class=\"wsu-callout wsu-callout--color-crimson wsu-spacing-padding-left--xxmedium wsu-spacing-padding-right--xxmedium wsu-color-background--white wsu-notch--small wsu-position--relative\" >\r\n        \n\n<h2 id=\"accessibility-checks\">Accessibility Checks&nbsp;<\/h2>\n\n\n\n<p>Use this checklist as a guide to ensure your images are in an accessible format.<\/p>\n\n\n\n<ul class=\"wsu-list--checkmark\"><li>Image content or function is described with alternative text.<\/li><li>Decorative images are implemented in a way that can be ignored by <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technology<\/a>.<\/li><li>Complex images are described in detail.<\/li><li>Text that is part of an image is duplicated as alternative text.<\/li><li>Images with motion can be paused by the viewer.<\/li><\/ul>\n\n<\/div>\r\n\n\n\n<p><\/p>\n\n<\/div>\n\n<div class=\"wsu-cta \" >\n\t<a \t\t\t\t\thref=\"https:\/\/wsu.edu\/digital-accessibility\/documents\/2023\/10\/core-concept-check-sheet.pdf\/\"\t\n\t\tclass=\"wsu-button \">\n\t\t\t\n\t\tDownload Digital Accessibility Check Sheet (PDF)\u00a0\t\t\t\t\t<i class=\"wsu-icon wsu-i-download\"><\/i>\n\t\t\t<\/a>\n<\/div>\n\n    <\/div><\/section>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<section  class=\"wsu-section\"  >\r\n        \n\n<h2>Resources from WSU Digital Accessibility<\/h2>\n\n\n<div class=\"wsu-card-wrapper wsu-card-wrapper--per-row-3\" >\r\n    \n<article class=\"wsu-card  wsu-color-background--white wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title \">\r\n\t\t\t<a href=\"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/images\/images-and-accessibility\/\">\t\t\t\tImages and Accessibility\t\t\t<\/a>\t\t<\/h3>\r\n\t\t\t\t\t\t<div class=\"wsu-caption\">\r\n\t\t\tA review of alt text and images accessibility errors and alerts with best practice information, tools for checking, and additional resources about alt text and images.\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t<\/article>\n<\/div>\n    <\/section>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column wsu-spacing-top--default wsu-spacing-before--xxmedium\"  style=\"\">\r\n\t\n\n<h2 class=\"wsu-spacing-after--xxmedium\" id=\"accessibility-checks\">Additional Resources<\/h2>\n\n\n<div class=\"wsu-card-wrapper wsu-card-wrapper--per-row-2\" >\r\n    \n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tWebpages\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul id=\"block-b1cbdb77-18a3-4236-8189-48ecaf6eb8bf\" class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/webaim.org\/techniques\/images\/\"><strong>WebAIM<\/strong>: Accessible Images<\/a><\/li><li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\"><strong>WebAIM<\/strong>: Alternative Text<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\"><strong>W3C WAI<\/strong>: Image Tutorial<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\"><strong>W3C WAI<\/strong>: Alt Text Decision Tree<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n\n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tDigital Documents\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.section508.gov\/create\/documents\/\"><strong>Section508.gov<\/strong>: Creating Accessible Documents<\/a><\/li><li><a href=\"https:\/\/www.section508.gov\/training\/presentations\/aed-cop-pptx07\/\"><strong>Section508.gov<\/strong>: Module 7: Adding Alternative Text to Images and Other Objects<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n\n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tPDF Documents\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.section508.gov\/training\/pdfs\/aed-cop-pdf03\/\"><strong>Section508.gov<\/strong>: Module 3: Remediating PDFs for Accessibility<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n\n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tPresentation\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.section508.gov\/create\/presentations\/\"><strong>Section508.gov<\/strong>: Creating Accessible Presentations<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n<\/div>\n<\/div>\r\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Alternative text provides textual substitute called alternative text (alt text) to convey the image&#8217;s content or function.<\/p>\n","protected":false},"author":2695,"featured_media":0,"parent":15,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[9],"tags":[],"wsuwp_university_category":[],"wsuwp_university_location":[],"wsuwp_university_org":[],"_links":{"self":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/26"}],"collection":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/users\/2695"}],"replies":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":49,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":3381,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/26\/revisions\/3381"}],"up":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/tags?post=26"},{"taxonomy":"wsuwp_university_category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_category?post=26"},{"taxonomy":"wsuwp_university_location","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_location?post=26"},{"taxonomy":"wsuwp_university_org","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_org?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}