The essential guide to website accessibility design — and why it matters

Accessibility is a cornerstone of good user experience (UX) design. The job of UX designers like me is to make websites that are not only beautiful, but also usable by everyone. And we do that through accessibility design. 

Accessibility is often misunderstood. Most people think these modifications or enhancements pertain only to people with permanent disabilities. 

But many people suffer from temporary or situational disabilities. In fact, you’ve most likely been in that category at one time or another, whether you’ve carried a baby with one hand while ordering groceries or watched a video in a place where you can’t use audio. 

In the real world, we design ramps for buildings and crosswalks with audio cues to accommodate people with disabilities, whether permanent, temporary, or situational. For websites, we check the contrast between colors and add captions to videos to ensure as many people as possible can access and enjoy the experience.

In short: Accessibility design helps level the playing field for everyone. 

Why accessibility is important

In the United States alone, more than 60 million adults live with a disability. That translates to one out of every four Americans! These disability types range from mobility to cognition, hearing, and vision, among others. 

Accessibility for websites is the law. The Americans with Disabilities Act (ADA) requires that public areas must accommodate people with disabilities — and, yes, this includes your website. Lawsuits alleging that websites, apps, and videos are inaccessible to people with disabilities are rising significantly. E-commerce websites accounted for the majority of the cases, and companies with revenues below $50 million were the targets of two-thirds of the lawsuits. 

The business case is obvious. Potentially a quarter of your audience might have trouble accessing your website unless you intentionally design and develop the digital experience with their needs in mind. Poor web design and functionality create friction in the journey for your potential customers — which in turn can negatively impact your company’s bottom line. 

The Web Content Accessibility Guidelines (WCAG) were created to give companies, designers, and anyone building web experiences helpful standards for designing and developing for accessibility. These guidelines were published by the World Wide Web Consortium (W3C), which creates international standards for the web. 

WCAG 1.0 was published in 1999 and included 14 guidelines to assist designers. In 2008, this was updated to WCAG 2.0, which included 12 guidelines categorized under four principles: perceivable, operable, understandable, and robust. WCAG 3.0 is currently in development to further update the principles and guidelines for future-focused accessibility design.

Accessibility benefits everyone through the power of network effects. The network effect is the phenomenon where the increased number of people on a platform, product, or service improves the quality for all. In other words, the more people who can access the web, the more we all benefit.

Who accessibility is for

More than 25% of Americans have a disability of some sort. 

This includes both permanent and temporary disabilities, such as:

Permanently disabled

These are conditions people have for life that affect their physical or mental abilities. This is the category we most often think about when it comes to accessibility. 

Common permanent disabilities:

• Vision — blindness, low vision, color blindness
• Hearing — deafness, low hearing, tinnitus
• Motor — hand tremors, physical deformities, amputations
• Cognitive disorders — dyslexia, dementia

Temporarily disabled

Temporary disabilities impair movement, sight, or hearing for a time. These issues do get resolved but are inconvenient when you have them. 

Common temporary disabilities:

• Broken arm
• Eye surgery
• Temporary hearing loss
• Sleep deprivation

Situationally disabled

Situational disabilities are when a person is impaired based on current circumstances, which makes viewing, listening, or using more difficult. These can affect anyone at any given time. 

Common situational disabilities: 

• Lost glasses
• Holding a baby (because you can only use one hand)
• Using a device with a small screen 
• Lost headphones
• Slow internet connection

7 inclusive design principles

WCAG has four design principles, but we’ve pulled our favorites from various sources to create seven principles every designer should keep in mind when working on websites and apps. We believe these are the most important: 

No. 1: Be consistent

Keep similar processes consistent throughout the site. For example, if there is a newsletter sign-up on the homepage, it should look and function the same way on all other pages. 

Consistency helps users find information and take action when they need to. Aligning to web standards also ensures every new site isn’t a guessing game.

No. 2: Give control

When possible, allow users to control their experience. For example, you don’t want audio or video to play automatically unless the user has an option to turn it off. 

No. 3: Add value

Gone are the days of stuffing webpages with keywords in the hopes of ranking high in search. Algorithms are smarter than ever and rank websites more like humans. People want to find information quickly and easily. If the content on your site provides value — i.e., it’s relevant and useful — your users will come away with a positive experience. 

No. 4: Ensure equity

A website’s design needs to provide the same useful and equally available functions to all. This touches on accessibility design features that enable visitors to use your site regardless of any impairments they have at any time. It also includes a right to privacy and security to ensure all users are safe and in control.

For example, when publishing an infographic on a webpage, ensure it is accessible to assistive technology, such as screen readers: 

• Build it out in HTML/CSS in a way that allows a screen reader to run through it as if it were normal text.
• Provide an alternate transcript.
• Include a video walking through the infographic.

No. 5: Provide flexibility

The website should offer variations of uses based on a user’s preferences or abilities. Every person approaches a website differently, and we all have preferences on how to access the web. 

Customization features that allow people to use your site the way that serves them best include:

• Toggle for light/dark mode
• Toggle for list vs. grid views
• Playback controls on videos, such as play/pause, mute/unmute, and closed captions

No. 6: Design for simple and intuitive use

People of all ages, experience levels, and languages can easily navigate and comprehend the website. Many people think they can’t get artistic and unique with a website when they hear this. This is not the case. There are incredibly unique and fun websites that are designed with highly functional and easy-to-understand design language that makes it easy for a person to use. 

Below are a few sites that look great while maintaining accessibility:

• Belkin
• Scope.org
• BBC
• Patagonia

No. 7: Deliver perceivable information

All information should be communicated effectively regardless of a person’s abilities or circumstances. If a component cannot be understood and accessed by all users, then that information is not perceivable. This includes features we touch on below to ensure that information can be gathered easily. 

Accessibility improvements you can make today

Your UX designer and/or web developer can implement a few simple changes that will make your website more accessible and usable. 

Contrast

The two improvements you can make to increase accessibility for the vision impaired is by ensuring contrast and adding alt text to images.

Contrast is the difference in light between two objects. Poor contrast is one of the most common accessibility issues in web design. There are 295 million people living with moderate to severe visual impairment, so it’s incredibly important your site is perceptible for more people. 

Everyone’s eyes perceive contrast and color differently, so it’s critical to use tools that can programmatically help you adjust colors correctly. Ensure that different elements on the page have sufficient contrast, including text, buttons, images, and backgrounds. 

Alt text and link text

Alt text is what displays when an image doesn’t load on a website. It’s also what tools such as screen readers use to describe website imagery or graphics for people with visual impairments. 

Every image on your website should include alt text, which is captured in the site’s content management system (CMS). Alt text should plainly and succinctly describe the image or graphic.

Link text, or a call to action, is the clear description of a hyperlink. “Learn more” or “click here” don’t indicate to a user where the link takes them. Link text should clearly describe the destination of the link so users understand what happens when they click. 

In addition to helping with accessibility, alt text and link text support search engine optimization (SEO). Search engines can more easily understand and index images and links when you give them proper descriptions. This information also teaches search engines about the content on a page.

Video

Videos should have common controls, such as pause, mute, and fast-forward. Closed captions ensure that those with auditory impairments can still watch the video and understand it. 

Ideally, all videos on a website should include these features:

• Play
• Pause
• Seeking
• Volume
• Full-screen toggle
• Captions/subtitles (when available)
• Track (when available)

Implementing these simple improvements can immediately make your website more compliant. 

UX and accessibility tools of the trade

Designers’ eyes aren’t always the best way to make a decision around accessibility. There are essential tools that grade contrast, check alt text, and evaluate page speed, and evaluate other behind-the-scenes features. 

Here are some of our favorites:

• Contrast Checker. Use this free tool to double-check your work for contrast. It delivers a pass/fail score based on inputs for text and background colors. Note: Just because a bold or normal font passes, doesn’t mean the “light” weight will. 
• PowerMapper. This paid tool gets into the fine details of accessibility. It checks any website for broken links, spelling errors, browser compatibility, accessibility, web standards validation, and search engine issues. It notifies you of specific changes you should make to increase your website’s accessibility. 
• PageSpeed Insights by Google. Enter a URL into this free tool and get very detailed information about the time it takes the page to load. It includes a section called “opportunities” that tells you specific improvements you can make and the time savings you can expect. 
• Lighthouse. This Google Chrome extension scans your site to deliver a score based around four vectors: performance, accessibility, best practices, and SEO. It’s a free, open-source tool that you can use to check the scores of any page online. Use it to see how best-in-class websites — or even your competitors — rank. 
• BrowserStack. Test your website across more than 3,000 browsers and real iOS and Android devices. The browser or device slightly impacts the way your content displays, and this tool ensures your website performs as intended no matter what the person uses to view it. 
• Eye Dropper. This free tool pulls colors from webpages and includes hex, RBG, and HSL codes. Eye Dropper makes designing for light and color easier. 

Let’s build a better web

Accessibility has the power to make the web a more equitable place. It requires extra time and resources, but the return on your investment — bringing all people and potential customers into your website or online store — makes it worth it. 

Pay attention to websites you visit to see if they meet the seven principles we’ve outlined above. We are all responsible for helping make the web a more accessible place.