New web design always benefits from clear examples, and accessibility optimization is no exception! For this in-depth guide, we’re focusing on specific ADA compliant website examples that show exactly what excellent accessibility looks like. This is vital for meeting ADA compliance requirements and avoiding associated liability issues too. Let’s dive in with a review of the ADA, then look at sites that follow it so well.
What Does It Mean for a Website to Be ADA Compliant?
Broadly, it means that a website should be entirely usable for individuals with disabilities. That refers to users that may not be able to see, or hear, or may not have the mobility to use a mouse or even a keyboard, among many other potential impairments. Accessible websites allow such users to do everything that users without disabilities can do.
The wording comes from the ADA, or the Americans with Disabilities Act. This was an important piece of civil rights legislation made into law in 1990. It was designed to make it illegal for individuals with disabilities to face any kind of discrimination or harassment while working, interacting with businesses, and so on.
When it was first created and passed, the ADA didn’t have much to say about the internet – consumer websites didn’t exist yet, and it would be years until it was common for the average business to have its own website. Originally, much of the language of the law focused on physical spaces, buildings, and so on. But over time the ADA has been clarified and refined (we have other guides that go into more detail about this), and it was generally decided that business websites are also included under the law, especially if the business also operates in physical, brick-and-mortar buildings.
While the ADA itself doesn’t have a lot to say about websites, the internationally accepted guide for making websites acceptable is called the WCAG, or Web Content Accessibility Guidelines. In our examples below, these websites are specifically following the WCAG 2.1 standards, which explain exactly what a website needs to be able to do. We also go into more detail about this elsewhere, but briefly – the WCAG 2.1 offers several different levels of compliance, from A to AAA. The average business site needs to comply with Level AA standards.
Are There Risks If a Business Site isn’t ADA Compliant?
Accessibility compliance isn’t just for government websites or similar services: The ADA applies to all kinds of businesses throughout the United States. That means your business site most likely needs to be fully compliant too. It could face legal repercussions if the issue is ever raised.
Over the past several years, there have been an increasing number of lawsuits directed at businesses sites that don’t meet compliance requirements. Some studies indicate they have increased as much as 75% since 2018. These lawsuits are annoying to deal with and can be expensive to address.
Additional Benefits of ADA Compliance
Meeting ADA compliance is about a lot more than just avoiding lawsuits, fines, or other problems. As you look at our website examples below, keep in mind that this kind of optimization also helps with:
- Landing pages that are easier to understand and help visitors find the right information quickly
- Blogs and text that are easier to read, especially on mobile devices
- Navigation menus that are understandable and can help visitors quickly find where they want to go, which also helps reduce bounce rates and other unfavorable indicators
- Explanations and calls to action that are clearer, easier to follow, and don’t confuse the reader with jargon
- Product pages that present important product details clearly to help potential buyers make decisions
- Colors that complement the website and direct attention toward the most valuable information
- Videos that are easy for all visitors to watch even if they don’t want the volume on
- Widening your potential leads to a broader audience including those with disabilities
ADA Compliant Website Examples
As we dive into specific examples of excellent ADA-compliant sites, here’s an important note: There are many different web development techniques that can add compliance or fix specific problems. The WCAG makes some suggestions of its own, but lets developers choose what the best method is for the situation. If you take a closer look at the code of these sites, you may find a number of approaches. The latest tend to use HTML5’s flexible tagging options, among other solutions.
Lonely Planet offers an interesting focus mode for users that may be easily distracted (ADHD-friendly) or who may have trouble focusing when there are too many elements on the screen. This mode essentially removes distractions and highlights only the most important parts of pages so users can find exactly what they want. Note that even in its regular mode, Lonely Planet does a good job of providing large, clear text for every section on its landing pages, easy to read and understand even on mobile devices.
The UK government sites have undergone extensive optimization for accessibility, beyond even what other governments have required, and the results are very impressive. Its codebase, Frontend, provides thorough HTML coding for both screen readers and easy keyboard navigation for all services: The developers make sure that the code is always ready for the most recent versions of JAWS, NVDA, and other screen readers. The site also supports zooming up to 300%, with the text automatically rearranging so that it doesn’t spill off the screen or become more difficult to read. Additionally, developers put effort into making the content on the site easy to understand and avoiding the confusing language that can so often plague government sites.
It’s particularly important for hospitality and hotel websites – as well as any sites that offer booking/traveling services – to have excellent accessibility compliance. These sites often have a lot of information to offer on the screen and need both easy navigation and clear screen reader compatibility. Hilton does a very good job at this: Scroll through a few of its web pages, and you’ll see that text is clear and sparse, directing users toward buttons that are easy to understand and make navigation easy no matter how it’s done. Hilton also has excellent cursor responsiveness – you can tell exactly what the cursor is highlighting and what it will do when you click, which is very helpful for those who may have mobility issues while using a mouse.
Apple’s site is famous for being a product-oriented website that still practices accessible design, especially when it comes to color and contrast. Take a look at the content, and you’ll see the text is large and easily differentiated from the background with a clear black-on-white design. Most product photos are also on white backgrounds to help improve visibility and avoid confusing color patterns. Where this diverges into different background colors, the text and images are optimized for the best contrast so it’s always easy to interpret. Apple doesn’t quite get everything right – some dedicated product pages can be busy and confusing, and the menu navigation isn’t entirely accessible for those with disabilities, but it’s still an excellent example of how to display products on a site.
Scope is a site dedicated to helping those with disabilities, and is very invested in accessibility, to the point that it keeps a running log of planned changes to make the website more accessible. Your business doesn’t have to do this, but it does show what the optimization process can look like. Also, Scope’s menus are a pleasure to use – hover over any of the buttons or navigation options and you’ll see how responsive they are. They also instantly change color or design elements so that it’s easy to tell what’s been highlighted and what it does. Dropdown menus are also instant, and use large, clear text.
We want to point out two things that Snackaction does particularly well here. First, note the most important buttons on the home page – the buttons that serve as calls to action to turn visitors into leads and buyers like “See Boxes & Pricing.” You’ll notice that they stand out from everything else, clearly highlighted with shapes, outlines, and contrast, so all kinds of visitors, including those with visual issues, can see where they need to go. Second, if you press the Tab key to start navigating by keyboard, you’ll notice a small pop in the corner that navigation will hit first, which allows users to skip content right to the important buttons. This is an excellent best practice for keyboard navigation, especially for more complex sites.
An accessibility service should certainly have an accessible design! Deque is a great example of how a site can have plenty of graphical content while still presenting information in a clear manner. There are many different types of text throughout the site, but contrast is always excellent and navigation buttons are very responsive. If you head to any of the articles Deque provides, you’ll see that the text is clear and well-spaced to help avoid confusion, and the headers and subheadings are strictly organized. Switch to viewing the site on mobile, and you’ll see everything remains easy to navigate and/or read.
Blue Atlas Can Make Your Website Accessibility Plans a Reality
So, how does a business move its site toward compliance like these examples? You may be interested in starting with an accessibility testing tool, which can locate many potential accessibility errors throughout your website and how they fail to meet WCAG standards.
This type of audit can help you create an update plan for your site. However, businesses often need a reliable partner with the experience and resources to properly update a site and ensure accessibility. Blue Atlas Marketing has the experts to help, including advanced testing options and full website updates. When it’s time for you to schedule important optimization, contact us and let us know what you’re thinking. We’re happy to help you reach your development goals!
