Website and web app accessibility
Last updated:
Make your websites and web applications accessible so everyone can use them easily, including people with disabilities.
Focusing on accessibility from the start creates digital experiences that more people can use. This approach helps you follow web accessibility guidelines and reach a wide audience.
Learn the fundamentals
There are common building blocks that support digital accessibility across all content types. This fundamentals guide gives you the basics to help you get started.
Interaction design
Good interaction design creates meaningful experiences, and considering accessibility ensures these experiences are inclusive and navigable for everyone. When considering the workflows your website supports, keep these questions in mind:
- What can a user accomplish with a mouse or touch gestures?
- What visual cues do we use to signify importance or interactions?
- Are these perceivable and operable for everyone?
Some users are physically unable to use a mouse and might be navigating through the page using a keyboard only.
Testing a website with a keyboard requires no special tools or skills, just use the Tab key to navigate, without the mouse. As you do this, consider these questions:
- Is a visual indication of keyboard focus present at all times?
- Can you access all features?
- Can you operate all controls?
- Is it reasonably easy to tell where you are on the page?
- When new content is added to or exposed on the page, can the user act on it?
Non-interactive content (for example, plain text and headings) should not be focusable with keyboard alone. Screen readers will still include plain text in the reading order, so there’s no need to make that content focusable.
Beware of completely trapping focus at any point. Watch out for autocomplete widgets, where keyboard focus may get stuck. Focus can be temporarily trapped in specific situations, such as displaying a modal, when you don’t want the user interacting with the rest of the page — but you should aim to provide a keyboard-accessible method of escaping the modal as well.
In addition to visual and auditory feedback, users who rely on keyboard navigation must also be able to access and manipulate updated content if required. Additionally, any time you have a hover event — “:onhover” — ensure that you pair it with a focus event — “:onfocus” — so that either action takes users to the same place.
Website navigation menus often include dropdown or flyout menus, where submenus are hidden by default and appear visibly when mouse users hover over or click a top-level menu item. These sorts of menus can present major accessibility challenges for many groups of users unless they are coded properly. Accessibility specialists have explored this problem in depth, with recommendations.
The UW Theme for WordPress includes an accessibility-designed navigation menu, and the university encourages all website owners to use it.
Make your online forms easy for everyone to use. Give each form field a clear and accurate label or prompt. People who see the form can tell which label goes with which box, but screen reader users can’t unless you connect each label to its box in the form’s code. This helps all users understand what information to enter where.
When a link or button on your website will load new content or take the user to a new page, load new content in the same tab. This can help avoid disorienting users by moving their focus into a new window or tab.
There are some exceptions — for example, if the user would lose progress in a form by loading new content, or if the user needs to login or verify their identity while performing an action. In this case, warn users with an ARIA label or link text that the content will open in a new tab or window. Read more on When to open links in a new tab.
Content layout and ARIA landmarks
Designate clear and obvious landmarks on your page to make your content easily accessible and recognizable. Make sure you use semantic HTML as much as possible since it has most of the tagging structure you need to provide context and relationship in your code.
Accessible Rich Internet Applications (ARIA) landmarks
ARIA landmarks are attributes you can add to page elements to define areas like the main content or a navigation region.
Only use ARIA when HTML elements do not provide everything you need. Unfortunately, some browsers do not support ARIA tags, so it is best practice to use the commonly supported ones and use less of the browser-specific tags. The W3C’s WAI-ARIA Authoring Practices Guide (APG) gives examples of how to apply accessibility semantics to standard design patterns, forms and other interactive elements.
aria-labelledby
- Establishes relationships between objects and their labels
- Value should be 1 or more element IDs, referring to elements with the text for labeling
aria-describedby
- Indicates the IDs of the elements that describe the object
- Use to establish a relationship between widgets or groups and text that describes them
aria-label
- Defines a string that labels the current element
- Use when a text label is not visible on the screen
Reflow and magnification
Users with low vision may need to magnify content in order to use the website. When testing magnification, try magnifying the content up to 400%. Content should not overlap, cut off, or lose functionality as you magnify.
Ensure that all interactive elements remain interactive as you magnify the screen. This is especially important for menus that collapse or relocate at higher magnifications.
Error handling
Handling error messages accessibly means making sure that errors are clear, specific, and easy to locate. Error messages should appear close to the form fields and use simple, concise language to describe the issue and how to correct it. Providing real-time validation feedback can help users correct errors as they occur, enhancing the overall user experience. Errors should also be announced to screen reader users as they appear, whether in real-time or after a page load, especially when the errors prevented an event from happening (like submitting a form).
Test your website
You can use automated web accessibility checkers like Lighthouse and WAVE to find certain types of accessibility barriers. These tools scan the code of webpages and then provide simple error reporting that may help you to identify and fix some accessibility issues.
While automated testing is a great first step, manual testing is always needed to determine whether a digital resource is accessible.
For more information, read this guide on how to test your websites and webpages for accessibility.
Get help from the Center for User Experience (CUE)
We partner with you to create accessible, usable, and inclusive digital spaces through free evaluations and consultations.