{"id":1126,"date":"2017-02-14T11:00:41","date_gmt":"2017-02-14T19:00:41","guid":{"rendered":"http:\/\/blogs.lanecc.edu\/webteam\/?p=1126"},"modified":"2017-01-24T18:24:49","modified_gmt":"2017-01-25T02:24:49","slug":"understanding-wcag-2-0-3-3-3-error-suggestion","status":"publish","type":"post","link":"https:\/\/blogs.lanecc.edu\/webteam\/2017\/02\/14\/understanding-wcag-2-0-3-3-3-error-suggestion\/","title":{"rendered":"Understanding WCAG 2.0: 3.3.3 Error Suggestion"},"content":{"rendered":"<p>The next standard we&#8217;ll explore in our series on understanding WCAG 2.0 is <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/minimize-error-suggestions.html\">3.3.3 Error Suggestion<\/a>. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here&#8217;s the complete text:<\/p>\n<blockquote><p><strong class=\"sc-handle\">3.3.3 Error Suggestion:<\/strong> If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. (Level AA)<\/p><\/blockquote>\n<p>This standard has to do with input validation. Let&#8217;s say that we have a webform, like this:<\/p>\n<div style=\"border: black solid 1px; padding: 1em;\">\n<p><label for=\"a\">Zip Code: <input id=\"a\" type=\"text\"><\/label><\/p>\n<p><button type=\"button\">Submit<\/button><\/p>\n<\/div>\n<p>This standard is all about what happens when you enter the wrong thing. Say, for example, we enter &#8220;9740&#8221; as our zip code. This is the wrong way to tell the user:<\/p>\n<div style=\"border: black solid 1px; padding: 1em;\">\n<p><label for=\"a\">Zip Code: <input id=\"a\" value=\"9740\" type=\"text\"><\/label><\/p>\n<p><span style=\"color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; border-radius: 4px;\">Wrong<\/span><\/p>\n<p><button type=\"button\">Submit<\/button><\/p>\n<\/div>\n<p>To meet this standard, all you need to do is provide a helpful error message:<\/p>\n<div style=\"border: black solid 1px; padding: 1em;\">\n<p><label for=\"a\">Zip Code: <input id=\"a\" value=\"9740\" type=\"text\"><\/label><\/p>\n<p><span style=\"color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; display: block; border-radius: 4px;\">Please make sure your zip code contains exactly five numbers, then resubmit the form<\/span><\/p>\n<p><button type=\"button\">Submit<\/button><\/p>\n<\/div>\n<p>Of course, you don&#8217;t want go to the other extreme, either. Think about this nightmare:<\/p>\n<div style=\"border: black solid 1px; padding: 1em;\">\n<p><label for=\"a\">Choose a Password: <input id=\"a\" value=\"9740\" type=\"password\"><\/label><\/p>\n<div style=\"color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; border-radius: 4px;\">\n<p>Invalid Password. Your password must meet the following rules:<\/p>\n<ul>\n<li>Not be more than 255 characters long<\/li>\n<li>Contain at least one number<\/li>\n<li>Contain a special character (!, @, #, $, %, ^, &amp;, *)<\/li>\n<li>Contain both an uppercase and a lower case letter<\/li>\n<li>Not contain a space character<\/li>\n<li>Be at least 8 characters long<\/li>\n<li>Use only ASCII characters<\/li>\n<li>Not contain your username or birth date<\/li>\n<li>Not be written down on a note under your keyboard<\/li>\n<\/ul>\n<\/div>\n<p><button type=\"button\">Submit<\/button><\/p>\n<\/div>\n<p>One of the goals of this standard is to help people with cognitive disabilities. Yes, that error message explains all the possible circumstances that could have caused the error. But the suggestions aren&#8217;t helpful \u2014 you have to work to figure out which rule you violated.<\/p>\n<p>And that&#8217;s it for this standard. If you&#8217;d like to avoid the the messy details, you&#8217;re welcome to just skip to the end. But this post got me thinking. When you&#8217;re making a form, labels are associated with form fields via the <code>for<\/code> attribute on the label and the <code>id<\/code> attribute on the field. That way a screen reader knows how to associate labels and form elements. But how does that work with an error message? There&#8217;s no <code>for<\/code> attribute for an error message. Right?<\/p>\n<h1>How to Associate an Error Message with a Form Element<\/h1>\n<p>The first place my research took me was the <a href=\"http:\/\/webaim.org\/techniques\/formvalidation\/#form\">WebAIM site<\/a>, which suggests a two part approach. First, error messages should be listed at the top of the form. Second, each error message should link to the associated input element. So our form would look like this:<\/p>\n<div style=\"border: black solid 1px; padding: 1em;\">\n<p><span style=\"color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; display: block; border-radius: 4px;\">Please <a href=\"#a\">make sure your zip code<\/a> contains exactly five numbers, then resubmit the form<\/span><\/p>\n<p><label for=\"a\">Zip Code: <input id=\"a\" value=\"9740\" type=\"text\"><\/label><\/p>\n<p><button type=\"button\">Submit<\/button><\/p>\n<\/div>\n<p>This method meets accessibility requirements, but fails from a usability perspective. If we were to expand that form to have several fields, then visually associating error messages and fields would be difficult. The best practice is to instead display the error message next to the form component it applies to, like Twitter does:<\/p>\n<p><a href=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1134\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM-1024x520.png\" alt=\"Screen shot of the Twitter sign up form, showing an error message next to an invalid phone number\" height=\"297\" width=\"584\" srcset=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM-1024x520.png 1024w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM-300x152.png 300w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM-768x390.png 768w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM-500x254.png 500w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2017\/01\/Screen-Shot-2017-01-24-at-4.13.52-PM.png 1328w\" sizes=\"auto, (max-width: 584px) 85vw, 584px\" \/><\/a>But that leads us back to linking the error message and the form component. <a href=\"https:\/\/www.w3.org\/WAI\/intro\/aria\">WAI-ARIA<\/a> provides a way to do that:<\/p>\n<div style=\"border: black solid 1px; padding: 1em;\">\n<p><label for=\"a\">Zip Code: <input id=\"a\" value=\"9740\" type=\"text\"><\/label><\/p>\n<p><span id=\"err_1\" style=\"color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; display: block; border-radius: 4px;\">Please make sure your zip code contains exactly five numbers, then resubmit the form<\/span><\/p>\n<p><button type=\"button\">Submit<\/button><\/p>\n<\/div>\n<p>I know that looks pretty much exactly the same, but I promise if you break out your developer tools, there&#8217;ll be some extra attributes. First, we need to add <code>aria-invalid=true<\/code> to the input (depending on your error, there are some <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/ARIA_Techniques\/Using_the_aria-invalid_attribute\">additional attributes<\/a> you can use). Then, we add the <code>aria-describedby<\/code> attribute to the input and have it point to the id on our error message.<\/p>\n<p>If you&#8217;d like to know more about this method, check out this page on <a href=\"https:\/\/www.w3.org\/WAI\/GL\/wiki\/Using_Aria-Invalid_to_Indicate_An_Error_Field\">WAI-ARIA regarding form validation.<\/a> Or, if you&#8217;d just like to know strictly what WCAG 2.0 requires, you can look at these <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/minimize-error-suggestions.html#minimize-error-suggestions-examples-head\">examples and techniques<\/a>. Specifically, be sure to check out the <a href=\"http:\/\/www.w3.org\/TR\/2016\/NOTE-WCAG20-TECHS-20161007\/ARIA2\">technique for using aria-required<\/a> to indicate a required field &#8211; just putting a * next to each field isn&#8217;t good enough. <a href=\"http:\/\/www.ssbbartgroup.com\/blog\/how-to-provide-accessible-error-identification\/\">This blog post<\/a> provides some additional examples and advice.<\/p>\n<p>Interested in more? Check out the listing of <a href=\"http:\/\/blogs.lanecc.edu\/webteam\/2016\/10\/11\/updated-accessibility-requirements\/\">all the posts in this series<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The next standard we&#8217;ll explore in our series on understanding WCAG 2.0 is 3.3.3 Error Suggestion. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here&#8217;s the complete text: 3.3.3 Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the &hellip; <a href=\"https:\/\/blogs.lanecc.edu\/webteam\/2017\/02\/14\/understanding-wcag-2-0-3-3-3-error-suggestion\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Understanding WCAG 2.0: 3.3.3 Error Suggestion&#8221;<\/span><\/a><\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[31],"tags":[6],"class_list":["post-1126","post","type-post","status-publish","format-standard","hentry","category-wcag-20","tag-accessibility"],"_links":{"self":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/comments?post=1126"}],"version-history":[{"count":14,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1126\/revisions"}],"predecessor-version":[{"id":1143,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1126\/revisions\/1143"}],"wp:attachment":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/media?parent=1126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/categories?post=1126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/tags?post=1126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}