Being a bit more accessible

Today I managed to cross another item off my to-do list as I have been updating the 'Contact us' booking enquiry form to be Web-Accessible using the WebAim accessibility guidance for creating forms.

In order to make submission forms more user-friendly and in particular to ensure that your form can be handled by screen readers and by users with partially sighted accessibility tools, I needed to associate each input field on form with the corresponding descriptive label associated with it.

So the HTML

Email: <INPUT type=text name=EmailAddress size=35>

which creates an input box that you can enter your email address into, with the text string "Email:" next to it

Email:

becomes

<LABEL for=Email>Email:</LABEL> <INPUT id=Email type=text name=EmailAddress size=35>

which looks identically the same

Email:

Except that this time by adding the LABEL and "for=" you have instructed the browser that the "Email:" label is associated with the input field rather than being just a bit of text that randomly happens to sit next to the input box. This helps screen readers to visually prompt the user as to what the input field is, and also has an added advantage for ordinary web browsers that if you now click on the label associated with the input field then the cursor immediately jumps to the start of the input field - try it and see what I mean.

WebAim has lots of accessibility resources and is well worth exploring to understand more about how to make sure your website is as accessible as possible.

Further details on the HTML <LABEL> tag can be found on many sites including w3school's HTML reference and Web Design Group's HTML reference manual.