Nordburg Solutions

How to Write Accessible Forms - Use of Symbols

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.


Use of Symbols

Perhaps you don't want '(Required)' written out for every field that is required. Many websites use an asterisk. If you do so, don't forget to put a note at the top of the page saying what the asterisk means.

Keep in mind that some screen readers might not read out the asterisk because of verbosity levels. So, it's would be best to leave '(Required') in, but hide it from visual users.

<form method="POST" action="#" name="theForm" id="theForm">
<div>Fields marked with <span style="color: #CC0000; background-color: #FFFFFF;">*</span> are required.</div>
<label for="username"><b>Username: <span style="color: #CC0000; background-color: #FFFFFF;">*</span> <span style="display: none;">(Required)</span></b></label>
<input type="text" name="uname" id="username">
<br>
<label for="firstname"><b>Full Name: <span style="color: #CC0000; background-color: #FFFFFF;">*</span> <span style="display: none;">(Required)</span></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"><b>Password: <span style="color: #CC0000; background-color: #FFFFFF;">*</span> <span style="display: none;">(Required)</span></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"><b>Re-type Password: <span style="color: #CC0000; background-color: #FFFFFF;">*</span> <span style="display: none;">(Required)</span></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>
<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. <span style="color: #CC0000; background-color: #FFFFFF;">*</span> <span style="display: none;">(Required)</span></b></label>
<br>
<input type="submit" onclick="return validateBetterThenSubmit();" value="Submit">
</form>

See this example in action.