Responsive Web Design and Accessibility

By Janet M. Six

Published: April 22, 2013

Send your questions to Ask UXmatters and get answers from some of the top professionals in UX.

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: ask.uxmatters@uxmatters.com.

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

“Both responsive Web design and accessibility are ways of making a site flexible.”
—Whitney Quesenbery

Whitney jumps right in: “Two things to say right at the start:

  1. A responsive site—that is, a site that is designed and coded to respond to devices with different screen sizes—is not automatically accessible.
  2. 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

“Responsive Web design and accessibility are very complementary, but … doing responsive design does not mean that you automatically have an accessible site or application and vice versa.”—Baruch Sachs

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

“Responsive design and accessibility are orthogonal. You can have accessible sites that aren’t responsive. You can have responsive sites that aren’t accessible.”—Adrian Howard

“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

“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.”—Jordan Julien

“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:

  1. One school believes that responsive design is more of a coding thing that optimizes page styles for different screen sizes.
  2. 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 … a good start for accessibility.”
—Itamar Medeiros

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

“Some of the responsive design frameworks—like Bootstrap and Foundation—already provide out-of-the-box compliance to coding best practices—HTML5, CSS3, and JavaScript. So I think the next step should be to look into how such frameworks could support out-of-the-box design best practices for accessibility—like the ‘Voluntary Product Accessibility Template (VPAT).’”

“Both responsive Web design and accessibility rely on coding a site to standards. “This includes separating the content from the display rules.”
—Whitney Quesenbery

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

Resources

Whitney recommends the following resources:

3 Comments

Lots of developers are using display:none to hide elements on some devices. However, that asset still loads, hampering load time.

How does this affect certain accessibility readers? Do they ignore, for example, the alt tags on images that are loaded, but not displayed via display:none?

@micah - Good question! From what I understand, new OCR engines are rendering code-based reading obsolete; but I do know that JAWS has been ignoring visibility:hidden and display:none for the last few releases.

There are more mobile apps being created for visually impaired users, but the standard ones are pretty good at scanning content based on headlines, links, and so on.

So, to answer your other question, many screen readers will read content that is loaded and just positioned outside of the viewport or has additional content loaded on top of it. From what I understand, many of the newer screen readers actually read what’s displayed on screen rather than what’s in the code; so the biggest concern would be for users that have old computers with legacy versions of desktop screen-reading software.

This post contains very significant ideas and facts that every reader should follow. Great idea, indeed.The quality of information that you are providing is simply marvelous.

Join the Discussion

Asterisks (*) indicate required information.