11 Real-World Design Examples that Prioritize Accessibility

Designers naturally have biases stemming from different influences, such as their culture, region, and education. Exposing yourself to good accessible design is as important as learning the guidelines to prevent these biases from creeping into your work. Here, you'll find 11 real-world case studies to help you learn from the achievements and failures of other designers.

Use alternative text for images

Alt text is an HTML attributive snippet that provides text descriptions to images for search engines and assistive technology. Without it, your website has no "voice," and users of assistive devices like screen readers will struggle to navigate and understand the content.

Alt text shouldn't be a literal description of the image. Instead, it needs to explain the purpose of an image for those who can't see it, like the New York Times does with all its images. Cut off unnecessary details like colors when they don't matter. For decorative images that don’t carry any extra information, provide an empty alt text (alt=""). This signals to assistive technologies that they can ignore the null alt attribute. Otherwise, screen readers will announce the file name and add audible clutter.

🧠 Pro Tip: For a more detailed study on making your product more inclusive and accessible, check out our Design Accessibility course.

Allow navigating with keyboard

Keyboard navigation can make or break the whole user experience. While it's vital for users with motor disabilities, it also benefits a broader circle of people — someone who has a broken arm, someone with a dead mouse battery, or keyboard power users.

If done correctly, like on the TED website, the keyboard focus moves from top left to bottom right, following the logical order of the visual layout, not skipping any important elements. If done poorly, the focus jumps all over the place, and keyboard users can't access some interactive features like dropdown options.

If your website has many navigational links, make sure users can leap directly to the main content by clicking the To the Main Content button.

Use captions and transcripts

How do you help users with hearing, cognitive, or learning disabilities consume audio and video content? One of the best options is captions and transcripts. They remove barriers by converting speech into written text, identifying speakers, and mentioning any other sound effects like laughter or rain to portray the environment more realistically. Captions are also helpful for all people in noisy surroundings, like public transport, or quiet places, like libraries or hospitals.

The TED team nails it with their video content, providing captions, subtitles, and transcripts in multiple languages and making it accessible to anyone.

Put users in control and prevent autoplay

We've all been there — you open the website only to get caught off guard by videos that start playing instantaneously. You're lucky if the sound is off! While merely annoying for most users, autoplay can cause real damage to some — for example, trigger an epileptic seizure. Facebook lets users choose if they want to enable autoplay but Instagram isn't that gracious. The most important thing is to give users control over video content. It's also a good idea to let users pause and play the playback using the Space key — in addition to the Play icon, of course.

Provide a logical heading structure

Headings serve several functions. First, they stand out and emphasize key concepts. Second, they convey the levels of importance, both on a visual level and in code, and it's crucial that the design coincides with its skeleton. For example, higher-level headings should look more prominent, and the structure must follow a logical order — similar to a table of contents in a book. The Washington Times website does this perfectly.

Having a clear heading structure makes your website appear clear and logical and reduces clutter. Make sure your heading levels follow a design outline so screen readers can identify headings and read out the content to users with disabilities. For example, a <h3> tag indicates the 3rd-level headings and should always go after headings under <h2> tags.

🧠 Pro Tip: Explore popular HTML tags that are commonly used in web development to structure and organize content in our Popular Tags in HTML lesson.

Follow level AA color contrast guides

You might put your heart and soul into crafting an exquisite color palette for your website, but it doesn't mean much to those who can't see it. To be accessible to most users, your website needs to meet WCAG level AA that requires a contrast ratio of at least 4.5:1 for normal-sized text (less than 18pt for regular or 14pt for bold). For large-sized text (18pt and larger for regular or 14pt and larger for bold), the contrast ratio between foreground and background colors must be 3:1.[1]

Using textures and patterns for backgrounds can impede legibility. You can avoid this by increasing the contrast — for example, by applying a dimmed overlay or an extra layer underneath the text when using an image for a background. Also, ensure that essential elements have sufficient hue, value, and chroma contrast, and avoid using hues with similar values close to one another.

Make sure to use a high-contrast hue for unclicked and visited links. For example, use blue (#0000FF) for new links and deep burgundy (#660033) for visited links so that color-blind users can feel the difference.

Don't rely on just color

Colors are powerful, but don't rely on them exclusively — otherwise, you'd be excluding users with disabilities. Instead, emphasize the information using icons, text explanations, and graphic elements.

For error messages, warnings, or success states, add helpful microcopy and icons to describe what is happening in the system and how users can fix possible issues. Booking.com does a great job of providing short explanatory messages and icons and outlining inputs that contain errors. What may seem like tiny details actually benefit all users, including those with visual, cognitive, or learning disabilities.

🧠 Pro Tip: Check out our lesson on Accessibility in Microcopy to write more helpful messages for users.

Allow zoom without affecting the layout

WCAG guidelines state that the entire website must be resizable up to 200% without assistive technology and loss of content or functionality.[2] Users with visual impairments might want to scale up the web page to simplify reading. Browsers usually accomplish this either by enlarging the font size only or zooming in on the whole page and applying responsive styles.

Collaborate with the dev team and ensure the code doesn't interfere with the browser's default settings of zooming content. Airbnb does a great job of adjusting the content without losing functionality and information or distorting the layout.

Avoid rapidly flashing videos and animations

According to the Epilepsy Foundation, about 65 million people worldwide live with this condition.[3] Users with the photosensitive form of epilepsy might experience seizures or severe headaches when seeing videos and animations with flashing and strobing effects.

How can you limit the risk of harming your users? Follow in the footsteps of TikTok, who in 2020 announced a new feature of showing a warning of videos or photo effects containing potentially harmful effects. Users can select the Skip All option and continue enjoying the app.

Allow users to control image carousels

You know how when you ride a carousel, at some point, the surroundings turn into an incoherent blur? That's how people with motor, cognitive, or learning disabilities feel when they encounter image carousels. On the one hand, carousels are fantastic when it comes to saving space. On the other hand, they might change too fast for people with certain impairments who often need more time to focus, read, react, type, and complete tasks.

Another reason for allowing users to control image carousels is that it gives users who may not be able to use a mouse or trackpad the ability to navigate through the carousel using only their keyboard.

Make sure carousels have a time limit of 5 seconds or longer and allow users to stop, pause, or hide the content.

Use enough spacing

Adding enough spacing in designs is like letting the fresh air into a stuffy room. First off, it makes websites look sharp and modern. Secondly, more space between words helps people with visual, cognitive, and learning disabilities process information more easily.

As a rule of thumb, don't skimp on white space between text blocks and on line spacing. The British Dyslexia Association recommends keeping line spacing proportional to character spacing and defines 150% of font size as preferable for readability.[4] Failing to do so, you make letters on adjacent lines cram and turn them into a tangly mess of words.

As for line length, follow the WCAG recommendations, where 80 characters or glyphs per line are acceptable in English.[5]

Remember, even small changes go a long way in creating a better experience for all users. When it comes to accessibility, you're not just following guidelines — you're showing that you care about every person who visits your site.