Responsive Web Design and Accessibility
Published: April 22, 2013
In this edition of Ask UXmatters, our experts discuss how responsive Web design and accessibility fit together.
Every month in Ask UXmatters, our panel of UX experts answers our readers’ questions about a variety of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your questions to: firstname.lastname@example.org.
The following experts have contributed answers in this edition of Ask UXmatters:
- Adrian Howard—Generalizing Specialist in Agile/UX
- Jordan Julien—Independent Experience Strategy Consultant
- Itamar Medeiros—Senior User Experience Designer at ROAMWORKS
- Whitney Quesenbery—Principal Consultant at Whitney Interactive Design; Past-President, Usability Professionals’ Association (UPA); Fellow, Society for Technical Communications (STC); UXmatters columnist
- Baruch Sachs—Senior Director of Human Factors Design at Pegasystems; UXmatters columnist
Q: How do responsive design and accessibility fit together? Both are about creating Web sites that work with different devices.—from a UXmatters reader
Whitney jumps right in: “Two things to say right at the start:
- A responsive site—that is, a site that is designed and coded to respond to devices with different screen sizes—is not automatically accessible.
- But, for perhaps the first time, an important trend in Web design—responsive Web design—and the equally important need to make a Web that works for everyone, no matter how they access a Web site or application, are pulling in the same direction.
“Both responsive Web design (RWD) and accessibility are ways of making a site flexible. A designer can do either mechanically or in a way that creates a good user experience. Responsive Web design starts by thinking about a page as a collection of elements that can be rearranged, not as a static layout. Accessibility starts by thinking about different ways someone might interact with a Web site and ensures that, no matter what senses a user employs, the site supports all of them.
“For example, if you put an image on a page, that image has a purpose that it can communicate either visually or, for someone who can’t see it for whatever reason, through alternative text. For both accessibility and responsive design, you might think about how an image fits into the flow of information on the page to decide on its placement, size, and how it will appear in different layouts.”
Designing for Responsiveness and for Accessibility Are Not the Same Thing
“I believe responsive Web design and accessibility are very complementary, but it is important to recognize that doing responsive design does not mean that you automatically have an accessible site or application and vice versa,” replies Baruch. “There are some major areas of accessibility that have nothing to do with whether you’ve created a responsive design. For example, color contrast and readability are two of these areas.
You can have the most responsive design out there, but if your data is verbose, and you do not employ a proper visual hierarchy or use adequate line heights, you’ll still have accessibility issues. If you do not use proper color contrast, you’ll still affect the millions with color-deficient vision. If you do not use ARIA to help better define interactions, those who need this support simply won’t be able to access your site properly. Responsive design is about content and interaction that just look and feel good—no matter what the device. However, accessibility goes far beyond that to provide a positive and equal experience for all those who access your site.”
“Accessibility is not designing for different devices,” responds Adrian. “Accessibility is designing for inclusion. Responsive design and accessibility are orthogonal. You can have accessible sites that aren’t responsive. You can have responsive sites that aren’t accessible.
“Designing for screen readers and other assistive devices is only part of designing for inclusion. Responsive design is an additional tool that you can apply to solving accessibility issues. For example, the same pattern of linearizing multiple columns for smaller displays can also help people using large monitors who need to zoom in for legibility.”
Designing for Responsiveness and for Accessibility Are Totally Different
“They’re completely different,” asserts Jordan. “We shouldn’t confuse them just because they sound like they might be related. There are essentially two schools of thought when it comes to responsive design:
- One school believes that responsive design is more of a coding thing that optimizes page styles for different screen sizes.
- The other school believes that responsive design is a fundamentally different approach to Web design that starts with determining how users will interact with site content on different devices and optimizing content for different use cases—usually in addition to optimizing layouts for different screen sizes.
“Accessibility shouldn’t be a problem for Web design given today’s technology, but it is. There is a significant number of users who utilize accessibility technologies like text-to-speech, high-contrast displays, and text-to-braille devices. As responsible Web designers, we should be building Web sites in such a way that people using accessibility technologies are able to have a coherent user experience. Services like Essential Accessibility demonstrate that we have the ability to solve accessibility issues for the majority of users.
“So, from my perspective, responsive Web design has a lot more to do with layout than accessibility does. I don’t think they fit together, and I don’t think they should. For many companies. making Web sites that adhere to accessibility standards is corporate policy. They tend to care less about whether a site is responsive.”
Employing Standards and Frameworks
“Creating Web sites that work with different devices is, in my opinion, a good start for accessibility,” answers Itamar, “But there is still long way to go—especially when it comes to providing support to people with special needs or disabilities—for example, people who need hearing aids or have color-deficient vision.
“Both responsive Web design and accessibility rely on coding a site to standards,” adds Whitney. “This includes separating the content from the display rules. For example, an HTML heading gets its style from a style sheet, not inline styles for a specific color, font, or text size. This is good for accessibility because the tag’s semantic meaning is available to assistive technology. It’s good for responsive Web design, because the style sheet can include different display rules for different devices.
“This has a big impact on UX design. Instead of thinking about a Web site like a printed page, with a fixed format, we give up that absolute control in favor of the flexibility that makes a good experience for more people possible.”
Whitney recommends the following resources:
- Ethan Marcotte’s Web site—His article “Responsive Web Design,” on A List Apart, pioneered the idea of responsive Web design.
- Aaron Gustafson’s “Our Work Here Is Done”
- Two of Whitney’s columns on UXmatters: