Responsive web design (also called RWD) is an approach that seeks to create content that renders well on a wide range of devices and screen sizes.
For modern web designers, the fundamental concepts of responsive design are crucial. Responsive content provides a consistent user experience across different mobile and desktop platforms.
If you intend to reach a wide audience (and regardless of your industry, that’s probably one of your goals), responsive design is essential. It’s also critical for web accessibility.
WCAG Requirements for Responsive Web Design
The Web Content Accessibility Guidelines (WCAG), widely considered the international standard for digital accessibility, addresses responsive design under WCAG 2.1 Success Criterion 1.5.10, “Reflow,” which requires that:
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require [a] two-dimensional layout for usage or meaning.
WCAG uses the term “reflow" to describe how content changes when enlarged. Content that reflows can be presented on different types of screens or magnified without requiring users to scroll in two directions.
Supporting the reflow of content simply means creating responsive web pages. In other words, WCAG 2.1 requires responsive design — and the guidelines provide clear technical criteria for building and testing your content.
Related: How Accessibility in the Web Development Process Saves Time
How Reflow Helps Web Accessibility
To understand the importance of responsive design, it’s helpful to consider its impact on real-life users.
Most people have had negative experiences with poorly rendered web content. If you’re old enough to remember the early days of the mobile internet, you can probably think of a few examples.
Before the widespread adoption of responsive design, many websites simply served the same content to every user, regardless of the user’s web browser or screen size. In those days, accessing a website on your smartphone was a frustrating experience: Content designed for desktop computers was practically unreadable, and filling out forms or selecting hyperlinks was often impossible.
Some designers attempted to address these problems by creating mobile-specific content — but those mobile-specific websites were often entirely different from the default desktop view. Users might not have access to certain content, and since developers had to maintain multiple websites, the costs of web development could grow quickly.
Over time, web designers began using CSS (Cascading Style Sheets) to change the presentation based on the width of each user’s web browser. This approach was responsive instead of adaptive — instead of serving different content to different users, RWD serves the same content to every user, then adapts the visual presentation to the user’s screen.
For many people with disabilities, this was a vital improvement. People with vision disabilities may magnify text by 400%; if content doesn’t reflow, many of these users cannot read it.
And depending when content doesn’t scale appropriately, users may need to scroll to the left and right to read each sentence. Navigation menus may appear out of order, and multimedia may disrupt the user’s experience. Reflow can solve these problems by providing flexible layouts that work with a wide range of browsers, technologies, and user preferences.
Related: Screen Magnifiers: Who and How They Help
Testing Responsive Websites for Accessibility
Web developers understand the importance of RWD, but simply making a website “responsive" doesn’t ensure conformance with WCAG. It’s important to note that fully responsive websites can still suffer from other major accessibility issues:
- Poor keyboard accessibility, which impacts people who don’t use a mouse when browsing the web
- Low-contrast text, which may be unreadable for users with vision disabilities
- Missing image alternative text (also called alt text), which can impact screen reader users
- Missing video captions or audio transcripts
Automated testing tools (including the Bureau of Internet Accessibility’s free WCAG 2.1 Level AA compliance summary) can locate many issues with your website’s presentation, along with other common WCAG conformance issues that impact real users. If you’re new to accessibility, an automated audit can be an excellent starting point.
You can also test your content by viewing it on a variety of devices and with different user agent settings. We also recommend zooming your content to 200%. If enlarging the text causes presentation issues, you’ll need to make some changes to follow WCAG’s requirements for reflow and text resizing.
Test content frequently — preferably, with guidance from accessibility experts — to ensure that your website operates as intended. Remember, web accessibility benefits every user, and while building accessible content takes work, it’s an excellent long-term investment.
