Accessibility First—for a Better User Experience for All

Universal Usability

Putting people at the center of design

A column by Whitney Quesenbery

December 20, 2010

Over the past year or so, Luke Wroblewski has been talking about “mobile first” [1]—that is, designing for mobile before designing a Web application for a desktop browser. It’s an intriguing idea. The motivation that drives designing for mobile first is the explosion in the numbers of mobile devices and mobile users, as well as the competitive issues this has created. But the key benefit for users is simple, focused products, because the constraints of small screens force you to prioritize features and create “an experience focused on the key tasks users want to accomplish.” Focusing an application’s user experience on users’ key tasks is good advice for design on any platform. It’s also good advice for usable accessibility.

Pondering this made me wonder: what if design projects started by thinking about accessibility first? I don’t mean the basics like ALT text for graphics, following coding standards, and creating correctly structured information hierarchies. Building in accessibility at the code level is the only way to remove many of the barriers people with disabilities experience. But if our design thinking started with the idea of making a product that focuses on key tasks and is flexible, would that create a better user experience for everyone?

Champion Advertisement

Bringing Your Products into Focus

Let’s start with focus. Mobile devices impose the need for simplicity and focus. Their small screens mean there can be fewer elements on each screen—plus, buttons must be large enough for users to tap them easily. Each button, link, or piece of information has to earn its place, not just end up on the home page because someone might need it.

This streamlining would also help accessibility by solving the following problems:

complex screens—Screens that are complex are difficult to navigate with ZoomText, especially if it is hard to see the boundaries of each zone.
autorefreshing information—Screens or pages with a lot of automatically refreshed data or updating sections—even if its coding conforms well to ARIA standards—can be difficult or impossible to use effectively with a screen reader.
distracting elements—Cluttered screens often have distracting elements that make them harder to use for people with cognitive or learning disabilities.

All of these problems affect their general usability for people without disabilities, though not as severely. The more crowded or complex a screen, the harder it is to understand it and learn to use it effectively. Just as making hard decisions about priorities for a mobile user interface can pay off in a better Web version of an application, designing for better accessibility can make a product more usable for everyone.

Here’s an example. Using JAWS or other screen readers, users can get a list of all headings and jump directly to a particular part of a Web page. This feature is very useful on long pages that have several sections. If a page has the proper markup and its headings are well written, users can quickly scan the main topics on the page. Adapting this feature to benefit people using a Web site or application’s visual interface is easy: providing a set of On This Page links in a consistent location on its pages gives people a way to see what’s on a page without scrolling. In a recent usability test of a large site, many participants used such links to jump directly to the information they wanted. So did one scree- reader user. We noticed that he was finding information even faster than some of the sighted users. “Easy,” he said. “I figured out that if I hit H three times, I end up on this nice list of links.” Simple.

That sort of simplicity comes from carefully thinking through a design. As Giles Colborne says in his book Simple and Usable, achieving simplicity is not about randomly cutting down a design, but about thinking carefully about how to organize, hide, displace, and even remove features, so your product is clear and focused.

Making Flexibility Your Goal

The other key to accessibility is flexibility in meeting people’s needs, across multiple platforms. In our usability testing at the National Cancer Institute, we routinely ask participants about their online habits and see many of the same trends internationally. More and more often, people have multiple devices—a work computer, a smartphone or two, and a home computer. In addition to the obvious tactic of using the device that is most convenient at the moment, people often choose the device that works best for the content. They might read on a large screen, but look up local information or get quick details on their mobile phone. Creating a product that works on many platforms—a Web browser on a computer, iPhone, iPad, Android, and other devices—requires a flexible approach in its design.

It’s not a big leap from being flexible about the type of device on which your product runs—or the size of a device’s screen—to being flexible enough to allow users to interact with your product in their own way. People might use a keyboard instead of a pointing device, interact through voice commands, or need to use extra large text. Flexibility is critical for people who need to adjust the visual interface. Screen readers use the underlying code to reinterpret a page, but users with low vision are diverse and use a wide variety of tactics to make a page usable for them.

In their 2005 study, Ginny Redish and Mary Theofanos [2] found that, although following a set of guidelines works in achieving basic accessibility for screen readers, the range of issues for low-vision users makes it difficult to create a short list of design rules. They argued that the answer to this problem is for products to transform gracefully as users adjust them to their own preferences—for font size, line length, color, contrast, and the size of a window.

There’s a myth that no one reads online. Perhaps one reason this myth persists is that pages typically hold a lot of distractions—even pages presenting information their publishers intend people to read carefully.

If your site doesn’t provide an uncluttered reading experience, you might find users turning to Readability. This experimental tool “makes reading on the Web more enjoyable by removing the clutter around what you’re reading.” It provides options for setting the type style, font size, and column width and transforms pages to display just the content of an article. For example, Figure 1 shows an ABC News page, while Figure 2 shows the same page after its transformation by Readability.

Figure 2—The same ABC News page in Readability

Once a product’s design can adapt gracefully to many different devices and user preferences, all that flexibility is also available for anyone to use. For example, reading on a train or in dim light might be easier with larger text. Or maybe it’s easier to use a Web page as a reference when it’s in a smaller window. Why not create a delightful, flexible—and accessible—user experience for your Web site or application and let users adjust it for their own reasons, to meet their own needs, and to match their own preferences.

Achieving Accessibility

To learn about accessibility, a good place to start is RGD Ontario’s Access-Ability: A Practical Handbook on Accessible Graphic Design.

“Accessibility needs to be part of the process. At the end [of many of our projects] people often say something like, “If I only knew then what I know now, I would do things completely differently.”—Derek Featherstone, from “It’s in the Design: Fundamentals of Web Accessibility.”

As important as good guidelines are, if you want to really understand how to design for accessibility, the place to start is with some user research. You can’t design for a user experience you don’t understand. Include participants with disabilities in your user research and usability testing—people who use screen readers, ZoomText, and other assistive technologies.

What you learn about making your Web site or application more accessible might just help you to make it a better user experience for everyone.

Notes

[1] Wroblewski, Luke. “Mobile First.” Ideation + Design, November 3, 2009. Retrieved December 19, 2010.

[1] Wroblewski, Luke. “Mobile First, One Year Later.” Ideation + Design, November 30, 2010. Retrieved December 19, 2010.

[2] Theofanos, M. F., and Janice C. Redish. “Helping Low-Vision and Other Users with Web Sites That Meet Their Needs: Is One Site for All Feasible?”Technical Communication, Vol. 52, No. 1, February, 9–20, 2005.

In Accessibility | Software User Experiences | Usability Testing

5 Comments

www.google.com/accounts/o8/id?id=AItOawlQkpCpGPW-l03QBVAbT7f1Bjq5hmyfHf4

December 20, 2010 12:36 PM

Very good. I have difficulty with emails from the White House, The VA, GovDelivery, Google’s Feedburner (sometimes), The NYTimes for their use of an elegant gray instead of the high contrast font my eyes need, and it is very hard to reach them and tell them that they have disabled my settings for incoming text. I am not asking for anything special for me, only that they not, in their formatting, disable the accessibility adjustments available in our software.

The National Geographic sends busy, graphics-loaded emails that don’t interfere, and I wish the others could learn from them how they do it.

Is there a good place to go for help? Policies, laws, and regulations only provide incentives; the Government needs an IT SIG or Loop to deal with these accessibility problems. If there is one, please tell us where. If there isn’t one, one should be started.

[email protected] ===gm===

Whitneyq

December 21, 2010 4:57 AM

gm—Thanks for your comments. Your point that emails—and Web sites—don’t have to be boring to be accessible is a great one. And that locking a design means no one can adjust the information so they can read it.

You are right about policies and regulations only providing the incentive: it takes knowledge about accessibility techniques to actually make it happen. There are SIGs within the government and groups like Web Content.gov
that offer training for government Web managers.
Regulations are an opportunity because they set an expectation. And if their goal isn’t being met, the first thing we should all do is speak up. I’d bet that ignorance—or reliance on ineffective tools—cause many of the problems. Tell them about the problem.

There are places you can contact in the US government, but the best thing is to find the contact information for the specific agency and complain. Loudly. Every agency—including the White House—should have an accessibility link on their Web site. Jim Thatcher has done several reviews of government sites.

The US Access Board is the primary agency for accessibility, both writing regulations and advising other agencies. They are one place to start. The Department of Justice enforces the ADA and Section 508. Both can look across the government to see patterns.

All this is probably cold comfort. Knocking on doors is never fun. But if enough people do it, perhaps the sound will be loud enough to be heard.—Whitney

Dicksonfong

January 4, 2011 3:42 PM

Whitney—I think you’ve brought up a very good point that few people discuss when talking about the recent “mobile first” topic, and that point is regarding the natural affordances different devices provide. As you’ve mentioned, people might prefer to read on a large screen while quickly checking information on a smaller mobile device. Much of this is due to context. Some devices are more appropriate in certain situations and environments than others.

With that in mind, I think context is very important when considering flexibility of an application or Web site across multiple platforms. Although I think we should strive to maintain as much consistency as possible between all variations of a product, we should also be aware that what a person wants to accomplish on an iPhone is different from what the same person wants to accomplish on an iPad, and is likewise different from what he or she wants to accomplish on the desktop. So, in the spirit of your recommendation of keeping products in focus—which I agree is very important!—we should be careful to balance cross-platform device flexibility with a contextually appropriate user experience.

I might also suggest taking it one step further to look at not only designing mobile user interfaces first, but also to look into adapting mobile information architectures as a framework for the information architectures of the experiences on other devices. Of course, this again comes with the caveat of making sure the product matches the context. But if it does, it might be more efficient for User Experience as a business—because it saves design time—while providing a good starting point for an efficient user experience—because mobile is usually designed to be more focused, more streamlined. No point for me to type the entire essay here, but if you’re interested in reading more about my opinion, read my essay Designing with Mobile Frameworks. Sorry for the self-linkage, but it’s a topic I’m still trying to wrap my head around and would love to get additional feedback on.

Whitneyq

January 5, 2011 12:59 PM

Dicksonfong, I agree with all of your points about the idea that different devices also suggest—but only suggest—a context.

What you may have missed is the larger point I’m making.

The idea of designing for mobile first is that it is both a physically challenged group of devices and one that offers technological innovation.

I’m suggesting that thinking about accessibility first is analogous when thinking about the human context. Designing for accessibility requires:

thinking about different human physical challenges—just as mobile phones have device constraints

thinking about the variations in perceptual or operational abilities and how they affect the context of use—just as devices have different capabilities

making your design concept flexible, so it can adapt to different assistive technologies—just as devices have differences in their user interface and affordances

There is a long and rich body of literature that examines ways in which design and technical innovations originally intended to address disabilities have become mainstream. Curb cuts, elevator announcement bells, speech technologies, OXO Good Grips are all on the list. So, to some extent, is the requirement to be able to adjust a user interface to your preference, especially to set the text size or screen zoom.

Historically, accessibility has been a step-child add-on to new technologies. But what if we thought about designing for the full range of human abilities from the outset?

You might look back to my very first article for this column, Why People Matter and read the principles of universal design. They are good principles for any design project and support a philosophy of inclusion.

Juan_lanus

January 7, 2011 10:01 AM

Hi Whitney,

I enjoyed your article and already forwarded it to my fellows of congresointeractivo.com, where we volunteer for Gov transparency and quarrell about what to put or not in our future pages.

But, while I was reading, I had in my mind “design for mobile first,” “design for accessibility first,” whatever …

There is a pattern here! Look: “Design for ___ first.”

Using Cooper�s personas, one can design for a specific, synthetic, user. The persona characteristics act as design constraints that help the designer stay in a safe area. For example, if the persona is 55 years old, there is a safe range of font sizes that excludes the smallest.

Designing for mobile adds still another constraints set.

I remember having read, maybe about 10 years ago, that designing for accessibility enhances usability.

So, in brief, let’s simply design and be smart enough to take into account the most constraints sets possible.

Join the Discussion

Full name

Email address

Remember me (Optional)

Comment

Whitney Quesenbery

Principal Researcher at WQusability

Co-founder of Center for Civic Design

New York, New York, USA

Whitney is an expert in user research, user experience, and usability, with a passion for clear communication. As Principal Consultant at Whitney Interactive Design, she works with large and small companies to develop usable Web sites and applications. She enjoys learning about people around the world and using those insights to design products where people matter. She also works on projects with the National Cancer Institute / National Institutes of Health, IEEE, The Open University, and others. Whitney has served as President of the Usability Professionals’ Association (UPA), on the Executive Council for UXnet, on the board of the Center for Plain Language,and as Director of the UPA Usability in Civic Life project. She has also served on two U.S. government advisory committees: Advisory Committee to the U.S. Access Board (TEITAC), updating the Section 508 regulations, and as Chair for Human Factors and Privacy on the Elections Assistance Commission Advisory Committee (TGDC), creating requirements for voting systems for US elections. Whitney is proud that one of her articles has won an STC Outstanding Journal Article award and that her chapter in Content and Complexity, “Dimensions of Usability,” appears on many course reading lists. She wrote about the use of stories in personas in the chapter “Storytelling and Narrative,” in The Personas Lifecycle, by Pruitt and Adlin. Recently, Rosenfeld Media published her book Storytelling in User Experience Design, which she coauthored with Kevin Brooks. Read More