{"id":46,"date":"2019-06-03T17:14:16","date_gmt":"2019-06-03T21:14:16","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=46"},"modified":"2019-07-29T10:43:22","modified_gmt":"2019-07-29T14:43:22","slug":"1-1-text-alternatives-level-a","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/","title":{"raw":"1.1 Text Alternatives (Level A)","rendered":"1.1 Text Alternatives (Level A)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\r\n<h2><strong><a id=\"1.1\"><\/a>Guideline 1.1<\/strong> Text Alternatives<\/h2>\r\nProvide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding-left: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.1.1\"><\/a>Success Criterion 1.1.1<\/strong> Non-Text Content<\/h3>\r\nLevel A\r\n\r\nAll <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-non-text-content\">non-text content<\/a> that is presented to the user has a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text-alternative\">text alternative<\/a> that serves the equivalent purpose, except for the situations listed below.\r\n<ul>\r\n \t<li><strong>Controls and input<\/strong>: If non-text content is a control or accepts user input, then it has a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-name\">name<\/a> that describes its purpose. (Refer to <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#name-role-value\">Success Criterion\u00a04.1.2<\/a> for additional requirements for controls and content that accepts user input.)<\/li>\r\n \t<li><strong>Time-based media<\/strong>: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#time-based-media\">Guideline 1.2<\/a> for additional requirements for media.)<\/li>\r\n \t<li><strong>Test<\/strong>: If non-text content is a test or exercise that would be invalid if presented in <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a>, then text alternatives at least provide descriptive identification of the non-text content.<\/li>\r\n \t<li><strong>Sensory<\/strong>: If non-text content is primarily intended to create a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-specific-sensory-experience\">specific sensory experience<\/a>, then text alternatives at least provide descriptive identification of the non-text content.<\/li>\r\n \t<li><strong>CAPTCHA<\/strong>: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-captcha\">CAPTCHA<\/a> using output modes for different types of sensory perception are provided to accommodate different disabilities.<\/li>\r\n \t<li><strong>Decoration, formatting, and invisible<\/strong>: If non-text content is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a>, that is, used only for visual formatting or not presented to users, it should be implemented in a way that it can be ignored by <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-assistive-technologies\">assistive technology<\/a>.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Non-Text Content Explained<\/h4>\r\nThere is good reason why this guideline is the first. While barriers can affect a wide range of people, those who tend to face the most barriers are people whose visual senses are limited or absent. Given the visual nature of the Web, potential barriers are many. Anything visual that is not described in text is a potential barrier.\r\n\r\n<strong>Why do I always need alternatives to images in my website?<\/strong>\r\n\r\nIf a website has photographs, artwork, drawings, or other graphic elements, adding text alternatives is an easy way to make the site accessible to people with certain disabilities. In addition, text alternatives benefit people who use text-based browsers, have slow Internet connections, or have limited data plans. Text alternatives also make it possible to search the Web for images.\r\n<ol>\r\n \t<li>Many people who are blind use a screen reader to access computers. But screen reading programs only understand text; they cannot interpret the content of images. By writing a description for each image on a web page, screen reader users gain access to the images. In most cases, the description need not be elaborate. The text alternative for a photograph of a sunset can be as simple as \u201csunset on Georgian Bay.\u201d The text alternative for a reproduction of a Picasso painting might be: \u201cpainting of an old man with a guitar by Pablo Picasso.\u201d<\/li>\r\n \t<li>Text-based browsers do not display images. By providing text alternatives, people who use text-based browsers will see the descriptions displayed in place of the images.<\/li>\r\n \t<li>Similarly, people with slow Internet connections or limited data plans sometimes set their browser to not display images (web pages load faster when images are not displayed, using up much less bandwidth). By providing text alternatives, users will see the descriptions displayed in place of the images, as opposed to seeing blank spaces where images would have appeared.<\/li>\r\n \t<li>When search engines \u201ccrawl\u201d websites to catalogue their content, they cannot determine what is contained in images (image content detection is in its early stages of development). Search engines only \u201cunderstand\u201d text. By including text alternatives, search engines are able to catalogue images, making them searchable.<\/li>\r\n<\/ol>\r\n<h4>The Art of Alt Text<\/h4>\r\nOne of the most common ways to remove barriers associated with visual content is to use the HTML alt attribute with images in web content. When people learn about web accessibility, \u201calt text\u201d is often introduced first. Alt text for images is, in most cases, an easy accommodation. There is, however, an art to creating effective alt text.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\r\n\r\n<strong>Definition<\/strong>\r\n\r\n<strong>Elements: <\/strong>Often referred to as HTML tags, these are the main features of HTML syntax. Examples include <span>\u00a0<code>&lt;p&gt;&lt;\/p&gt;<\/code>, <code>&lt;table&gt;&lt;\/table&gt;<\/code>, or <code>&lt;div&gt;&lt;\/div&gt;<\/code>, among many others.<\/span>\r\n\r\n[caption id=\"attachment_53\" align=\"alignnone\" width=\"499\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements.png\" alt=\"A visual example of an HTML element and attribute. See definitions above and below examples. \" width=\"499\" height=\"152\" class=\"wp-image-53 size-full\" \/> A visual example of an HTML element and attribute. <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTML_element\">Source: Wikipedia<\/a>[\/caption]\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\r\n\r\n<strong>Definition<\/strong>\r\n\r\n<strong>Attributes:<\/strong> These are the properties associated with an HTML element. In the image above, <code>class<\/code> is an example of an attribute. Attributes have values that define characteristics of an element. Other examples of attributes include <code>style=\"\"<\/code>, <code>href=\"\"<\/code>, <code>src=\"\"<\/code>, and <code>title=\"\"<\/code>, among many others.\r\n\r\n<\/div>\r\nWhat needs to be described in alt text must be done in <strong>125 characters <\/strong>or less. Some screen readers will stop reading at this character length. There is often much more in an image (i.e., a picture is worth a thousand words) than can be described in alt text. Depending on the context, the same image may have different descriptions. Consider the following image in the two contexts described:\r\n\r\n[caption id=\"attachment_61\" align=\"alignnone\" width=\"974\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth.png\" alt=\"When graphing population growth, population is presented on the y-axis, and years are presented on the x-axis.\" width=\"974\" height=\"593\" class=\"wp-image-61 size-full\" \/> Example of a chart. Source: United Nations, World Population Prospects.[\/caption]\r\n<h4>Context 1: In a statistics book<\/h4>\r\nIn a statistics book the actual data values in the graph may not be important. What may be important is the way that data is presented. Alt text in this case might read:\r\n\r\n<i>\u201cWhen graphing population growth, population is presented on the y-axis, and years are presented on the x-axis.\u201d<\/i>\r\n<h4>Context 2: In an article on global birth rates<\/h4>\r\nIn an article that talks about birth rates around the world, the data values will be more important, and the way the data is presented less so. Alt text in this case might read:\r\n\r\n<i>\u201cSince 1950, population growth for less-developed countries has increased at 5 times the rate of developed countries. See below.\u201d<\/i>\r\n\r\nNote the reference to additional description with \u201cSee below.\u201d With the limitation on the length of alt text, it is commonly necessary to provide additional details about an image in a long description. This can often be accomplished by providing an extended description in the text surrounding the image and in the alt text referring to that description. This extended description can be placed before or after the image or perhaps in a caption for the image. These long descriptions can be beneficial for many people, including those that do not have a disability but perhaps are not sure how to interpret the graph.\r\n\r\nA long description for context 2, might then read:\r\n\r\n<i>\u201cIn 1950, the ratio of population growth between less- and more-developed countries was approximately 2.5:1. Since then, the ratio has increased steadily. Today, that ratio is approximately 6:1. By 2050, that ratio is expected to increase to 9:1, with developed countries maintaining a close-to-zero population growth, compared to a nearly 600% increase in less-developed countries.\u201d<\/i>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\r\n\r\n<strong>Key Point: <\/strong> Alt text should be no longer than 125 characters. Some screen readers will stop reading at this character length.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\r\n\r\n<strong>Key Point: <\/strong>The HTML image element (i.e., <code>&lt;img&gt;<\/code>) also has a <a href=\"https:\/\/www.w3schools.com\/tags\/att_img_longdesc.asp\">longdesc<\/a> attribute that can be added to it, in addition to alt text, that references a URL to a location where a more detailed description is provided, perhaps on another web page or perhaps farther down the page, accessed using an HTML anchor. Unfortunately, <a title=\"Longdesc Test Cases\" href=\"https:\/\/webaim.org\/techniques\/alttext\/longdesctestcases.htm\"><code>longdesc<\/code>\u00a0is not well-supported<\/a> in any of the common browsers, so at this point using an alternative to <code>longdesc<\/code>, like describing in the surrounding text, is recommended.\r\n\r\n<\/div>\r\n<h4>Text Is Special<\/h4>\r\nOne important characteristic of text is its <i>adaptability<\/i>. As mentioned, text makes images searchable and enables search engines to index the alt text of images. Some of the many ways text can be adapted, include:\r\n<ul>\r\n \t<li>Screen readers can convert it to audio<\/li>\r\n \t<li>Screen readers can convert it to Braille<\/li>\r\n \t<li>Text-to-speech software can convert it to audio<\/li>\r\n \t<li>Text can be spoken and accessed with speech recognition software<\/li>\r\n \t<li>It can be translated using translation software<\/li>\r\n \t<li>Tools can simplify text to make it more readable<\/li>\r\n \t<li>Text can be magnified without losing its crisp appearance, unlike images of text<\/li>\r\n \t<li>Text colour can be changed to make it more readable<\/li>\r\n<\/ul>\r\nIn short, remember, providing text alternatives is usually a good way to make web content more accessible.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-content.html\">Understanding Success Criterion 1.1.1 Non-Text Content<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/?showtechniques=211#non-text-content\">How to Meet Success Criterion 1.1.1 Non-Text Content<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><code><\/code><a id=\"TT1.1.1\"><\/a>Try This: CAPTCHA and Spambots<\/strong><\/h4>\r\n<strong>Are You Human? Hiding from Spammers <\/strong>\r\n\r\nSpam robots are constantly roaming through sites to find ways of accessing unprotected mail systems so they can be used to send unsolicited mail or to hide the origins of spam emails.\r\n<ol>\r\n \t<li>To prevent \u201cspambots\u201d from finding their way into websites, a common strategy is to use a CAPTCHA task. This strategy requires a task be completed that can only be accomplished by a human being. The screenshot below shows a typical CAPTCHA task, in which a user identifies randomly generated letters in an image and enters those letters into a form field, typically done while registering on a system or using a web form that sends email.\r\n<img src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha.jpg\" alt=\"CAPTCHA task with phonetic spelling as an accessible alternative\" width=\"579\" height=\"231\" class=\"alignnone size-full wp-image-50\" \/><\/li>\r\n<\/ol>\r\n<p style=\"padding-left: 40px\">CAPTCHAs can be effective for warding off spambots, but they pose access barriers for some users. A person who is blind would not be able to see the characters in the CAPTCHA image and, thus, would be prevented from registering on the system without the help of a sighted person. It\u2019s not possible to include a text alternative of the characters in the CAPTCHA image because spambots can easily be programmed to find them. CAPTCHAs are available with audio output to get around this problem, so the blind person can hear the characters in a CAPTCHA image. But this still leaves out deaf blind users, who cannot see or hear the CAPTCHA characters. For such cases the site maintainer should provide a means for registrants to contact the site administrator, who can register the person manually. A variety of CAPTCHA utilities are available on the Web, which can be copied into a site\u2019s forms, and free services are available to generate audio CAPTCHAs:<\/p>\r\n\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.captchas.net\">Free CAPTCHA Service<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Another method of confirming that a human and not a spambot is registering on a website is to have registrants confirm their registration by replying to a message sent to their email address. This method avoids accessibility issues associated with CAPTCHA and can be accessible to deaf blind users. Many web applications today have email confirmation utilities built into them.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>","rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d243d90836e\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d243d90836e\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Guideline_11_Text_Alternatives\" >Guideline 1.1 Text Alternatives<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Success_Criterion_111_Non-Text_Content\" >Success Criterion 1.1.1 Non-Text Content<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Non-Text_Content_Explained\" >Non-Text Content Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#The_Art_of_Alt_Text\" >The Art of Alt Text<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Context_1_In_a_statistics_book\" >Context 1: In a statistics book<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Context_2_In_an_article_on_global_birth_rates\" >Context 2: In an article on global birth rates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Text_Is_Special\" >Text Is Special<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-1-text-alternatives-level-a\/#Try_This_CAPTCHA_and_Spambots\" >Try This: CAPTCHA and Spambots<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\n<h2><span class=\"ez-toc-section\" id=\"Guideline_11_Text_Alternatives\"><\/span><strong><a id=\"1.1\"><\/a>Guideline 1.1<\/strong> Text Alternatives<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding-left: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_111_Non-Text_Content\"><\/span><strong><a id=\"1.1.1\"><\/a>Success Criterion 1.1.1<\/strong> Non-Text Content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>All <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-non-text-content\">non-text content<\/a> that is presented to the user has a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text-alternative\">text alternative<\/a> that serves the equivalent purpose, except for the situations listed below.<\/p>\n<ul>\n<li><strong>Controls and input<\/strong>: If non-text content is a control or accepts user input, then it has a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-name\">name<\/a> that describes its purpose. (Refer to <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#name-role-value\">Success Criterion\u00a04.1.2<\/a> for additional requirements for controls and content that accepts user input.)<\/li>\n<li><strong>Time-based media<\/strong>: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#time-based-media\">Guideline 1.2<\/a> for additional requirements for media.)<\/li>\n<li><strong>Test<\/strong>: If non-text content is a test or exercise that would be invalid if presented in <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a>, then text alternatives at least provide descriptive identification of the non-text content.<\/li>\n<li><strong>Sensory<\/strong>: If non-text content is primarily intended to create a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-specific-sensory-experience\">specific sensory experience<\/a>, then text alternatives at least provide descriptive identification of the non-text content.<\/li>\n<li><strong>CAPTCHA<\/strong>: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-captcha\">CAPTCHA<\/a> using output modes for different types of sensory perception are provided to accommodate different disabilities.<\/li>\n<li><strong>Decoration, formatting, and invisible<\/strong>: If non-text content is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a>, that is, used only for visual formatting or not presented to users, it should be implemented in a way that it can be ignored by <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-assistive-technologies\">assistive technology<\/a>.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Non-Text_Content_Explained\"><\/span>Non-Text Content Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>There is good reason why this guideline is the first. While barriers can affect a wide range of people, those who tend to face the most barriers are people whose visual senses are limited or absent. Given the visual nature of the Web, potential barriers are many. Anything visual that is not described in text is a potential barrier.<\/p>\n<p><strong>Why do I always need alternatives to images in my website?<\/strong><\/p>\n<p>If a website has photographs, artwork, drawings, or other graphic elements, adding text alternatives is an easy way to make the site accessible to people with certain disabilities. In addition, text alternatives benefit people who use text-based browsers, have slow Internet connections, or have limited data plans. Text alternatives also make it possible to search the Web for images.<\/p>\n<ol>\n<li>Many people who are blind use a screen reader to access computers. But screen reading programs only understand text; they cannot interpret the content of images. By writing a description for each image on a web page, screen reader users gain access to the images. In most cases, the description need not be elaborate. The text alternative for a photograph of a sunset can be as simple as \u201csunset on Georgian Bay.\u201d The text alternative for a reproduction of a Picasso painting might be: \u201cpainting of an old man with a guitar by Pablo Picasso.\u201d<\/li>\n<li>Text-based browsers do not display images. By providing text alternatives, people who use text-based browsers will see the descriptions displayed in place of the images.<\/li>\n<li>Similarly, people with slow Internet connections or limited data plans sometimes set their browser to not display images (web pages load faster when images are not displayed, using up much less bandwidth). By providing text alternatives, users will see the descriptions displayed in place of the images, as opposed to seeing blank spaces where images would have appeared.<\/li>\n<li>When search engines \u201ccrawl\u201d websites to catalogue their content, they cannot determine what is contained in images (image content detection is in its early stages of development). Search engines only \u201cunderstand\u201d text. By including text alternatives, search engines are able to catalogue images, making them searchable.<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"The_Art_of_Alt_Text\"><\/span>The Art of Alt Text<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>One of the most common ways to remove barriers associated with visual content is to use the HTML alt attribute with images in web content. When people learn about web accessibility, \u201calt text\u201d is often introduced first. Alt text for images is, in most cases, an easy accommodation. There is, however, an art to creating effective alt text.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition<\/strong><\/p>\n<p><strong>Elements: <\/strong>Often referred to as HTML tags, these are the main features of HTML syntax. Examples include <span>\u00a0<code>&lt;p&gt;&lt;\/p&gt;<\/code>, <code>&lt;table&gt;&lt;\/table&gt;<\/code>, or <code>&lt;div&gt;&lt;\/div&gt;<\/code>, among many others.<\/span><\/p>\n<figure id=\"attachment_53\" aria-describedby=\"caption-attachment-53\" style=\"width: 499px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements.png\" alt=\"A visual example of an HTML element and attribute. See definitions above and below examples.\" width=\"499\" height=\"152\" class=\"wp-image-53 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements.png 499w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements-300x91.png 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements-65x20.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements-225x69.png 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/elements-350x107.png 350w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><figcaption id=\"caption-attachment-53\" class=\"wp-caption-text\">A visual example of an HTML element and attribute. <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTML_element\">Source: Wikipedia<\/a><\/figcaption><\/figure>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition<\/strong><\/p>\n<p><strong>Attributes:<\/strong> These are the properties associated with an HTML element. In the image above, <code>class<\/code> is an example of an attribute. Attributes have values that define characteristics of an element. Other examples of attributes include <code>style=\"\"<\/code>, <code>href=\"\"<\/code>, <code>src=\"\"<\/code>, and <code>title=\"\"<\/code>, among many others.<\/p>\n<\/div>\n<p>What needs to be described in alt text must be done in <strong>125 characters <\/strong>or less. Some screen readers will stop reading at this character length. There is often much more in an image (i.e., a picture is worth a thousand words) than can be described in alt text. Depending on the context, the same image may have different descriptions. Consider the following image in the two contexts described:<\/p>\n<figure id=\"attachment_61\" aria-describedby=\"caption-attachment-61\" style=\"width: 974px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth.png\" alt=\"When graphing population growth, population is presented on the y-axis, and years are presented on the x-axis.\" width=\"974\" height=\"593\" class=\"wp-image-61 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth.png 974w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth-300x183.png 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth-768x468.png 768w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth-65x40.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth-225x137.png 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/population_growth-350x213.png 350w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><figcaption id=\"caption-attachment-61\" class=\"wp-caption-text\">Example of a chart. Source: United Nations, World Population Prospects.<\/figcaption><\/figure>\n<h4><span class=\"ez-toc-section\" id=\"Context_1_In_a_statistics_book\"><\/span>Context 1: In a statistics book<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In a statistics book the actual data values in the graph may not be important. What may be important is the way that data is presented. Alt text in this case might read:<\/p>\n<p><i>\u201cWhen graphing population growth, population is presented on the y-axis, and years are presented on the x-axis.\u201d<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Context_2_In_an_article_on_global_birth_rates\"><\/span>Context 2: In an article on global birth rates<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In an article that talks about birth rates around the world, the data values will be more important, and the way the data is presented less so. Alt text in this case might read:<\/p>\n<p><i>\u201cSince 1950, population growth for less-developed countries has increased at 5 times the rate of developed countries. See below.\u201d<\/i><\/p>\n<p>Note the reference to additional description with \u201cSee below.\u201d With the limitation on the length of alt text, it is commonly necessary to provide additional details about an image in a long description. This can often be accomplished by providing an extended description in the text surrounding the image and in the alt text referring to that description. This extended description can be placed before or after the image or perhaps in a caption for the image. These long descriptions can be beneficial for many people, including those that do not have a disability but perhaps are not sure how to interpret the graph.<\/p>\n<p>A long description for context 2, might then read:<\/p>\n<p><i>\u201cIn 1950, the ratio of population growth between less- and more-developed countries was approximately 2.5:1. Since then, the ratio has increased steadily. Today, that ratio is approximately 6:1. By 2050, that ratio is expected to increase to 9:1, with developed countries maintaining a close-to-zero population growth, compared to a nearly 600% increase in less-developed countries.\u201d<\/i><\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point: <\/strong> Alt text should be no longer than 125 characters. Some screen readers will stop reading at this character length.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point: <\/strong>The HTML image element (i.e., <code>&lt;img&gt;<\/code>) also has a <a href=\"https:\/\/www.w3schools.com\/tags\/att_img_longdesc.asp\">longdesc<\/a> attribute that can be added to it, in addition to alt text, that references a URL to a location where a more detailed description is provided, perhaps on another web page or perhaps farther down the page, accessed using an HTML anchor. Unfortunately, <a title=\"Longdesc Test Cases\" href=\"https:\/\/webaim.org\/techniques\/alttext\/longdesctestcases.htm\"><code>longdesc<\/code>\u00a0is not well-supported<\/a> in any of the common browsers, so at this point using an alternative to <code>longdesc<\/code>, like describing in the surrounding text, is recommended.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Text_Is_Special\"><\/span>Text Is Special<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>One important characteristic of text is its <i>adaptability<\/i>. As mentioned, text makes images searchable and enables search engines to index the alt text of images. Some of the many ways text can be adapted, include:<\/p>\n<ul>\n<li>Screen readers can convert it to audio<\/li>\n<li>Screen readers can convert it to Braille<\/li>\n<li>Text-to-speech software can convert it to audio<\/li>\n<li>Text can be spoken and accessed with speech recognition software<\/li>\n<li>It can be translated using translation software<\/li>\n<li>Tools can simplify text to make it more readable<\/li>\n<li>Text can be magnified without losing its crisp appearance, unlike images of text<\/li>\n<li>Text colour can be changed to make it more readable<\/li>\n<\/ul>\n<p>In short, remember, providing text alternatives is usually a good way to make web content more accessible.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-content.html\">Understanding Success Criterion 1.1.1 Non-Text Content<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/?showtechniques=211#non-text-content\">How to Meet Success Criterion 1.1.1 Non-Text Content<\/a><\/li>\n<\/ul>\n<\/div>\n<div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><span class=\"ez-toc-section\" id=\"Try_This_CAPTCHA_and_Spambots\"><\/span><strong><code><\/code><a id=\"TT1.1.1\"><\/a>Try This: CAPTCHA and Spambots<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><strong>Are You Human? Hiding from Spammers <\/strong><\/p>\n<p>Spam robots are constantly roaming through sites to find ways of accessing unprotected mail systems so they can be used to send unsolicited mail or to hide the origins of spam emails.<\/p>\n<ol>\n<li>To prevent \u201cspambots\u201d from finding their way into websites, a common strategy is to use a CAPTCHA task. This strategy requires a task be completed that can only be accomplished by a human being. The screenshot below shows a typical CAPTCHA task, in which a user identifies randomly generated letters in an image and enters those letters into a form field, typically done while registering on a system or using a web form that sends email.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha.jpg\" alt=\"CAPTCHA task with phonetic spelling as an accessible alternative\" width=\"579\" height=\"231\" class=\"alignnone size-full wp-image-50\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha.jpg 579w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha-300x120.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha-65x26.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha-225x90.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/captcha-350x140.jpg 350w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/li>\n<\/ol>\n<p style=\"padding-left: 40px\">CAPTCHAs can be effective for warding off spambots, but they pose access barriers for some users. A person who is blind would not be able to see the characters in the CAPTCHA image and, thus, would be prevented from registering on the system without the help of a sighted person. It\u2019s not possible to include a text alternative of the characters in the CAPTCHA image because spambots can easily be programmed to find them. CAPTCHAs are available with audio output to get around this problem, so the blind person can hear the characters in a CAPTCHA image. But this still leaves out deaf blind users, who cannot see or hear the CAPTCHA characters. For such cases the site maintainer should provide a means for registrants to contact the site administrator, who can register the person manually. A variety of CAPTCHA utilities are available on the Web, which can be copied into a site\u2019s forms, and free services are available to generate audio CAPTCHAs:<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ul>\n<li><a href=\"http:\/\/www.captchas.net\">Free CAPTCHA Service<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Another method of confirming that a human and not a spambot is registering on a website is to have registrants confirm their registration by replying to a message sent to their email address. This method avoids accessibility issues associated with CAPTCHA and can be accessible to deaf blind users. Many web applications today have email confirmation utilities built into them.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n","protected":false},"author":100,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-46","chapter","type-chapter","status-publish","hentry"],"part":26,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":40,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/46\/revisions"}],"predecessor-version":[{"id":1099,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/46\/revisions\/1099"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/parts\/26"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/46\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=46"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=46"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}