Nordburg Solutions

How to Write Accessible Forms - Reporting Errors

This tutorial can be viewed one part at a time or all in one page.

Don't forget the errors!

Inevitably a user will put bad data into a form, and those errors need to be caught and reported to the user. And the user may need some help to fix the error.

Your form data should be validated at the server for sure. If you want to validate in the browser with Javascript, that's fine too. You need to validate at the server for security purposes. If the submitted form has invalid data, then the user should be sent back to the page where errors are listed in a list of links to the fields that contain the errors. As for accessibility, there's nothing wrong with this approach, but when the page re-loads, the focus will be at the top of the page and a blind user will have to go through the page until they get to the errors so they can fix them and re-submit. The only accessibility consideration here is that you should probably add the word "Error" to the page title so a blind user will hear that they're on the same page, but there are errors to be fixed.

For the remainder of the tutorial we will assume client-side Javascript form validation. We'll assume those functions are already written and we don't need to see how they're done. We'll assume the validate() returns an object with a list of errors, and the id values of the form controls to which they refer.

Reporting Errors

In the form we've been using thus far, let's assume the user entered a bad password; one that did not conform, a bad Full name, and they did not retype their password at all.

So far in this tutorial some Javascript validation has been happening. But the whole time, if there are errors you have no way of knowing! The form just sits there like a lump on a log making you wonder why the form didn't submit. You need to report those errors!

Now we'll introduce some basic error reporting. In the example, click the "Submit" button to see the error messages.

<form method="POST" action="#" name="theForm" id="theForm">
<div>Fields marked with <span class="red">*</span> are required.</div>
<label for="username">Username: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="text" name="uname" id="username" value="myusername" required>
<label for="fullname">Full Name: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="text" name="fname" id="fullname" value="B0B Sm1th" required>
<label for="password1">Password: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="password" name="password" id="password1" required aria-describedby="passwordReq" value="x">
<div tabindex="0" id="passwordReq">Passwords should be at least 8 characters, contain numbers, upper and lower case letters and a special character. This way it will be hard for you to remember, but easy for a computer to guess.</div>
<label for="password2">Re-type Password: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="password" name="repassword" id="password2" required aria-describedby="passwordReq" value="">
<legend>What's your gender:</legend>
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="male">
<label for="province">Where do you live?:</label>
<select id="province" name="prov">
<option value="false">Select Province</option>
<option value="ab">Alberta:</option>
<option value="bc">British Columbia</option>
<option value="mn">Manitoba</option>
<option value="nfld">Newfoundland</option>
<option value="nb">New Brunswick</option>
<option value="nwt">Northwest Territories</option>
<option value="ns">Nova Scotia</option>
<option value="nv">Nunavit</option>
<option value="on">Ontario</option>
<option value="pei">Prince Edward Island</option>
<option value="qc">Quebec</option>
<option value="sk">Saskatchewan</option>
<option value="yk">Yukon</option>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>
<input type="checkbox" name="agree" checked required> I have read the <a href="accessibleForms/tandc.php">Terms and Conditions</a> and I agree to comply with them. <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<div id="errorBoxOuter" style="display: none; position:absolute; left: 0; top: 0; padding: 0; margin: 0; height: 100%; width: 100%; background-color: rgba(33, 33, 33, 0.8); z-index: 1;">
<div style="background-color: #FFFFFF; border: thin solid black; position: relative; margin: 5em auto; top: 30px; height: 10em; width: 50%;padding:3em;">
<li>Bad Full name. Letters and spaces only, please.</li>
<li>Bad password</li>
<li>You forgot to re-type your password.</li>
<input type="button" value="Okay" id="okayBtn" onclick='document.getElementById("errorBoxOuter").style.display = "none";'>
<input type="submit" onclick='document.getElementById("errorBoxOuter").style.display = "block"; return false;' value="Submit">

See this example in action.