Responsive Design & Accessibility

August 13, 2014 | Mara Low

In order to create a quality user experience, one must start by knowing the user.  As simple as it may sound, it’s the key to a successful Web strategy.

At TBG, a first step in our strategy process is to define and segment a website’s users into audience groups with common motivations and needs. We Web strategists develop personas that embody and breathe life into these audience types, and then use these personas to help guide our strategic recommendations and information architecture decisions.

Persons with disabilities are an important subset of users that must be considered no matter how you have defined a website’s audiences.  This subset of users is particularly important in our Responsive Web Design projects for TBG’s patient-focused healthcare clients. So when my colleague, Eric, and I were given the opportunity, we jumped at the chance to attend a day-long working session with Simply Accessible Founder Derek Featherstone, hosted by An Event Apart.

At the working session, we were introduced to the variety of assistive technologies built into popular mobile devices including screen readers for the blind, screen magnifiers and large test modes for low vision, to guided access and assistive touch for dexterity issues.  (Side note: Apple’s iOS has blazed the mobile-accessibility trail, but Android is in a close second with regards to the number and quality of built-in mobile assistive technologies).

Featherstone challenged us to complete basic tasks on the Web using different forms of assistive technology, and then shared advice for how information architects and Web designers can ensure the best user experience possible for users who rely on these technologies. These are just a few of my observations from the experience.

Information architects, Web designers, and front-end developers ALL play a critical role in ensuring a website is accessible for all users, particularly in Responsive Web Design.

Responsive Web Design is undoubtedly one of the most powerful tools for ensuring a quality user experience regardless of device, but it also introduces some new challenges in terms of accessibility.

Responsive interaction patterns that rely on hiding, sliding or scrolling may result in what Featherstone calls “Lost Focus Syndrome (LFS)” for users who rely on screen readers to navigate your site.  For example, off-canvas menus give users persistent access to navigation and related content items without taking up valuable real estate.   To avoid focusing on content that’s off-screen, we use “display:none” and  simply change the display property when the content is ready to be moved back on-screen.

Auto-rotating slideshows can create serious confusion for users using screen readers, as new content slides in and overlays existing content but focus gets retained on old content. What’s more, Featherstone noted, Parallax motion can even cause physical pain to people with cognitive disabilities. We need to provide a mechanism by which users can turn these animations off.  Use of slideshows should generally be avoided, but if you must include one in your site’s design, be sure to provide user controls. (Conference participants cheered vehemently when Featherstone proclaimed that it is time to retire the concept of slideshows, citing these and other accessibility concerns.)

Placing primary navigation links at the bottom of a website can improve usability for all users.

Are you reading this blog post on a mobile device? If so, try this little test. Whether you are a two-thumb wizard or a hunt-and-pecker, try reaching the top regions of your touch screen. It’s difficult isn’t it? Now imagine trying to complete this same task with advanced arthritis or Parkinson’s disease.

Navigation that is placed at the top of a website presents an extraordinary challenge for users with dexterity impairments.  Placing navigation on the bottom allows your users—with or without disabilities—to more easily navigate your website on touch screen devices, including touch-screen desktop and laptop computers.

This is not news to us at TBG (the recently launched Children’s National website uses bottom navigation), but it was interesting to see how this once novel concept has quickly become the status quo recommendation for many professionals in the field.

The importance of basic Web design principles such as proximity and chunking of related information become critically important when you consider users with low vision.

To see what I mean, try the “straw test,” a fun and useful exercise devised by Featherstone.  First, open one of your site’s Web forms on your desktop or laptop computer. Now, make a fist leaving a tiny pinhole at the crux of your fingers and hold it up to one eye, like this: 

Now, take a look at the Web form through this one obscured eye. This is how users with low vision may experience your Web phone. You will notice that scanning from left to right requires a lot of effort, and that it can be difficult to tell which label is associated with which field. 

Testing your site design for accessibility doesn’t necessarily require formal test sessions with users with disabilities.

The “straw test” described above is just one of many guerilla-style techniques that you can use to test your website design for accessibility. Featherstone offered a couple of other simple tactical suggestions for identifying usability problems that are especially burdensome for users with disabilities:

  • Already doing informal or formal task-based usability testing? Include older adults and even very young children in your participant group. For large medical systems and other industries who do not generally market to children, including kids in testing may seem like an odd idea. However, young children have limited motor skills and lower cognitive abilities than adults, so including them in testing can simulate the experience for users with dexterity issues or cognitive abilities.
  • In addition to testing your website design on an array of browsers and devices, try viewing your designs or testing your prototypes at a variety of screen resolutions to mimic the experience users with low vision will have on your site.

While this just scratches the surface of usability for persons with disabilities, Featherstone’s session broadened our perspective, helping us to ensure we, as Web strategists, create a better Web experience for all users.

About the Author

Mara Low

I am the Manager of Digital Strategy & Optimization with TBG. When I’m not crafting user experiences, you’ll  likely find me fire hula hooping, hiking, or creating up-cycled art.

Leave A Reply

comments powered by Disqus