accessibility

as with the overall navigation and content presentation - setting up forms for any webpage needs to be planned and implemented carefully, accessibility needs to be an important consideration. any form has a default behaviour when used with the keyboard alone. by hitting the tab key - the focus will move from the top of the page into each box, button or link - something most of us know and use when filling in a form online. forms are in their basic set up one very accessible element within a page - it is vital however to make their use and interpretation more efficient for visitors restricted to using keyboard navigation alone as well as screen readers.
visual layout and specific set ups for screen readers will ensure a good form set up. by making our forms accessible - we will not only look after our disabled visitors but will also have a more user-friendly form for anyone :)
please note that we will only look at the actual form structure here - please read the styling section for CSS layout techniques.

a good form needs to be easy to understand, logical and accessible via the keyboard alone. a standard form is usually already accessible via keyboard. there are however some methods which would make your form unusable by keyboard - one of which is javascript. though perfectly fine for use in javascript enabled browsers - when viewed in a different browser set up - lots of javascript functions will prevent keyboard access to certain form elements, making your form inaccessible. make sure to keep this in mind as you design your form and test your set up (please see the links at the end of this page for reference).

keyboard navigation

before we begin to set up a more user-friendly form let's have a quick look at how the keyboard shortcuts work on forms generally. to find out about the specific keyboard shortcuts for the different platforms or browsers - you will need to go to the browser's website which will show a much more detailed description.
for our purpose here - a very brief and general overview:

pc browser shortcuts for forms

move to the next item in form (can be single or multi-line text box, radio button or checkbox, drop down menu and reset or submit button)

move to the previous item in form (again, can be single or multi-line text box, radio button or checkbox, drop down menu and reset or submit button)

for links — open selected link in webpage
for reset/submit buttons — reset/submit form

for selected radio buttons — press to select option, press again to de-select
for selected checkboxes — check box, press again to un-check

to select an item from a list (such as drop down menu)
to open a drop down menu - use alt + down arrow

mac browser shortcuts for forms

!!! important!!!
even though the keyboard shortcuts for the mac are exactly the same as for the pc (listed below for convenience) - the default behaviour of the browser on most macs will seem not to work for all of the shortcuts. you will always be able to use the tab key for textboxes but as soon as you hit a radio button or checkbox to deal with - the keyboard shortcut might not work.

this is a mac osx setting rather than a preference in the browser you use. to use all standard keyboard shortcuts - go to your system preferences to make the following changes:

system preferences > keyboard & mouse > keyboard shortcuts
>> check the 'all controls' box

move to the next item in form (can be single or multi-line text box, radio button or checkbox, drop down menu and reset or submit button)

move to the previous item in form (again, can be single or multi-line text box, radio button or checkbox, drop down menu and reset or submit button)

for links — open selected link in webpage
for reset/submit buttons — reset/submit form

for selected radio buttons — press to select option, press again to de-select
for selected checkboxes — check box, press again to un-check

to select an item from a list (such as drop down menu)
to open a drop down menu - use alt + down arrow

practically speaking...

let's have a look at a common set up of a feedback form and set it up with accessibility in mind. our example is most likely asking a few too many pointless questions - but it will allow us to understand the form layout and organisation as well as test its accessibility when used via keyboard alone.

have a look at the form below:
[please note that there are some display problem in pc ie with the radio buttons and checkboxes... bit stuck on this one - i'd appreciatea any ideas or thoughts on this - please do let me know :) ]

the code...

below is the complete code for the form as used for the form above - have a read through it and proceed to the notes below which will discuss the new elements.

<!-- form start -->
<form id="feedback_form" method="post" action="">
<!-- section1-questionnaire, 2 questions, but 3 labels -->
   <fieldset>
     <legend>questionnaire</legend>
     <!-- question #1 -->
     <h2>how would you rate this site's design?</h2>
     <label for="feedback_rating">design</label>
     <input type="radio" name="feedback_rating" id="feedback_rating" value="grade1"> 
	      like it... <br />
     <input type="radio" name="feedback_rating" id="feedback_rating" value="grade2"> 
	      hmmm... not sure...<br />
     <input type="radio" name="feedback_rating" id="feedback_rating" value="grade3"> 
	      seen better...<br />
     <!-- question #2 - option #1 -->	
     <h2>what are the pros and cons of the design?</h2>
     <label for="feedback_pro">pros</label>
     <input type="checkbox" name="pro_layout" id="feedback_pro"> layout<br />
     <input type="checkbox" name="pro_typography" id="feedback_pro"> typography<br />
     <input type="checkbox" name="pro_colours" id="feedback_pro"> colours<br />
     <input type="checkbox" name="pro_usability" id="feedback_pro"> usability<br />
     <!-- question #2 - option #2 -->
     <label for="feedback_rating">cons</label>
     <input type="checkbox" name="con_layout" id="feedback_con"> layout<br />
     <input type="checkbox" name="con_typography" id="feedback_con"> typography<br />
     <input type="checkbox" name="con_colours" id="feedback_con"> colours<br />
     <input type="checkbox" name="con_usability" id="feedback_con"> usability<br />
   </fieldset>
<!-- section2 - comment -->
   <fieldset>
     <legend>comment</legend>
     <label for="feedback_comment">comment*</label>
     <textarea cols="50" rows="6" name="feedback_comment" id="feedback_comment"> 
	  <!-- remember both opening and closing tag -->
	  </textarea>
   </fieldset>
<!-- section3 - details -->
   <fieldset>
   <legend>personal information</legend>
   <label for="feedback_forename">first name*</label>
     <input type="text" name="feedback_forename" id="feedback_forename" />
   <label for="feedback_surname">surname*</label>
     <input type="text" name="feedback_surname" id="feedback_surname" />
     <label for="feedback_email">email*</label>
     <input type="text" name="feedback_email" id="feedback_email" />
   </fieldset>
     <input type="submit" name="submit" value="submit" />
<!-- form end -->	
</form>

labels

To make the form more accessible - each input element should have its own unique label. Through its for attribute the label will clearly identfy the link between the text contained within its tag and the corrensponding form element - giving clear instructions to whichever user agent interprets the page. This applies browsers as well as screen readers.
For this set up - it is important to plan and make note of all form elements to avoid any mistakes. The label of each form element needs to be unique and cannot be used more than once within the same form. The form element itself requires the corresponding id attribute as well as the name attribute.

to sum up:

• set up labels for each from element
• set up the for attribute for each label
• set up both name and id attributes for each form element

to take the first part of our form as example...

have a look at the underlined sections of script, highlighting the use of the for and the id attributes.

<!-- form start -->
<form id="feedback_form" method="post" action="">
<!-- section1-questionnaire, 2 questions, but 3 labels -->
   <fieldset>
     <legend>questionnaire</legend>
     <!-- question #1 -->
     <h2>how would you rate this site's design?</h2>
     <label  for="feedback_rating" >design</label>
     <input type="radio" name="feedback_rating"  id="feedback_rating"  value="grade1"> 
	      like it... <br />
     <input type="radio" name="feedback_rating"  id="feedback_rating"  value="grade2"> 
	      hmmm... not sure...<br />
     <input type="radio" name="feedback_rating"  id="feedback_rating"  value="grade3"> 
	      seen better...<br />
</form>

fieldsets & legends

to support a clear layout - use the fieldset and legend tags to group related topics together. most browsers display these by default with a fine border around - the legend's title set into the border in the top left corner.
note that both tags require an end tag: <fieldset> </fieldset> - <legend> </legend>

the main code structure:

<!-- form start -->
<form id="[identifying name]" method="get/post" action="[url]">
<!-- [comment on section content] -->
   <fieldset>
       <legend>[legend]</legend>
       ......
       <!-- form elements to go in here -->
       ......
   </fieldset>       
</form>

the next step would be to work on the visual layout and presentation of your form - move onto the styling section for CSS layout techniques ;)

reference links

The information used on this page is merely a digest of several articles and tutorials by some of the experts out there. Make sure to keep up to date with the standards to keep creating accessible sites :)
for further information on accessibility and web standards - check out the sites listed below: