CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739902561245459979"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739902561245459979"> <title> User Notification | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="User Notification" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/forms/notifications/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/forms/notifications/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/tutorials/forms/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/tutorials/forms/social.png" /> <meta property="twitter:title" content="User Notification" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"User Notification","image":"https://www.w3.org/WAI/content-images/tutorials/forms/social.png","url":"https://www.w3.org/WAI/tutorials/forms/notifications/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-user-notification "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/forms/"><span>Forms</span></a></li><li><a lang="en" href="/WAI/tutorials/forms/notifications/" aria-current="page"><span>User Notifications</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" aria-current="location" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li> <li> <a lang="en" href="/WAI/tutorials/forms/notifications/" aria-current="page" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> User Notification </h1><p>in <a lang="en" href="/WAI/tutorials/forms/"><span>Forms Tutorial</span></a></p></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Overview </h2></header><div class="box-i"> <p>Provide feedback to users about the results of their form submission, whether successful or not. This includes in-line feedback at or near the form controls and overall feedback that is typically provided after form submission.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#overall-feedback" id="markdown-toc-overall-feedback">Overall feedback</a> <ul> <li><a href="#using-the-main-heading" id="markdown-toc-using-the-main-heading">Using the main heading</a></li> <li><a href="#using-the-page-title" id="markdown-toc-using-the-page-title">Using the page title</a></li> <li><a href="#using-dialogs" id="markdown-toc-using-dialogs">Using dialogs</a></li> <li><a href="#listing-errors" id="markdown-toc-listing-errors">Listing errors</a></li> </ul> </li> <li><a href="#inline" id="markdown-toc-inline">In-line feedback</a> <ul> <li><a href="#after-submit" id="markdown-toc-after-submit">After submit</a></li> <li><a href="#during-typing" id="markdown-toc-during-typing">During typing</a> <ul> <li><a href="#binary-messages" id="markdown-toc-binary-messages">Binary messages</a></li> <li><a href="#scaled-feedback" id="markdown-toc-scaled-feedback">Scaled feedback</a></li> </ul> </li> <li><a href="#on-focus-change" id="markdown-toc-on-focus-change">On focus change</a></li> </ul> </li> </ul> </div> </nav> <p>Notifications have to be concise and clear. In particular, error messages should be easy to understand and should provide simple instructions on how they can be resolved. Success messages are also important to confirm task completion.</p> <h2 id="overall-feedback">Overall feedback</h2> <p>When a form is submitted, it is important that the user is notified whether the submission was successful or if errors occurred. Several of the following techniques can be combined.</p> <h3 class="ex" id="using-the-main-heading">Using the main heading</h3> <p>A common way to provide feedback is by using the main heading of the web page, usually, the most prominently displayed <code class="language-plaintext highlighter-rouge"><h1></code> or <code class="language-plaintext highlighter-rouge"><h2></code> element. This technique is particularly useful when forms are processed by the server, but can also be useful for client-side scripting.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code: Error</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>3 Errors – Billing Address<span class="nt"></h1></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: Success</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>Thank you for submitting your order.<span class="nt"></h1></span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>The primary purpose of the main heading is still to identify the web page that the user is currently on. When the user is sent back to the same web page because of an error, then a simple indication using the word “error” and possibly the number of errors is helpful.</p> </div></aside> <h3 class="ex" id="using-the-page-title">Using the page title</h3> <p>The <code class="language-plaintext highlighter-rouge"><title></code> element of the web page can be useful to indicate successes and errors. In particular, screen reader users will receive this feedback immediately when the web page is loaded. This can be helpful when the main heading is located deeper within the content, for example, after the navigation menus.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code: Error</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><title></span>3 Errors – Billing Address<span class="nt"></title></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: Success</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><title></span>Thank you for submitting your order.<span class="nt"></title></span> </code></pre></div></div> </div></aside> <h3 class="ex" id="using-dialogs">Using dialogs</h3> <p>A dialog is a common way to inform users of changes. It can be used if other means of informing the user prove to be easily missed. Dialogs are more obtrusive and distracting, which may be the desired effect.</p> <p>JavaScript provides a very basic alert dialog box that provides proper keyboard navigation and respects the user’s default settings, including font size, colors, and language. A custom dialog implementation has to match that functionality.</p> <p>The basic example below shows a pop-up that is displayed when the user activates the “save” button. A message is displayed in the dialog box, and the web page is disabled until the user selects “OK”.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <p><button id="alertconfirm" type="button">Save</button></p> <script> document.getElementById('alertconfirm').addEventListener('click', function(){ alert('Thanks for submitting the form!'); }); </script> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: HTML</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"alertconfirm"</span><span class="nt">></span>Save<span class="nt"></button></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: JavaScript</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">alertconfirm</span><span class="dl">'</span><span class="p">)</span> <span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="cm">/* [… code saving data …] */</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Thanks for submitting the form!</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> </code></pre></div></div> </div></aside> <h3 class="ex" id="listing-errors">Listing errors</h3> <p>When errors occur, it is helpful to list them at the top of the page, before the form. The list should have a distinctive heading so that it is easy to identify. Each error listed should:</p> <ul> <li>Reference the label of the corresponding form control, to help the user recognize the control;</li> <li>Provide a concise description of the error in a way that is easy to understand by everyone;</li> <li>Provide an indication of how to correct mistakes, and remind users of any format requirements;</li> <li>Include an in-page link to the corresponding form control to make access easier for the users.</li> </ul> <p>Sometimes, for example, when using AJAX techniques, the browser is not loading a new page but shows changes, such as form errors, dynamically on the page. The list of errors should be inserted into a prominent container on the top to inform the user in such a case. In addition to the advice above, this container should have the <code class="language-plaintext highlighter-rouge">role</code> attribute set to <code class="language-plaintext highlighter-rouge">alert</code> to make assistive technology users aware of this change.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <div role="alert"> <h4 role="presentation">There are 2 errors in this form</h4> <ul> <li> <a href="#firstname"> The First name field is empty, it is a required field and must be filled in. </a> </li> <li> <a href="#birthdate"> The Date field is in the wrong format, it should be similar to 17/09/2013 (use a / to separate day, month, and year). </a> </li> </ul> </div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><h4></span>There are 2 errors in this form<span class="nt"></h4></span> <span class="nt"><ul></span> <span class="nt"><li></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#firstname"</span> <span class="na">id=</span><span class="s">"firstname_error"</span><span class="nt">></span> The First name field is empty; it is a required field and must be filled in. <span class="nt"></a></span> <span class="nt"></li></span> <span class="nt"><li></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#birthdate"</span> <span class="na">id=</span><span class="s">"birthdate_error"</span><span class="nt">></span> The Date field is in the wrong format; it should be similar to 17/09/2013 (use a / to separate day, month, and year). <span class="nt"></a></span> <span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"></div></span> </code></pre></div></div> </div></aside> <p>Also, form fields can be associated with the corresponding error message using aria-describedby.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><label</span> <span class="na">for=</span><span class="s">"firstname"</span><span class="nt">></span>First Name:<span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"firstname"</span> <span class="na">aria-describedby=</span><span class="s">"firstname_error"</span><span class="nt">></span> </code></pre></div></div> </div></aside> <h2 class="newap" id="inline">In-line feedback</h2> <p>In addition to overall feedback, more specific feedback at or near the form controls can better help users to use your form. This includes feedback to indicate correctly entered input as well as errors in the input.</p> <p>Typically a combination of messages and visual cues are used to provide in-line feedback. For example, valid input can be indicated by a checkmark (✓) and green border, while errors can be indicated by an error icon (like a red ✗ or an exclamation mark) and red border. Error messages should also provide guidance on how to correct mistakes. The concepts for such error messages are essentially the same as for providing <a href="../instructions">instructions</a>.</p> <h3 class="ap" id="after-submit">After submit</h3> <p>The example below shows a form with two input fields. The first input field, “username”, is used to register a username. The second input field, “expiry date”, is used to provide a date for when the registration expires.</p> <p>When the form is submitted, the entries are checked, and feedback is provided to the user. Appropriate success and error messages are displayed for each input field to help the user complete the form.</p> <p>If the submitted data contains errors, it is convenient to set the focus to the first <code class="language-plaintext highlighter-rouge"><input></code> element that contains an error.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <style> #ex3 div {margin-bottom:.75em;} .error { color: #900; } .error input { border: 3px solid #900; } .success { color: #007a00; } .success input { border: 3px solid #007a00; } </style> <form method="post" action="#ex3" id="ex3"> <div class="success"> <label for="username4"><strong>OK:</strong> Username:</label> <input type="text" name="username" id="username4" value="spaceteddy13" aria-describedby="userDesc2" /> <span id="userDesc2">✓</span> </div> <div class="error"> <label for="expire4"><strong>Error:</strong> Expiry date:</label> <input type="text" name="expire" id="expire4" value="03.2015" aria-describedby="expDesc2" /> <span id="expDesc2">Use the format MM/YYYY.</span> </div> <div class="error"> <button type="submit">Submit</button> </div> </form> <script> var taken_usernames = ['timbl', 'shadi', 'yatil', 'bim', 'shawn', 'slh', 'spacebear13', 'Obelisks', 'Phoenix', 'Imari', 'Henry', 'Zeki', 'Rome', 'Min', ' Kelly', 'Brynn']; document.getElementById('ex3').addEventListener('submit', function(event){ function setError(el, msg) { el.parentNode.querySelector('strong').innerHTML = "Error:"; el.parentNode.className='error'; el.parentNode.querySelector('span').innerHTML = msg; } function setSuccess(el) { el.parentNode.querySelector('strong').innerHTML = "OK:"; el.parentNode.className='success'; el.parentNode.querySelector('span').innerHTML = "&check;"; } var exp = document.getElementById('expire4'); if (exp.value.match(new RegExp('[0-9]{2}\/[0-9]{4}'))) { setSuccess(exp); } else { setError(exp, 'Use the format MM/YYYY.'); } var usr = document.getElementById('username4'); if (taken_usernames.includes(usr.value.trim()) == false) { setSuccess(usr); } else { setError(usr, 'Username already taken'); } event.preventDefault(); return false; }); </script> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: HTML</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"success"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"username"</span><span class="nt">></span> <span class="nt"><strong></span>OK:<span class="nt"></strong></span> Username: <span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"username"</span> <span class="na">id=</span><span class="s">"username"</span> <span class="na">value=</span><span class="s">"spaceteddy13"</span> <span class="na">aria-describedby=</span><span class="s">"userDesc"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">id=</span><span class="s">"userDesc"</span><span class="nt">></span>✓<span class="nt"></span></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"error"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"expire"</span><span class="nt">></span> <span class="nt"><strong></span>Error:<span class="nt"></strong></span> Expiry date: <span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"expire"</span> <span class="na">id=</span><span class="s">"expire"</span> <span class="na">value=</span><span class="s">"03.2015"</span> <span class="na">aria-describedby=</span><span class="s">"expDesc"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">id=</span><span class="s">"expDesc"</span><span class="nt">></span>Use the format MM/YYYY.<span class="nt"></span></span> <span class="nt"></div></span> <span class="nt"><div></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span> <span class="nt"></div></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: CSS</header><div class="box-i"> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.error</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#900</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.success</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#007a00</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.error</span> <span class="nt">input</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="m">#900</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.success</span> <span class="nt">input</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="m">#007a00</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> </div></aside> <h3 class="ap newex" id="during-typing">During typing</h3> <p>Instant feedback during typing can be extremely helpful. For example, checking the availability of a username in the previous example required the user to resubmit the form – possibly multiple times. Providing feedback while users are typing allows them to experiment more easily until they find a suitable username. However, client-side scripting is required for such functionality, and not all situations may be appropriate for such feedback.</p> <h4 class="ex inap" id="binary-messages">Binary messages</h4> <p>In the following example, the availability of a username is checked instantly while the user is typing text in the input field. Corresponding success and error messages are displayed without the user needing to submit the form.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <div> <label for="ex1_username"><strong></strong> Username:</label> <input type="text" name="username" id="ex1_username" /> <span id="username_feedback" aria-live="polite"></span> </div> </form> <script> document.getElementById('ex1_username').addEventListener('keyup', function(){ function setError(el, msg) { el.parentNode.querySelector('strong').innerHTML = "Error:"; el.parentNode.className='error'; el.parentNode.querySelector('span').innerHTML = msg; } function setSuccess(el) { el.parentNode.querySelector('strong').innerHTML = "OK:"; el.parentNode.className='success'; el.parentNode.querySelector('span').innerHTML = "&check;"; } var val = this.value; if (val !== "") { if (taken_usernames.includes(val.trim())) { setError(this, '&cross; Sorry, this username is taken.'); } else { setSuccess(this, '&check; You can use this username.'); } } else { document.getElementById('username_feedback').innerHTML = ''; document.getElementById('username_feedback').parentNode.className = ''; document.querySelector('[for="ex1_username"] strong').innerHTML = ''; } }); </script> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: HTML</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"username"</span><span class="nt">></span>Username:<span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"username"</span> <span class="na">id=</span><span class="s">"username"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">id=</span><span class="s">"username_feedback"</span> <span class="na">aria-live=</span><span class="s">"polite"</span><span class="nt">></span></span> <span class="nt"></div></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: JavaScript</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">keyup</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="kd">function</span> <span class="nf">setError</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">msg</span><span class="p">)</span> <span class="p">{</span> <span class="nx">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">strong</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Error:</span><span class="dl">"</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">error</span><span class="dl">'</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">span</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">setSuccess</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span> <span class="nx">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">strong</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">OK:</span><span class="dl">"</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">success</span><span class="dl">'</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">span</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">&check;</span><span class="dl">"</span><span class="p">;</span> <span class="p">}</span> <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="nx">val</span> <span class="o">!==</span> <span class="dl">""</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">taken_usernames</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nf">trim</span><span class="p">()))</span> <span class="p">{</span> <span class="nf">setError</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="dl">'</span><span class="s1">&cross; Sorry, this username is taken.</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nf">setSuccess</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="dl">'</span><span class="s1">&check; You can use this username.</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username_feedback</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username_feedback</span><span class="dl">'</span><span class="p">)</span> <span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">[for="username"] strong</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="p">}</span> <span class="p">});</span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>The displayed message in this example is coded using a <code class="language-plaintext highlighter-rouge"><span></code> element that has an <code class="language-plaintext highlighter-rouge">aria-live</code> attribute with the value <code class="language-plaintext highlighter-rouge">polite</code>. The contents of this so called “live region” are conveyed to screen readers and other assistive technology. The value “polite” de-emphasizes the importance of the message and does not cause screen readers to interrupt their current tasks to read aloud this message. Thus the message is only read once when the user stops typing rather than on every keystroke that the user makes.</p> </div></aside> <h4 class="ex inap" id="scaled-feedback">Scaled feedback</h4> <p>The example below illustrates a range of possible types of feedback in addition to success and error messages. In the example, the strength of the password is checked as it is typed by the user. The feedback indicates a scale of how strong the password is. The feedback is indicated using several cues, including color coding, a barometer, and label “Weak”, “Okay”, and “Strong”, as well as the time that would be needed to crack the password.</p> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>No data is sent using the following example input field. The password is shown in plain text for demonstration purposes.</p> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <form method="post" action="#"> <label for="ex2_password">Password:</label> <input type="text" name="password" id="ex2_password" /> <span id="passwordmeter"><span></span></span> <span id="passwordmessage" aria-live="polite"></span> </form> <style> #passwordmeter { display:inline-block; width:125px; height: 20px; border: 1px solid #666; vertical-align:middle; } #passwordmeter span { display:inline-block; height:1em; background-color: gray; width:25px; height: 20px; } </style> <script> (function(){var a;a=function(){var a,b;b=document.createElement("script");b.src="/WAI/content-images/tutorials/forms/zxcvbn.js";b.type="text/javascript";b.async=!0;a=document.getElementsByTagName("script")[0];return a.parentNode.insertBefore(b,a)};null!=window.attachEvent?window.attachEvent("onload",a):window.addEventListener("load",a,!1)}).call(this); document.getElementById('ex2_password').addEventListener('keyup', function(){ var meter = document.querySelector('#passwordmeter span'); var msg = document.getElementById('passwordmessage'); var pw = zxcvbn(this.value); meter.style.width = (pw.score+1) * 25 + 'px'; if (pw.score == 0) { meter.style.backgroundColor = 'red'; msg.innerHTML = '<strong>Really Weak</strong> Password'; } else if (pw.score < 3) { meter.style.backgroundColor = 'red'; msg.innerHTML = '<strong>Weak</strong> Password (cracked in ' + pw.crack_time_display + ')'; } else if (pw.score == 3) { meter.style.backgroundColor = 'yellow'; msg.innerHTML = '<strong>Good</strong> Password (cracked in ' + pw.crack_time_display + ')'; } else { meter.style.backgroundColor = 'green'; msg.innerHTML = '<strong>Strong</strong> Password (cracked in ' + pw.crack_time_display + ')'; } if (this.value == "") { meter.style.backgroundColor = 'gray'; msg.innerHTML = ' '; } }); </script> </div></aside> <p><a href="/WAI/tutorials/forms/examples/password/">See commented example code in full.</a></p> <h3 class="ap" id="on-focus-change">On focus change</h3> <p>In some cases, it does not make sense to check input as it is being typed by the user because it would display error messages most of the time. This is often the case when data needs to be entered in a particular format, such as a date.</p> <p>In the example below, the user is expected to provide an expiry date. The input is checked when the user leaves the form field, for example, by using the tab key to move the focus to the next field or by clicking on another field.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <style> #ex4 div {margin-bottom:.75em;} </style> <form method="post" action="#" id="ex4"> <div> <label for="expire5"><strong></strong> Expiry date:</label> <input type="text" name="expire" id="expire5" value="03.2015" aria-describedby="expDesc3" /> <span id="expDesc3" aria-live="assertive"></span> </div> </form> <script> inputs = document.querySelectorAll('#ex4 input'); for (var i = inputs.length - 1; i >= 0; i--) { inputs[i].addEventListener('blur', function(event){ function setError(el, msg) { el.parentNode.querySelector('strong').innerHTML = "Error:"; el.parentNode.className='error'; el.parentNode.querySelector('span').innerHTML = msg; } function setSuccess(el) { el.parentNode.querySelector('strong').innerHTML = "OK:"; el.parentNode.className='success'; el.parentNode.querySelector('span').innerHTML = "&check;"; } if (this.id == 'expire5') { if (this.value.match(new RegExp('[0-9]{2}\/[0-9]{4}'))) { setSuccess(this); } else { setError(this, 'Use the format MM/YYYY.'); } } else if (this.id == 'username5') { if (taken_usernames.includes(this.value.trim()) == false) { setSuccess(this); } else { setError(this, 'Username already taken.'); } } event.preventDefault(); return false; }); }; </script> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"expire"</span><span class="nt">><strong></strong></span> Expiry date:<span class="nt"></label></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"expire"</span> <span class="na">id=</span><span class="s">"expire"</span> <span class="na">value=</span><span class="s">"03.2015"</span> <span class="na">aria-describedby=</span><span class="s">"expDesc3"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">id=</span><span class="s">"expDesc3"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span><span class="nt">></span></span> <span class="nt"></div></span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>The displayed message in this example is coded using a <code class="language-plaintext highlighter-rouge"><span></code> element that has an <code class="language-plaintext highlighter-rouge">aria-live</code> attribute with the value <code class="language-plaintext highlighter-rouge">assertive</code>. The contents of this so called “live region” is conveyed to screen readers and other assistive technology. The value “assertive” emphasizes the importance of the message and causes screen readers to interrupt their current tasks to read aloud this message. Thus the message is read aloud before the next element that received the focus is announced to the user.</p> </div></aside> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> <p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p> <p><strong>Success Criteria:</strong></p> <ul><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-minimize-error-identified"><strong>3.3.1</strong> Error Identifications:</a> If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A)</li><li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-minimize-error-suggestions"><strong>3.3.3</strong> Error Suggestion:</a> 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)</li></ul> <p><strong>Techniques:</strong></p> <ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA18">ARIA18: Using aria-alertdialog to Identify Errors</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA19">ARIA19: Using ARIA role=alert or Live Regions to Identify Errors</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA21">ARIA21: Using Aria-Invalid to Indicate An Error Field</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G83">G83: Providing text descriptions to identify required fields that were not completed</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G85">G85: Providing a text description when user input falls outside the required format or values</a></li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/forms/validation/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Validating Input</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/forms/multi-page/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Multi-page Forms</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/forms/notifications.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/forms/notifications/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 03 June 2022 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739902561245459979"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739902561245459979"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>