Responsive Web Design: How it Relates to Digital Accessibility

Responsive web design (RWD) delivers flexible web page layouts for optimal viewing across various devices. It benefits users by increasing readability and simplifying navigation—on all device monitors and screens—with minimal resizing and scrolling. And it enables designers to create one website that responds to and delivers the appropriate output to every device, which is more efficient than building multiple websites for multiple devices.

In this blog, we discuss the history of responsive web design and how it improves the user experience for everyone, including people with disabilities.

The back story on responsive web design

Imagine increasing your web page text size to 200%, doubling its length. You notice this resized text forces you to scroll horizontally at full page width, making it challenging to track where one line of text ends and the next begins. This scenario is caused by what’s known as non-fluid content, which doesn’t scale to different screen sizes or browser widths. And this predicament is just one example of the many ways non-fluid content disrupts information flow. Unfortunately, many users with disabilities have faced difficulties due to non-fluid content, including reading order issues, since the creation of the web.

Enter responsive design. In the early 2010s, skyrocketing sales of tablets and smartphones led to a significant shift in how users access websites—and designers design them. In fact, a 2012 blog from Mashable projected that by the end of 2013, more than 50% of their website’s traffic would come from mobile devices. Mashable called 2013 “The Year of Responsive Web Design,” noting that website owners would need to embrace responsive design to meet users’ evolving preferences.

Many users flocking to mobile technology during this period were people with disabilities. Popular smartphones and tablets, like Apple’s iPhone and iPad, and Google’s Android products, support accessible features and assistive technology. Additionally, U.S. laws like the 21st Century Communications and Video Accessibility Act (CVAA) help to ensure equal access to advanced communication services (ACS) on mobile devices.

By adopting responsive web design, organizations—from e-commerce platforms to news outlets—can ensure their websites are not only compatible with mobile technology but also meet users’ diverse needs.

How responsive web design improves accessibility

Now that we’ve explained the history of responsive web design, you may be wondering how exactly this practice supports accessibility. Let’s discuss how specific elements and outcomes of responsive design can provide a more inclusive and intuitive user experience.

Fluid design

Fluid design ensures that all content naturally fits in its allotted space, showing content in the order it appears within the document object model (DOM). For users, this means the content order is the same no matter what device they use. Fluid layouts also provide relative sizing, so when users enlarge content, other content automatically shifts down the page. Relative sizing forces content into smaller viewports, naturally wrapping it with adequate line spacing for better readability and functionality.

Effective magnification

The fluid layouts used in responsive design provide more effective magnification than fixed layouts. Most modern desktop browsers have a zoom feature that magnifies the entire page (not just text). When users activate this feature on web pages that are designed to be responsive, they can zoom in on content without disrupting the flow of information on the page.

Flexible image use

In responsive design, images are automatically resized relative to their available area. As a result, images take up more space when it’s available and don’t overlap with other content when there’s less available space.

Fast page load speed

Responsive design enables the same content to load efficiently on all devices, which decreases server requests and expedites web page loads. Web pages that load more quickly offer a better user experience for everyone, not just people with disabilities. Image optimization, caching utilization, and critical rendering path optimization also all help speed up page loads.

Responsive web design vs. adaptive web design

To better understand the advantages of responsive design, let’s compare it to another approach to creating mobile content: adaptive web design. In adaptive design, designers modify the layout to fit mobile screens, creating a different user experience for that mobile environment. This process involves creating multiple fixed-width layouts at different breakpoints, which can change the reading order of that content for users.

In contrast, responsive web design uses multiple fluid grid layouts and considers browser width to assess available space and how that space displays the content. To re-emphasize, responsive design ensures the content order remains the same for users on any device.

The use of fluid, as opposed to fixed-width, layouts in responsive design makes websites more accessible to users with disabilities by dynamically adjusting the size of elements based on the screen size. This ensures that content remains readable and usable on any device.

Accessible responsive design: One common misstep to avoid

While responsive web design aligns with many best practices for accessibility, just because a website is responsive doesn’t necessarily mean it’s accessible. Designers must still prioritize conformance with accessibility standards like the Web Content Accessibility Guidelines (WCAG) to provide inclusive experiences for all users. In particular, it’s critical that the viewport on mobile responsive websites enables users to pinch zoom (scale) up to 200%.

Unfortunately, many websites designed to be responsive restrict the user from changing the viewport and may limit the scale level. The WCAG 2.1 Level AA success criteria 1.4.4 requires 200% scalability for text without impacting a website’s functionality. Specifying a viewport on mobile responsive websites may be necessary to ensure web content is displayed correctly according to device size.

Two critical design strategies that augment responsive web design

Progressive enhancement and progressive disclosure complement responsive design through multi-device compatibility and simplified navigation, respectively. Both strategies also improve web accessibility, as described below.

1. Progressive enhancement

Progressive enhancement is a web design strategy that delivers more straightforward, usable experiences for people who use older browsers and devices with limited capabilities. Simultaneously, it provides more robust, fully featured experiences for those who use newer browsers and devices with richer capabilities. Progressive enhancement has particular benefits for assistive technology users, as it ensures that every visitor to a site enjoys a streamlined experience, regardless of the device they use to access it.

2. Progressive disclosure

Progressive disclosure is a design technique that selectively shows content to users based on what they want to see as they navigate a website. This technique removes clutter, helping users with cognitive disabilities stay focused, and alleviating common navigation issues for users with blindness or mobility-related disabilities. You can find one example of this at the bottom of this blog: we’ve chosen to take an “accordion” approach to displaying frequently asked questions (FAQs), where an answer is only unfurled when a user chooses to select the corresponding question. It’s easy to understand how exposing all the questions and answers simultaneously could overwhelm a user with information.

Responsive design and accessibility: what the future may hold

Ultimately, responsive web design should transcend mere dimensional considerations like device width. It should prioritize a personalized user experience for everyone. One day, a truly responsive website might automatically turn on multimedia closed captioning, automatically zoom a page to 200%, or present content with larger line spacing, all based on a user’s preferences.

FAQ

What’s the difference between reactive and responsive design?

Responsive design creates one website version that works with all available devices, while reactive design creates multiple website versions to accommodate each available device.

Does responsive design improve SEO?

Yes. It brings uniformity to desktop and mobile devices, preventing search engine crawlers from indexing incorrect or outmoded website content. Significantly, this uniformity also enhances overall website usability. Together, all these factors help reduce user abandonment and bolster user retention, which can increase organic web traffic and improve rankings in organic search results.

How do I use HTML and CSS in responsive web design?

Designers should use both HTML and CSS code to automatically decrease, enlarge, or remove web content from view. HTML controls a website’s structure and content, and CSS controls its design and layout.