{"id":291,"date":"2019-06-04T15:46:58","date_gmt":"2019-06-04T19:46:58","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=291"},"modified":"2019-07-31T15:41:47","modified_gmt":"2019-07-31T19:41:47","slug":"3-3-input-assistance-level-a","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/3-3-input-assistance-level-a\/","title":{"raw":"3.3 Input Assistance (Level A)","rendered":"3.3 Input Assistance (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.3<\/strong> Input Assistance<\/h2>\r\nHelp users avoid and correct mistakes.\r\n\r\n<\/div>\r\n<strong>What is \u201cinput assistance?\u201d How does it support understandability?<\/strong>\r\n\r\n\u201cInput assistance\u201d is WCAG 2.1 jargon for techniques that help people avoid mistakes, especially when filling out forms. When people do make mistakes, it refers to the techniques that help them recover from errors.\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>Input assistance:<\/strong> Techniques that encourage users to understand the <i>process<\/i> of entering information. These techniques include providing clear instructions, a chance to check work before submitting it, and context-sensitive help.\r\n\r\n<\/div>\r\nEveryone makes mistakes, but some people with disabilities may be more prone to input errors than people without disabilities. For example, someone with a tremor may press keys by accident. An individual who is blind may have trouble determining which fields are mandatory and which are optional. A person who relies on speech recognition software may produce words that are different than the dictated words.\r\n\r\nThis guideline seeks to reduce the number of serious errors that users make, increase the likelihood that users will notice their errors, and help users understand what they must do to correct errors.\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.3.1\"><\/a>Success Criterion 3.3.1<\/strong> Error Identification<\/h3>\r\nLevel A\r\n\r\nIf an <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-input-error\">input error<\/a> is automatically detected, the item that is in error is identified and the error is described to the user in text.\r\n\r\n<\/div>\r\n<h4>Error Identification Explained<\/h4>\r\nWhen designing a website or online form, use text to indicate and describe errors.\r\n\r\nIt is okay to signal errors with images and colour changes provided there are also text descriptions.\r\n\r\n<strong>Example:<\/strong> A bank encourages customers to apply for loans online. A customer submits a form with his or her name, address, phone number, email address, and account number. If the customer does not complete the form correctly, the form is re-displayed with an alert \u2014 three question marks <strong>???<\/strong> displayed after the prompt \u2014 for all missing or incorrect fields.\r\n\r\nIn addition, the fields in error are highlighted yellow to make them easier to spot.\r\n\r\n<strong>SC 3.3.1<\/strong> is a special benefit to screen reader users. Since screen readers only read text, screen reader users may have trouble understanding non-text error messages.\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\/error-identification.html\">Understanding Error Identification<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#error-identification\">How to Meet Error Identification<\/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.3.2\"><\/a>Success Criterion 3.3.2<\/strong> Labels or Instructions<\/h3>\r\nLevel A\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-labels\">Labels<\/a> or instructions are provided when content requires user input.\r\n\r\n<\/div>\r\n<h4>Labels or Instructions Explained<\/h4>\r\nWhen designing online forms, help users enter information by providing clear instructions and examples. Conformance to <strong>SC\u00a03.3.2<\/strong> helps users avoid mistakes when their input is required.\r\n\r\nWhen filling out forms, people who use certain assistive technologies are more likely to make mistakes than users without disabilities. Similarly, when recovering from mistakes, these users may have trouble focusing in on and fixing problems.\r\n\r\nInstructions and cues that are visually and programmatically connected to form controls help users complete forms successfully the first time. If they do make mistakes, instructions and cues make it easier to find and fix them.\r\n\r\n<strong>Examples of providing clear cues and instructions:<\/strong>\r\n<ul>\r\n \t<li>Use <strong>Given Name<\/strong> instead of <strong>Name 1<\/strong> as the prompt for entering a first name, and <strong>Family Name<\/strong> instead of <strong>Name 2<\/strong> for entering a surname.<\/li>\r\n \t<li>Show the required date format for a field: <strong>Date (dd-mm-yyyy)<\/strong>.<\/li>\r\n \t<li>Place prompts for text fields and combo boxes above or to the left of controls, and place prompts for checkboxes and radio buttons to the right of controls. Doing this \u201cautomatically\u201d produces fairly accessible form controls.<\/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\/labels-or-instructions.html\">Understanding Labels or Instructions<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#labels-or-instructions\">How to Meet Labels or Instructions<\/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-69dee38862b91\" 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-69dee38862b91\"  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-3-input-assistance-level-a\/#Guideline_33_Input_Assistance\" >Guideline 3.3 Input Assistance<\/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-3-input-assistance-level-a\/#Success_Criterion_331_Error_Identification\" >Success Criterion 3.3.1 Error Identification<\/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-3-input-assistance-level-a\/#Error_Identification_Explained\" >Error Identification 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-3-input-assistance-level-a\/#Success_Criterion_332_Labels_or_Instructions\" >Success Criterion 3.3.2 Labels or Instructions<\/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-3-input-assistance-level-a\/#Labels_or_Instructions_Explained\" >Labels or Instructions 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_33_Input_Assistance\"><\/span><strong>Guideline 3.3<\/strong> Input Assistance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Help users avoid and correct mistakes.<\/p>\n<\/div>\n<p><strong>What is \u201cinput assistance?\u201d How does it support understandability?<\/strong><\/p>\n<p>\u201cInput assistance\u201d is WCAG 2.1 jargon for techniques that help people avoid mistakes, especially when filling out forms. When people do make mistakes, it refers to the techniques that help them recover from errors.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition<\/strong><\/p>\n<p><strong>Input assistance:<\/strong> Techniques that encourage users to understand the <i>process<\/i> of entering information. These techniques include providing clear instructions, a chance to check work before submitting it, and context-sensitive help.<\/p>\n<\/div>\n<p>Everyone makes mistakes, but some people with disabilities may be more prone to input errors than people without disabilities. For example, someone with a tremor may press keys by accident. An individual who is blind may have trouble determining which fields are mandatory and which are optional. A person who relies on speech recognition software may produce words that are different than the dictated words.<\/p>\n<p>This guideline seeks to reduce the number of serious errors that users make, increase the likelihood that users will notice their errors, and help users understand what they must do to correct errors.<\/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_331_Error_Identification\"><\/span><strong><a id=\"3.3.1\"><\/a>Success Criterion 3.3.1<\/strong> Error Identification<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>If an <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-input-error\">input error<\/a> is automatically detected, the item that is in error is identified and the error is described to the user in text.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Error_Identification_Explained\"><\/span>Error Identification Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When designing a website or online form, use text to indicate and describe errors.<\/p>\n<p>It is okay to signal errors with images and colour changes provided there are also text descriptions.<\/p>\n<p><strong>Example:<\/strong> A bank encourages customers to apply for loans online. A customer submits a form with his or her name, address, phone number, email address, and account number. If the customer does not complete the form correctly, the form is re-displayed with an alert \u2014 three question marks <strong>???<\/strong> displayed after the prompt \u2014 for all missing or incorrect fields.<\/p>\n<p>In addition, the fields in error are highlighted yellow to make them easier to spot.<\/p>\n<p><strong>SC 3.3.1<\/strong> is a special benefit to screen reader users. Since screen readers only read text, screen reader users may have trouble understanding non-text error messages.<\/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\/error-identification.html\">Understanding Error Identification<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#error-identification\">How to Meet Error Identification<\/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_332_Labels_or_Instructions\"><\/span><strong><a id=\"3.3.2\"><\/a>Success Criterion 3.3.2<\/strong> Labels or Instructions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-labels\">Labels<\/a> or instructions are provided when content requires user input.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Labels_or_Instructions_Explained\"><\/span>Labels or Instructions Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When designing online forms, help users enter information by providing clear instructions and examples. Conformance to <strong>SC\u00a03.3.2<\/strong> helps users avoid mistakes when their input is required.<\/p>\n<p>When filling out forms, people who use certain assistive technologies are more likely to make mistakes than users without disabilities. Similarly, when recovering from mistakes, these users may have trouble focusing in on and fixing problems.<\/p>\n<p>Instructions and cues that are visually and programmatically connected to form controls help users complete forms successfully the first time. If they do make mistakes, instructions and cues make it easier to find and fix them.<\/p>\n<p><strong>Examples of providing clear cues and instructions:<\/strong><\/p>\n<ul>\n<li>Use <strong>Given Name<\/strong> instead of <strong>Name 1<\/strong> as the prompt for entering a first name, and <strong>Family Name<\/strong> instead of <strong>Name 2<\/strong> for entering a surname.<\/li>\n<li>Show the required date format for a field: <strong>Date (dd-mm-yyyy)<\/strong>.<\/li>\n<li>Place prompts for text fields and combo boxes above or to the left of controls, and place prompts for checkboxes and radio buttons to the right of controls. Doing this \u201cautomatically\u201d produces fairly accessible form controls.<\/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\/labels-or-instructions.html\">Understanding Labels or Instructions<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#labels-or-instructions\">How to Meet Labels or Instructions<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-291","chapter","type-chapter","status-publish","hentry"],"part":32,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/291","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":7,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/291\/revisions"}],"predecessor-version":[{"id":1238,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/291\/revisions\/1238"}],"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\/291\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=291"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=291"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=291"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}