{"id":258,"date":"2018-06-11T16:16:57","date_gmt":"2018-06-11T16:16:57","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/iotb\/chapter\/images\/"},"modified":"2024-09-19T04:15:32","modified_gmt":"2024-09-19T04:15:32","slug":"images","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/iotb\/chapter\/images\/","title":{"raw":"Images","rendered":"Images"},"content":{"raw":"In this section, we provide recommendations to guide your inclusion of accessible, image-based content.\n<h1>What are images?<\/h1>\nImages are non-text elements that include\u00a0photographs, illustrations, diagrams, pictures, charts, graphs, and maps.\n\n<strong>File types used<\/strong>: GIF, JPG, PNG\n<h1>Why are you including the images you have selected?<\/h1>\nBefore you can determine what to do to make an image\u00a0accessible, you must identify its <em>purpose<\/em> or <em>value<\/em> to your textbook. Consider the following questions:\n<ol>\n \t<li>Does your image serve a\u00a0<a title=\"Functional Images\" href=\"#functional\">functional<\/a> purpose?\u00a0In other words, is it conveying non-text content to students? If so, you should:\n<ol type=\"a\">\n \t<li>provide a text alternative that serves the equivalent purpose of the non-text material[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,\"\u00a0<em>W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.[\/footnote]<\/li>\n \t<li>not use colour as the only visual means of conveying information[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\"\u00a0<em>W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.[\/footnote]<\/li>\n<\/ol>\n<\/li>\n \t<li>Does your image serve more of a\u00a0<a title=\"Decorative Images\" href=\"#decorative\">decorative<\/a> purpose?\u00a0In other words, is it primarily a design element that does not convey content? If so, you should:\n<ol type=\"a\">\n \t<li>avoid unnecessary text descriptions<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h1>Who are you doing this for?<\/h1>\nThis work supports students who:\n<ul>\n \t<li>Are blind or have low vision, like <a title=\"Full description of Jacob's profile\" href=\"\/\/chapter\/using-personas\/#Jacob\">Jacob<\/a><\/li>\n \t<li>Have poor contrast vision<\/li>\n \t<li>Are colour blind and cannot differentiate between certain colours<\/li>\n \t<li>Use a device with monochrome display<\/li>\n \t<li>Use a print copy that is in black and white<\/li>\n \t<li>Have limited Internet access and cannot download images<\/li>\n \t<li>Have a form of\u00a0cognitive disability<\/li>\n<\/ul>\n<img class=\"aligncenter wp-image-246 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1.jpg\" alt=\"Jacob is blind\" width=\"300\" height=\"225\">\n\n<hr>\n\n<h1>What do you need to do?<\/h1>\nDetermine the role of each image used in content as either functional or decorative. Once that has been decided, select how each image will meet accessibility needs by providing descriptive text in a variety of ways. Figures, such as charts and graphs that rely on colour to convey information, should also be evaluated for accessibility by students who are unable to distinguish between or see colour.\n<h1><a id=\"functional\" href=\"\"><\/a>Functional images<\/h1>\nConsider what your content page would look like if the images didn\u2019t load. Now try writing alternative text for each image that would work as a replacement and provide the same information as the image.\n\nThere are three ways to provide alternative text descriptions for images:\n<ol>\n \t<li>Describe the image in the <a href=\"#intext\">surrounding text<\/a>.<\/li>\n \t<li>Describe the image in the <a href=\"#alt\">alt tag<\/a>.<\/li>\n \t<li>Create and link to a <a href=\"#longdescription\">long description<\/a> of the image.<\/li>\n<\/ol>\nAs you work on developing your\u00a0alternative text descriptions, keep the following recommendations and guidelines in mind:\n<ul>\n \t<li>Remember that alternative text must convey the content and functionality of an image, and is rarely a literal\u00a0description of the image (e.g., \u201cphoto of cat<em>\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.[footnote]\"Alt text blunders,\"\u00a0<em>WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext.[\/footnote]<\/li>\n \t<li>For relatively simple images (e.g., photographs, illustrations), try to keep your text descriptions short. You should aim to create a brief alternative (one or two short sentences) that is an accurate and concise equivalent to the information in the image.<\/li>\n \t<li>For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- or two-sentence description to ensure all users will benefit from the content or context you\u00a0intend to provide.<\/li>\n \t<li>Leave out unnecessary information. For example, you do not need to include information like \u201cimage of\u2026\u201d or \u201cphoto of\u2026\u201d; assistive technologies will automatically\u00a0identify the material as an image, so including that detail in your alternative description is redundant.<\/li>\n \t<li>Avoid redundancy of content in your alternative description. Don\u2019t\u00a0repeat information that already appears in text adjacent\u00a0to the image.<\/li>\n<\/ul>\n<div class=\"textbox shaded\">For strategies on how to make complex visuals such as graphs, tables, charts, and more accessible, see the following resource created by Supada Amornchat (CC BY-NC-SA): <a href=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/complex-images.pdf\">Describing Complex Images for All Learners [PDF]<\/a>.<\/div>\n<h2 id=\"surroundingtext\"><a id=\"intext\" href=\"\"><\/a>Descriptions in surrounding text<\/h2>\nYou can use the surrounding text to provide the same information as conveyed by the image. This is often the best option for complex images because it makes the information available for everyone, not just those using the alt tags.\n\nIf you are editing someone else's work for accessibility, you are probably not at liberty to start adding to the main text. However, if you are the author, this is the best and easiest option.\n\nIf an image has been adequately described in the surrounding text, you can either provide a few-word description of the image in the alt tag or follow the procedures for <a href=\"#decorative\">decorative images<\/a>.\n<h2><a id=\"alt\" href=\"\"><\/a>Alt tags<\/h2>\nAn alt tag refers to the alt attribute (<em>alt<\/em> is short for alternative) within an IMG tag. All images uploaded into Pressbooks have an alt tag, but for them to be useful, you need to insert an image description.\n\nAlt tags are used in two cases:\n<ol>\n \t<li>When an image doesn't download due slow Internet, the alt tag content will display instead of the image.<\/li>\n \t<li>For people who are visually impaired and use screen readers, when a screen reader finds an image, it will read out the content of the alt tag.<\/li>\n<\/ol>\nAlt tags should be no longer than 125 characters, including spaces and punctuation.[footnote]All screen readers are different, so a 125-character max is a recommendation. Other sources may provide a different number.[\/footnote] This is because when a screen reader finds an image, it will say \"Graphic\" before reading out the alt tag. If the alt tag is longer than 125 characters, the screen reader will interrupt the flow of text and say \"Graphic\" again, before continuing to read out the alt tag. This can be confusing. For images that require descriptions longer than 125 characters, see the section on <a href=\"#longdescription\">long descriptions<\/a>.\n\nTo edit an image's alt tag in Pressbooks, click on the image and select the PENCIL icon (edit). Under image details, there will be two textboxes: one titled \"Caption\" and one titled \"Alternative Text.\" The \"Caption\" box contains the image's caption, which appears under the image in the visual editor. The \"Alternative Text\" box is where you describe the image.\n<h2 id=\"longdescriptions\"><a id=\"longdescription\" href=\"\"><\/a>Long descriptions<\/h2>\nComplex images, especially charts or graphs, will often require descriptions longer than 125 characters and it may not always be possible to add an explanation to the surrounding text. In this case, you can provide a link to a longer image description or an accessible table. One way to do this is to create a section for long descriptions in your resource and use links to allow people to easily switch between the image and its description and back again.\n<h3><a id=\"howtold\" href=\"\"><\/a><strong>How to set up a long description for an image in Pressbooks<\/strong><\/h3>\nFigure 1.1 shows an image from <em><a href=\"https:\/\/opentextbc.ca\/introductiontosociology2ndedition\/\">Introduction to Sociology - 2nd Canadian Edition<\/a><\/em> that requires a longer description than what can fit in an alt tag. As such, at the end of the caption, there is a link to the image's description.\n\nAnyone using this textbook can access this image description by clicking on the [Image description] link, which will take them to the image description at the end of the chapter (or by flipping to the end of the chapter in the print version). This will also work for people using screen readers who are navigating through the book with a keyboard.\n\nCurious about how this works? Try clicking on the [Image Description] link in the caption of Figure 1.1.<a id=\"retfig1.1\" href=\"\"><\/a>\n\n[caption id=\"attachment_246\" align=\"aligncenter\" width=\"300\"]<a href=\"\/wp-content\/uploads\/sites\/94\/2018\/06\/2049201506_0f9b17182a_o.jpg\"><img class=\"wp-image-250 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o-300x224.jpg\" alt=\"Wong-Baker Pain Rating Scale. Long description available.\" width=\"300\" height=\"224\"><\/a> Figure 1.1 The Wong-Baker Faces Pain Rating Scale helps health care providers assess an individual\u2019s level of pain. What might a symbolic interactionist observe about this method? <a href=\"#fig1.1\">[Image Description]<\/a>[\/caption]Adding a long description to an image in <a href=\"\/\/front-matter\/introduction\/#pressbooks\">Pressbooks<\/a> can be complicated, but the following four steps will help guide you through the process.\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 1: Add an alt tag<\/strong><\/span><\/h3>\nEven though you will be providing a long description, the image still needs an <a href=\"#alt\">alt tag<\/a>.\u00a0In the Alternative Text field in the image editor, provide a <em>brief<\/em> image description (only a few words), and state that there is an image description available.\n\n<strong>Example alt tag<\/strong>: Wong-Baker Faces pain rating scale. Image description available.\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 2: Create the image description and insert it at the end of the chapter<\/strong><\/span><\/h3>\n<ol>\n \t<li>Create a \"Image Descriptions\" heading at the end of the chapter. All image descriptions will be added under this heading in the order that the images appear in the chapter.<\/li>\n \t<li>Under the \"Image Descriptions\" heading, insert the image's figure number followed by the image description.<\/li>\n<\/ol>\n<strong>Example<\/strong>:\n<blockquote><strong>Figure 1.1 image description<\/strong>:\u00a0The\u00a0Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying.<\/blockquote>\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 3: Link to the image description from the image's caption<\/strong><\/span><\/h3>\nProvide a link to the image description in the caption of the image. Because the description will be on the same page of the image, you will be providing a same-page link using anchor tags.\n<div class=\"textbox shaded\" style=\"text-align: center\">For information on how to create same-page links in Pressbooks, see <a href=\"https:\/\/opentextbc.ca\/pressbooks\/chapter\/hyperlink-material\/\">Hyperlink Material<\/a> in the <a href=\"https:\/\/opentextbc.ca\/pressbooks\/\"><em>Pressbooks Guide<\/em><\/a>.<\/div>\n<ol>\n \t<li>Come up with a unique ID for the image description, which will allow you to link directly to the description in the chapter. In this case, we used \"fig1.1\". (The ID can be whatever you want, but if you have multiple images that require long descriptions, it is best practice to establish a convention for creating IDs to keep them simple and consistent. Note that IDs are case sensitive.)<\/li>\n \t<li>Insert the ID using the \"Anchor\" button at the beginning of the image description.\n<ol type=\"a\">\n \t<li>Place your cursor at the beginning of the image description entry.<\/li>\n \t<li>Select the \"Anchor\" button from the WYSIWYG visual editor. The button appears in the third row and looks like a ribbon.<img class=\"aligncenter wp-image-251 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1-300x89.jpg\" alt=\"\" width=\"300\" height=\"89\"><\/li>\n \t<li>A dialogue box will pop up asking you to provide a name for the anchor. Insert the ID you created and select OK.<img class=\"aligncenter wp-image-252 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1-300x115.jpg\" alt=\"\" width=\"300\" height=\"115\"><\/li>\n<\/ol>\n<\/li>\n \t<li>Go back to your image. At the end of the caption, add \"[Image Description]\" to use for the link text.<\/li>\n \t<li>Link the [Image Description] text to the anchor you created.\n<ol type=\"a\">\n \t<li>Select the [Image Description] text.<\/li>\n \t<li>Select the \"Insert\/edit link\" button from the WYSIWYG Visual editor. The button appears in the first row and looks like a chain link.<\/li>\n \t<li>A dialogue box will pop up asking you to provide a URL. Insert a number sign (#) followed by the ID you created and select the \"Apply\" button.<a href=\"\/wp-content\/uploads\/sites\/94\/2018\/06\/anchor2.jpg\"><img class=\"aligncenter wp-image-253\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2.jpg\" alt=\"\" width=\"500\" height=\"130\"><\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\nThe following table displays how the caption will look in the visual editor view and in the image editor view.\n<table style=\"width: 100%\" border=\"1\"><caption>A Sample Caption With a Link to an Image Description<\/caption>\n<tbody>\n<tr>\n<th class=\"border\" style=\"width: 69px\">Visual editor view<\/th>\n<td class=\"border\" style=\"width: 830px\">Figure 1.1\u00a0The Wong-Baker Faces pain rating scale helps health care providers assess an individual\u2019s level of pain. What might a symbolic interactionist observe about this method? <a href=\"#fig1.1\">[Image Description]<\/a><\/td>\n<\/tr>\n<tr>\n<th class=\"border\" style=\"width: 69px\">Image editor view<\/th>\n<td class=\"border\" style=\"width: 830px\">Figure 1.1\u00a0The Wong-Baker Faces pain rating scale helps health care providers assess an individual\u2019s level of pain. What might a symbolic interactionist observe about this method? &lt;a href=\"#fig1.1\"&gt;[Image Description]&lt;\/a&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 4: Link the image description back to the image<\/strong><\/span><\/h3>\nInsert a link at the end of the image description that takes users back to the original image. This will make it easy for people to navigate back to their spot in the chapter after accessing the image description.\n\n<strong>Example:<\/strong>\n<blockquote><strong>Figure 1.1 image description<\/strong>: The\u00a0Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying. <a href=\"#retfig1.1\">[Return to Figure 1.1]<\/a><\/blockquote>\n<ol>\n \t<li>To link back to the image, you will need a new unique ID. In this case, we used \"retfig1.1\".<\/li>\n \t<li>Insert the ID using the \"Anchor\" button right before the image in the chapter.<\/li>\n \t<li>Link the [Return to Figure 1.1] text to the anchor you just created.<\/li>\n<\/ol>\nNow that you have reviewed the steps to add a long description to a Pressbooks image, see Chapter 8 of the <em>Introduction to Tourism and Hospitality in B.C.<\/em> open textbook for an <a href=\"https:\/\/opentextbc.ca\/introtourism\/chapter\/chapter-8-services-marketing\/#fig8.1\">example of what long descriptions look like in practice<\/a>.\n<h1 id=\"Decorative\"><a id=\"decorative\" href=\"\"><\/a>Decorative images<\/h1>\nIf an image does not add meaning, i.e., if it's included for decorative or design purposes only, or if the image is adequately described in the caption and\/or surrounding text, it doesn't need an alt tag. Including alternative text descriptions for decorative images \"simply slows the process down with no benefit because the screen-reading software vocalizes the content of the [alternative text description], whether that alternative text adds value or not.\"[footnote]\"Top 10 Tips for Making Your Website Accessible,\" <em>UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt.[\/footnote]\n\nWhen the alt tag is left blank, the screen reader will not announce the presence of the image and will skip to the next content.\n<h1><a id=\"colour\" href=\"\"><\/a>Using colour<\/h1>\n<p class=\"page-break-after\">Consider what your images would look like if they only displayed in black and white. Would any necessary context or content be lost if the colour was \"turned off?\" Images should not rely on colour to convey information; if your point requires colour, you may need to edit or format the image so the concepts presented are not lost to those who are colour blind or require high contrast between colours.<\/p>\n\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\n<p class=\"textbox__title\" style=\"text-align: center\">Example 1: Inaccessible Bar Chart<\/p>\n\n<\/header>\n<div class=\"textbox__content\">\n\nIn Chart 1, colour is the only means by which information is conveyed. For students who are colour blind, have poor contrast vision, or are using a black-and-white print copy (see Chart 2), relevant information is lost.\n<table style=\"border-collapse: collapse;width: 100%\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 50%\">\n\n[caption id=\"attachment_254\" align=\"aligncenter\" width=\"300\"]<img class=\"wp-image-254 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-1-300x249-1.jpg\" alt=\"\" width=\"300\" height=\"249\"> Chart 1: In this bar chart, colour is the sole means of communicating the data.[\/caption]<\/td>\n<td style=\"width: 50%\">\n\n[caption id=\"attachment_255\" align=\"aligncenter\" width=\"300\"]<img class=\"wp-image-255 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-2-300x249-1.jpg\" alt=\"Bar chart viewed in greyscale\" width=\"300\" height=\"249\"> Chart 2: This view of the same bar chart displays how the chart might appear to a student who is colour blind, or whose device does not display colour. All of the meaningful data is lost.[\/caption]<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p class=\"page-break-after\"><span style=\"color: #ffffff\">.<\/span><\/p>\n\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\n<p class=\"textbox__title\" style=\"text-align: center\">Example 2: Accessible Bar Chart<\/p>\n\n<\/header>\n<div class=\"textbox__content\">\n\nStudents who are colour blind can distinguish between high-contrast shades. In Chart 3, contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an <a href=\"#alt\">alt tag<\/a>.\n\n[caption id=\"attachment_256\" align=\"aligncenter\" width=\"300\"]<img class=\"wp-image-256 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-3-300x268-1.jpg\" alt=\"Modified bar chart with high-contrast colours and labels\" width=\"300\" height=\"268\"> Chart 3: In this view of the bar chart, high-contrast colours have been used so that shading differences will still display in grey scale. Text labels have also been added so that the data is not just being communicated with colour.[\/caption]\n\n<\/div>\n<\/div>\n<h1>Long description example<\/h1>\n<strong><a id=\"fig1.1\" href=\"\"><\/a>Figure 1.1 image description<\/strong>: The\u00a0Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying.\u00a0<a href=\"#retfig1.1\">[Return to Figure 1.1]<\/a>\n<h3>Media Attributions<\/h3>\n<ul>\n \t<li>Jacob: \u201c<a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/11496864803\/in\/album-72157638911360206\/\">WFE003: Jacob<\/a>\u201d by\u00a0<a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/\">Rosenfeld Media<\/a>. <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons Attribution 2.0 Generic Licence<\/a>.<\/li>\n \t<li>Figure 1.1: \"<a href=\"https:\/\/www.flickr.com\/photos\/juhansonin\/2049201506\/in\/photolist-485Gds-Gfsitv-5KQxMS-doLdQm-bpMpmF-fETJSX-5WDuJv-UVEQ3X-gynsF5-vSk4L-gyo14C-WEFF8H-9cDHG9-8MCUGP-CZttLq-6CnBn-avc7mY-gyoqtg-gyote6-azLAn1-9pLs8j-gyor4z-biXAQK-gynT2v-qSg7ND-71wDHy-8Sx26k-gynZDQ-7j3p1L-6HAbnE-bUKXf9-8Sx28H-8RmTcU-dveXaK-VWgU1N-5KQxMJ-gynU1p-942Aa4-7J552L-gynU2r-gynYUU-gyoqZB-gynYCm-VUm8Yb-9cN7Vd-doXrbg-8Uky1F-gyotjM-3cjrwC-5KQxMh\">Pain Scales<\/a>\" by <a href=\"https:\/\/www.flickr.com\/photos\/juhansonin\/\">Juhan Sonin<\/a>. Adapted by BCcampus (cropped).\u00a0\u00a9 <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons Attribution 2.0 Generic Licence<\/a>.<\/li>\n<\/ul>","rendered":"<p>In this section, we provide recommendations to guide your inclusion of accessible, image-based content.<\/p>\n<h1>What are images?<\/h1>\n<p>Images are non-text elements that include\u00a0photographs, illustrations, diagrams, pictures, charts, graphs, and maps.<\/p>\n<p><strong>File types used<\/strong>: GIF, JPG, PNG<\/p>\n<h1>Why are you including the images you have selected?<\/h1>\n<p>Before you can determine what to do to make an image\u00a0accessible, you must identify its <em>purpose<\/em> or <em>value<\/em> to your textbook. Consider the following questions:<\/p>\n<ol>\n<li>Does your image serve a\u00a0<a title=\"Functional Images\" href=\"#functional\">functional<\/a> purpose?\u00a0In other words, is it conveying non-text content to students? If so, you should:\n<ol type=\"a\">\n<li>provide a text alternative that serves the equivalent purpose of the non-text material<a class=\"footnote\" title=\"&quot;Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,&quot;\u00a0W3C, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.\" id=\"return-footnote-258-1\" href=\"#footnote-258-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a><\/li>\n<li>not use colour as the only visual means of conveying information<a class=\"footnote\" title=\"&quot;Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,&quot;\u00a0W3C, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.\" id=\"return-footnote-258-2\" href=\"#footnote-258-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a><\/li>\n<\/ol>\n<\/li>\n<li>Does your image serve more of a\u00a0<a title=\"Decorative Images\" href=\"#decorative\">decorative<\/a> purpose?\u00a0In other words, is it primarily a design element that does not convey content? If so, you should:\n<ol type=\"a\">\n<li>avoid unnecessary text descriptions<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h1>Who are you doing this for?<\/h1>\n<p>This work supports students who:<\/p>\n<ul>\n<li>Are blind or have low vision, like <a title=\"Full description of Jacob's profile\" href=\"\/\/chapter\/using-personas\/#Jacob\">Jacob<\/a><\/li>\n<li>Have poor contrast vision<\/li>\n<li>Are colour blind and cannot differentiate between certain colours<\/li>\n<li>Use a device with monochrome display<\/li>\n<li>Use a print copy that is in black and white<\/li>\n<li>Have limited Internet access and cannot download images<\/li>\n<li>Have a form of\u00a0cognitive disability<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-246 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1.jpg\" alt=\"Jacob is blind\" width=\"300\" height=\"225\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1.jpg 640w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1-300x225.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1-65x49.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1-225x169.jpg 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/Jacob-1-350x263.jpg 350w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<hr \/>\n<h1>What do you need to do?<\/h1>\n<p>Determine the role of each image used in content as either functional or decorative. Once that has been decided, select how each image will meet accessibility needs by providing descriptive text in a variety of ways. Figures, such as charts and graphs that rely on colour to convey information, should also be evaluated for accessibility by students who are unable to distinguish between or see colour.<\/p>\n<h1><a id=\"functional\" href=\"\"><\/a>Functional images<\/h1>\n<p>Consider what your content page would look like if the images didn\u2019t load. Now try writing alternative text for each image that would work as a replacement and provide the same information as the image.<\/p>\n<p>There are three ways to provide alternative text descriptions for images:<\/p>\n<ol>\n<li>Describe the image in the <a href=\"#intext\">surrounding text<\/a>.<\/li>\n<li>Describe the image in the <a href=\"#alt\">alt tag<\/a>.<\/li>\n<li>Create and link to a <a href=\"#longdescription\">long description<\/a> of the image.<\/li>\n<\/ol>\n<p>As you work on developing your\u00a0alternative text descriptions, keep the following recommendations and guidelines in mind:<\/p>\n<ul>\n<li>Remember that alternative text must convey the content and functionality of an image, and is rarely a literal\u00a0description of the image (e.g., \u201cphoto of cat<em>\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.<a class=\"footnote\" title=\"&quot;Alt text blunders,&quot;\u00a0WebAIM, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext.\" id=\"return-footnote-258-3\" href=\"#footnote-258-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a><\/li>\n<li>For relatively simple images (e.g., photographs, illustrations), try to keep your text descriptions short. You should aim to create a brief alternative (one or two short sentences) that is an accurate and concise equivalent to the information in the image.<\/li>\n<li>For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- or two-sentence description to ensure all users will benefit from the content or context you\u00a0intend to provide.<\/li>\n<li>Leave out unnecessary information. For example, you do not need to include information like \u201cimage of\u2026\u201d or \u201cphoto of\u2026\u201d; assistive technologies will automatically\u00a0identify the material as an image, so including that detail in your alternative description is redundant.<\/li>\n<li>Avoid redundancy of content in your alternative description. Don\u2019t\u00a0repeat information that already appears in text adjacent\u00a0to the image.<\/li>\n<\/ul>\n<div class=\"textbox shaded\">For strategies on how to make complex visuals such as graphs, tables, charts, and more accessible, see the following resource created by Supada Amornchat (CC BY-NC-SA): <a href=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/complex-images.pdf\">Describing Complex Images for All Learners [PDF]<\/a>.<\/div>\n<h2 id=\"surroundingtext\"><a id=\"intext\" href=\"\"><\/a>Descriptions in surrounding text<\/h2>\n<p>You can use the surrounding text to provide the same information as conveyed by the image. This is often the best option for complex images because it makes the information available for everyone, not just those using the alt tags.<\/p>\n<p>If you are editing someone else&#8217;s work for accessibility, you are probably not at liberty to start adding to the main text. However, if you are the author, this is the best and easiest option.<\/p>\n<p>If an image has been adequately described in the surrounding text, you can either provide a few-word description of the image in the alt tag or follow the procedures for <a href=\"#decorative\">decorative images<\/a>.<\/p>\n<h2><a id=\"alt\" href=\"\"><\/a>Alt tags<\/h2>\n<p>An alt tag refers to the alt attribute (<em>alt<\/em> is short for alternative) within an IMG tag. All images uploaded into Pressbooks have an alt tag, but for them to be useful, you need to insert an image description.<\/p>\n<p>Alt tags are used in two cases:<\/p>\n<ol>\n<li>When an image doesn&#8217;t download due slow Internet, the alt tag content will display instead of the image.<\/li>\n<li>For people who are visually impaired and use screen readers, when a screen reader finds an image, it will read out the content of the alt tag.<\/li>\n<\/ol>\n<p>Alt tags should be no longer than 125 characters, including spaces and punctuation.<a class=\"footnote\" title=\"All screen readers are different, so a 125-character max is a recommendation. Other sources may provide a different number.\" id=\"return-footnote-258-4\" href=\"#footnote-258-4\" aria-label=\"Footnote 4\"><sup class=\"footnote\">[4]<\/sup><\/a> This is because when a screen reader finds an image, it will say &#8220;Graphic&#8221; before reading out the alt tag. If the alt tag is longer than 125 characters, the screen reader will interrupt the flow of text and say &#8220;Graphic&#8221; again, before continuing to read out the alt tag. This can be confusing. For images that require descriptions longer than 125 characters, see the section on <a href=\"#longdescription\">long descriptions<\/a>.<\/p>\n<p>To edit an image&#8217;s alt tag in Pressbooks, click on the image and select the PENCIL icon (edit). Under image details, there will be two textboxes: one titled &#8220;Caption&#8221; and one titled &#8220;Alternative Text.&#8221; The &#8220;Caption&#8221; box contains the image&#8217;s caption, which appears under the image in the visual editor. The &#8220;Alternative Text&#8221; box is where you describe the image.<\/p>\n<h2 id=\"longdescriptions\"><a id=\"longdescription\" href=\"\"><\/a>Long descriptions<\/h2>\n<p>Complex images, especially charts or graphs, will often require descriptions longer than 125 characters and it may not always be possible to add an explanation to the surrounding text. In this case, you can provide a link to a longer image description or an accessible table. One way to do this is to create a section for long descriptions in your resource and use links to allow people to easily switch between the image and its description and back again.<\/p>\n<h3><a id=\"howtold\" href=\"\"><\/a><strong>How to set up a long description for an image in Pressbooks<\/strong><\/h3>\n<p>Figure 1.1 shows an image from <em><a href=\"https:\/\/opentextbc.ca\/introductiontosociology2ndedition\/\">Introduction to Sociology &#8211; 2nd Canadian Edition<\/a><\/em> that requires a longer description than what can fit in an alt tag. As such, at the end of the caption, there is a link to the image&#8217;s description.<\/p>\n<p>Anyone using this textbook can access this image description by clicking on the [Image description] link, which will take them to the image description at the end of the chapter (or by flipping to the end of the chapter in the print version). This will also work for people using screen readers who are navigating through the book with a keyboard.<\/p>\n<p>Curious about how this works? Try clicking on the [Image Description] link in the caption of Figure 1.1.<a id=\"retfig1.1\" href=\"\"><\/a><\/p>\n<figure id=\"attachment_246\" aria-describedby=\"caption-attachment-246\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"\/wp-content\/uploads\/sites\/94\/2018\/06\/2049201506_0f9b17182a_o.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-250 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o-300x224.jpg\" alt=\"Wong-Baker Pain Rating Scale. Long description available.\" width=\"300\" height=\"224\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o-300x224.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o-65x48.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o-225x168.jpg 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o-350x261.jpg 350w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2018\/06\/2049201506_0f9b17182a_o.jpg 711w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-246\" class=\"wp-caption-text\">Figure 1.1 The Wong-Baker Faces Pain Rating Scale helps health care providers assess an individual\u2019s level of pain. What might a symbolic interactionist observe about this method? <a href=\"#fig1.1\">[Image Description]<\/a><\/figcaption><\/figure>\n<p>Adding a long description to an image in <a href=\"\/\/front-matter\/introduction\/#pressbooks\">Pressbooks<\/a> can be complicated, but the following four steps will help guide you through the process.<\/p>\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 1: Add an alt tag<\/strong><\/span><\/h3>\n<p>Even though you will be providing a long description, the image still needs an <a href=\"#alt\">alt tag<\/a>.\u00a0In the Alternative Text field in the image editor, provide a <em>brief<\/em> image description (only a few words), and state that there is an image description available.<\/p>\n<p><strong>Example alt tag<\/strong>: Wong-Baker Faces pain rating scale. Image description available.<\/p>\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 2: Create the image description and insert it at the end of the chapter<\/strong><\/span><\/h3>\n<ol>\n<li>Create a &#8220;Image Descriptions&#8221; heading at the end of the chapter. All image descriptions will be added under this heading in the order that the images appear in the chapter.<\/li>\n<li>Under the &#8220;Image Descriptions&#8221; heading, insert the image&#8217;s figure number followed by the image description.<\/li>\n<\/ol>\n<p><strong>Example<\/strong>:<\/p>\n<blockquote><p><strong>Figure 1.1 image description<\/strong>:\u00a0The\u00a0Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying.<\/p><\/blockquote>\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 3: Link to the image description from the image&#8217;s caption<\/strong><\/span><\/h3>\n<p>Provide a link to the image description in the caption of the image. Because the description will be on the same page of the image, you will be providing a same-page link using anchor tags.<\/p>\n<div class=\"textbox shaded\" style=\"text-align: center\">For information on how to create same-page links in Pressbooks, see <a href=\"https:\/\/opentextbc.ca\/pressbooks\/chapter\/hyperlink-material\/\">Hyperlink Material<\/a> in the <a href=\"https:\/\/opentextbc.ca\/pressbooks\/\"><em>Pressbooks Guide<\/em><\/a>.<\/div>\n<ol>\n<li>Come up with a unique ID for the image description, which will allow you to link directly to the description in the chapter. In this case, we used &#8220;fig1.1&#8221;. (The ID can be whatever you want, but if you have multiple images that require long descriptions, it is best practice to establish a convention for creating IDs to keep them simple and consistent. Note that IDs are case sensitive.)<\/li>\n<li>Insert the ID using the &#8220;Anchor&#8221; button at the beginning of the image description.\n<ol type=\"a\">\n<li>Place your cursor at the beginning of the image description entry.<\/li>\n<li>Select the &#8220;Anchor&#8221; button from the WYSIWYG visual editor. The button appears in the third row and looks like a ribbon.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-251 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1-300x89.jpg\" alt=\"\" width=\"300\" height=\"89\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1-300x89.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1-65x19.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1-225x66.jpg 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1-350x103.jpg 350w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor1.jpg 522w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<li>A dialogue box will pop up asking you to provide a name for the anchor. Insert the ID you created and select OK.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-252 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1-300x115.jpg\" alt=\"\" width=\"300\" height=\"115\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1-300x115.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1-65x25.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1-225x86.jpg 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1-350x134.jpg 350w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor-1.jpg 426w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ol>\n<\/li>\n<li>Go back to your image. At the end of the caption, add &#8220;[Image Description]&#8221; to use for the link text.<\/li>\n<li>Link the [Image Description] text to the anchor you created.\n<ol type=\"a\">\n<li>Select the [Image Description] text.<\/li>\n<li>Select the &#8220;Insert\/edit link&#8221; button from the WYSIWYG Visual editor. The button appears in the first row and looks like a chain link.<\/li>\n<li>A dialogue box will pop up asking you to provide a URL. Insert a number sign (#) followed by the ID you created and select the &#8220;Apply&#8221; button.<a href=\"\/wp-content\/uploads\/sites\/94\/2018\/06\/anchor2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-253\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2.jpg\" alt=\"\" width=\"500\" height=\"130\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2.jpg 900w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2-300x78.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2-768x200.jpg 768w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2-65x17.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2-225x59.jpg 225w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/anchor2-350x91.jpg 350w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>The following table displays how the caption will look in the visual editor view and in the image editor view.<\/p>\n<table style=\"width: 100%\">\n<caption>A Sample Caption With a Link to an Image Description<\/caption>\n<tbody>\n<tr>\n<th class=\"border\" style=\"width: 69px\">Visual editor view<\/th>\n<td class=\"border\" style=\"width: 830px\">Figure 1.1\u00a0The Wong-Baker Faces pain rating scale helps health care providers assess an individual\u2019s level of pain. What might a symbolic interactionist observe about this method? <a href=\"#fig1.1\">[Image Description]<\/a><\/td>\n<\/tr>\n<tr>\n<th class=\"border\" style=\"width: 69px\">Image editor view<\/th>\n<td class=\"border\" style=\"width: 830px\">Figure 1.1\u00a0The Wong-Baker Faces pain rating scale helps health care providers assess an individual\u2019s level of pain. What might a symbolic interactionist observe about this method? &lt;a href=&#8221;#fig1.1&#8243;&gt;[Image Description]&lt;\/a&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 style=\"text-align: left\"><span style=\"text-decoration: underline\"><strong>Step 4: Link the image description back to the image<\/strong><\/span><\/h3>\n<p>Insert a link at the end of the image description that takes users back to the original image. This will make it easy for people to navigate back to their spot in the chapter after accessing the image description.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<blockquote><p><strong>Figure 1.1 image description<\/strong>: The\u00a0Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying. <a href=\"#retfig1.1\">[Return to Figure 1.1]<\/a><\/p><\/blockquote>\n<ol>\n<li>To link back to the image, you will need a new unique ID. In this case, we used &#8220;retfig1.1&#8221;.<\/li>\n<li>Insert the ID using the &#8220;Anchor&#8221; button right before the image in the chapter.<\/li>\n<li>Link the [Return to Figure 1.1] text to the anchor you just created.<\/li>\n<\/ol>\n<p>Now that you have reviewed the steps to add a long description to a Pressbooks image, see Chapter 8 of the <em>Introduction to Tourism and Hospitality in B.C.<\/em> open textbook for an <a href=\"https:\/\/opentextbc.ca\/introtourism\/chapter\/chapter-8-services-marketing\/#fig8.1\">example of what long descriptions look like in practice<\/a>.<\/p>\n<h1 id=\"Decorative\"><a id=\"decorative\" href=\"\"><\/a>Decorative images<\/h1>\n<p>If an image does not add meaning, i.e., if it&#8217;s included for decorative or design purposes only, or if the image is adequately described in the caption and\/or surrounding text, it doesn&#8217;t need an alt tag. Including alternative text descriptions for decorative images &#8220;simply slows the process down with no benefit because the screen-reading software vocalizes the content of the [alternative text description], whether that alternative text adds value or not.&#8221;<a class=\"footnote\" title=\"&quot;Top 10 Tips for Making Your Website Accessible,&quot; UC Berkeley: Web Access, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt.\" id=\"return-footnote-258-5\" href=\"#footnote-258-5\" aria-label=\"Footnote 5\"><sup class=\"footnote\">[5]<\/sup><\/a><\/p>\n<p>When the alt tag is left blank, the screen reader will not announce the presence of the image and will skip to the next content.<\/p>\n<h1><a id=\"colour\" href=\"\"><\/a>Using colour<\/h1>\n<p class=\"page-break-after\">Consider what your images would look like if they only displayed in black and white. Would any necessary context or content be lost if the colour was &#8220;turned off?&#8221; Images should not rely on colour to convey information; if your point requires colour, you may need to edit or format the image so the concepts presented are not lost to those who are colour blind or require high contrast between colours.<\/p>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\" style=\"text-align: center\">Example 1: Inaccessible Bar Chart<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>In Chart 1, colour is the only means by which information is conveyed. For students who are colour blind, have poor contrast vision, or are using a black-and-white print copy (see Chart 2), relevant information is lost.<\/p>\n<table style=\"border-collapse: collapse;width: 100%\">\n<tbody>\n<tr>\n<td style=\"width: 50%\">\n<figure id=\"attachment_254\" aria-describedby=\"caption-attachment-254\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-254 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-1-300x249-1.jpg\" alt=\"\" width=\"300\" height=\"249\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-1-300x249-1.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-1-300x249-1-65x54.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-1-300x249-1-225x187.jpg 225w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-254\" class=\"wp-caption-text\">Chart 1: In this bar chart, colour is the sole means of communicating the data.<\/figcaption><\/figure>\n<\/td>\n<td style=\"width: 50%\">\n<figure id=\"attachment_255\" aria-describedby=\"caption-attachment-255\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-255 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-2-300x249-1.jpg\" alt=\"Bar chart viewed in greyscale\" width=\"300\" height=\"249\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-2-300x249-1.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-2-300x249-1-65x54.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-2-300x249-1-225x187.jpg 225w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-255\" class=\"wp-caption-text\">Chart 2: This view of the same bar chart displays how the chart might appear to a student who is colour blind, or whose device does not display colour. All of the meaningful data is lost.<\/figcaption><\/figure>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p class=\"page-break-after\"><span style=\"color: #ffffff\">.<\/span><\/p>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\" style=\"text-align: center\">Example 2: Accessible Bar Chart<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>Students who are colour blind can distinguish between high-contrast shades. In Chart 3, contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an <a href=\"#alt\">alt tag<\/a>.<\/p>\n<figure id=\"attachment_256\" aria-describedby=\"caption-attachment-256\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-256 size-medium\" src=\"https:\/\/openbook.ums.edu.my\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-3-300x268-1.jpg\" alt=\"Modified bar chart with high-contrast colours and labels\" width=\"300\" height=\"268\" srcset=\"https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-3-300x268-1.jpg 300w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-3-300x268-1-65x58.jpg 65w, https:\/\/openbook.ums.edu.my\/iotb\/wp-content\/uploads\/sites\/183\/2024\/09\/colour-depend-3-300x268-1-225x201.jpg 225w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-256\" class=\"wp-caption-text\">Chart 3: In this view of the bar chart, high-contrast colours have been used so that shading differences will still display in grey scale. Text labels have also been added so that the data is not just being communicated with colour.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h1>Long description example<\/h1>\n<p><strong><a id=\"fig1.1\" href=\"\"><\/a>Figure 1.1 image description<\/strong>: The\u00a0Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying.\u00a0<a href=\"#retfig1.1\">[Return to Figure 1.1]<\/a><\/p>\n<h3>Media Attributions<\/h3>\n<ul>\n<li>Jacob: \u201c<a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/11496864803\/in\/album-72157638911360206\/\">WFE003: Jacob<\/a>\u201d by\u00a0<a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/\">Rosenfeld Media<\/a>. <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons Attribution 2.0 Generic Licence<\/a>.<\/li>\n<li>Figure 1.1: &#8220;<a href=\"https:\/\/www.flickr.com\/photos\/juhansonin\/2049201506\/in\/photolist-485Gds-Gfsitv-5KQxMS-doLdQm-bpMpmF-fETJSX-5WDuJv-UVEQ3X-gynsF5-vSk4L-gyo14C-WEFF8H-9cDHG9-8MCUGP-CZttLq-6CnBn-avc7mY-gyoqtg-gyote6-azLAn1-9pLs8j-gyor4z-biXAQK-gynT2v-qSg7ND-71wDHy-8Sx26k-gynZDQ-7j3p1L-6HAbnE-bUKXf9-8Sx28H-8RmTcU-dveXaK-VWgU1N-5KQxMJ-gynU1p-942Aa4-7J552L-gynU2r-gynYUU-gyoqZB-gynYCm-VUm8Yb-9cN7Vd-doXrbg-8Uky1F-gyotjM-3cjrwC-5KQxMh\">Pain Scales<\/a>&#8221; by <a href=\"https:\/\/www.flickr.com\/photos\/juhansonin\/\">Juhan Sonin<\/a>. Adapted by BCcampus (cropped).\u00a0\u00a9 <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons Attribution 2.0 Generic Licence<\/a>.<\/li>\n<\/ul>\n<div class=\"media-attributions clear\" prefix:cc=\"http:\/\/creativecommons.org\/ns#\" prefix:dc=\"http:\/\/purl.org\/dc\/terms\/\"><h3>Media Attributions<\/h3><ul><li >Jacob       <\/li><li >2049201506_0f9b17182a_o       <\/li><li >anchor1       <\/li><li >anchor       <\/li><li >anchor2       <\/li><li >colour-depend-1-300&#215;249       <\/li><li >colour-depend-2-300&#215;249       <\/li><li >colour-depend-3-300&#215;268       <\/li><\/ul><\/div><hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-258-1\">\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,\"\u00a0<em>W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv. <a href=\"#return-footnote-258-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-258-2\">\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\"\u00a0<em>W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast. <a href=\"#return-footnote-258-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-258-3\">\"Alt text blunders,\"\u00a0<em>WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext. <a href=\"#return-footnote-258-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><li id=\"footnote-258-4\">All screen readers are different, so a 125-character max is a recommendation. Other sources may provide a different number. <a href=\"#return-footnote-258-4\" class=\"return-footnote\" aria-label=\"Return to footnote 4\">&crarr;<\/a><\/li><li id=\"footnote-258-5\">\"Top 10 Tips for Making Your Website Accessible,\" <em>UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt. <a href=\"#return-footnote-258-5\" class=\"return-footnote\" aria-label=\"Return to footnote 5\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":1,"menu_order":2,"template":"","meta":{"pb_show_title":"","pb_short_title":"Images","pb_subtitle":"","pb_authors":["acoolidge","sdoner","trobertson","jgray"],"pb_section_license":""},"chapter-type":[],"contributor":[81,84,82,83],"license":[],"class_list":["post-258","chapter","type-chapter","status-publish","hentry","contributor-acoolidge","contributor-jgray","contributor-sdoner","contributor-trobertson"],"part":244,"_links":{"self":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/258\/revisions"}],"predecessor-version":[{"id":259,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/258\/revisions\/259"}],"part":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/parts\/244"}],"metadata":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapters\/258\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/pressbooks\/v2\/chapter-type?post=258"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/contributor?post=258"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/iotb\/wp-json\/wp\/v2\/license?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}