Digital Accessibility Index: Learn where the world’s leading brands fall short on accessibility.

See Report

Responsive Design and Accessibility

Jan 27, 2017

Responsive design and accessibility are two concepts that are directly related in a number of ways. RD principles aim to help provide the best possible viewing experience for a page or piece of content across a large array of devices, while accessibility helps to make content easier for people with certain disabilities to use and navigate. They both feed into the larger idea of user experience (UX) design, which is to say that sites should always be designed for the most seamless and highest quality experience possible.

However, it's important to understand that just because these two concepts are related does not mean that by focusing on one you can necessarily guarantee the other. Incorporating accessibility does notmean that you will be left with a responsive site, or vice versa.

How Responsive Design Impacts Accessibility

Where RD and accessibility differ often comes down to intent. A responsive design creates a uniform standard that satisfies the mainstream needs of its users, whereas accessibility goes deeper and ensures a much-needed layer of functionality for users using assistive technology such as screen readers. In that respect, it isn't as much about how accessibility impacts responsive Web design, but rather how responsive design impacts accessibility.

Depending on the choices that you're making when designing a responsive site, you can both help and hurt accessibility in equal measure. For the sake of argument, consider a responsive site that relies heavily on custom CSS background images. If high contrast mode is enabled in a browser like Mozilla's Firefox, those background images will automatically be turned off to help make sure the user achieves the desired contrast level of all text present on the page. If your site cannot be navigated or understood WITHOUT those CSS background images, you’ve inadvertently broken several accessibility guidelines.

Responsive design and Accessibility

A Deeper Relationship Gives Way to a Richer Experience Even though both RD and accessibility are concepts that help make a site more flexible to end users, focusing only on one does not guarantee you the other. Even the most objectively high quality responsive design in the world could still lead to accessibility issues, like those regarding color contrast (important to people with visual impairments). If RD is about designing for the most efficient, pleasurable user experience, accessibility becomes designing for inclusion - leaving no user behind, regardless of the type of device they may be using. It stands to reason that if you acknowledge these are two different-but-related concepts and if you give both equal weight when making design choices, you can bring the best possible user experience equally to everyone. 

Use our free Website Accessibility Checker to scan your site for ADA and WCAG compliance.

Powered By

Recent posts

eCommerce Web Accessibility: Setting an Achievable Goal

Jul 14, 2024

4 Ways to Build an Accessible Design Philosophy

Jul 9, 2024

ADHD-Friendly Web Design: Minimizing Distractions

Jul 8, 2024

Not sure where to start?

Start with a free analysis of your website's accessibility.