Here is handy accessibility tip that will make filling in web forms easier for screen reader users, and for people with impaired motor skills: associate form fields explicitly with their labels by making use of the ‘label’ element and the ‘id’ attribute.

When encountering a form on a web page it is easy for sighted users to work out the expected response for each form element; it is just a matter of reading the label next to the field.

However, it is not always quite so simple for someone using a screen reader. It may not be clear which labels are associated with which field (particularly if the page author has used tables to layout the form, and the screen reader doesn’t understand tables).

If labels are not physically, close or clearly associated with the form element, filling in a form can be extremely difficult for screen reader users.

There is a way to explicitly relate labels with their form elements; each label can be identified with a name, and then associated with the appropriate control using the ‘id’ attribute, e.g.,

<label for="name"	>Name</label	>

<input name=" Name" type="text" id ="name"	>

The value of the for attribute can be any text you choose – as long the appropriate id attribute has the same text. Using this technique also provides a bonus for people with impaired motor skills because it increases the ‘target area’ when assigning focus to the field, i.e. clicking the label or the field itself will focus the cursor in the text field (or check the box if it is a radio button).

Related Content

  • Accessibility Auditing – WCAG 2.1 & WCAG 2.2 and Accessible Website Design, UK
    Jim Byrne is an accessibility specialist with three decades of experience in accessible website design, training and accessibility auditing and consultancy for the not-for-profit, education, public and third sector. An award-winning website developer, website accessibility training provider and WCAG 2 expert ( he provided feedback on the development of WCAG ...
  • How to create accessible email
    Email has become one of the most common ways to communicate. It is a good and economical method of disseminating information to people where they want to receive it. Emails are used for private communication, confirming transactions, newsletters, reminders for appointments, marketing and invitations, to name just ...
  • Accessibility of audio and video content on the web
    I have re-published this content from a report I wrote for The Spoken Word Project in March 2007 - because it occurred to me that this might be useful information for organisations thinking of adding video to their websites. Time constraints mean that this document cannot be considered a definitive ...

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course. Video image from Web Accessibility Online Training Course - WCAG 2.1 Compliance

Working with non-profits, charities, voluntary and public sector organisations and social enterprises for over 20 years. Jim set up one of the worlds first website accessibility web agencies in the mid 1990s.