In our last post on giving and registration form accessibility, we talked about how to make your web forms perceivable.
To recap, there are four guiding principles to make all your web content — forms included — accessible to everyone who wants to give to your institution online:
- Perceivable
- Operable
- Understandable
- Robust
In this post – the second in our series covering each of the POUR principles in-depth – we’re talking about making sure your web forms are “operable.”
A Definition of the Operable Principle
Your webpage is “operable” when the user interface and form elements are designed in such a way that any user can operate them. For example, your web form cannot require any type of interaction that a user with a disability cannot perform.
A key part of this principle is recognizing that not everyone interacts with your web content using the same devices and under the same time constraints.
Keyboard accessibility for all your form elements ensures that most users can interact with your page. Any time-sensitive features should be adjustable to accommodate users who can’t take advantage of them. And your page should be organized in such a way that users can easily navigate it, find content, and determine where they are at any given point.
Make All Your Form Functionality Available from a Keyboard
Not everyone uses a standard keyboard and mouse when interacting with the internet. In fact, many people can’t.
Whether it’s a visual impairment that makes it difficult (or impossible) to see the pointer on the screen, or a condition affecting fine motor skills that makes maneuvering a mouse next to impossible, some disabilities make a keyboard the only option to interact with a web page.
To make sure that everyone can interact with your content, you need to make every feature and element accessible from a keyboard (or a keyboard interface). That means that anything a user can accomplish using a mouse — moving through form fields, clicking a link in the navigation bar — should also be achievable from the keyboard.
That’s not to say that you can’t build support for mouse behavior into your form, but you have to make sure there’s an equivalent way to do the same thing from a keyboard.
Above all, make sure your code doesn’t create a “keyboard trap.”
A keyboard trap occurs when a user can’t move focus away from a web element using the keyboard alone. It’s usually the result of some implementation of JavaScript functionality, but it means that someone who can only use a keyboard to get around on a page gets “stuck” on some part of it.
So, if a user can move the focus to some section of the page using the keyboard, make sure that they can also move focus away from that element using the keyboard alone.
The easiest way to make sure your forms are operable via keyboard-only is to test them. Load your form and use the tab key to move from one element to another, and use the Enter key or spacebar to activate the element. And make sure that the current focus is always clearly indicated.
Don’t Place Time Limits on Your Users
Imagine you land on a web page, and are presented with a rotating banner. You start to read it, but then the content suddenly changes before you’re done. Annoying, right?
(Source)
Sliders and rotating images may be all the rage, but they can be a big problem for anyone with a disability. Cognitive impairments can slow a person’s ability to process information, but even auditory or visual impairments can affect response time if the information isn’t easily accessible.
Everyone completes a task at different rates, and people with disabilities usually require a little more time.
Make sure that your users can complete the tasks they need to on your form without encountering any unexpected changes in content or context before they’re done. If you do use time-sensitive elements, make sure you give your users some way to delay the time on them, or even turn them off completely.
Here are a few things you can do to make sure that any time-sensitive features on your site don’t impact users who have trouble with them:
- Give your users a way to pause and restart any rotating content.
- Provide a mechanism to display moving, scrolling or auto-updating content in a static window.
- Let your users disable the time-out feature before the timer starts.
Ideally, users should be allowed to complete a task without any time limit. But if a session timer is essential to the activity, give the user a warning before the time is up AND let them extend the time limit with a simple action (e.g., “press the space bar”)
If an authenticated session expires before the user has completed the task, the page or form should save their input so they don’t have to re-enter it when they re-authenticate to continue the session.
Avoid Content That Flashes or Blinks
Designing your form to include content that flashes or blinks might be one way to draw attention to important elements — but to some users, it’s dangerous. Content that flickers, flashes or blinks can trigger a seizure in people with photosensitive epilepsy.
Bright, flashing content is especially problematic. Anything that flashes faster than three times per second can cause a seizure before most users could turn it off. So if you do use any flashing web elements, make sure you reduce the flash frequency to under three flashes per second.
Bottom line: Even though the W3C accessibility guidelines make some allowance for content that “blinks” rather than “flashes,” it’s best to avoid it altogether.
Not sure if your form content has any problematic flashing content? Use the University of Maryland’s Photosensitive Epilepsy Analysis Tool to test it and find out.
Make It Easy for Them to Find Their Way Around
When most people arrive on a website, they scan the page to figure out if it has what they’re looking for, and then quickly zero in on what they need. For a web page to be “operable,” it must also be navigable — that is, users must be able to easily navigate around the page to find the content they’re looking for.
We mentioned the importance of logical navigation and flow in our post on making your content perceivable, but here are a few more things you can do to make sure that your users can navigate your page easily and efficiently:
- Use “Skip Navigation” links: Screen reader users often have to wade through a lot of repeated content to get to the main content of the page — things like navigation lists, corporate logos, and so on. Include a way for them to bypass these “blocks” and get to the meat of your page faster.
- Organize your page with clear headings: Users with a visual impairment rely on screen readers to read out the headings on the page to get an outline of the document and find their content faster. Organize your page into sections, and make sure each section heading is specific and unique so the purpose is clear.
- Provide visible location indicators: It’s important that your users always be able to discern where they are on your site and on your form. Include a breadcrumb trail on your page, highlight the current location in the navigation bar, or in the case of a multi-page form, use simple text like “Page 2 of 5”.
- Use descriptive link text: For sighted users, a link titled “Click here” isn’t necessarily a problem — but for screen reader users, it can be problematic. Make sure your link text clearly indicates the purpose or destination of the link (and make sure it’s unique on the page).
Are Your Web Pages and Forms Operable?
The most important aspect of making your form operable is ensuring that your users have multiple ways of interacting with it.
Not everyone can use a mouse, or process your content in the same way, using all five same senses. Providing alternative methods to consuming the content will ensure that all your users — whether living with disabilities or not — can enjoy the full experience of your web content.
If you’re not sure whether your web page is up to snuff, check out this free online evaluation tool to find out.