- Use the label elements to associate form controls to text label
- Ensure that the labels are descriptive
- Position labels appropriately to maximize predictability of relationships to their controls
- Where necessary show examples of expected data input, for example date format
- Group related form elements by using the fieldset and legend elements
- Group related options by using the optgroup element in a dropdown menu for example
- Ensure there is a logical tab order through form controls
- Include text instructions at the beginning of the form or set of fields that describes the necessary input
- Ensure that the user activates changes by the use of a submit button, for example don’t use onchange events on dropdown menus
- If you have to use an onchange event ensure there is a clear explanation of what will happen when the control is changed prior to the controls activation
Archive for the ‘Accessibility’ Category
Ten simple accessibility tips for online forms
Thursday, October 1st, 2009Usability vs accessibility
Tuesday, August 11th, 2009It is widely acknowledged that accessibility complements usability and there are very few examples where they conflict. But I have found one…
The national lottery results checker available on their website used to work really well for me. It used to move focus to the next field once you had input your number for the current field automatically. I’d have my ticket in my left hand while inputting with my right – it was a real annoyance to move my right hand to the left side of keyboard to tab across or worse change focus by using the mouse. Due to accessibility guidelines this has now been changed so that there is no automatic change of focus – you have to activate the change by pressing tab or click. So I feel I have quite an awkward experience.
There must be a solution that works well for both. The WCAG 2 guidelines 3.2 says you have to make web pages appear and operate in predictable ways and I think the preference is for the user to activate any change, which is perfectly feasible for search controls or dropdown selection boxes. However, thinking about how many will use this control it may be appropriate to follow the alternative advice stated in the success criteria, if an onchange event occurs is there an explanation of what will happen when the control is changed available prior to the controls activation.
My solution therefore is to ensure that the user is informed that the control will change focus once they have entered a valid number for a field. This therefore meets the guidelines and works for me. Does this work well in practice for people using screen readers or alternative technologies? I would be glad to get any thoughts on this.
The benefits of good web accessibility
Monday, July 20th, 2009I thought I’d try and summarise the key benefits of good web accessibility here:
The financial benefits:
- A larger potential audience
- Potential for increased sales on eCommerce sites
- Reduced site maintenance / bandwidth costs
- Return on Investment: the money invested in accessibility can be made back and more.
- There are over 10 million people with disabilities in the UK with an estimated annual spending power of £80 billion.
- Legal and General claim a 95% increase in quotes and 90% increase in life insurance sales and 50% increase in natural search engine traffic
- http://www.shaw-trust.org.uk/experts_urge_it_teachers_to_make_accessibility_a_p
The technology benefits
- Natural search engine optimisation (SEO). “Google is a blind user who reads the entire website every month then reports what it finds to millions of people” Mark Pilgrim – 2004
- Improves interoperability of the site across devices, such as different browsers, mobile devices.
The user benefits
- Improved usability
- Improves readability, quality and confidence in site content
The legal benefits
- UK law: the 1995 Disability discrimination act
- October 1999: DDA section 21 came into effect. It is unlawful to discriminate against disabled people in the way in which you provide services.
- Websites are mentioned in one of the case studies in the supporting material.