{"id":174,"date":"2019-06-04T12:27:08","date_gmt":"2019-06-04T16:27:08","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=174"},"modified":"2019-07-29T14:14:21","modified_gmt":"2019-07-29T18:14:21","slug":"1-3-adaptable-level-aa-and-aaa","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/","title":{"raw":"1.3 Adaptable (Level AA and AAA)","rendered":"1.3 Adaptable (Level AA and AAA)"},"content":{"raw":"WCAG 2.1 added two new Level AA and one new Level AAA Success Criteria for <strong>Guideline 1.3<\/strong>.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.3.4\"><\/a>Success Criterion 1.3.4<\/strong> Orientation<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AA\r\n\r\nContent does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a>.\r\n\r\n<\/div>\r\n<h4>Orientation Explained<\/h4>\r\nWhen WCAG 2.0 was introduced in 2008, the first iPhone had only just been released. At that time there was no real consideration regarding device orientation because, typically, there was no need. Today, however, mobile devices have become as prevalent as computer screens, and orientation is a key characteristic of such devices. Even computer monitors these days typically have an orientation setting that allow a monitor to be turned to a vertical orientation.\r\n\r\nIt is common for people to mount a mobile device on their wheelchair arm, for instance. Depending on preference, the device may be positioned in either a portrait or landscape orientation. If web content is limited to a particular orientation, it can make content difficult to access effectively in cases like this.\r\n\r\nThere are occasions where orientation has to be limited to landscape or to portrait, but in general, such a limitation should be avoided.\r\n\r\nSome examples where orientation may be restricted could include:\r\n<ul>\r\n \t<li>A piano app, which would need to be in a landscape orientation in order for the piano keys to be wide enough to touch individually with a finger<\/li>\r\n \t<li>A cheque deposit function in a banking app, where landscape orientation would be required<\/li>\r\n<\/ul>\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\/orientation.html\">Understanding Success Criterion 1.3.4: Orientation<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#orientation\">How to Meet Orientation<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.3.5\"><\/a>Success Criterion 1.3.5<\/strong> Identify Input Purpose<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AA\r\n\r\nThe purpose of each input field collecting information about the user can be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-programmatically-determinable\">programmatically determined<\/a> when:\r\n<ul>\r\n \t<li>the input field serves a purpose identified in the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#input-purposes\">Input Purposes for User Interface Components section<\/a>; and<\/li>\r\n \t<li>the content is implemented using technologies with support for identifying the expected meaning for form input data.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Identify Input Purpose Explained<\/h4>\r\nFor people with cognitive disabilities, low vision, or some types of learning disabilities, it can be difficult to determine the purpose of a form field or the correct format for the data being entered. This success criteria indicates that browsers and assistive technologies must be able to determine the expected input.\r\n\r\nWhile browsers have been able to do this for some time, it\u2019s only recently that browsers have used their own strategies to automatically fill (autofill) forms with predefined data using technology-specific algorithms. For instance, Firefox will remember values entered into a field named \u201cname\u201d or \u201ctelephone.\u201d So, the next time a field with the same name is encountered, it will offer up the values that were previously entered into a field with the same name. While this does provide some indication of the expected input, they are general and not exact. That is, \u201cname\u201d could refer to first or last name; \u201ctelephone\u201d could include a country code, area code, and extension, and so on.\r\n\r\nIn HTML 5.2, the \u201cautocomplete\u201d attribute was added to help developers meet this requirement in WCAG 2.1. It can be used to provide specific descriptions about the purpose for form fields. For the name example, one could add <code>autocomplete=\"given-name\"<\/code> and <code>autocomplete=\"family-name\"<\/code> to make it clearer what name is expected for respective form fields. If these values have been previously saved, they would be offered to the user to choose from, so they are not required to type their name.\r\n\r\nThere is fairly good support for the autocomplete attribute across current browsers. Form developers are encouraged to use it to make it easier for people with disabilities to fill out forms. Consequently, it makes filling out forms more efficient for everyone, including frequent online shoppers, for example. For more about \u201cautocomplete\u201d see the suggested readings below.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: AutoFill\"><\/a>Try This: Update Your Autofill Settings in Chrome<\/strong><\/h4>\r\n<ol>\r\n \t<li>Open Chrome settings through the icon with the three vertical dots at the top right of the browser.<\/li>\r\n \t<li>Open the Advanced settings at the bottom of the settings screen.<\/li>\r\n \t<li>In the Passwords and Forms section of the Advanced settings, open the \u201cAutofill Settings.\u201d<\/li>\r\n \t<li>Fill in your details (at least first name, last name, and email).<\/li>\r\n \t<li>Visit <a href=\"https:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml5_input_autocomplete\">the demo site<\/a> and click into the form on the right to see how the values you entered are displayed.<\/li>\r\n<\/ol>\r\n<div class=\"textbox\"><strong>Note:<\/strong> Depending on the version of Chrome you are using, the above settings may be accessed through different paths.<\/div>\r\nAlso, try <a href=\"https:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml5_input_autocomplete\">the demo site<\/a> with a current version of Firefox and see what happens. You may notice some inconsistencies between the two browsers.\r\n\r\n<\/div>\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\/identify-input-purpose.html#input-purposes\">Understanding Success Criterion 1.3.5: Identify Input Purpose<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#identify-input-purpose\">How to Meet Identify Input Purpose<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/html52\/sec-forms.html#sec-autofill\">HTML 5.2 AutoComplete<\/a> (for a full list of autocomplete tokens)<\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.3.6\"><\/a>Success Criterion 1.3.6<\/strong> Identify Purpose<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AAA\r\n\r\nIn content implemented using markup languages, the purpose of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">User Interface Components<\/a>, icons, and\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-regions\">regions<\/a> can be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-programmatically-determinable\">programmatically determined<\/a>.\r\n\r\n<\/div>\r\n<h4>Identify Purpose Explained<\/h4>\r\nIn addition to roles associated with various user interface elements that identify what an element is (e.g., <code>role=\"link\"<\/code> for a link), this success criteria adds a purpose to that role (e.g., a link to the site\u2019s home page).\r\n\r\nThese \u201cpurposes\u201d are defined by the W3C\u2019s Cognitive and Learning Disabilities Accessibility Task Force (COGA). It will likely be introduced with the next version of WAI-ARIA, which will provide standard ways to define purpose that will help make content on the Web easier to understand, particularly for those with cognitive disabilities.\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>WAI-ARIA: <\/strong>The two parts of the acronym represent \u201cWeb Accessibility Initiative,\u201d the group at the World Wide Web Consortium (i.e., W3C) that works on accessibility specifications, and \u201cAccessible Rich Internet Applications,\u201d the specification introduced around the same time as HTML5. WAI-ARIA is used to add semantics for custom web elements (like a slider or popup menu) and web interactivity (like a control bar for a video player) to make them understandable by assistive technologies such as screen readers.\r\n\r\n<\/div>\r\nFor example, icons may be used to provide a visual representation of an element. The home link, for instance, might include a house icon, along with the word \u201chome\u201d to represent the link. Those who are then unable to read the word can make use of the visual representation. Being defined in a standard way (e.g., <code>aria-function=\"home-link\"<\/code>), technology will be able to read (i.e., programmatically determine) these \u201cpurpose\u201d attributes, making it possible for users to replace the icons with their own, perhaps using an arrow icon to represent home, for instance, which may be more meaningful to a particular person than a house icon.\r\n\r\nThough standardizing how purpose will be identified is still a work in progress, there are already WAI-ARIA landmark roles that function to define the purpose of regions on a web page (e.g., banner, navigation, main, or complementary). This then makes it possible for technology to identify those regions. A user can potentially hide away everything except the main region on the page, which contains the primary content, so, for example, a person with an attention-related disability is not distracted by other elements on the page.\r\n\r\nPersonalization of this nature is an evolving area of research at W3C and elsewhere, which promises to optimize using the Web for each individual user in the not-too-distant future.\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\/identify-purpose.html\">Understanding Success Criterion 1.3.6: Identify Purpose<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#identify-purpose\">How to Meet Identify Purpose<\/a><\/li>\r\n \t<li><a href=\"https:\/\/rawcdn.githack.com\/w3c\/coga\/db4811e2fb6cba1648b907b4ea7620ce8b997bd7\/techniques\/index.html\">Techniques for the The Cognitive and Learning Disabilities Accessibility Task Force (COGA, Editor\u2019s Draft)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/w3c.github.io\/personalization-semantics\/\">Personalization Semantics Explainer 1.0 (Editor\u2019s Draft)<\/a><\/li>\r\n<\/ul>\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-69d9ed45521e6\" 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-69d9ed45521e6\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/#Success_Criterion_134_Orientation\" >Success Criterion 1.3.4 Orientation<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/#Orientation_Explained\" >Orientation Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/#Success_Criterion_135_Identify_Input_Purpose\" >Success Criterion 1.3.5 Identify Input Purpose<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/#Identify_Input_Purpose_Explained\" >Identify Input Purpose Explained<\/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-3-adaptable-level-aa-and-aaa\/#Try_This_Update_Your_Autofill_Settings_in_Chrome\" >Try This: Update Your Autofill Settings in Chrome<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/#Success_Criterion_136_Identify_Purpose\" >Success Criterion 1.3.6 Identify Purpose<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-aa-and-aaa\/#Identify_Purpose_Explained\" >Identify Purpose Explained<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p>WCAG 2.1 added two new Level AA and one new Level AAA Success Criteria for <strong>Guideline 1.3<\/strong>.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_134_Orientation\"><\/span><strong><a id=\"1.3.4\"><\/a>Success Criterion 1.3.4<\/strong> Orientation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AA<\/p>\n<p>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a>.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Orientation_Explained\"><\/span>Orientation Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When WCAG 2.0 was introduced in 2008, the first iPhone had only just been released. At that time there was no real consideration regarding device orientation because, typically, there was no need. Today, however, mobile devices have become as prevalent as computer screens, and orientation is a key characteristic of such devices. Even computer monitors these days typically have an orientation setting that allow a monitor to be turned to a vertical orientation.<\/p>\n<p>It is common for people to mount a mobile device on their wheelchair arm, for instance. Depending on preference, the device may be positioned in either a portrait or landscape orientation. If web content is limited to a particular orientation, it can make content difficult to access effectively in cases like this.<\/p>\n<p>There are occasions where orientation has to be limited to landscape or to portrait, but in general, such a limitation should be avoided.<\/p>\n<p>Some examples where orientation may be restricted could include:<\/p>\n<ul>\n<li>A piano app, which would need to be in a landscape orientation in order for the piano keys to be wide enough to touch individually with a finger<\/li>\n<li>A cheque deposit function in a banking app, where landscape orientation would be required<\/li>\n<\/ul>\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\/orientation.html\">Understanding Success Criterion 1.3.4: Orientation<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#orientation\">How to Meet Orientation<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_135_Identify_Input_Purpose\"><\/span><strong><a id=\"1.3.5\"><\/a>Success Criterion 1.3.5<\/strong> Identify Input Purpose<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AA<\/p>\n<p>The purpose of each input field collecting information about the user can be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-programmatically-determinable\">programmatically determined<\/a> when:<\/p>\n<ul>\n<li>the input field serves a purpose identified in the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#input-purposes\">Input Purposes for User Interface Components section<\/a>; and<\/li>\n<li>the content is implemented using technologies with support for identifying the expected meaning for form input data.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Identify_Input_Purpose_Explained\"><\/span>Identify Input Purpose Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>For people with cognitive disabilities, low vision, or some types of learning disabilities, it can be difficult to determine the purpose of a form field or the correct format for the data being entered. This success criteria indicates that browsers and assistive technologies must be able to determine the expected input.<\/p>\n<p>While browsers have been able to do this for some time, it\u2019s only recently that browsers have used their own strategies to automatically fill (autofill) forms with predefined data using technology-specific algorithms. For instance, Firefox will remember values entered into a field named \u201cname\u201d or \u201ctelephone.\u201d So, the next time a field with the same name is encountered, it will offer up the values that were previously entered into a field with the same name. While this does provide some indication of the expected input, they are general and not exact. That is, \u201cname\u201d could refer to first or last name; \u201ctelephone\u201d could include a country code, area code, and extension, and so on.<\/p>\n<p>In HTML 5.2, the \u201cautocomplete\u201d attribute was added to help developers meet this requirement in WCAG 2.1. It can be used to provide specific descriptions about the purpose for form fields. For the name example, one could add <code>autocomplete=\"given-name\"<\/code> and <code>autocomplete=\"family-name\"<\/code> to make it clearer what name is expected for respective form fields. If these values have been previously saved, they would be offered to the user to choose from, so they are not required to type their name.<\/p>\n<p>There is fairly good support for the autocomplete attribute across current browsers. Form developers are encouraged to use it to make it easier for people with disabilities to fill out forms. Consequently, it makes filling out forms more efficient for everyone, including frequent online shoppers, for example. For more about \u201cautocomplete\u201d see the suggested readings below.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Update Your Autofill Settings in Chrome<\/strong><\/h4>\n<ol>\n<li>Open Chrome settings through the icon with the three vertical dots at the top right of the browser.<\/li>\n<li>Open the Advanced settings at the bottom of the settings screen.<\/li>\n<li>In the Passwords and Forms section of the Advanced settings, open the \u201cAutofill Settings.\u201d<\/li>\n<li>Fill in your details (at least first name, last name, and email).<\/li>\n<li>Visit <a href=\"https:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml5_input_autocomplete\">the demo site<\/a> and click into the form on the right to see how the values you entered are displayed.<\/li>\n<\/ol>\n<div class=\"textbox\"><strong>Note:<\/strong> Depending on the version of Chrome you are using, the above settings may be accessed through different paths.<\/div>\n<p>Also, try <a href=\"https:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml5_input_autocomplete\">the demo site<\/a> with a current version of Firefox and see what happens. You may notice some inconsistencies between the two browsers.<\/p>\n<\/div>\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\/identify-input-purpose.html#input-purposes\">Understanding Success Criterion 1.3.5: Identify Input Purpose<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#identify-input-purpose\">How to Meet Identify Input Purpose<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html52\/sec-forms.html#sec-autofill\">HTML 5.2 AutoComplete<\/a> (for a full list of autocomplete tokens)<\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_136_Identify_Purpose\"><\/span><strong><a id=\"1.3.6\"><\/a>Success Criterion 1.3.6<\/strong> Identify Purpose<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AAA<\/p>\n<p>In content implemented using markup languages, the purpose of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">User Interface Components<\/a>, icons, and\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-regions\">regions<\/a> can be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-programmatically-determinable\">programmatically determined<\/a>.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Identify_Purpose_Explained\"><\/span>Identify Purpose Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In addition to roles associated with various user interface elements that identify what an element is (e.g., <code>role=\"link\"<\/code> for a link), this success criteria adds a purpose to that role (e.g., a link to the site\u2019s home page).<\/p>\n<p>These \u201cpurposes\u201d are defined by the W3C\u2019s Cognitive and Learning Disabilities Accessibility Task Force (COGA). It will likely be introduced with the next version of WAI-ARIA, which will provide standard ways to define purpose that will help make content on the Web easier to understand, particularly for those with cognitive disabilities.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition<\/strong><\/p>\n<p><strong>WAI-ARIA: <\/strong>The two parts of the acronym represent \u201cWeb Accessibility Initiative,\u201d the group at the World Wide Web Consortium (i.e., W3C) that works on accessibility specifications, and \u201cAccessible Rich Internet Applications,\u201d the specification introduced around the same time as HTML5. WAI-ARIA is used to add semantics for custom web elements (like a slider or popup menu) and web interactivity (like a control bar for a video player) to make them understandable by assistive technologies such as screen readers.<\/p>\n<\/div>\n<p>For example, icons may be used to provide a visual representation of an element. The home link, for instance, might include a house icon, along with the word \u201chome\u201d to represent the link. Those who are then unable to read the word can make use of the visual representation. Being defined in a standard way (e.g., <code>aria-function=\"home-link\"<\/code>), technology will be able to read (i.e., programmatically determine) these \u201cpurpose\u201d attributes, making it possible for users to replace the icons with their own, perhaps using an arrow icon to represent home, for instance, which may be more meaningful to a particular person than a house icon.<\/p>\n<p>Though standardizing how purpose will be identified is still a work in progress, there are already WAI-ARIA landmark roles that function to define the purpose of regions on a web page (e.g., banner, navigation, main, or complementary). This then makes it possible for technology to identify those regions. A user can potentially hide away everything except the main region on the page, which contains the primary content, so, for example, a person with an attention-related disability is not distracted by other elements on the page.<\/p>\n<p>Personalization of this nature is an evolving area of research at W3C and elsewhere, which promises to optimize using the Web for each individual user in the not-too-distant future.<\/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\/identify-purpose.html\">Understanding Success Criterion 1.3.6: Identify Purpose<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#identify-purpose\">How to Meet Identify Purpose<\/a><\/li>\n<li><a href=\"https:\/\/rawcdn.githack.com\/w3c\/coga\/db4811e2fb6cba1648b907b4ea7620ce8b997bd7\/techniques\/index.html\">Techniques for the The Cognitive and Learning Disabilities Accessibility Task Force (COGA, Editor\u2019s Draft)<\/a><\/li>\n<li><a href=\"https:\/\/w3c.github.io\/personalization-semantics\/\">Personalization Semantics Explainer 1.0 (Editor\u2019s Draft)<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-174","chapter","type-chapter","status-publish","hentry"],"part":26,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/174","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":13,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/174\/revisions"}],"predecessor-version":[{"id":1120,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/174\/revisions\/1120"}],"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\/174\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=174"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=174"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}