Archives: 2007

Accessibility Concerns

The code

HTML

<form action="someScript" method="post"> <fieldset> <legend>Personal Information</legend> <label for="firstname">Firstname</label> <input type="text" class="text" name="firstname" value="Jeffrey" tabindex="10"> <label for="lastname">Lastname</label> <input type="text" class="text" name="lastname" value="Brown" tabindex="20"> <label for="course">Course</label> <input type="text" class="text" name="course" value="CS-10" disabled="disabled"> </fieldset> <fieldset> <legend>Educational History</legend> <label for="ed">I have completed</label> <p><input type="checkbox" name="ed" value="hs" tabindex="30"> High School</p> <p><input type="checkbox" name="ed" value="undergrad" tabindex="40"> Undergraduate Degree</p> <p><input type="checkbox" name="ed" value="graduate" tabindex="50"> Graduate Degree</p> <p><input type="checkbox" name="ed" value="phd" tabindex="60"> Doctorate</p> </fieldset> <fieldset> <legend>Enrollment in CS-10</legend> <label for="enroll">I am taking this class because...</label> <p><input type="radio" name="enroll" value="liveclose" tabindex="70"> I live close to Damascus.</p> <p><input type="radio" name="enroll" value="nothot" tabindex="80"> I heard the teacher was hot, boy was I wrong!</p> <p><input type="radio" name="enroll" value="enhance" tabindex="90"> I wanted to expand my skills as a web designer and enhance my teaching.</p> <p><input type="radio" name="enroll" value="femthought" tabindex="100"> I thought I was signing up for Post-Modern Feminist Thought</p> </fieldset> <input type="submit" value="Submit" tabindex="110"> <input type="reset" value="Clear" tabindex="120"> </form>

The tabindex attribute

Visual impairment is not the only disability of people using the Internet. Physical disabilities that limit movement and dexterity limit the use of the mouse and can completely limit them to the keyboard. Tabindex allows the user to press the Tab key to navigate the form. Notice that every input element now has a tabindex.

Values can range from 1 to a large number (not sure what the upper limit is). A friend once suggested to me that you increment by 10 for each element. This is so that as you move or add elements you won't have to renumber every element, you could simply add 11,12,13, and 14 in between 10 and 20. This is a much more efficient method.

Example

Personal Information

More Form Elements