Forms for All
Introduction
Every meaningful interaction that occurs on the web involves a form of some sort — for registration, subscription services, customer feedback, and to initiate transactions between users and companies. Forms connect users to your business. Without them, the web becomes a passive experience — something to merely be consumed.
Whether it is communicating through Slack, buying a product, or working through a fully-fledged application flow, forms are always front and center. As a gateway to your application, experience, and indeed your customers, each form you include should be usable for as many users as possible.
In essence,
An accessible form equates to increased potential market reach.
Every user, regardless of their limitations (and even more so because of them) should be able to recognize each element on a screen and know how to interact with it using their input device of choice. In her book “Accessibility for Everyone,” Laura Kalbag sets out four measurable parameters that equate to an improved and frictionless user experience for all users:
- Visual: Make it easy to see
- Auditory: Make it easy to hear
- Motor: Make it easy to interact with
- Cognitive: Make it easy to understand
Make it easy to see
Well contrasting colors between foreground and background are obviously necessary for users who experience visual color deficiencies such as deuteranopia (red-green color blindness) or tritanopia (yellow-blue color blindness). This also positively impacts users who may use your products in rooms with glare or on older monitors. A 4.5:1 contrast ratio of text to background is optimum for elements up to 24px regular or 19px bold. For text above these sizes, in the case of headings for example, the contrast requirement drops to 3:1.
Another factor to consider is how your form responds when the user zooms in on the viewport. Guidelines advocate that all content and functionality is available at a zoom factor of 200%, and horizontal scrolling is minimized. If your forms are responsive, then chances are they are accessible for low vision users. Responsive design IS low vision design, and your forms should reflow to fill most of the width of the viewport, without causing any horizontal overflow.
Responsive design IS low vision design
Even though most people think of responsive design as a mobile design feature, responsive design works just as well on desktop browsers. In fact, it is on desktop browsers where responsive design can have its greatest impact for users with low vision. Desktop screens have much greater magnification abilities than mobile screens. The truth is that many users with low vision cannot see small mobile devices well enough to read them, even with screen magnification. In those cases, users would rely on a screen reader instead.
On a desktop computer though, users with low vision can take full advantage of the larger screen and zoom in as much as necessary. As the users zoom in, the browser window will be smaller relative to the size of content, so the browser could potentially switch over to the mobile breakpoints, if the site is designed to be responsive on the desktop. That is a a good thing, because it means that the content would switch to a single-column design, with text reflow to reduce horizontal scrolling, and with a simplified visual layout that is easier to work with.
Finally, ensure that form fields and their labels are not separated by extensive whitespace that makes it difficult for people who use screen magnifiers to associate labels and fields. It is also best if the label is above the field rather than to the side of it, because when you select the field, the OS (Operating System) zooms into the field, pushing the text off screen if it is to the side.
Make it easy to hear
A screen reader user experiences the web through sound. A form that is ‘easy to hear’ is one that has been assembled with the audio-structural user experience in mind. Using a variety of keystrokes, users navigate to your form by means of the “Find Next Form” command, and then progress logically through each control using the tab and arrow keys.
For meaning to be exposed to the user, each form control must be connected or ‘wired up’ to its respective labelling element under the hood. Without this connection the user will be presented with vague terms such as “Edit text, blank”, “Tick box, unticked/ticked”. Such announcements provide no contextual meaning and will force users to linearly read through each element, line by line, step by step. The accessible UX becomes frustrating and cumbersome.
Similarly, provide mechanisms for usable and accessible error recovery. Generally, as form validation is performed behind the scenes, this does not present accessibility issues provided that the errors are communicated to the user in both visual and auditory formats. Users should be alerted to the presence of the form error, be able to access the fields that require modification, and resubmit for validation.
We can see that form accessibility for screen reader users is concerned mainly with development efforts. To build for a meaningful audio-structural form experience, elements must be correctly wired up to their labels, with errors clearly communicated in both visual and auditory modalities. WebAIM’s articles on the audio-structural user experience are extremely helpful in this regard.
Make it easy to interact with
Users who do not use a mouse, perhaps due to a motor/dexterity or visual disability are likely to use the keyboard to access and interact with web content. If all functionality can be achieved using a keyboard, it can be accomplished using a wide variety of assistive technologies. A quick and effective way to test this is to interact with your form using the Tab, Enter, Space and arrow keys in conjunction with the normal letter keys. Observe the flow of the keyboard focus and ensure that it follows a logical reading flow. Links, buttons, and form controls are natively accessible out of the box to keyboard users. For more component-specific guidance, see Webaim’s article on keyboard accessibility.
Make it easy to understand
In the main, an understandable form is one that the user can comprehend without undue effort. In this regard, understandability is not limited to readability, but also extends to other qualities. Components should respond to user interaction in predictive ways. Similarly, help should be provided should errors occur.
Predictability
When user interface elements receive focus, a change of context should not occur. Examples of a change of context include:
- forms submitted automatically when a component receives focus.
- new windows launched when a component receives focus.
- focus is changed to another component when that component receives focus.
Error assistance
It’s easy to miss things, to overlook what is right in front of you. It’s part of the human condition. Providing clear instructions should errors occur is critical to helping users get back on track. Position error notifications close to their input fields. Provide text and / or character cues to indicate error states and do not just rely on color alone. Also, speak to your development team about ARIA and how you can use it to impart important or time sensitive information to users in an auditory form. Some users may use a combination of screen magnification and text-to-speech technology and these efforts can benefit them greatly.
Conclusion
Forms are the entry point to connect users to your business. And users are diverse. You will probably never meet most of them but you can show that you have thought about them if you spend a little bit of time considering their diverse needs, goals and desires. Design and develop with users in mind by striving to make your forms easy to see, hear, understand, and interact with. You will increase your forms’ accessibility and usability, expand your user base, and contribute to more inclusive design.
