Example 1: Inaccessible Bar Chart<\/p>\n\n<\/header>\n

\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\n\n\n

\n\n[caption id=\"attachment_701\" align=\"aligncenter\" width=\"300\"] $\"Chart$ <\/a> Chart 1: In this bar chart, colour is the sole means of communicating the data.[\/caption]<\/td>\n

\n\n[caption id=\"attachment_702\" align=\"aligncenter\" width=\"300\"] $\"Bar$ <\/a> 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

Example 2: Accessible Bar Chart<\/p>\n\n<\/header>\n

\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 alt tag<\/a>.\n\n[caption id=\"attachment_703\" align=\"aligncenter\" width=\"300\"] $\"Modified$ <\/a> 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

Long description example<\/h2>\n<\/a>Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a>\n
Attributions<\/h1>\nJacob: \u201c WFE003: Jacob<\/a>\u201d by Rosenfeld Media<\/a> is used under a CC BY 2.0 Generic Licence<\/a>.\n\nFigure 1.1: \"Pain Scales<\/a>\" by Juhan Sonin<\/a> has been modified (cropped) by BCcampus and is used under a CC BY 2.0 Generic Licence<\/a>.\n","rendered":"
In this section, we provide recommendations to guide your inclusion of accessible, image-based content.<\/p>\n
What are images?<\/h1>\n
Images are non-text elements that include photographs, illustrations, diagrams, pictures, charts, graphs, and maps.
\nFile types used<\/strong>: GIF, JPG, PNG<\/p>\n
Why are you including the images you have selected?<\/h1>\n
Before you can determine what to do to make an image accessible, you must identify its purpose<\/em> or value<\/em> to your textbook. Consider the following questions:<\/p>\n
\n
Does your image serve a functional<\/a> purpose? In other words, is it conveying non-text content to students? If so, you should:\n
\n
provide a text alternative that serves the equivalent purpose of the non-text material ^{[1]<\/sup><\/a><\/li>\n}
not use colour as the only visual means of conveying information ^{[2]<\/sup><\/a><\/li>\n<\/ol>\n<\/li>\n}
Does your image serve more of a decorative<\/a> purpose? In other words, is it primarily a design element that does not convey content? If so, you should:\n
\n
avoid unnecessary text descriptions<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
Who are you doing this for?<\/h1>\n
This work supports students who:<\/p>\n
\n
Are blind or have low vision, like Jacob<\/a><\/li>\n
Have poor contrast vision<\/li>\n
Are colour blind and cannot differentiate between certain colours<\/li>\n
Use a device with monochrome display<\/li>\n
Use a print copy that is in black and white<\/li>\n
Have limited Internet access and cannot download images<\/li>\n
Have a form of cognitive disability<\/li>\n<\/ul>\n
$\"Jacob$ <\/a><\/div>\n
\n
What do you need to do?<\/h1>\n
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
<\/a>Functional images<\/h1>\n
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
There are three ways to provide alternative text descriptions for images:<\/p>\n
\n
Describe the image in the alt tag<\/a><\/li>\n
Describe the image in the surrounding text<\/a><\/li>\n
Create and link to a long description<\/a> of the image<\/li>\n<\/ol>\n
As you work on developing your alternative text descriptions, keep the following recommendations and guidelines in mind:<\/p>\n
\n
Remember that alternative text must convey the content and functionality of an image, and is rarely a literal description of the image (e.g., \u201cphoto of cat\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.^{[3]<\/sup><\/a><\/li>\n}
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
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 intend to provide.<\/li>\n
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 identify the material as an image, so including that detail in your alternative description is redundant.<\/li>\n
Avoid redundancy of content in your alternative description. Don\u2019t repeat information that already appears in text adjacent to the image.<\/li>\n<\/ul>\n
<\/a>Alt tags<\/h2>\n
An alt tag refers to the alt attribute (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
Alt tags are used in two cases:<\/p>\n
\n
When an image doesn’t download due slow Internet, the alt tag content will display instead of the image.<\/li>\n
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
Alt tags should be no longer than 100 characters, including spaces and punctuation. 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 100 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 100 characters, see the section on long descriptions<\/a>.<\/p>\n
To 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.<\/p>\n
<\/a>Descriptions in surrounding text<\/h2>\n
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
If 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.<\/p>\n
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 decorative images<\/a>.<\/p>\n
<\/a>Long descriptions<\/h2>\n
If an image requires a description longer than 100 characters and adding an explanation to the surrounding text isn’t an option, provide a link to a long description instead. To do this, create a section at the end of the chapter for all long descriptions and use links to allow people to easily switch between the image and its long description.<\/p>\n
Figure 1.1 shows an image from 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 long description.<\/p>\n
Anyone using this textbook can access this long description by clicking on the long-description link, which will take them to the long 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
Curious about how this works? Try clicking on the [Long Description] link in the caption of Figure 1.1.<\/p>\n
$\"Wong-Baker$ <\/a><\/p>\n
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? [Long Description]<\/a><\/p>\n<\/div>\n
<\/a>How to set up a long description for an image in Pressbooks<\/h3>\n
Adding a long description to an image in Pressbooks<\/a> can be complicated, but the following four steps will help guide you through the process.<\/p>\n
For information on how to create same-page links in Pressbooks, see Hyperlink Material<\/a> in the Pressbooks Guide<\/em><\/a>.<\/div>\nStep 1: Add an alt tag<\/h4>\n
Even though you will be providing a long description, the image still needs an alt tag<\/a>. In the Alternative Text field in the image editor, provide a brief<\/em> image description (only a few words), and state that there is a long description available.<\/p>\n
\n
Example<\/strong>: Wong-Baker Faces pain rating scale. Long description available.<\/li>\n<\/ul>\n
Step 2: Insert a link to the long description in the image’s caption<\/h4>\n
Provide a link to the long description in the caption of the image.<\/p>\n
\n
At the end of the caption, add “[Long Description]” to use for the link text.<\/li>\n
Create a unique ID for the image. (In this case, the ID is “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 consistent.<\/li>\n<\/ol>\n
The following table displays how the caption will look in the visual editor view and in the image editor view.<\/p>\n\n\n\n\n
A Sample Caption With a Link to a Long Description<\/caption>\n
Visual editor view<\/th>\n 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? [Long Description]<\/a><\/td>\n<\/tr>\n
Image editor view<\/th>\n 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″>[Long Description]<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Step 3: Set up the long description<\/h4>\n
\n
Create a “Long Description” heading at the end of the chapter. Set it as Heading 1. All long descriptions will be added to this section in the order that the images appear in the chapter.<\/li>\n
Under the “Long Description” heading, insert the image’s figure number followed by the long description.\n
\n
Example<\/strong>: Figure 1.1 long description<\/strong>: The Wong-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.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
Step 4: Link the long description to its image<\/h4>\n
\n
Insert a link at the end of the long 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.\n
\n
Example<\/strong>: Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a><\/li>\n<\/ul>\n<\/li>\n
To link back to the image, you will need a new unique ID. Images automatically generate their own unique IDs, which you can use to link to them. Here is how to find an image’s unique ID:\n
\n
Search for the image in the HTML (text) editor. Hint: use [Ctrl\/Command] + [F], and then search for “Figure 1.1 The Wong-Baker”<\/li>\n
You will see something like this:\n
$\"Sample$ <\/a><\/p>\n
The ID for Figure 1.1 is attachment_237<\/strong>, as highlighted in the above image.<\/p>\n<\/div>\n<\/li>\n
Copy the caption ID, return to the visual editor, and find the long description. Use the caption ID as the link for [Return to Figure 1.1].<\/li>\n
Save the chapter and test the links to make sure they work. If they don’t, double check your IDs.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\nNow that you have reviewed the steps to add a long description to a Pressbooks image, see Chapter 8 of the Introduction to Tourism and Hospitality in B.C.<\/em> open textbook for an example of what long descriptions look like in practice<\/a>.<\/p>\n
<\/a>Decorative images<\/h1>\n
If 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.”^{[4]<\/sup><\/a> However, this doesn’t mean that you should leave an alt tag blank.<\/p>\n}
When a screen reader detects an image with a blank alt tag, it will read out the image file location. If the above picture about the The Wong-Baker Faces pain scale didn’t have an alt tag, a screen reader would say, “Graphic: https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/184\/2017\/06\/2049201506_0f9b17182a_o.jpg.”<\/p>\n
When an image doesn’t require an alt tag, place two double-quotation marks (“”) in the Alternative Text field; this step will prompt the screen reader to say “Graphic” and move on to the caption.<\/p>\n
<\/a><\/a>Using colour<\/h1>\n
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
\n
Example 1: Inaccessible Bar Chart<\/p>\n<\/header>\n
\n
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\n\n\n
\n
$\"Chart$ <\/a><\/p>\n
Chart 1: In this bar chart, colour is the sole means of communicating the data.<\/p>\n<\/div>\n<\/td>\n
\n
$\"Bar$ <\/a><\/p>\n
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.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\n
\n
Example 2: Accessible Bar Chart<\/p>\n<\/header>\n
\n
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 alt tag<\/a>.<\/p>\n
$\"Modified$ <\/a><\/p>\n
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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
Long description example<\/h2>\n
<\/a>Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a><\/p>\n
Attributions<\/h1>\n
Jacob: \u201c WFE003: Jacob<\/a>\u201d by Rosenfeld Media<\/a> is used under a CC BY 2.0 Generic Licence<\/a>.<\/p>\n
Figure 1.1: “Pain Scales<\/a>” by Juhan Sonin<\/a> has been modified (cropped) by BCcampus and is used under a CC BY 2.0 Generic Licence<\/a>.<\/p>\n
\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,\" W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv. ↵<\/a><\/li>
\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\" W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast. ↵<\/a><\/li>
\"Alt text blunders,\" WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext. ↵<\/a><\/li>
\"Top 10 Tips for Making Your Website Accessible,\" UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt. ↵<\/a><\/li><\/ol><\/div>","protected":false},"author":1,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"Images","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":33,"_links":{"self":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/41"}],"collection":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/41\/revisions"}],"part":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/41\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=41"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=41"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

A Sample Caption With a Link to a Long Description<\/caption>\n
Visual editor view<\/th>\n	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? [Long Description]<\/a><\/td>\n<\/tr>\n
Image editor view<\/th>\n	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\">[Long Description]<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Step 3: Set up the long description<\/h4>\n \n \t Create a \"Long Description\" heading at the end of the chapter. Set it as Heading 1. All long descriptions will be added to this section in the order that the images appear in the chapter.<\/li>\n \t Under the \"Long Description\" heading, insert the image's figure number followed by the long description.\n \n \t Example<\/strong>: Figure 1.1 long description<\/strong>: The Wong-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.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n Step 4: Link the long description to its image<\/h4>\n \n \t Insert a link at the end of the long 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.\n \n \t Example<\/strong>: Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a><\/li>\n<\/ul>\n<\/li>\n \t To link back to the image, you will need a new unique ID. Images automatically generate their own unique IDs, which you can use to link to them. Here is how to find an image's unique ID:\n \n \t Search for the image in the HTML (text) editor. Hint: use [Ctrl\/Command] + [F], and then search for \"Figure 1.1 The Wong-Baker\"<\/li>\n \t You will see something like this:\n\n[caption id=\"attachment_700\" align=\"aligncenter\" width=\"700\"] $\"Sample$ <\/a> The ID for Figure 1.1 is attachment_237<\/strong>, as highlighted in the above image.[\/caption]<\/li>\n \t Copy the caption ID, return to the visual editor, and find the long description. Use the caption ID as the link for [Return to Figure 1.1].<\/li>\n \t Save the chapter and test the links to make sure they work. If they don't, double check your IDs.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\nNow that you have reviewed the steps to add a long description to a Pressbooks image, see Chapter 8 of the Introduction to Tourism and Hospitality in B.C.<\/em> open textbook for an example of what long descriptions look like in practice<\/a>.\n <\/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,\" UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt.[\/footnote] However, this doesn't mean that you should leave an alt tag blank.\n\nWhen a screen reader detects an image with a blank alt tag, it will read out the image file location. If the above picture about the The Wong-Baker Faces pain scale didn't have an alt tag, a screen reader would say, \"Graphic: https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/184\/2017\/06\/2049201506_0f9b17182a_o.jpg.\"\n\nWhen an image doesn't require an alt tag, place two double-quotation marks (\"\") in the Alternative Text field; this step will prompt the screen reader to say \"Graphic\" and move on to the caption.\n <\/a><\/a>Using colour<\/h1>\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 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.\n \n Example 1: Inaccessible Bar Chart<\/p>\n\n<\/header>\n \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\n\n\n \n\n[caption id=\"attachment_701\" align=\"aligncenter\" width=\"300\"] $\"Chart$ <\/a> Chart 1: In this bar chart, colour is the sole means of communicating the data.[\/caption]<\/td>\n \n\n[caption id=\"attachment_702\" align=\"aligncenter\" width=\"300\"] $\"Bar$ <\/a> 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 \n Example 2: Accessible Bar Chart<\/p>\n\n<\/header>\n \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 alt tag<\/a>.\n\n[caption id=\"attachment_703\" align=\"aligncenter\" width=\"300\"] $\"Modified$ <\/a> 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 Long description example<\/h2>\n<\/a>Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a>\n Attributions<\/h1>\nJacob: \u201c WFE003: Jacob<\/a>\u201d by Rosenfeld Media<\/a> is used under a CC BY 2.0 Generic Licence<\/a>.\n\nFigure 1.1: \"Pain Scales<\/a>\" by Juhan Sonin<\/a> has been modified (cropped) by BCcampus and is used under a CC BY 2.0 Generic Licence<\/a>.\n","rendered":" In this section, we provide recommendations to guide your inclusion of accessible, image-based content.<\/p>\n What are images?<\/h1>\n Images are non-text elements that include photographs, illustrations, diagrams, pictures, charts, graphs, and maps. \nFile types used<\/strong>: GIF, JPG, PNG<\/p>\n Why are you including the images you have selected?<\/h1>\n Before you can determine what to do to make an image accessible, you must identify its purpose<\/em> or value<\/em> to your textbook. Consider the following questions:<\/p>\n \n Does your image serve a functional<\/a> purpose? In other words, is it conveying non-text content to students? If so, you should:\n \n provide a text alternative that serves the equivalent purpose of the non-text material ^{[1]<\/sup><\/a><\/li>\n} not use colour as the only visual means of conveying information ^{[2]<\/sup><\/a><\/li>\n<\/ol>\n<\/li>\n} Does your image serve more of a decorative<\/a> purpose? In other words, is it primarily a design element that does not convey content? If so, you should:\n \n avoid unnecessary text descriptions<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n Who are you doing this for?<\/h1>\n This work supports students who:<\/p>\n \n Are blind or have low vision, like Jacob<\/a><\/li>\n Have poor contrast vision<\/li>\n Are colour blind and cannot differentiate between certain colours<\/li>\n Use a device with monochrome display<\/li>\n Use a print copy that is in black and white<\/li>\n Have limited Internet access and cannot download images<\/li>\n Have a form of cognitive disability<\/li>\n<\/ul>\n $\"Jacob$ <\/a><\/div>\n \n What do you need to do?<\/h1>\n 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 <\/a>Functional images<\/h1>\n 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 There are three ways to provide alternative text descriptions for images:<\/p>\n \n Describe the image in the alt tag<\/a><\/li>\n Describe the image in the surrounding text<\/a><\/li>\n Create and link to a long description<\/a> of the image<\/li>\n<\/ol>\n As you work on developing your alternative text descriptions, keep the following recommendations and guidelines in mind:<\/p>\n \n Remember that alternative text must convey the content and functionality of an image, and is rarely a literal description of the image (e.g., \u201cphoto of cat\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.^{[3]<\/sup><\/a><\/li>\n} 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 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 intend to provide.<\/li>\n 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 identify the material as an image, so including that detail in your alternative description is redundant.<\/li>\n Avoid redundancy of content in your alternative description. Don\u2019t repeat information that already appears in text adjacent to the image.<\/li>\n<\/ul>\n <\/a>Alt tags<\/h2>\n An alt tag refers to the alt attribute (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 Alt tags are used in two cases:<\/p>\n \n When an image doesn’t download due slow Internet, the alt tag content will display instead of the image.<\/li>\n 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 Alt tags should be no longer than 100 characters, including spaces and punctuation. 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 100 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 100 characters, see the section on long descriptions<\/a>.<\/p>\n To 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.<\/p>\n <\/a>Descriptions in surrounding text<\/h2>\n 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 If 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.<\/p>\n 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 decorative images<\/a>.<\/p>\n <\/a>Long descriptions<\/h2>\n If an image requires a description longer than 100 characters and adding an explanation to the surrounding text isn’t an option, provide a link to a long description instead. To do this, create a section at the end of the chapter for all long descriptions and use links to allow people to easily switch between the image and its long description.<\/p>\n Figure 1.1 shows an image from 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 long description.<\/p>\n Anyone using this textbook can access this long description by clicking on the long-description link, which will take them to the long 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 Curious about how this works? Try clicking on the [Long Description] link in the caption of Figure 1.1.<\/p>\n $\"Wong-Baker$ <\/a><\/p>\n 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? [Long Description]<\/a><\/p>\n<\/div>\n <\/a>How to set up a long description for an image in Pressbooks<\/h3>\n Adding a long description to an image in Pressbooks<\/a> can be complicated, but the following four steps will help guide you through the process.<\/p>\n For information on how to create same-page links in Pressbooks, see Hyperlink Material<\/a> in the Pressbooks Guide<\/em><\/a>.<\/div>\nStep 1: Add an alt tag<\/h4>\n Even though you will be providing a long description, the image still needs an alt tag<\/a>. In the Alternative Text field in the image editor, provide a brief<\/em> image description (only a few words), and state that there is a long description available.<\/p>\n \n Example<\/strong>: Wong-Baker Faces pain rating scale. Long description available.<\/li>\n<\/ul>\n Step 2: Insert a link to the long description in the image’s caption<\/h4>\n Provide a link to the long description in the caption of the image.<\/p>\n \n At the end of the caption, add “[Long Description]” to use for the link text.<\/li>\n Create a unique ID for the image. (In this case, the ID is “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 consistent.<\/li>\n<\/ol>\n The following table displays how the caption will look in the visual editor view and in the image editor view.<\/p>\n\n\n\n\n A Sample Caption With a Link to a Long Description<\/caption>\n Visual editor view<\/th>\n 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? [Long Description]<\/a><\/td>\n<\/tr>\n Image editor view<\/th>\n 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″>[Long Description]<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Step 3: Set up the long description<\/h4>\n \n Create a “Long Description” heading at the end of the chapter. Set it as Heading 1. All long descriptions will be added to this section in the order that the images appear in the chapter.<\/li>\n Under the “Long Description” heading, insert the image’s figure number followed by the long description.\n \n Example<\/strong>: Figure 1.1 long description<\/strong>: The Wong-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.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n Step 4: Link the long description to its image<\/h4>\n \n Insert a link at the end of the long 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.\n \n Example<\/strong>: Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a><\/li>\n<\/ul>\n<\/li>\n To link back to the image, you will need a new unique ID. Images automatically generate their own unique IDs, which you can use to link to them. Here is how to find an image’s unique ID:\n \n Search for the image in the HTML (text) editor. Hint: use [Ctrl\/Command] + [F], and then search for “Figure 1.1 The Wong-Baker”<\/li>\n You will see something like this:\n $\"Sample$ <\/a><\/p>\n The ID for Figure 1.1 is attachment_237<\/strong>, as highlighted in the above image.<\/p>\n<\/div>\n<\/li>\n Copy the caption ID, return to the visual editor, and find the long description. Use the caption ID as the link for [Return to Figure 1.1].<\/li>\n Save the chapter and test the links to make sure they work. If they don’t, double check your IDs.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\nNow that you have reviewed the steps to add a long description to a Pressbooks image, see Chapter 8 of the Introduction to Tourism and Hospitality in B.C.<\/em> open textbook for an example of what long descriptions look like in practice<\/a>.<\/p>\n <\/a>Decorative images<\/h1>\n If 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.”^{[4]<\/sup><\/a> However, this doesn’t mean that you should leave an alt tag blank.<\/p>\n} When a screen reader detects an image with a blank alt tag, it will read out the image file location. If the above picture about the The Wong-Baker Faces pain scale didn’t have an alt tag, a screen reader would say, “Graphic: https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/184\/2017\/06\/2049201506_0f9b17182a_o.jpg.”<\/p>\n When an image doesn’t require an alt tag, place two double-quotation marks (“”) in the Alternative Text field; this step will prompt the screen reader to say “Graphic” and move on to the caption.<\/p>\n <\/a><\/a>Using colour<\/h1>\n 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 \n Example 1: Inaccessible Bar Chart<\/p>\n<\/header>\n \n 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\n\n\n \n $\"Chart$ <\/a><\/p>\n Chart 1: In this bar chart, colour is the sole means of communicating the data.<\/p>\n<\/div>\n<\/td>\n \n $\"Bar$ <\/a><\/p>\n 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.<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n \n \n Example 2: Accessible Bar Chart<\/p>\n<\/header>\n \n 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 alt tag<\/a>.<\/p>\n $\"Modified$ <\/a><\/p>\n 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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n Long description example<\/h2>\n <\/a>Figure 1.1 long description<\/strong>: The Wong-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. [Return to Figure 1.1]<\/a><\/p>\n Attributions<\/h1>\n Jacob: \u201c WFE003: Jacob<\/a>\u201d by Rosenfeld Media<\/a> is used under a CC BY 2.0 Generic Licence<\/a>.<\/p>\n Figure 1.1: “Pain Scales<\/a>” by Juhan Sonin<\/a> has been modified (cropped) by BCcampus and is used under a CC BY 2.0 Generic Licence<\/a>.<\/p>\n \"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,\" W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv. ↵<\/a><\/li> \"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\" W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast. ↵<\/a><\/li> \"Alt text blunders,\" WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext. ↵<\/a><\/li> \"Top 10 Tips for Making Your Website Accessible,\" UC Berkeley: Web Access<\/em>, accessed March 27, 2018, https:\/\/webaccess.berkeley.edu\/resources\/tips\/web-accessibility#accessible-alt. ↵<\/a><\/li><\/ol><\/div>","protected":false},"author":1,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"Images","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":33,"_links":{"self":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/41"}],"collection":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/41\/revisions"}],"part":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/41\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=41"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=41"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pb.malartu.org\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}