{"id":287,"date":"2019-06-04T15:45:39","date_gmt":"2019-06-04T19:45:39","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=287"},"modified":"2019-07-30T21:31:52","modified_gmt":"2019-07-31T01:31:52","slug":"3-2-predictable-level-a","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/3-2-predictable-level-a\/","title":{"raw":"3.2 Predictable (Level A)","rendered":"3.2 Predictable (Level A)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\r\n<h2><strong>Guideline 3.2<\/strong> Predictable<\/h2>\r\nMake web pages appear and operate in predictable ways.\r\n\r\n<\/div>\r\n<strong>What does \u201cpredictability\u201d have to do with being understandable?<\/strong>\r\n\r\nWhen reading web pages, people are not only seeing words, they are also \u201creading\u201d patterns, such as the layout and organization of the page, the position and order of links, and the colour and shape of headers. These patterns orient readers to what information is where, and they help users focus in on the desired content.\r\n\r\nConsistent patterns help readers understand content. Unpredictable patterns increase the cognitive effort that readers need to make sense of information.\r\n\r\nPresenting information in a predictable order across a site is good design. It simplifies access for all users, and it may make a crucial difference for people with visual, learning, and cognitive disabilities, who may become disoriented when information or controls appear in different places on different pages.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"3.2.1\"><\/a>Success Criterion 3.2.1<\/strong> On Focus<\/h3>\r\nLevel A\r\n\r\nWhen any <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a> receives focus, it does not initiate a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-change-of-context\">change of context<\/a>.\r\n\r\n<\/div>\r\n<h4>On Focus Explained<\/h4>\r\nWhen designing a web page, do not confuse users by unexpectedly changing the context when they navigate or explore.\r\n\r\nExamples of context changes include:\r\n<ul>\r\n \t<li>Opening a new window<\/li>\r\n \t<li>Moving focus to another component<\/li>\r\n \t<li>Going to a new page<\/li>\r\n \t<li>Significantly rearranging the content of a page<\/li>\r\n<\/ul>\r\nConforming to <strong>SC 3.2.1<\/strong> minimizes the chance that users will become confused or disoriented when interacting with a web page:\r\n<ul>\r\n \t<li>Pressing the Tab key, which is normally used to jump from one control to another, should <i>not<\/i> initiate a search<\/li>\r\n \t<li>Pressing the down arrow key while scrolling through a drop-down menu should <i>not<\/i> open a new window<\/li>\r\n \t<li>Clicking into an edit field should <i>not<\/i> open a popup<\/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\/on-focus.html\">Understanding on Focus<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#on-focus\">How to Meet on Focus<\/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=\"3.2.2\"><\/a>Success Criterion 3.2.2<\/strong> On Input<\/h3>\r\nLevel A\r\n\r\nChanging the setting of any <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a> does not automatically cause a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-change-of-context\">change of context<\/a> unless the user has been advised of the behaviour before using the component.\r\n\r\n<\/div>\r\n<h4>On Input Explained<\/h4>\r\nWhen designing online forms, ensure that (a) entering data in a text field, (b) checking or unchecking a checkbox, or (c) selecting or deselecting a radio button does not unexpectedly change the context.\r\n\r\nAgain, examples of context changes include:\r\n<ul>\r\n \t<li>Opening a new window<\/li>\r\n \t<li>Moving focus to another component<\/li>\r\n \t<li>Going to a new page<\/li>\r\n \t<li>Significantly rearranging the content of a page<\/li>\r\n<\/ul>\r\n<strong>SC 3.2.2<\/strong> helps ensure that users can predict what will happen when interacting with form controls. Context changes may confuse users who cannot easily perceive the page or who are distracted by the changes. A context change is appropriate only when the user is notified that the change will happen in response to an action.\r\n\r\n<strong>Example<\/strong>: A form contains three fields for entering telephone numbers. The first field contains the three-digit area code. The second field contains the first three digits. The third field contains the last four digits. When a user completes entry of the first field, focus automatically moves to the second field. This is a context change. If this behaviour is described at the beginning of the form, the page conforms to <strong>SC 3.2.2<\/strong>. If the behaviour is not described, it does not conform.\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\/on-input.html\">Understanding on Input<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#on-input\">How to Meet on Input<\/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-69d9ed2f512bf\" 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-69d9ed2f512bf\"  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\/3-2-predictable-level-a\/#Guideline_32_Predictable\" >Guideline 3.2 Predictable<\/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\/3-2-predictable-level-a\/#Success_Criterion_321_On_Focus\" >Success Criterion 3.2.1 On Focus<\/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\/3-2-predictable-level-a\/#On_Focus_Explained\" >On Focus Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/3-2-predictable-level-a\/#Success_Criterion_322_On_Input\" >Success Criterion 3.2.2 On Input<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/3-2-predictable-level-a\/#On_Input_Explained\" >On Input Explained<\/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_32_Predictable\"><\/span><strong>Guideline 3.2<\/strong> Predictable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Make web pages appear and operate in predictable ways.<\/p>\n<\/div>\n<p><strong>What does \u201cpredictability\u201d have to do with being understandable?<\/strong><\/p>\n<p>When reading web pages, people are not only seeing words, they are also \u201creading\u201d patterns, such as the layout and organization of the page, the position and order of links, and the colour and shape of headers. These patterns orient readers to what information is where, and they help users focus in on the desired content.<\/p>\n<p>Consistent patterns help readers understand content. Unpredictable patterns increase the cognitive effort that readers need to make sense of information.<\/p>\n<p>Presenting information in a predictable order across a site is good design. It simplifies access for all users, and it may make a crucial difference for people with visual, learning, and cognitive disabilities, who may become disoriented when information or controls appear in different places on different pages.<\/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_321_On_Focus\"><\/span><strong><a id=\"3.2.1\"><\/a>Success Criterion 3.2.1<\/strong> On Focus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>When any <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a> receives focus, it does not initiate a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-change-of-context\">change of context<\/a>.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"On_Focus_Explained\"><\/span>On Focus Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When designing a web page, do not confuse users by unexpectedly changing the context when they navigate or explore.<\/p>\n<p>Examples of context changes include:<\/p>\n<ul>\n<li>Opening a new window<\/li>\n<li>Moving focus to another component<\/li>\n<li>Going to a new page<\/li>\n<li>Significantly rearranging the content of a page<\/li>\n<\/ul>\n<p>Conforming to <strong>SC 3.2.1<\/strong> minimizes the chance that users will become confused or disoriented when interacting with a web page:<\/p>\n<ul>\n<li>Pressing the Tab key, which is normally used to jump from one control to another, should <i>not<\/i> initiate a search<\/li>\n<li>Pressing the down arrow key while scrolling through a drop-down menu should <i>not<\/i> open a new window<\/li>\n<li>Clicking into an edit field should <i>not<\/i> open a popup<\/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\/on-focus.html\">Understanding on Focus<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#on-focus\">How to Meet on Focus<\/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_322_On_Input\"><\/span><strong><a id=\"3.2.2\"><\/a>Success Criterion 3.2.2<\/strong> On Input<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>Changing the setting of any <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a> does not automatically cause a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-change-of-context\">change of context<\/a> unless the user has been advised of the behaviour before using the component.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"On_Input_Explained\"><\/span>On Input Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When designing online forms, ensure that (a) entering data in a text field, (b) checking or unchecking a checkbox, or (c) selecting or deselecting a radio button does not unexpectedly change the context.<\/p>\n<p>Again, examples of context changes include:<\/p>\n<ul>\n<li>Opening a new window<\/li>\n<li>Moving focus to another component<\/li>\n<li>Going to a new page<\/li>\n<li>Significantly rearranging the content of a page<\/li>\n<\/ul>\n<p><strong>SC 3.2.2<\/strong> helps ensure that users can predict what will happen when interacting with form controls. Context changes may confuse users who cannot easily perceive the page or who are distracted by the changes. A context change is appropriate only when the user is notified that the change will happen in response to an action.<\/p>\n<p><strong>Example<\/strong>: A form contains three fields for entering telephone numbers. The first field contains the three-digit area code. The second field contains the first three digits. The third field contains the last four digits. When a user completes entry of the first field, focus automatically moves to the second field. This is a context change. If this behaviour is described at the beginning of the form, the page conforms to <strong>SC 3.2.2<\/strong>. If the behaviour is not described, it does not conform.<\/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\/on-input.html\">Understanding on Input<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#on-input\">How to Meet on Input<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-287","chapter","type-chapter","status-publish","hentry"],"part":32,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/287","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":9,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/287\/revisions"}],"predecessor-version":[{"id":1165,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/287\/revisions\/1165"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/parts\/32"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/287\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=287"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=287"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}