{"id":219,"date":"2026-02-28T19:02:30","date_gmt":"2026-02-28T19:02:30","guid":{"rendered":"https:\/\/pressbooks.hcfl.edu\/hccdigitalaccessibility\/chapter\/long-description-guidelines\/"},"modified":"2026-04-16T19:02:15","modified_gmt":"2026-04-16T19:02:15","slug":"creating-image-descriptions","status":"publish","type":"chapter","link":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/chapter\/creating-image-descriptions\/","title":{"raw":"Creating Image Descriptions","rendered":"Creating Image Descriptions"},"content":{"raw":"<h2>Creating Image Descriptions<\/h2>\r\n<p data-start=\"97\" data-end=\"657\" data-is-last-node=\"\" data-is-only-node=\"\">Effective image descriptions are essential for making content accessible to all learners. Good image description practices include deciding when to use concise alt text, when to mark an image as decorative, and when a more detailed explanation is needed for a complex visual. While some images can be described in a few words, others\u2014such as charts, graphs, maps, and diagrams\u2014require more explanation to communicate their instructional purpose. This chapter explains how to choose the right type of image description, how alt text and long descriptions work together, and how AI tools can support the drafting process while still requiring human review.<\/p>\r\nhttps:\/\/youtu.be\/09qenLIsXwk\r\n\r\n[h5p id=\"24\"]\r\n<div class=\"textbox textbox--learning-objectives\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Learning Objectives<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nBy the end of this chapter, you should be able to:\r\n<ul>\r\n \t<li>Identify how to add descriptions to images.<\/li>\r\n \t<li>Explain the difference between alt text and a long description.<\/li>\r\n \t<li>Distinguish among informative, decorative, functional, and complex images.<\/li>\r\n \t<li>Identify ways to use AI to generate image descriptions.<\/li>\r\n \t<li>Choose an appropriate location for a long description.<\/li>\r\n \t<li>Format long descriptions so they are readable and accessible.<\/li>\r\n \t<li>Apply image description practices to charts, diagrams, maps, and other instructional visuals.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--key-terms\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Key Terms<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li><strong>Alt text:<\/strong> A brief text alternative that identifies the content or function of an image.<\/li>\r\n \t<li><strong>Long description:<\/strong> A more detailed explanation of a complex image that conveys information too extensive for alt text alone.<\/li>\r\n \t<li><strong>Decorative image:<\/strong> An image that adds visual style or design only and does not convey meaningful information. It should use empty alt text (<code>alt=\"\"<\/code>) so screen readers skip it.<\/li>\r\n \t<li><strong>Functional image:<\/strong> An image that acts as a button, link, or other interactive element, so its description should communicate the function rather than the appearance.<\/li>\r\n \t<li><strong>Complex image:<\/strong> An image such as a chart, graph, map, or diagram that contains detailed information necessary for understanding the surrounding content.<\/li>\r\n \t<li><strong>Instructional purpose:<\/strong> The reason an image is included in a learning resource and what readers need to understand from it.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h4>Chapter Overview<\/h4>\r\nThis chapter explains how to create accessible image descriptions for a range of visual content. It introduces the purpose of alt text, when to treat an image as decorative, when to write a long description, and how to describe visuals in ways that support learning. It also highlights examples of complex images and emphasizes formatting practices that improve readability and accessibility.\r\n<h4>Why Image Descriptions Matter<\/h4>\r\nImage descriptions help ensure that learners can access visual information regardless of how they interact with digital content. A student using a screen reader depends on text alternatives to understand what an image contributes to the page. Image descriptions can also help learners who have low bandwidth, who disable images, or who benefit from text-based explanations of visual material.\r\n\r\nIn educational content, an image description should focus on the image\u2019s instructional purpose. Instead of describing every visible detail, describe what the learner needs to know to understand the concept, process, relationship, or data being presented.\r\n<div class=\"textbox textbox--accessibility\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nAsk: \u201cWhat does this image contribute to learning?\u201d The answer should guide the description. Describe the instructional purpose, not every visual detail.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Types of Image Descriptions<\/h4>\r\nNot every image needs the same kind of description. Choosing the correct approach improves both accessibility and clarity.\r\n<ul>\r\n \t<li><strong>Informative images<\/strong> need concise alt text that communicates the key idea.<\/li>\r\n \t<li><strong>Decorative images<\/strong> should use empty alt text so assistive technologies skip them.<\/li>\r\n \t<li><strong>Functional images<\/strong> should be described by what they do, such as \u201cSearch\u201d or \u201cDownload syllabus.\u201d<\/li>\r\n \t<li><strong>Complex images<\/strong> usually need both short alt text and a longer description.<\/li>\r\n<\/ul>\r\nFor example, a photo used only to add visual interest may not need a spoken description, while a diagram of the water cycle or a chart showing enrollment trends may require more explanation.\r\n<h3 id=\"purpose-of-alternative-text\">Purpose of Alternative Text<\/h3>\r\nAlternative text, also known as alt text, is descriptive text that conveys the meaning or function of an image in digital content. It is designed to make visual content accessible to people with vision disabilities.\r\n\r\nWhen a person uses assistive technology such as a screen reader, the screen reader will read the onscreen text aloud. When the screen reader reaches an image, it will read the alt text for that image so the user can know what the image is meant to convey. Images can provide illustrative information, or they can act as buttons and similar interactive elements, so the alt text must describe these aspects to the user so they can respond appropriately.\r\n\r\nWithout alt text, people who use screen readers cannot access the content provided in the images. This is why alt text is a requirement in Section 508 guidance for creating digital content.\r\n\r\nAdditionally, alt text makes content accessible to other users, such as those who may have difficulty interpreting visual content or users without access to high-speed internet who cannot load images on the web. It also makes visual content available for technical applications such as search, digital assistants, and artificial intelligence tools.\r\n\r\nAlt text can be created simply by using some advanced AI tools. Tools like the <a href=\"https:\/\/teachonline.asu.edu\/image-accessibility-generator\/\">Image Accessibility Generator<\/a> from Arizona State University can make this process much easier.\r\n<h4>Writing Effective Alt Text<\/h4>\r\nEffective alt text is brief, purposeful, and connected to the learning context. A useful description usually answers one question: what does this image need to communicate here?\r\n\r\nKeep these practices in mind:\r\n<ul>\r\n \t<li>Be concise.<\/li>\r\n \t<li>Focus on the meaning or function of the image.<\/li>\r\n \t<li>Avoid beginning with phrases such as \u201cimage of\u201d or \u201cpicture of\u201d unless that distinction matters.<\/li>\r\n \t<li>Match the description to the surrounding content and learning goal.<\/li>\r\n \t<li>Do not repeat nearby text unless repetition is necessary for clarity.<\/li>\r\n<\/ul>\r\nFor example, if a chapter discusses a bar chart comparing graduation rates, the alt text should identify the chart and its topic rather than simply saying \u201cbar chart.\u201d\r\n<h4>Decorative and Functional Images<\/h4>\r\nSome images do not need a descriptive alt text, while others need a function-focused one.\r\n\r\nA decorative image does not add instructional meaning. For example, a patterned divider, background flourish, or stock image used only for visual appeal should use empty alt text (<code>alt=\"\"<\/code>) so screen readers skip it.\r\n\r\nA functional image does something. If an image is used as a button, link, or icon, the description should explain the action. For example:\r\n<ul>\r\n \t<li><strong>Functional alt text:<\/strong> <em>Submit assignment<\/em><\/li>\r\n \t<li><strong>Functional alt text:<\/strong> <em>Open chapter menu<\/em><\/li>\r\n<\/ul>\r\nThis helps users understand what will happen when they activate the image.\r\n<h4>When to Use a Long Description<\/h4>\r\nUse a long description when an image contains important details that cannot be communicated clearly in a short alt text field. Long descriptions are especially useful when the surrounding text depends on readers understanding the visual.\r\n\r\nCommon examples include:\r\n<ul>\r\n \t<li>Charts and graphs<\/li>\r\n \t<li>Flowcharts and organizational charts<\/li>\r\n \t<li>Diagrams and detailed illustrations<\/li>\r\n \t<li>Maps showing locations or patterns such as weather systems<\/li>\r\n \t<li>Timelines with multiple events or relationships<\/li>\r\n<\/ul>\r\n<div class=\"textbox textbox--accessibility\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nIf a reader cannot understand the important information in an image from alt text alone, the image likely needs a long description.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>How Alt Text and Long Descriptions Work Together<\/h4>\r\nImages that have a long description still need alt text. The alt text should be short and should connect the image to the longer explanation.\r\n\r\nFor example, the alt text might identify the image and point the reader to the longer description:\r\n<ul>\r\n \t<li><strong>Alt text:<\/strong> <em>Chart of enrollment trends, long description below.<\/em><\/li>\r\n \t<li><strong>Long description:<\/strong> <em>The chart shows that enrollment increased steadily from 2020 to 2024, with the largest rise occurring between 2022 and 2023.<\/em><\/li>\r\n<\/ul>\r\nThis approach gives readers a quick identifier in the alt text and then provides the full explanation in a more suitable location.\r\n<h4>Example<\/h4>\r\nA simple example might look like this:\r\n<ul>\r\n \t<li><strong>Alt text:<\/strong> <em>Graph A, long description below.<\/em><\/li>\r\n \t<li><strong>Long description:<\/strong> <em>Graph A shows that...<\/em><\/li>\r\n<\/ul>\r\n<h4>Formatting Long Descriptions<\/h4>\r\nLong descriptions should be formatted like other accessible content. Use headings, paragraphs, and lists when appropriate so the description is easy to read and navigate.\r\n\r\nFor charts and graphs, include a data table alongside the visual whenever possible. A table often provides a strong alternative way to present the same information.\r\n\r\nA strong long description often includes:\r\n<ul>\r\n \t<li>The type of image<\/li>\r\n \t<li>The topic or purpose of the visual<\/li>\r\n \t<li>The most important relationships, trends, or labels<\/li>\r\n \t<li>Any conclusions or patterns the learner needs to notice<\/li>\r\n<\/ul>\r\n<h4>Where to Place a Long Description<\/h4>\r\nBecause a long description is too detailed for an alt text field, place it in one of these locations:\r\n<ul>\r\n \t<li>In the surrounding page text, near the image<\/li>\r\n \t<li>In a linked document, such as a Word file, when space is limited<\/li>\r\n<\/ul>\r\nDescribing the image in the surrounding text is often the best option because it benefits all readers, not only those using assistive technology.\r\n<h4>Using AI to Generate Image Descriptions<\/h4>\r\nAI tools like the <a href=\"https:\/\/asuo-ai-labs.streamlit.app\/Image_Accessibility\">ASU Image Accessibility Creator<\/a> allow users to upload images and automatically generate alt text and detailed descriptions, helping streamline the creation of accessible content. While these tools provide a strong starting point, the output should always be reviewed and refined to ensure accuracy, clarity, and alignment with the learning context.\r\n\r\nAI can be especially useful for:\r\n<ul>\r\n \t<li>Generating a first draft of alt text<\/li>\r\n \t<li>Identifying visible elements in a complex image<\/li>\r\n \t<li>Drafting a longer explanation for charts, maps, and diagrams<\/li>\r\n \t<li>Helping revise descriptions for clarity and readability<\/li>\r\n<\/ul>\r\nAI can significantly support accessibility efforts, but human judgment remains essential to produce meaningful and effective image descriptions.\r\n<div class=\"textbox textbox--tip\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Instructor Tip<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nKeep alt text brief. Put detailed interpretation, relationships, and data patterns in the long description rather than trying to fit everything into the alt text field.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Reviewing Image Descriptions for Accessibility<\/h4>\r\nAfter writing image descriptions, review them as part of your normal accessibility check.\r\n\r\nAsk:\r\n<ul>\r\n \t<li>Does the description match the image\u2019s instructional purpose?<\/li>\r\n \t<li>Is the alt text concise and meaningful?<\/li>\r\n \t<li>Is the image decorative and better skipped with empty alt text?<\/li>\r\n \t<li>Does a complex image include a long description or alternative format such as a table?<\/li>\r\n \t<li>Can a learner understand the visual content without seeing the image?<\/li>\r\n<\/ul>\r\nThis review process helps ensure that image descriptions support both accessibility and comprehension.\r\n<div class=\"textbox textbox--summary\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Chapter Summary<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nAccessible image description involves more than writing long descriptions. It includes identifying the purpose of an image, deciding whether it is informative, decorative, functional, or complex, and selecting the right kind of text alternative. Alt text should be brief and meaningful, while complex images often require a longer description placed in surrounding text or another accessible location. AI tools can support this process, but human review is necessary to ensure clarity, accuracy, and instructional value.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Key Takeaways<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Not all images need the same kind of description.<\/li>\r\n \t<li>Alt text should communicate an image\u2019s meaning or function in context.<\/li>\r\n \t<li>Decorative images should use empty alt text so screen readers skip them.<\/li>\r\n \t<li>Complex images often require both alt text and a long description.<\/li>\r\n \t<li>Placing the description in surrounding text often benefits all readers.<\/li>\r\n \t<li>AI can help draft image descriptions, but human review is still essential.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Review Questions<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ol>\r\n \t<li>What is the difference between alt text and a long description?<\/li>\r\n \t<li>How can you tell whether an image is decorative, functional, or complex?<\/li>\r\n \t<li>Why is alt text alone sometimes not enough?<\/li>\r\n \t<li>Where can a long description be placed?<\/li>\r\n \t<li>What role should human review play when using AI to generate image descriptions?<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Practice Activity<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nFind three images in a course document or web page: one decorative image, one informative image, and one complex image such as a chart, map, or diagram. Decide what kind of description each image needs. Write empty alt text for the decorative image, concise alt text for the informative image, and both short alt text and a long description for the complex image. Then explain why each choice is appropriate.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Further Reading<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.chhs.colostate.edu\/accessibility\/best-practices-how-tos\/long-description\/\">Long Description best practices from Colorado State University<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">W3C guidance on complex images<\/a><\/li>\r\n \t<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">WebAIM guidance on alternative text<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox\">\r\n<h3>Licenses and Attribution<\/h3>\r\n<h4>CC Licensed Content, Original<\/h4>\r\nThis educational material includes AI-generated content from ChatGPT by OpenAI. The original content created by Josh Hill, Neida Abraham, and Emiliana Olavarrieta from Hillsborough College is licensed under a <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/4.0\/deed.en\">Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0)<\/a>.\r\n\r\nAll images in this textbook generated with DALL\u00b7E are licensed under the terms provided by OpenAI, allowing their use, modification, and distribution with appropriate attribution.\r\n<h5>Standards and Guidance<\/h5>\r\nThis chapter discusses alt text, decorative and functional images, and long descriptions for complex images. It refers readers to higher education accessibility guidance, W3C image tutorials, and image accessibility best practices.\r\n<h5>References<\/h5>\r\n<ul>\r\n \t<li>Arizona State University. (n.d.) <a href=\"https:\/\/teachonline.asu.edu\/image-accessibility-generator\/\">Image Accessibility Generator<\/a>.<\/li>\r\n \t<li>Colorado State University. (n.d.). <a href=\"https:\/\/www.chhs.colostate.edu\/accessibility\/best-practices-how-tos\/long-description\/\">Long description<\/a>.<\/li>\r\n \t<li>OpenAI. (2022, November 30). <a href=\"https:\/\/openai.com\/index\/chatgpt\/\">Introducing ChatGPT<\/a>.<\/li>\r\n \t<li>WebAIM. (n.d.). <a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">Alternative text<\/a>.<\/li>\r\n \t<li>World Wide Web Consortium, Web Accessibility Initiative. (n.d.). <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">Complex images<\/a>.<\/li>\r\n<\/ul>\r\n<h4>Other Licensed Content<\/h4>\r\n<strong>Day 8 Complex Images<\/strong>\r\nFoothill Online\r\nLicense: Standard YouTube License.\r\n\r\n<\/div>","rendered":"<h2>Creating Image Descriptions<\/h2>\n<p data-start=\"97\" data-end=\"657\" data-is-last-node=\"\" data-is-only-node=\"\">Effective image descriptions are essential for making content accessible to all learners. Good image description practices include deciding when to use concise alt text, when to mark an image as decorative, and when a more detailed explanation is needed for a complex visual. While some images can be described in a few words, others\u2014such as charts, graphs, maps, and diagrams\u2014require more explanation to communicate their instructional purpose. This chapter explains how to choose the right type of image description, how alt text and long descriptions work together, and how AI tools can support the drafting process while still requiring human review.<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Day 8  Complex Images\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/09qenLIsXwk?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div id=\"h5p-24\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-24\" class=\"h5p-iframe\" data-content-id=\"24\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Long description guidelines\"><\/iframe><\/div>\n<\/div>\n<div class=\"textbox textbox--learning-objectives\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Learning Objectives<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>By the end of this chapter, you should be able to:<\/p>\n<ul>\n<li>Identify how to add descriptions to images.<\/li>\n<li>Explain the difference between alt text and a long description.<\/li>\n<li>Distinguish among informative, decorative, functional, and complex images.<\/li>\n<li>Identify ways to use AI to generate image descriptions.<\/li>\n<li>Choose an appropriate location for a long description.<\/li>\n<li>Format long descriptions so they are readable and accessible.<\/li>\n<li>Apply image description practices to charts, diagrams, maps, and other instructional visuals.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--key-terms\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Key Terms<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li><strong>Alt text:<\/strong> A brief text alternative that identifies the content or function of an image.<\/li>\n<li><strong>Long description:<\/strong> A more detailed explanation of a complex image that conveys information too extensive for alt text alone.<\/li>\n<li><strong>Decorative image:<\/strong> An image that adds visual style or design only and does not convey meaningful information. It should use empty alt text (<code>alt=\"\"<\/code>) so screen readers skip it.<\/li>\n<li><strong>Functional image:<\/strong> An image that acts as a button, link, or other interactive element, so its description should communicate the function rather than the appearance.<\/li>\n<li><strong>Complex image:<\/strong> An image such as a chart, graph, map, or diagram that contains detailed information necessary for understanding the surrounding content.<\/li>\n<li><strong>Instructional purpose:<\/strong> The reason an image is included in a learning resource and what readers need to understand from it.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h4>Chapter Overview<\/h4>\n<p>This chapter explains how to create accessible image descriptions for a range of visual content. It introduces the purpose of alt text, when to treat an image as decorative, when to write a long description, and how to describe visuals in ways that support learning. It also highlights examples of complex images and emphasizes formatting practices that improve readability and accessibility.<\/p>\n<h4>Why Image Descriptions Matter<\/h4>\n<p>Image descriptions help ensure that learners can access visual information regardless of how they interact with digital content. A student using a screen reader depends on text alternatives to understand what an image contributes to the page. Image descriptions can also help learners who have low bandwidth, who disable images, or who benefit from text-based explanations of visual material.<\/p>\n<p>In educational content, an image description should focus on the image\u2019s instructional purpose. Instead of describing every visible detail, describe what the learner needs to know to understand the concept, process, relationship, or data being presented.<\/p>\n<div class=\"textbox textbox--accessibility\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Ask: \u201cWhat does this image contribute to learning?\u201d The answer should guide the description. Describe the instructional purpose, not every visual detail.<\/p>\n<\/div>\n<\/div>\n<h4>Types of Image Descriptions<\/h4>\n<p>Not every image needs the same kind of description. Choosing the correct approach improves both accessibility and clarity.<\/p>\n<ul>\n<li><strong>Informative images<\/strong> need concise alt text that communicates the key idea.<\/li>\n<li><strong>Decorative images<\/strong> should use empty alt text so assistive technologies skip them.<\/li>\n<li><strong>Functional images<\/strong> should be described by what they do, such as \u201cSearch\u201d or \u201cDownload syllabus.\u201d<\/li>\n<li><strong>Complex images<\/strong> usually need both short alt text and a longer description.<\/li>\n<\/ul>\n<p>For example, a photo used only to add visual interest may not need a spoken description, while a diagram of the water cycle or a chart showing enrollment trends may require more explanation.<\/p>\n<h3 id=\"purpose-of-alternative-text\">Purpose of Alternative Text<\/h3>\n<p>Alternative text, also known as alt text, is descriptive text that conveys the meaning or function of an image in digital content. It is designed to make visual content accessible to people with vision disabilities.<\/p>\n<p>When a person uses assistive technology such as a screen reader, the screen reader will read the onscreen text aloud. When the screen reader reaches an image, it will read the alt text for that image so the user can know what the image is meant to convey. Images can provide illustrative information, or they can act as buttons and similar interactive elements, so the alt text must describe these aspects to the user so they can respond appropriately.<\/p>\n<p>Without alt text, people who use screen readers cannot access the content provided in the images. This is why alt text is a requirement in Section 508 guidance for creating digital content.<\/p>\n<p>Additionally, alt text makes content accessible to other users, such as those who may have difficulty interpreting visual content or users without access to high-speed internet who cannot load images on the web. It also makes visual content available for technical applications such as search, digital assistants, and artificial intelligence tools.<\/p>\n<p>Alt text can be created simply by using some advanced AI tools. Tools like the <a href=\"https:\/\/teachonline.asu.edu\/image-accessibility-generator\/\">Image Accessibility Generator<\/a> from Arizona State University can make this process much easier.<\/p>\n<h4>Writing Effective Alt Text<\/h4>\n<p>Effective alt text is brief, purposeful, and connected to the learning context. A useful description usually answers one question: what does this image need to communicate here?<\/p>\n<p>Keep these practices in mind:<\/p>\n<ul>\n<li>Be concise.<\/li>\n<li>Focus on the meaning or function of the image.<\/li>\n<li>Avoid beginning with phrases such as \u201cimage of\u201d or \u201cpicture of\u201d unless that distinction matters.<\/li>\n<li>Match the description to the surrounding content and learning goal.<\/li>\n<li>Do not repeat nearby text unless repetition is necessary for clarity.<\/li>\n<\/ul>\n<p>For example, if a chapter discusses a bar chart comparing graduation rates, the alt text should identify the chart and its topic rather than simply saying \u201cbar chart.\u201d<\/p>\n<h4>Decorative and Functional Images<\/h4>\n<p>Some images do not need a descriptive alt text, while others need a function-focused one.<\/p>\n<p>A decorative image does not add instructional meaning. For example, a patterned divider, background flourish, or stock image used only for visual appeal should use empty alt text (<code>alt=\"\"<\/code>) so screen readers skip it.<\/p>\n<p>A functional image does something. If an image is used as a button, link, or icon, the description should explain the action. For example:<\/p>\n<ul>\n<li><strong>Functional alt text:<\/strong> <em>Submit assignment<\/em><\/li>\n<li><strong>Functional alt text:<\/strong> <em>Open chapter menu<\/em><\/li>\n<\/ul>\n<p>This helps users understand what will happen when they activate the image.<\/p>\n<h4>When to Use a Long Description<\/h4>\n<p>Use a long description when an image contains important details that cannot be communicated clearly in a short alt text field. Long descriptions are especially useful when the surrounding text depends on readers understanding the visual.<\/p>\n<p>Common examples include:<\/p>\n<ul>\n<li>Charts and graphs<\/li>\n<li>Flowcharts and organizational charts<\/li>\n<li>Diagrams and detailed illustrations<\/li>\n<li>Maps showing locations or patterns such as weather systems<\/li>\n<li>Timelines with multiple events or relationships<\/li>\n<\/ul>\n<div class=\"textbox textbox--accessibility\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>If a reader cannot understand the important information in an image from alt text alone, the image likely needs a long description.<\/p>\n<\/div>\n<\/div>\n<h4>How Alt Text and Long Descriptions Work Together<\/h4>\n<p>Images that have a long description still need alt text. The alt text should be short and should connect the image to the longer explanation.<\/p>\n<p>For example, the alt text might identify the image and point the reader to the longer description:<\/p>\n<ul>\n<li><strong>Alt text:<\/strong> <em>Chart of enrollment trends, long description below.<\/em><\/li>\n<li><strong>Long description:<\/strong> <em>The chart shows that enrollment increased steadily from 2020 to 2024, with the largest rise occurring between 2022 and 2023.<\/em><\/li>\n<\/ul>\n<p>This approach gives readers a quick identifier in the alt text and then provides the full explanation in a more suitable location.<\/p>\n<h4>Example<\/h4>\n<p>A simple example might look like this:<\/p>\n<ul>\n<li><strong>Alt text:<\/strong> <em>Graph A, long description below.<\/em><\/li>\n<li><strong>Long description:<\/strong> <em>Graph A shows that&#8230;<\/em><\/li>\n<\/ul>\n<h4>Formatting Long Descriptions<\/h4>\n<p>Long descriptions should be formatted like other accessible content. Use headings, paragraphs, and lists when appropriate so the description is easy to read and navigate.<\/p>\n<p>For charts and graphs, include a data table alongside the visual whenever possible. A table often provides a strong alternative way to present the same information.<\/p>\n<p>A strong long description often includes:<\/p>\n<ul>\n<li>The type of image<\/li>\n<li>The topic or purpose of the visual<\/li>\n<li>The most important relationships, trends, or labels<\/li>\n<li>Any conclusions or patterns the learner needs to notice<\/li>\n<\/ul>\n<h4>Where to Place a Long Description<\/h4>\n<p>Because a long description is too detailed for an alt text field, place it in one of these locations:<\/p>\n<ul>\n<li>In the surrounding page text, near the image<\/li>\n<li>In a linked document, such as a Word file, when space is limited<\/li>\n<\/ul>\n<p>Describing the image in the surrounding text is often the best option because it benefits all readers, not only those using assistive technology.<\/p>\n<h4>Using AI to Generate Image Descriptions<\/h4>\n<p>AI tools like the <a href=\"https:\/\/asuo-ai-labs.streamlit.app\/Image_Accessibility\">ASU Image Accessibility Creator<\/a> allow users to upload images and automatically generate alt text and detailed descriptions, helping streamline the creation of accessible content. While these tools provide a strong starting point, the output should always be reviewed and refined to ensure accuracy, clarity, and alignment with the learning context.<\/p>\n<p>AI can be especially useful for:<\/p>\n<ul>\n<li>Generating a first draft of alt text<\/li>\n<li>Identifying visible elements in a complex image<\/li>\n<li>Drafting a longer explanation for charts, maps, and diagrams<\/li>\n<li>Helping revise descriptions for clarity and readability<\/li>\n<\/ul>\n<p>AI can significantly support accessibility efforts, but human judgment remains essential to produce meaningful and effective image descriptions.<\/p>\n<div class=\"textbox textbox--tip\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Instructor Tip<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Keep alt text brief. Put detailed interpretation, relationships, and data patterns in the long description rather than trying to fit everything into the alt text field.<\/p>\n<\/div>\n<\/div>\n<h4>Reviewing Image Descriptions for Accessibility<\/h4>\n<p>After writing image descriptions, review them as part of your normal accessibility check.<\/p>\n<p>Ask:<\/p>\n<ul>\n<li>Does the description match the image\u2019s instructional purpose?<\/li>\n<li>Is the alt text concise and meaningful?<\/li>\n<li>Is the image decorative and better skipped with empty alt text?<\/li>\n<li>Does a complex image include a long description or alternative format such as a table?<\/li>\n<li>Can a learner understand the visual content without seeing the image?<\/li>\n<\/ul>\n<p>This review process helps ensure that image descriptions support both accessibility and comprehension.<\/p>\n<div class=\"textbox textbox--summary\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Chapter Summary<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Accessible image description involves more than writing long descriptions. It includes identifying the purpose of an image, deciding whether it is informative, decorative, functional, or complex, and selecting the right kind of text alternative. Alt text should be brief and meaningful, while complex images often require a longer description placed in surrounding text or another accessible location. AI tools can support this process, but human review is necessary to ensure clarity, accuracy, and instructional value.<\/p>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Key Takeaways<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Not all images need the same kind of description.<\/li>\n<li>Alt text should communicate an image\u2019s meaning or function in context.<\/li>\n<li>Decorative images should use empty alt text so screen readers skip them.<\/li>\n<li>Complex images often require both alt text and a long description.<\/li>\n<li>Placing the description in surrounding text often benefits all readers.<\/li>\n<li>AI can help draft image descriptions, but human review is still essential.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Review Questions<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ol>\n<li>What is the difference between alt text and a long description?<\/li>\n<li>How can you tell whether an image is decorative, functional, or complex?<\/li>\n<li>Why is alt text alone sometimes not enough?<\/li>\n<li>Where can a long description be placed?<\/li>\n<li>What role should human review play when using AI to generate image descriptions?<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Practice Activity<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Find three images in a course document or web page: one decorative image, one informative image, and one complex image such as a chart, map, or diagram. Decide what kind of description each image needs. Write empty alt text for the decorative image, concise alt text for the informative image, and both short alt text and a long description for the complex image. Then explain why each choice is appropriate.<\/p>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Further Reading<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li><a href=\"https:\/\/www.chhs.colostate.edu\/accessibility\/best-practices-how-tos\/long-description\/\">Long Description best practices from Colorado State University<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">W3C guidance on complex images<\/a><\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">WebAIM guidance on alternative text<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox\">\n<h3>Licenses and Attribution<\/h3>\n<h4>CC Licensed Content, Original<\/h4>\n<p>This educational material includes AI-generated content from ChatGPT by OpenAI. The original content created by Josh Hill, Neida Abraham, and Emiliana Olavarrieta from Hillsborough College is licensed under a <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/4.0\/deed.en\">Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0)<\/a>.<\/p>\n<p>All images in this textbook generated with DALL\u00b7E are licensed under the terms provided by OpenAI, allowing their use, modification, and distribution with appropriate attribution.<\/p>\n<h5>Standards and Guidance<\/h5>\n<p>This chapter discusses alt text, decorative and functional images, and long descriptions for complex images. It refers readers to higher education accessibility guidance, W3C image tutorials, and image accessibility best practices.<\/p>\n<h5>References<\/h5>\n<ul>\n<li>Arizona State University. (n.d.) <a href=\"https:\/\/teachonline.asu.edu\/image-accessibility-generator\/\">Image Accessibility Generator<\/a>.<\/li>\n<li>Colorado State University. (n.d.). <a href=\"https:\/\/www.chhs.colostate.edu\/accessibility\/best-practices-how-tos\/long-description\/\">Long description<\/a>.<\/li>\n<li>OpenAI. (2022, November 30). <a href=\"https:\/\/openai.com\/index\/chatgpt\/\">Introducing ChatGPT<\/a>.<\/li>\n<li>WebAIM. (n.d.). <a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">Alternative text<\/a>.<\/li>\n<li>World Wide Web Consortium, Web Accessibility Initiative. (n.d.). <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">Complex images<\/a>.<\/li>\n<\/ul>\n<h4>Other Licensed Content<\/h4>\n<p><strong>Day 8 Complex Images<\/strong><br \/>\nFoothill Online<br \/>\nLicense: Standard YouTube License.<\/p>\n<\/div>\n","protected":false},"author":2,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-219","chapter","type-chapter","status-publish","hentry"],"part":138,"_links":{"self":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":25,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/219\/revisions"}],"predecessor-version":[{"id":1306,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/219\/revisions\/1306"}],"part":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/parts\/138"}],"metadata":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/219\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/media?parent=219"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=219"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/contributor?post=219"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/license?post=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}