12 web accessibility best practices: A starter list
There are many reasons why building accessible products makes great business sense. But sometimes, a personal experience offers extra inspiration. One of the brightest developers I’ve ever met is blind. I worked right next to him for months, marveling at his ability to solve the thorniest technical challenges — despite relying heavily on assistive technologies like screen readers.
It inspired me to dig deeper into web accessibility best practices — to help improve my work as a software developer every day. Because, like all of us at ArcTouch, I want the experiences we create to be inclusive to a wide range of users — including those with disabilities.
We recently published an accessibility checklist for app designers and developers, part of an ongoing series of resources we’re creating about digital accessibility. In this post, I’ll focus on web development — and share some of the most common best practices for web accessibility.
These 12 best practices offer a great starting point for building accessible web experiences.
1. Use well-structured semantics in your HTML
Structured and semantic HTML is essential for creating an accessible website. Instead of relying on generic div and span tags, use the appropriate HTML tags for each element. This not only helps to create more organized and readable code, but also ensures that assistive technologies can correctly interpret the content. By using specific tags, you can make your page more understandable for all users, including those who rely on assistive technologies.
2. Always use alt-text
Many visually impaired users rely on screen readers to navigate the web, and screen readers rely upon alt-text. Other types of assistive technologies — such as braille displays and text-to-speech software — also use alt-text. So, ensure your alt-text is clear (and concise) for your page’s important images and graphics. And if an element is only decorative, it should have an empty alt-attribute.
3. Be specific with aria-labels
When constructing a web page, avoid repeating or using similar calls-to-action, like “Learn More” or “Read More.” It’s important to add specific context to the aria-labels. For example, if a link offers more information about a product, include the product’s name in the aria-label text so a screen reader would say, “Learn more about [product name].” Two great articles about this can be found at Aditus.io and a11iseverything.com.
4. Test your tab order
Ensure your site can be navigated logically and intuitively by those who rely on screen readers, keyboard-only navigation, alternative navigation devices like switches, and more. Go through your page using only the tab key on your keyboard. Make sure that interactive elements receive focus in a left-to-right, top-to-bottom sequence. If you find something out of sequence, don’t use Tabindex values of 1 or higher to address it; instead, reorder your code. As a general rule, the tab order should follow the order items are presented in the DOM. And while you’re testing tab order, it’s also a great time to ensure that your site uses a clearly visible and high-contrast focus indicator.
5. Be careful when hiding an image or component
Sometimes, developers hide an element on a page but neglect to properly code the element for assistive technology. For example, I observed a user test where the page included a hidden video, but the assistive technology still read information about the video — causing confusion. As you review each page, carefully consider which elements you think are necessary for assistive technologies and which may be better off hidden. Once you decide which elements to hide, code them appropriately using the aria-hidden attribute.
6. Take advantage of web accessibility browser extensions
Several free browser extensions let you know how your site performs regarding accessibility. I use Chrome, so axe DevTools, Wave Evaluation, Lighthouse, and Accessibility Insights for Web help me identify and fix some of the common web accessibility issues.
7. Leverage the keyboard for accessible site navigation
Using a keyboard to engage with different elements on a website is important for many disabled users — particularly those with visual impairments or motor control disabilities. Ensure your buttons, links, and form elements can be engaged with the tab key, and can be operated using common keyboard shortcuts.
8. Choose a meaningful focus on each page
When new pages load, always make sure to put the focus on a meaningful place — so that assistive technology users are not confused by any weird positions. For example, if a user clicks to sign up for a service, and they are taken to a landing page with a form, jump to the next meaningful text related to the form — and not to the beginning of the page.
9. Put the focus on form response after submit
Speaking of forms, when a user submits the form, ensure screen readers are prompted to read any feedback about that form completion before any other content on the page. If a form completion’s success/fail message is in a pop-up window, make sure to put the focus on that specific box. Consider using an aria-live region to improve the user experience when there is a dynamic change or update on the page.
10. Enable reading of checkbox status
Poorly built forms with unclear checkboxes can confuse those dependent upon screen readers. Make sure your form is coded so that screen readers will indicate the status of each selection as checked or not checked. This may seem repetitive, but hearing the status can be really helpful for visually impaired users.
11. Use clear, commonly understood wording
Always be as clear and concise as possible with the copywriting on a page and the alt-text attributes. Where possible, use universally understood phrasing such as “About Us”/”Contact Us” instead of lengthier and creative alternatives. Website visitors are used to looking for these common options — and disabled users depend on them to efficiently navigate the web using assistive technologies.
12. Focus on progress over perfection for web accessibility
Accessible web design and development can include a wide range of tools and tactics — so many that it can be overwhelming to get started. Don’t feel like you have to do everything at once. Even small improvements to make your website more accessible will be appreciated. Once you build accessibility into your work, it gets easier over time. Eventually, creating accessible experiences will be a normal part of your work.
Need help with website accessibility?
Our accessible design and development team helps companies create lovable and inclusive apps, websites, and connected experiences. Need help with your accessible website? Contact us today for a free consultation.