Why are you including the images you have selected?<\/h1>\r\nBefore you can determine what to do to make an image\u00a0accessible, you must identify its purpose<\/em> or value<\/em> to your textbook. Consider the following questions:\r\n\r\n \t- Does your image serve a\u00a0functional<\/a> purpose?\u00a0In other words, is it conveying non-text content to students? If so, you should:\r\n
\r\n \t- 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,\"\u00a0W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.[\/footnote]<\/li>\r\n \t
- not use colour as the only visual means of conveying information[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\"\u00a0W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.[\/footnote]<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t
- Does your image serve more of a\u00a0decorative<\/a> purpose?\u00a0In other words, is it primarily a design element that does not convey content? If so, you should:\r\n
\r\n \t- avoid unnecessary text descriptions<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n
Who are you doing this for?<\/h1>\r\nThis work supports students who:\r\n\r\n \t- Have poor contrast vision<\/li>\r\n \t
- Are colour blind and cannot differentiate between certain colours<\/li>\r\n \t
- Use a device with monochrome display<\/li>\r\n \t
- Use a print copy that is in black and white<\/li>\r\n \t
- Have limited Internet access and cannot download images<\/li>\r\n \t
- Have a form of\u00a0cognitive disability<\/li>\r\n<\/ul>\r\n\r\n
\r\n\r\nWhat do you need to do?<\/h1>\r\nDetermine the role of each image used in content as either functional or decorative. Once that has been decided, select how each image will meet accessibility needs by providing descriptive text in a variety of ways. Figures, such as charts and graphs that rely on colour to convey information, should also be evaluated for accessibility by students who are unable to distinguish between or see colour.\r\n<\/a>Functional images<\/h1>\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 information as the image.\r\n\r\nThere are three ways to provide alternative text descriptions for images:\r\n\r\n \t- Describe the image in the surrounding text<\/a>.<\/li>\r\n \t
- Describe the image in the alt tag<\/a>.<\/li>\r\n \t
- Create and link to a long description<\/a> of the image.<\/li>\r\n<\/ol>\r\nAs you work on developing your\u00a0alternative text descriptions, keep the following recommendations and guidelines in mind:\r\n
\r\n \t- Remember that alternative text must convey the content and functionality of an image, and is rarely a literal\u00a0description of the image (e.g., \u201cphoto of cat\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.[footnote]\"Alt text blunders,\"\u00a0WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext.[\/footnote]<\/li>\r\n \t
- 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 \t
- For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- or two-sentence description to ensure all users will benefit from the content or context you\u00a0intend to provide.<\/li>\r\n \t
- Leave out unnecessary information. For example, you do not need to include information like \u201cimage of\u2026\u201d or \u201cphoto of\u2026\u201d; assistive technologies will automatically\u00a0identify the material as an image, so including that detail in your alternative description is redundant.<\/li>\r\n \t
- Avoid redundancy of content in your alternative description. Don\u2019t\u00a0repeat information that already appears in text adjacent\u00a0to the image.<\/li>\r\n<\/ul>\r\nFor strategies on how to make complex visuals such as graphs, tables, charts, and more accessible, see the following resource created by\u00a0Supada Amornchat (CC BY-NC-SA): Complex Images for All Learners: A Guide to Making Visual Content Accessible [PDF]<\/a><\/div>\r\n
<\/a>Descriptions in surrounding text<\/h2>\r\nYou can use the surrounding text to provide the same information as conveyed by the image. This is often the best option for complex images because it makes the information available for everyone, not just those using the alt tags.\r\n\r\nIf you are editing someone else's work for accessibility, you are probably not at liberty to start adding to the main text. However, if you are the author, this is the best and easiest option.\r\n\r\nIf an image has been adequately described in the surrounding text, you can either provide a few-word description of the image in the alt tag or follow the procedures for decorative images<\/a>.\r\n<\/a>Alt tags<\/h2>\r\nAn alt tag refers to the alt attribute (alt<\/em> is short for alternative) within an IMG tag. Alt tags are used in two cases:\r\n\r\n \t- When an image doesn't download due to slow Internet, the alt tag content will display instead of the image.<\/li>\r\n \t
- 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>\r\n<\/ol>\r\nAlt tags should be no longer than 125 characters, including spaces and punctuation.[footnote]All screen readers are different, so a 125-character max is a recommendation. Other sources may provide a different number.[\/footnote] This is because when a screen reader finds an image, it will say \"Graphic\" before reading out the alt tag. If the alt tag is longer than 125 characters, the screen reader will interrupt the flow of text and say \"Graphic\" again, before continuing to read out the alt tag. This can be confusing. For images that require descriptions longer than 125 characters, see the section on long descriptions<\/a>.\r\n
Adding Alt Tags in VIU Tools<\/strong><\/h1>\r\nAlt Tags in VIULearn<\/h2>\r\nWhen you upload a new image to VIULearn, you will be prompted to add Alternative Text.\r\n\r\n![\"Pop](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-12-01-at-3.03.00-PM-1024x850.png\")
\r\n\r\nTo edit the alt tag of an existing image, click on the image and choose Image options from the menu.\r\n\r\n[caption id=\"attachment_36\" align=\"alignnone\" width=\"500\"]![\"Edit](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-12-01-at-3.06.40-PM-1024x542.png\")
Photo by lee bernd on Unsplash[\/caption]\r\n\r\nAdd the alt tag to the Image Description field.\r\n![\"Insert\/edit](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-12-01-at-3.14.54-PM.png\")
<\/h4>\r\nAlt Tags in VIUBlogs<\/h2>\r\nWhen you add an image to a blog post you will be given the option to add Alt Text as shown in the screen shot below.\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/Screen-Shot-2020-12-01-at-3.12.32-PM-1024x577.png\")
\r\nAlt Tags in Word<\/h2>\r\nLearn how to add Alt Tags in Microsoft Office products (e.g. Word and Powerpoint) by accessing the the Microsoft Office support website<\/a>.\r\nAlt Tags in Google Docs<\/h2>\r\nLearn how to add Alt Tags in Google Suite (e.g. Docs and Slides) by accessing the Google Docs Help Center.<\/a>\r\n\r\n \r\nDecorative images<\/h1>\r\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.\r\n\r\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.\"\r\n\r\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.\r\n<\/a>Using colour<\/h1>\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 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>\r\n\r\n
\r\nExample 1: Inaccessible Bar Chart<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\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.\r\n
- \r\n \t
- 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,\"\u00a0W3C<\/em>, accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv.[\/footnote]<\/li>\r\n \t
- not use colour as the only visual means of conveying information[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\"\u00a0W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.[\/footnote]<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t
- Does your image serve more of a\u00a0decorative<\/a> purpose?\u00a0In other words, is it primarily a design element that does not convey content? If so, you should:\r\n
- \r\n \t
- avoid unnecessary text descriptions<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n
Who are you doing this for?<\/h1>\r\nThis work supports students who:\r\n
- \r\n \t
- Have poor contrast vision<\/li>\r\n \t
- Are colour blind and cannot differentiate between certain colours<\/li>\r\n \t
- Use a device with monochrome display<\/li>\r\n \t
- Use a print copy that is in black and white<\/li>\r\n \t
- Have limited Internet access and cannot download images<\/li>\r\n \t
- Have a form of\u00a0cognitive disability<\/li>\r\n<\/ul>\r\n\r\n
\r\n\r\nWhat do you need to do?<\/h1>\r\nDetermine the role of each image used in content as either functional or decorative. Once that has been decided, select how each image will meet accessibility needs by providing descriptive text in a variety of ways. Figures, such as charts and graphs that rely on colour to convey information, should also be evaluated for accessibility by students who are unable to distinguish between or see colour.\r\n
<\/a>Functional images<\/h1>\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 information as the image.\r\n\r\nThere are three ways to provide alternative text descriptions for images:\r\n
- \r\n \t
- Describe the image in the surrounding text<\/a>.<\/li>\r\n \t
- Describe the image in the alt tag<\/a>.<\/li>\r\n \t
- Create and link to a long description<\/a> of the image.<\/li>\r\n<\/ol>\r\nAs you work on developing your\u00a0alternative text descriptions, keep the following recommendations and guidelines in mind:\r\n
- \r\n \t
- Remember that alternative text must convey the content and functionality of an image, and is rarely a literal\u00a0description of the image (e.g., \u201cphoto of cat\u201d<\/em>). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.[footnote]\"Alt text blunders,\"\u00a0WebAIM<\/em>, accessed March 27, 2018, http:\/\/webaim.org\/articles\/gonewild\/#alttext.[\/footnote]<\/li>\r\n \t
- 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 \t
- For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- or two-sentence description to ensure all users will benefit from the content or context you\u00a0intend to provide.<\/li>\r\n \t
- Leave out unnecessary information. For example, you do not need to include information like \u201cimage of\u2026\u201d or \u201cphoto of\u2026\u201d; assistive technologies will automatically\u00a0identify the material as an image, so including that detail in your alternative description is redundant.<\/li>\r\n \t
- Avoid redundancy of content in your alternative description. Don\u2019t\u00a0repeat information that already appears in text adjacent\u00a0to the image.<\/li>\r\n<\/ul>\r\n
For strategies on how to make complex visuals such as graphs, tables, charts, and more accessible, see the following resource created by\u00a0Supada Amornchat (CC BY-NC-SA): Complex Images for All Learners: A Guide to Making Visual Content Accessible [PDF]<\/a><\/div>\r\n<\/a>Descriptions in surrounding text<\/h2>\r\nYou can use the surrounding text to provide the same information as conveyed by the image. This is often the best option for complex images because it makes the information available for everyone, not just those using the alt tags.\r\n\r\nIf you are editing someone else's work for accessibility, you are probably not at liberty to start adding to the main text. However, if you are the author, this is the best and easiest option.\r\n\r\nIf an image has been adequately described in the surrounding text, you can either provide a few-word description of the image in the alt tag or follow the procedures for decorative images<\/a>.\r\n
<\/a>Alt tags<\/h2>\r\nAn alt tag refers to the alt attribute (alt<\/em> is short for alternative) within an IMG tag. Alt tags are used in two cases:\r\n
- \r\n \t
- When an image doesn't download due to slow Internet, the alt tag content will display instead of the image.<\/li>\r\n \t
- 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>\r\n<\/ol>\r\nAlt tags should be no longer than 125 characters, including spaces and punctuation.[footnote]All screen readers are different, so a 125-character max is a recommendation. Other sources may provide a different number.[\/footnote] This is because when a screen reader finds an image, it will say \"Graphic\" before reading out the alt tag. If the alt tag is longer than 125 characters, the screen reader will interrupt the flow of text and say \"Graphic\" again, before continuing to read out the alt tag. This can be confusing. For images that require descriptions longer than 125 characters, see the section on long descriptions<\/a>.\r\n
Adding Alt Tags in VIU Tools<\/strong><\/h1>\r\n
Alt Tags in VIULearn<\/h2>\r\nWhen you upload a new image to VIULearn, you will be prompted to add Alternative Text.\r\n\r\n
\r\n\r\nTo edit the alt tag of an existing image, click on the image and choose Image options from the menu.\r\n\r\n[caption id=\"attachment_36\" align=\"alignnone\" width=\"500\"] Photo by lee bernd on Unsplash[\/caption]\r\n\r\nAdd the alt tag to the Image Description field.\r\n<\/h4>\r\nAlt Tags in VIUBlogs<\/h2>\r\nWhen you add an image to a blog post you will be given the option to add Alt Text as shown in the screen shot below.\r\n\r\n
\r\nAlt Tags in Word<\/h2>\r\nLearn how to add Alt Tags in Microsoft Office products (e.g. Word and Powerpoint) by accessing the the Microsoft Office support website<\/a>.\r\n
Alt Tags in Google Docs<\/h2>\r\nLearn how to add Alt Tags in Google Suite (e.g. Docs and Slides) by accessing the Google Docs Help Center.<\/a>\r\n\r\n \r\n
Decorative images<\/h1>\r\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.\r\n\r\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.\"\r\n\r\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.\r\n
<\/a>Using colour<\/h1>\r\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>\r\n\r\n
\r\n Example 1: Inaccessible Bar Chart<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\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.\r\n
- Describe the image in the alt tag<\/a>.<\/li>\r\n \t
- Describe the image in the surrounding text<\/a>.<\/li>\r\n \t
- not use colour as the only visual means of conveying information[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1,\"\u00a0W3C,<\/em> accessed March 27, 2018, http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.[\/footnote]<\/li>\r\n<\/ol>\r\n<\/li>\r\n \t
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/colour-depend-1-300x249-1.jpg\")
Chart 1: In this bar chart, colour is the sole means of communicating the data.[\/caption]<\/td>\r\n![\"Bar](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/colour-depend-2-300x249-1.jpg\")
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>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/div>\r\n![\"Modified](\"https:\/\/pressbooks.bccampus.ca\/designingforall\/wp-content\/uploads\/sites\/1213\/2020\/12\/colour-depend-3-300x268-1.jpg\")
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]\r\n\r\n<\/div>\r\n<\/div>\r\n ","rendered":"