We collaborated with experienced designers to come up with these top five User Experience (UX) digital accessibility tips. There are many more of course, which you can check out on W3C-Web Accessibility Initiative’s (WAI) Designing for Accessibility.
1. Design so users can tab through your website in a logical order
When users tab through your website’s interactive elements—links, buttons, and form fields, for example—they should be able to do so in a logical way. For example, it wouldn’t make sense to tab from a navigation link in the header, and then jump down to the privacy policy page link in the footer, bypassing all the content in between.
A few helpful tips:
- Whether for a screen reader or keyboard-only user, you need to make sure that their experience is meaningful, logical and intuitive as they navigate your website, programmatically or visually.
- Ensure the links, form fields, and any other areas of engagement that receive focus on your website are tabbed through in a logical order.
- Make sure the focus order within a component makes sense. For example, when logging into an account, you’d want to make sure the focus order isn’t like this: “enter email,” “enter password,” “forgot password,” “show password.” Obviously the focus on “show password” should come before “forgot password.”
(Reference: WCAG success criterion 2.4.3 Focus Order)
2. Design online forms with clear, concise labels
Online forms require users to enter data by typing or selecting from a set of options. We’ve all likely had the experience of being derailed when completing an online form. As with any element that requires user input or action, forms require clear, concise labels that describe what’s being asked for. People with disabilities–in particular those with intellectual, vision or mobility disabilities–may find it difficult to enter data accurately.
While placeholder text in form fields may offer good examples of the desired input, its use should be avoided. For example, a label might be “First Name.” An instruction could be “All fields marked with an * are required.” If a user has completed a form field and is alerted to an error, and there aren’t any visible labels or instructions, then they have to go back to each field to find out the description to correct their input. The bottom line–basically, every form element that requires some type of user input should have a form label (not placeholder text), clear feedback on errors, and how to know if a form element is required or optional.
A few helpful tips:
- Don’t make labels or instructions too long or complex. It slows down the process of inputting form data.
- Offer clear examples of expected input formats or structure so the user knows what’s expected.
- Make very clear which fields are required.
- Since the goal here is to make forms more accessible and easy to fill out, be clear and specific in your labeling. For example, instead of simply labeling a form field as “email,” indicate “preferred email to receive newsletter.” That way there’s no confusion about its purpose.
(References: WCAG success criteria 1.3.1 Info and Relationships, 3.3.1 Error Identification, and 3.3.2 Labels or Instructions)
3. Make sure that no elements automatically change because they receive focus
The user should be in control of your website’s content and functions. This aspect of accessibility means that no elements should automatically change just because they receive focus. An automatic change can be a pop-up, switching focus to another element, or taking action as if the user had initiated action (for example, clicking a link or submitting a form). For example, if you’re making an online purchase and check the box to indicate that your credit card and shipping address are the same, that action should not cause the purchase to go through.
A few helpful tips:
- Check your website to make sure nothing automatically happens just because an interactive element receives focus.
- Warn users when a new window will open. Although not required for WCAG conformance, your website will be more accessible to people with a variety of disabilities if you do.
- Make sure that your website only responds once the user initiates reaction, never because they shifted focus onto an element.
(References: WCAG success criterion 3.2.1 On Focus and 3.2.2 On Input)
When it comes to website navigation, consistency and predictability are critical. Users should be familiar with the search bar location, and links that go to the same destinations across different web pages should maintain a consistent design and location. People with disabilities navigate websites in many different ways. To make your site accessible, you need to offer users more than one way to find what they’re looking for. Some users prefer to use the search function, others prefer a drop-down navigation menu, and still others prefer a glossary or site map.
A few helpful tips:
- If you have a search bar and a sitemap on your website, you’ve very likely satisfied this success criterion.
- If you don’t have a skip navigation link on all pages of your website, then you need to at least ensure that the headings are concise and logical, or that page landmarks (navigation, search, main, etc.) are effectively designed. Your website will be more accessible if users understand where the search bars and skip navigation links are located, so make sure these elements are consistently placed and predictable from web page to web page.
(References: WCAG success criteria 2.4.1 Bypass Blocks, 2.4.5 Multiple Ways, and 3.2.2 Consistent Navigation)
5. Design controls for interactive elements
Putting the user in control is a fundamental principle of accessibility. Users of your website need to be able to control their experience, and that ability to control can take many forms. For example, if your website has animation, motion or sounds, the user should be able to play them, pause them, or stop them altogether. In relation to audio, there should be a way to pause or stop any audio that automatically plays for more than three seconds. This benefits not only autistic and other neurodivergent users who may find the audio distracting, it also makes content more accessible for people who use screen readers, so they won’t have sound interfering with what’s being read aloud.
The same thing applies for elements that require complex gestures or movements like swiping or pinching a screen. People with disabilities that affect their dexterity may not be able to do that, so offer another way to accomplish the same objective. One alternative is by providing two buttons, one indicating yes and another indicating no, that only need to be tapped to create the desired effect without swiping.
A few helpful tips:
- Regarding audio, a simple default solution is to not have any audio that automatically starts playing on your website.
- Avoid situations where a user is timed out of an action they’re in the middle of. This is especially important for people who are dyslexic or have a learning disability. They may need more time to read or comprehend information.
- Blinking advertisements, scrolling news updates, and gifs can be very distracting, in particular for people with ADHD or autism. While users must have the option to control those movements, you could also simply err on the side of making automatic content static.
(References: WCAG success criteria 1.4.2 Audio Control, 2.2.1 Timing Adjustable, 2.2.2 Pause, Stop, Hide, 2.5.1 Pointer Gestures, and 2.5.4 Motion Actuation.)
