Quick links<\/h3>\n\n- Functional images<\/a>\n
\n- Alt tags<\/a><\/li>\n
- Descriptions in surrounding text<\/a><\/li>\n
- Long descriptions<\/a>\n
\n- How to set up long descriptions in Pressbooks<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- Decorative images<\/a><\/li>\n
- Using colour<\/a><\/li>\n<\/ul>\n<\/div>\n
What are images?<\/h1>\n
Images include<\/strong>: photographs, diagrams, pictures, charts, graphs, maps
\nFile types<\/strong>: .gif, .jpg, .png<\/p>\n
\nBefore you begin<\/h1>\nWhy are you including the images you have selected?<\/h2>\n
Before you can determine what you need to do to make an image accessible, you first need to identify its purpose <\/strong>or value <\/strong>to your textbook. Consider the following questions:<\/p>\n\n- Does your image serve a functional<\/strong><\/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.[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,\" W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.[\/footnote]<\/li>\n
- not use colour as the only visual means of conveying information.[footnote]\"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.[\/footnote]<\/li>\n<\/ol>\n<\/li>\n
- Does your image serve more of a decorative<\/strong><\/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?<\/h2>\n
This work supports students who:<\/p>\n
\n- Are blind or have low vision, for example Jacob<\/a><\/li>\n
- Have poor contrast vision<\/li>\n
- Are colour blind and cannot differentiate between certain colours<\/li>\n
- Are using a device with monochrome display<\/li>\n
- Are using 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](\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/Jacob.jpg\")
<\/a><\/p>\n
\nWhat do you need to do?<\/h1>\n<\/a>Functional images<\/h2>\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.<\/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 what the content of the image is and what it does.[footnote]\"Alt text blunders,\" WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext.[\/footnote]<\/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- to two-sentence description to ensure all users will benefit from the content or context you intended to provide.<\/li>\n
- Leave out any 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 the same information that already appears in text adjacent to the image.<\/li>\n<\/ul>\n
<\/a>Alt tags<\/h3>\nAn alt tag refers to the ALT attribute within an IMG tag. All images uploaded into Pressbooks have an alt tag, but for them to be useful, you will have to insert an image description.<\/p>\n
Alt tags are used in two cases:<\/p>\n
\n- When a person's Internet is slow and images are not downloading, 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>\nTo edit an image's alt tag in Pressbooks, click on the image and select the \"edit\" icon. 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 can describe the image.<\/p>\n
<\/a>Descriptions in surrounding text<\/h3>\nYou can use the surrounding text to provide the same information as provided in 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<\/h3>\nIf an image requires a description longer than 100 characters and adding an explanation to the surrounding text isn't an option, you can provide a link to a long description instead. To do this, you will create a section at the end of a 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>\nAnyone 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[caption id=\"attachment_237\" align=\"aligncenter\" width=\"711\"]![\"Wong-Baker](\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/2049201506_0f9b17182a_o.jpg\")
<\/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? [Long Description]<\/a>[\/caption]\n<\/a>How to set up a long description for an image in Pressbooks<\/h4>\nAdding 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>\nStep 1: Add an alt tag<\/h5>\n
Even though you will be providing a long description, the image still needs an alt tag<\/a>. In the Alternative Text textbox in the Image editor, provide a BRIEF image description (only a few words), and state that there is a long description available.<\/p>\n\n- Example: \"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<\/h5>\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, it is \"fig1.1\".) The id can be whatever you want, but if you have multiple images that require long descriptions, it is generally best practice to establish a convention for creating ids to keep them consistent.<\/li>\n<\/ol>\nFor information about how to create same-page links in Pressbooks, read the content under the \"How to link text within a chapter\" heading in the How to Link Material chapter<\/a> in the BCcampus Open Education Pressbooks Guide<\/em><\/a>.<\/div>\n
The following table displays how the caption will look in the Visual-editor view and in the Image-editor view.<\/p>\n
- \n
- Alt tags<\/a><\/li>\n
- Descriptions in surrounding text<\/a><\/li>\n
- Long descriptions<\/a>\n
- \n
- How to set up long descriptions in Pressbooks<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- Decorative images<\/a><\/li>\n
- Using colour<\/a><\/li>\n<\/ul>\n<\/div>\n
What are images?<\/h1>\n
Images include<\/strong>: photographs, diagrams, pictures, charts, graphs, maps
\nFile types<\/strong>: .gif, .jpg, .png<\/p>\n
\nBefore you begin<\/h1>\n
Why are you including the images you have selected?<\/h2>\n
Before you can determine what you need to do to make an image accessible, you first need to identify its purpose <\/strong>or value <\/strong>to your textbook. Consider the following questions:<\/p>\n
- \n
- Does your image serve a functional<\/strong><\/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.[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1,\" W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.[\/footnote]<\/li>\n
- not use colour as the only visual means of conveying information.[footnote]\"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.[\/footnote]<\/li>\n<\/ol>\n<\/li>\n
- Does your image serve more of a decorative<\/strong><\/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?<\/h2>\n
This work supports students who:<\/p>\n
- \n
- Are blind or have low vision, for example Jacob<\/a><\/li>\n
- Have poor contrast vision<\/li>\n
- Are colour blind and cannot differentiate between certain colours<\/li>\n
- Are using a device with monochrome display<\/li>\n
- Are using 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
<\/a><\/p>\n
\nWhat do you need to do?<\/h1>\n
<\/a>Functional images<\/h2>\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 what the content of the image is and what it does.[footnote]\"Alt text blunders,\" WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext.[\/footnote]<\/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- to two-sentence description to ensure all users will benefit from the content or context you intended to provide.<\/li>\n
- Leave out any 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 the same information that already appears in text adjacent to the image.<\/li>\n<\/ul>\n
<\/a>Alt tags<\/h3>\n
An alt tag refers to the ALT attribute within an IMG tag. All images uploaded into Pressbooks have an alt tag, but for them to be useful, you will have to insert an image description.<\/p>\n
Alt tags are used in two cases:<\/p>\n
- \n
- When a person's Internet is slow and images are not downloading, 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 \"edit\" icon. 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 can describe the image.<\/p>\n
<\/a>Descriptions in surrounding text<\/h3>\n
You can use the surrounding text to provide the same information as provided in 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<\/h3>\n
If an image requires a description longer than 100 characters and adding an explanation to the surrounding text isn't an option, you can provide a link to a long description instead. To do this, you will create a section at the end of a 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[caption id=\"attachment_237\" align=\"aligncenter\" width=\"711\"]
<\/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? [Long Description]<\/a>[\/caption]\n<\/a>How to set up a long description for an image in Pressbooks<\/h4>\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
Step 1: Add an alt tag<\/h5>\n
Even though you will be providing a long description, the image still needs an alt tag<\/a>. In the Alternative Text textbox in the Image editor, provide a BRIEF image description (only a few words), and state that there is a long description available.<\/p>\n
- \n
- Example: \"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<\/h5>\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, it is \"fig1.1\".) The id can be whatever you want, but if you have multiple images that require long descriptions, it is generally best practice to establish a convention for creating ids to keep them consistent.<\/li>\n<\/ol>\nFor information about how to create same-page links in Pressbooks, read the content under the \"How to link text within a chapter\" heading in the How to Link Material chapter<\/a> in the BCcampus Open Education Pressbooks Guide<\/em><\/a>.<\/div>\n
The following table displays how the caption will look in the Visual-editor view and in the Image-editor view.<\/p>\n
- Example: \"Wong-Baker Faces pain rating scale. Long description available.\"<\/li>\n<\/ul>\n
- Describe the image in the surrounding text<\/a>.<\/li>\n
- Are blind or have low vision, for example Jacob<\/a><\/li>\n
- not use colour as the only visual means of conveying information.[footnote]\"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.[\/footnote]<\/li>\n<\/ol>\n<\/li>\n
- 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,\" W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.[\/footnote]<\/li>\n
- Decorative images<\/a><\/li>\n
- Descriptions in surrounding text<\/a><\/li>\n
![\"Sample](\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/caption-ID.png\")
<\/a> The id for Figure 1.1 is attachment_237<\/strong>, as highlighted in the above image.[\/caption]<\/li>\n![\"Colour-dependent](\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/colour-depend-1-300x249.jpg\")
<\/a> In this example of a bar chart, colour is the sole means of communicating the data.[\/caption]\n[caption id=\"attachment_176\" align=\"alignright\" width=\"300\"]![\"Bar](\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/colour-depend-2-300x249.jpg\")
<\/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]\n![\"Modified](\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/colour-depend-3-300x268.jpg\")
<\/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]\n![\"Jacob](\"\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/Jacob.jpg\")
<\/a><\/p>\n![\"Wong-Baker](\"\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/2049201506_0f9b17182a_o.jpg\")
<\/a>