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.”
