Complying with web accessibility guidelines went from a niche concern to the de facto standard for every digital project of every properly-managed brand in the United States. But if you have looked at the litigation history of ADA compliance, this should come as no surprise. In just two short years, the number of federal lawsuits filed against brands for compliance trebled, to more than 2,500 last year. In the world of 2020 (and beyond), every responsible digital marketing leader must prioritize ADA compliance.
We have been building accessibility compliance into web projects since the start of Third and Grove, so we have a strong system in place to ensure our clients are protected. Here are our ten tips for achieving compliance with your next website project.
Tip #1: Build accessibility into your project from the start
The best way to set up an effort for success is for everyone on the project team to buy into achieving compliance from the get-go. Retrofitting a site or application that was designed or built inaccessibly, on the other hand, often takes far more time and leads to suboptimal results. If you have a redesign or replatform coming up, make sure this is a primary objective.
Tip #2: Accept that it takes a village
Accessibility affects almost every member of the team designers, developers, content creators, and others. It's not enough just to have an "accessibility person" who checks the almost-finished product for compliance. Make sure everyone knows how ADA compliance impacts their role in the project, from coders to designers.
Tip #3: Embrace the spirit of compliance
Keep in mind that accessibility isn't just about satisfying a legal requirement or limiting your liability (though, of course, any brand should be concerned about those aspects, too). It's about real people, who make up a significant portion of the population, having the right to access the same information and services as anyone else. Besides being the law, it's a matter of human decency.
Also consider that accessibility is for everyone—the mom holding a baby in one arm and navigating the phone one-handed, the Boston resident trying to use their phone with winter gloves on, or the student late to class who needs to find something quickly. In this age of constant hustle and distraction, a clear, simple, accessible site will be a breath of fresh air and huge advantage over your competition.
Tip #4: Stick with design trends that are common across the web
Start at the beginning: While digital designs are more malleable than physical designs, making changes for ADA compliance is difficult to do late in the game, because it deals with the core structure of how the site is built. Stick with design trends that are common across the web and have a simple visual hierarchy that make navigation easier. Bespoke designs akin to a sci-fi movie interface may look cool, but are hard to use and even harder to make accessible. Especially if you don’t focus on it until the end of the project.
Tip #5: Start with the (real) end in mind
All the best ADA work can go out the window if a user's first experience with your site is a screen full of cookie popups, newsletter signups, and "helpful" chat dialog prompts. If ads and calls-to-action are hiding or distracting from your content, it's not usable by anyone. Site designs should be made with consideration for how they will actually look on mobile device with all these extra addons, and not just how they’re presented in a pristine slide deck.
Tip #6: Focus on what you say, not how you look
While color contrast and layout is important, most website compliance concerns have less to do with how a site looks than how it's navigated. Inaccessible designs have multiple menus without a consistent hierarchy, content without headings in a logical order, or an unclear path for the user to follow. Start by writing the content and headings of your site in an outline format, then prioritize where you want the user to go, and make sure there's a place for everything. Your site will be easier to code, easier to use, and more accessible.
Tip #7: Use the best tools
We love the A11y Project, the Accessibility Inspector, and Stark.
Tip #8: Multiplicity is not just a Michael Keaton classic from 1996
Make sure that the contrast between all text colors and background color passes the AA compliance standard of 4.5 to 1 ratio. Don’t just use colors to distinguish between different pieces of content , use other visual elements such as underlines, space, sizing, etc. Rely on multiple visual differences to indicate an action, promote a response, or distinguish components throughout the site.
Similarly, ensure there are a multitude of ways to access different pages and information on the site (e.g. search bar, nav menus, sitemap, breadcrumbs, helpful links after content, etc.).
Tip #9: Consistency is king
All UI elements and patterns need to be consistent. It’s important to keep navigation consistent throughout all pages of the website (e.g. same links in the same order) and in the same places, as well as making sure that components have the same function within a website are recognizable and easy to identify.