{"id":359,"date":"2017-08-28T17:41:26","date_gmt":"2017-08-28T17:41:26","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/images\/"},"modified":"2017-09-05T19:45:57","modified_gmt":"2017-09-05T19:45:57","slug":"images","status":"publish","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/images\/","title":{"raw":"Images","rendered":"Images"},"content":{"raw":"In this section, we provide recommendations to guide your inclusion of accessible, image-based content.\r\n<h2>What Are Images?<\/h2>\r\n<strong>Images\u00a0include<\/strong>: photographs, diagrams, pictures, charts, graphs, maps\r\n<strong>File types<\/strong>: .gif, .jpg, .png\r\n<h1>Before You Begin<\/h1>\r\n<div class=\"textbox learning-objectives\">\r\n<h3>Why Are You Including the Images You Have Selected?<\/h3>\r\nBefore you can determine what you need to do to make an image\u00a0accessible, you first need to identify its <strong>purpose <\/strong>or<strong> value <\/strong>to your textbook. Consider the following questions:\r\n\r\n1. Does your image serve a\u00a0<a title=\"Functional Images\" href=\"#Functional\"><strong>functional<\/strong> purpose<\/a>?\u00a0In other words, is it conveying non-text content to students? If so, you should:\r\n<ul>\r\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 Text Alternatives. Accessed from: http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv[\/footnote]<\/li>\r\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 Use of Color. Accessed from: http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast[\/footnote]<\/li>\r\n<\/ul>\r\n2. Does your image serve more of a\u00a0<a title=\"Decorative Images\" href=\"#Decorative\"><strong>decorative<\/strong> purpose<\/a>?\u00a0In other words, is it primarily a design element that does not convey content? If so, you should:\r\n<ul>\r\n \t<li><span style=\"color: #000000\">Avoid unnecessary text descriptions<\/span><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"textbox learning-objectives\">\r\n<h3>Who\u00a0Are You Doing This For?<\/h3>\r\n<span style=\"color: #000000\">This work supports students who:<\/span>\r\n<ul>\r\n \t<li>Are blind or have low vision, for example <a title=\"Full description of Jacob's profile\" href=\"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/using-personas#Jacob\">Jacob<\/a><\/li>\r\n \t<li>Have poor contrast vision<\/li>\r\n \t<li>Are colour blind and cannot differentiate between certain colours<\/li>\r\n \t<li>Are using a device with monochrome display<\/li>\r\n \t<li>Have a form of\u00a0cognitive disability<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_117\" align=\"aligncenter\" width=\"409\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/Jacob.jpg\"><img class=\"wp-image-117\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174055\/Jacob.jpg\" alt=\"Jacob is a 4th year Business Administration student who is Blind.\" width=\"409\" height=\"307\" \/><\/a> Jacob. Image from Horton, Sarah; Quesenbery, Whitney. 2014. <em>A Web for Everyone<\/em>. New York: Rosenfeld Media. rosenfeldmedia.com\/books\/a-web-for-everyone\/[\/caption]\r\n\r\n<\/div>\r\n&nbsp;\r\n<h1>What Do You Need To Do?<\/h1>\r\n<h2><a id=\"Functional\"><\/a>Functional Images and Alternative Text Descriptions<\/h2>\r\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 service\u00a0as the image.\r\n\r\nAs you work on developing your\u00a0alternative text descriptions, keep the following recommendations and guidelines in mind:\r\n<ul>\r\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., \"photo of cat<em>\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey what the content of the image is and what it does.[footnote]WebAIM (2014). Alt text blunders. Accessed from: http:\/\/webaim.org\/articles\/gonewild\/#alttext[\/footnote]<\/li>\r\n<\/ul>\r\n<ul>\r\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>\r\n<\/ul>\r\n<ul>\r\n \t<li>For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- to two-sentence description to ensure all users will benefit from the content or context you\u00a0intended to provide. In these cases, you should either provide the details in the text surrounding the image\u00a0or write a longer text description that students can link to on a separate page.\u00a0You should still include a short text description (one to two sentences)\u00a0that tells\u00a0students where they can find the details you have provided in the longer description.<\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li>Leave out any\u00a0unnecessary information. For example, you do not need to include information like \"image of...\" or \"photo of...\"; assistive technologies will automatically\u00a0identify the material as an image, so including that detail in your alternative description is superfluous.<\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li>Avoid redundancy of content in your alternative description. Don't\u00a0repeat the same\u00a0information that already appears in text adjacent\u00a0to the image.<\/li>\r\n<\/ul>\r\nHere are two examples of alternative text descriptions.\r\n\r\n<strong>Example 1<\/strong> (from <a href=\"http:\/\/opentextbc.ca\/introductiontosociology\/chapter\/chapter20-population-urbanization-and-the-environment\/\">Introduction to Sociology<\/a>):\r\n\r\n[caption id=\"attachment_437\" align=\"aligncenter\" width=\"268\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/rio-de-janeiro-and-london.png\"><img class=\"size-medium wp-image-437\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174117\/rio-de-janeiro-and-london-268x300.png\" alt=\"Figure 20.11 includes two photos. The first photo shows crowded buildings located on the hillside. They are small and shabby. The second photo shows magnificent buildings located by water.\" width=\"268\" height=\"300\" \/><\/a> Figure 20.11. The slum city and the global city: the Fav\u00e9la Morro do Praz\u00e8res in Rio de Janeiro and the London financial district show two sides of global urbanization (Photos courtesy of dany13\/Flickr and Peter Pearson\/Flickr)[\/caption]\r\n\r\nThis photograph could be described in this way:\r\n<blockquote>\r\n<div>Figure 20.11 includes two photos. The first photo shows crowded buildings located on the hillside. They are small and shabby. The second photo shows magnificent buildings located by water.<\/div><\/blockquote>\r\n<strong>Example 2<\/strong> (Figure 18.1. Two-Atom, Double-Flask Diagram from <a href=\"http:\/\/opentextbc.ca\/introductorychemistry\/chapter\/entropy-and-the-second-law-of-thermodynamics\/\">Introductory Chemistry<\/a>):\r\n\r\n<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/double_flask_gas_atom_diagram.png\"><img class=\"size-medium wp-image-436 aligncenter\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174120\/double_flask_gas_atom_diagram-300x276.png\" alt=\"When the stopcock is opened between the flasks, the two atoms can distribute in four possible ways.\" width=\"300\" height=\"276\" \/><\/a>\r\n<p style=\"text-align: center\">When the stopcock is opened between the flasks, the two atoms can distribute in four possible ways.<\/p>\r\nFigure 18.1 could be described as follows:\r\n<blockquote>\r\n<div>Figure 18.1 shows a diagram with five pairs of circles. All of these circles are open. The left one opens on the right and the right one opens on the left. They are connected with lines at their open points. One pair is located on the left and between their two connecting lines is a black dot with a red vertical line going across. The other four pairs arranged in a column are located on the right and between the connecting lines of each pair is a a small circle with a red horizontal line going through. A right arrow labelled Open Stopcock links the pair sitting on the left to the four pairs on the right. Each of these five pairs has two dots (green and blue) arranged in different patterns. For the pair on the left, the two dots, sitting obliquely, appear only in left circle. The green dot is at the left upper part of the circle and following it the blue dot is close to the bottom right. The first pair on the right has the similar situation. The only difference is that the green dot is at the right upper part of the circle and the blue dot is close the middle left. The second pair has a green dot in the centre of the left circle and a blue dot in the centre of the\u00a0right circle. The third pair has a blue dot sitting at the left upper part of the left circle and a green dot sitting close to bottom right of the right circle. For the last pair, the two dots appear in oblique direction only in the right circle. A green dot is at the right upper part of the circle and a blue dot is close to bottom left.<\/div><\/blockquote>\r\n<h2><a id=\"Colour\"><\/a>Using\u00a0Colour<\/h2>\r\nConsider 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 the point you are making depends on colour to be understood, you may need to edit your image or formatting so that concepts presented are not lost to those who are colour blind or who require high contrast between colours.\r\n\r\n[caption id=\"attachment_175\" align=\"aligncenter\" width=\"300\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-depend-1.jpg\"><img class=\"wp-image-175\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174121\/colour-depend-1-300x249.jpg\" alt=\"Colour-dependent bar chart\" width=\"300\" height=\"249\" \/><\/a> In this example of a bar chart, colour is the sole means of communicating the data.[\/caption]\r\n\r\n<strong>Example 1 -- not accessible: <\/strong>\r\n\r\nIn this basic bar chart, colour is the only means by which information is conveyed.\r\n\r\n[caption id=\"attachment_176\" align=\"aligncenter\" width=\"300\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-depend-2.jpg\"><img class=\"wp-image-176 size-medium\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174123\/colour-depend-2-300x249.jpg\" alt=\"Bar chart viewed in greyscale\" width=\"300\" height=\"249\" \/><\/a> 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]\r\n\r\n<strong>Example 2 -- not accessible:\u00a0<\/strong>\r\n\r\nFor a student who is colour blind or who has poor contrast vision, all of the relevant information is lost in a colour chart.\r\n\r\n<strong>Example 3 -- accessible: <\/strong>\r\n\r\nStudents who are colour blind can distinguish between\u00a0high-contrast shades. In this example,\u00a0contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an <a title=\"Alternative Text descriptions\" href=\"#AltText\">alternative text description<\/a>.\r\n\r\n[caption id=\"attachment_177\" align=\"aligncenter\" width=\"300\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-depend-3.jpg\"><img class=\"wp-image-177 size-medium\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174125\/colour-depend-3-300x268.jpg\" alt=\"Modified bar chart with high-contrast colours and labels\" width=\"300\" height=\"268\" \/><\/a> 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]\r\n<h2><a id=\"Decorative\"><\/a>Decorative Images<\/h2>\r\nIf your image does not add meaning and is included for decorative or design purposes only, the space for the alternative text description should still be included with your image, but it should be left empty or blank. Assistive technologies will detect the image, and by leaving the alternative text description blank, you will signal to the student that there isn't any contextual content embedded. 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]webAccess (2012). Adapted from: Top Ten Tips for making your website accessible. Accessed from: http:\/\/webaccess.berkeley.edu\/developer-information\/top-ten-tips\/#alt[\/footnote]","rendered":"<p>In this section, we provide recommendations to guide your inclusion of accessible, image-based content.<\/p>\n<h2>What Are Images?<\/h2>\n<p><strong>Images\u00a0include<\/strong>: photographs, diagrams, pictures, charts, graphs, maps<br \/>\n<strong>File types<\/strong>: .gif, .jpg, .png<\/p>\n<h1>Before You Begin<\/h1>\n<div class=\"textbox learning-objectives\">\n<h3>Why Are You Including the Images You Have Selected?<\/h3>\n<p>Before you can determine what you need to do to make an image\u00a0accessible, you first need to identify its <strong>purpose <\/strong>or<strong> value <\/strong>to your textbook. Consider the following questions:<\/p>\n<p>1. Does your image serve a\u00a0<a title=\"Functional Images\" href=\"#Functional\"><strong>functional<\/strong> purpose<\/a>?\u00a0In other words, is it conveying non-text content to students? If so, you should:<\/p>\n<ul>\n<li>Provide a text alternative that serves the equivalent purpose of the non-text material<a class=\"footnote\" title=\"Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.1 Text Alternatives. Accessed from: http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\" id=\"return-footnote-359-1\" href=\"#footnote-359-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=\"Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color. Accessed from: http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast\" id=\"return-footnote-359-2\" href=\"#footnote-359-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a><\/li>\n<\/ul>\n<p>2. Does your image serve more of a\u00a0<a title=\"Decorative Images\" href=\"#Decorative\"><strong>decorative<\/strong> purpose<\/a>?\u00a0In other words, is it primarily a design element that does not convey content? If so, you should:<\/p>\n<ul>\n<li><span style=\"color: #000000\">Avoid unnecessary text descriptions<\/span><\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox learning-objectives\">\n<h3>Who\u00a0Are You Doing This For?<\/h3>\n<p><span style=\"color: #000000\">This work supports students who:<\/span><\/p>\n<ul>\n<li>Are blind or have low vision, for example <a title=\"Full description of Jacob's profile\" href=\"https:\/\/courses.lumenlearning.com\/suny-oerguide\/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>Are using a device with monochrome display<\/li>\n<li>Have a form of\u00a0cognitive disability<\/li>\n<\/ul>\n<div id=\"attachment_117\" style=\"width: 419px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/Jacob.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-117\" class=\"wp-image-117\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174055\/Jacob.jpg\" alt=\"Jacob is a 4th year Business Administration student who is Blind.\" width=\"409\" height=\"307\" \/><\/a><\/p>\n<p id=\"caption-attachment-117\" class=\"wp-caption-text\">Jacob. Image from Horton, Sarah; Quesenbery, Whitney. 2014. <em>A Web for Everyone<\/em>. New York: Rosenfeld Media. rosenfeldmedia.com\/books\/a-web-for-everyone\/<\/p>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h1>What Do You Need To Do?<\/h1>\n<h2><a id=\"Functional\"><\/a>Functional Images and Alternative Text Descriptions<\/h2>\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 service\u00a0as the image.<\/p>\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., &#8220;photo of cat<em>\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey what the content of the image is and what it does.<a class=\"footnote\" title=\"WebAIM (2014). Alt text blunders. Accessed from: http:\/\/webaim.org\/articles\/gonewild\/#alttext\" id=\"return-footnote-359-3\" href=\"#footnote-359-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a><\/li>\n<\/ul>\n<ul>\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<\/ul>\n<ul>\n<li>For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- to two-sentence description to ensure all users will benefit from the content or context you\u00a0intended to provide. In these cases, you should either provide the details in the text surrounding the image\u00a0or write a longer text description that students can link to on a separate page.\u00a0You should still include a short text description (one to two sentences)\u00a0that tells\u00a0students where they can find the details you have provided in the longer description.<\/li>\n<\/ul>\n<ul>\n<li>Leave out any\u00a0unnecessary information. For example, you do not need to include information like &#8220;image of&#8230;&#8221; or &#8220;photo of&#8230;&#8221;; assistive technologies will automatically\u00a0identify the material as an image, so including that detail in your alternative description is superfluous.<\/li>\n<\/ul>\n<ul>\n<li>Avoid redundancy of content in your alternative description. Don&#8217;t\u00a0repeat the same\u00a0information that already appears in text adjacent\u00a0to the image.<\/li>\n<\/ul>\n<p>Here are two examples of alternative text descriptions.<\/p>\n<p><strong>Example 1<\/strong> (from <a href=\"http:\/\/opentextbc.ca\/introductiontosociology\/chapter\/chapter20-population-urbanization-and-the-environment\/\">Introduction to Sociology<\/a>):<\/p>\n<div id=\"attachment_437\" style=\"width: 278px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/rio-de-janeiro-and-london.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-437\" class=\"size-medium wp-image-437\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174117\/rio-de-janeiro-and-london-268x300.png\" alt=\"Figure 20.11 includes two photos. The first photo shows crowded buildings located on the hillside. They are small and shabby. The second photo shows magnificent buildings located by water.\" width=\"268\" height=\"300\" \/><\/a><\/p>\n<p id=\"caption-attachment-437\" class=\"wp-caption-text\">Figure 20.11. The slum city and the global city: the Fav\u00e9la Morro do Praz\u00e8res in Rio de Janeiro and the London financial district show two sides of global urbanization (Photos courtesy of dany13\/Flickr and Peter Pearson\/Flickr)<\/p>\n<\/div>\n<p>This photograph could be described in this way:<\/p>\n<blockquote>\n<div>Figure 20.11 includes two photos. The first photo shows crowded buildings located on the hillside. They are small and shabby. The second photo shows magnificent buildings located by water.<\/div>\n<\/blockquote>\n<p><strong>Example 2<\/strong> (Figure 18.1. Two-Atom, Double-Flask Diagram from <a href=\"http:\/\/opentextbc.ca\/introductorychemistry\/chapter\/entropy-and-the-second-law-of-thermodynamics\/\">Introductory Chemistry<\/a>):<\/p>\n<p><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/double_flask_gas_atom_diagram.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-436 aligncenter\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174120\/double_flask_gas_atom_diagram-300x276.png\" alt=\"When the stopcock is opened between the flasks, the two atoms can distribute in four possible ways.\" width=\"300\" height=\"276\" \/><\/a><\/p>\n<p style=\"text-align: center\">When the stopcock is opened between the flasks, the two atoms can distribute in four possible ways.<\/p>\n<p>Figure 18.1 could be described as follows:<\/p>\n<blockquote>\n<div>Figure 18.1 shows a diagram with five pairs of circles. All of these circles are open. The left one opens on the right and the right one opens on the left. They are connected with lines at their open points. One pair is located on the left and between their two connecting lines is a black dot with a red vertical line going across. The other four pairs arranged in a column are located on the right and between the connecting lines of each pair is a a small circle with a red horizontal line going through. A right arrow labelled Open Stopcock links the pair sitting on the left to the four pairs on the right. Each of these five pairs has two dots (green and blue) arranged in different patterns. For the pair on the left, the two dots, sitting obliquely, appear only in left circle. The green dot is at the left upper part of the circle and following it the blue dot is close to the bottom right. The first pair on the right has the similar situation. The only difference is that the green dot is at the right upper part of the circle and the blue dot is close the middle left. The second pair has a green dot in the centre of the left circle and a blue dot in the centre of the\u00a0right circle. The third pair has a blue dot sitting at the left upper part of the left circle and a green dot sitting close to bottom right of the right circle. For the last pair, the two dots appear in oblique direction only in the right circle. A green dot is at the right upper part of the circle and a blue dot is close to bottom left.<\/div>\n<\/blockquote>\n<h2><a id=\"Colour\"><\/a>Using\u00a0Colour<\/h2>\n<p>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 the point you are making depends on colour to be understood, you may need to edit your image or formatting so that concepts presented are not lost to those who are colour blind or who require high contrast between colours.<\/p>\n<div id=\"attachment_175\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-depend-1.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-175\" class=\"wp-image-175\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174121\/colour-depend-1-300x249.jpg\" alt=\"Colour-dependent bar chart\" width=\"300\" height=\"249\" \/><\/a><\/p>\n<p id=\"caption-attachment-175\" class=\"wp-caption-text\">In this example of a bar chart, colour is the sole means of communicating the data.<\/p>\n<\/div>\n<p><strong>Example 1 &#8212; not accessible: <\/strong><\/p>\n<p>In this basic bar chart, colour is the only means by which information is conveyed.<\/p>\n<div id=\"attachment_176\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-depend-2.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-176\" class=\"wp-image-176 size-medium\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174123\/colour-depend-2-300x249.jpg\" alt=\"Bar chart viewed in greyscale\" width=\"300\" height=\"249\" \/><\/a><\/p>\n<p id=\"caption-attachment-176\" class=\"wp-caption-text\">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.<\/p>\n<\/div>\n<p><strong>Example 2 &#8212; not accessible:\u00a0<\/strong><\/p>\n<p>For a student who is colour blind or who has poor contrast vision, all of the relevant information is lost in a colour chart.<\/p>\n<p><strong>Example 3 &#8212; accessible: <\/strong><\/p>\n<p>Students who are colour blind can distinguish between\u00a0high-contrast shades. In this example,\u00a0contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an <a title=\"Alternative Text descriptions\" href=\"#AltText\">alternative text description<\/a>.<\/p>\n<div id=\"attachment_177\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-depend-3.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-177\" class=\"wp-image-177 size-medium\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174125\/colour-depend-3-300x268.jpg\" alt=\"Modified bar chart with high-contrast colours and labels\" width=\"300\" height=\"268\" \/><\/a><\/p>\n<p id=\"caption-attachment-177\" class=\"wp-caption-text\">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.<\/p>\n<\/div>\n<h2><a id=\"Decorative\"><\/a>Decorative Images<\/h2>\n<p>If your image does not add meaning and is included for decorative or design purposes only, the space for the alternative text description should still be included with your image, but it should be left empty or blank. Assistive technologies will detect the image, and by leaving the alternative text description blank, you will signal to the student that there isn&#8217;t any contextual content embedded. 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=\"webAccess (2012). Adapted from: Top Ten Tips for making your website accessible. Accessed from: http:\/\/webaccess.berkeley.edu\/developer-information\/top-ten-tips\/#alt\" id=\"return-footnote-359-4\" href=\"#footnote-359-4\" aria-label=\"Footnote 4\"><sup class=\"footnote\">[4]<\/sup><\/a><\/p>\n\n\t\t\t <section class=\"citations-section\" role=\"contentinfo\">\n\t\t\t <h3>Candela Citations<\/h3>\n\t\t\t\t\t <div>\n\t\t\t\t\t\t <div id=\"citation-list-359\">\n\t\t\t\t\t\t\t <div class=\"licensing\"><div class=\"license-attribution-dropdown-subheading\">CC licensed content, Shared previously<\/div><ul class=\"citation-list\"><li>BC Open Textbook Accessibility Toolkit. <strong>Authored by<\/strong>: Amanda Coolidge, Sue Doner, and Tara Robertson. <strong>Provided by<\/strong>: BCCampus. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/\">https:\/\/opentextbc.ca\/accessibilitytoolkit\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY: Attribution<\/a><\/em><\/li><\/ul><\/div>\n\t\t\t\t\t\t <\/div>\n\t\t\t\t\t <\/div>\n\t\t\t <\/section><hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-359-1\">Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.1 Text Alternatives. Accessed from: http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv <a href=\"#return-footnote-359-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-359-2\">Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color. Accessed from: http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast <a href=\"#return-footnote-359-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-359-3\">WebAIM (2014). Alt text blunders. Accessed from: http:\/\/webaim.org\/articles\/gonewild\/#alttext <a href=\"#return-footnote-359-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><li id=\"footnote-359-4\">webAccess (2012). Adapted from: Top Ten Tips for making your website accessible. Accessed from: http:\/\/webaccess.berkeley.edu\/developer-information\/top-ten-tips\/#alt <a href=\"#return-footnote-359-4\" class=\"return-footnote\" aria-label=\"Return to footnote 4\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":311,"menu_order":5,"template":"","meta":{"_candela_citation":"[{\"type\":\"cc\",\"description\":\"BC Open Textbook Accessibility Toolkit\",\"author\":\"Amanda Coolidge, Sue Doner, and Tara Robertson\",\"organization\":\"BCCampus\",\"url\":\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/\",\"project\":\"\",\"license\":\"cc-by\",\"license_terms\":\"\"}]","CANDELA_OUTCOMES_GUID":"","pb_show_title":"on","pb_short_title":"Images","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-359","chapter","type-chapter","status-publish","hentry"],"part":168,"_links":{"self":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/users\/311"}],"version-history":[{"count":4,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/359\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/359\/revisions\/407"}],"part":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/parts\/168"}],"metadata":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/359\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/media?parent=359"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapter-type?post=359"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/contributor?post=359"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/license?post=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}