Nordburg Solutions

How to Write Accessible Forms - What About Those Password Instructions?

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

Let's Get Started

Note that everything you see in this tutorial is something I've seen "in the wild". I'm not making any of this up.


What About Those Password Instructions?

Now a screen reader will read out something like: "All required fields are in red. Username editable, Full Name editable, Password Editable password, Re-type Password editable password, What's your gender? Female clickable unselected Male clickable unselected Female clickable unselected Male clickable unselected, Where do you live? Select Province Drop-down, Comments, Enter comments here, clickable unchecked I have read the Link Terms and Conditions and I agree to comply with them, Submit clickable."

Now we're getting somwhere! But we're still missing the password instructions. The simplest, most basic way is to make it selectable with a tabindex="0". (There is a more advanced way, but I'll deal with that later.)

The reason we use tabindex="0" is that it makes otherwise non-focusable text focusable. As the form is right now, after you tab out of Password, you tab into Re-type Password.

Important note about tabindex="0": Focusable elements are usually interactive elements. By adding tabindex="0" to a non-interactive component (like a <p> tag or an <h2> for example) is almost like lying to the user, and should be avoided at all costs....unless it's the best way to do something, like providing instructions or information in the middle of a form for a set of form controls.

<form method="POST" action="#" name="theForm" id="theForm">
<div>All required fields are in red.</div>
<label for="username" style="color: #FF0000; background-color: #FFFFFF;"><b>Username:</b></label>
<input type="text" name="uname" id="username">
<br>
<label for="firstname" style="color: #FF0000; background-color: #FFFFFF;"><b>Full Name:</b></label>
<input type="text" name="fname" id="firstname" placeholder="Full names must consist only of letters, a dash, and no more than 3 spaces."/>
<br>
<label for="password1" style="color: #FF0000; background-color: #FFFFFF;"><b>Password:</b></label>
<input type="password" name="password" id="password1"/>
<div tabindex="0">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" style="color: #FF0000; background-color: #FFFFFF;"><b>Re-type Password:</b></label>
<input type="password" name="repassword" id="password2"/>
<fieldset>
<legend><b>What's your gender:</b></legend>
<br>
<label>
<input type="radio" name="gender" value="female">
<b>Female</b></label>
<br>
<label>
<input type="radio" name="gender" value="male">
<b>Male</b></label>
</fieldset>
<label for="province"><b>Where do you live?:</b></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>
</select>
<br>
<label for="comments"><b>Comments:</b></label>
<textarea id="comments" name="comments">Enter comments here.</textarea>
<br>
<label style="color: #FF0000; background-color: #FFFFFF;">
<input type="checkbox" name="agree"> <b>I have read the <a href="accessibleForms/tandc.php">Terms and Conditions</a> and I agree to comply with them.</b></label>
<br>
<input type="submit" onclick="return validateBetterThenSubmit();" value="Submit">
</form>

See this example in action.

Now a screen reader will read out something like: "All required fields are in red. Username editable, Full Name editable, Password Editable password, 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. Re-type Password editable password, What's your gender? Female clickable unselected Male clickable unselected Female clickable unselected Male clickable unselected, Where do you live? Select Province Drop-down, Comments, Enter comments here, clickable unchecked I have read the Link Terms and Conditions and I agree to comply with them, Submit clickable."