Sarah Horton

Whitney Quesenbery

If you are in charge of the user experience, development, or strategy for a web site, A Web for Everyone will help you make your site accessible without sacrificing design or innovation. Rooted in universal design principles, this book provides solutions: practical advice and examples of how to create sites that everyone can use.

Designing Accessible User Experiences

A Web for Everyone

Jaydee (she/her)

Building a curriculum in universal design and accessibility. Today's design curriculum does not do an adequate job of covering accessibility and universal design, and the information that is provided is geared toward meet- ing compliance standards. This approach results in a "just tell me what I have to do approach to accessibility, which in turn produces inadequate designs. "Just tell me what I have to do has not resulted in the kind of creative energy and true innovation we need to make progress in this area," says Valerie.

Make accessibility part of site maintenance Be sure that you don't let accessibility slip away under the weight of many small changes during ongoing work on content and site mainte- nance. To make a web for everyone part of the organizational mandates, the web governance plan and content strategy must include guide- ines for how to mnanage and accommodate different business and user Tequests without sacrificing clean presentation and accessibility. You Should also have a plan to monitor new content and multimedia, mak- ng sure that you have resources and planning for ongoing production of ranscripts, captions, and video descriptions.

Making a Commitment to Accessibility In an integrated practice, accessibility is part of all design and develon- ment work, and everyone on the team is accountable for making sure that the product works for everyone. When accessibility is integrated into UX practice: Accessibility is a commitment. The whole company, from the head office to product teams, sees making a web for everyone as a priority. An organizational commitment ensures that accessibility isn't done only when it is convenient. Instead, management creates a culture of accessibility from top to bottom. • Accessibility is a team effort. Everyone shares responsibility, authority, and accountability for accessibility. The team may include people with special knowledge of assistive technology and how to design or code for it, but they are part of the team, rather than an external group. Checks for accessibility are part of the process. Not only is the si • designed to be inclusive, but evaluation against accessibility stan- dards is also part of regular QA. Usability testing is inclusive. People with disabilities are ino in user research and usability evaluation. 

There are no "accessibility cops." In an integrated practice, there is no need to be a naysayer, who says, "no, we can't do that because if accessibility." Starting early, with time to consider the goal of the design and find solutions that work well within the structure, means rarely having to say "no."

When accessibility efforts focus on compliance with guidelines or regu- lations, its seen more as a matter of completing a checklist. The team assigned to evaluate accessibility is tvpically outside of the product team, and can be seen as the "accessibility cops."

With a practice that supports a web for everyone, people and organiza- tions consider accessibility integral to their work and products.

Good design and accessibility guidelines are a good place to start, but to Create something that delights your users, you have to get out and meet them. For universal usability, user research and usability testing are key activities at the beginning of the project and through all phases of design and development, not just at the end.

Asa metaphor for layering information, Leslie O'Flahavan and Mari- lynne Rudick from E-Write (www.ewriteonline.com) talk about creating bites, snacks, and meals, and serving up just the right amount at a time. In their definition: • A bite is a headline with a message. • A snack is a concise summary. • A meal is the complete information. NesATg ond

The most important work in creating accessible media--alternative text, captions, and transcripts--is the responsibility of the content team. It 1S up to the authors and producers to provide these text equivalents, to make the decisions about what is meaningful (or not) in supporting the 0verall content on the site, and to make it easy for users to find links to transcripts or other features that support accessible media.

In addition, don't include dynamic elements that engage without user request, such as a video that plays automatically when the page loads, a page that refreshes automatically, or a slideshow that advances auto- matically. 

To write useful alt text, you must decide how best to describe the image to communicate an equivalent meaning. To do this well, you have to think about the purpose of the image and its context of use (see Fig- ure 9.3), including whether there is information in the image that is not repeated elsewhere in the content. When alt text is too long, or has more Intormation than is really meaningful, it can be distracting instead or adding to the experience. of

Fonts matter for reading disabilities like dyslexia. Several designers around the world have created fonts aimed at improving reading and writing for people with dyslexia. In fonts like Read Regular, shown in Figure 7.7, the letters are all designed with shapes that make them easier to distinguish. They use: 

Clear, simple character shapes without unnecessary details or embellishments. 

Distinctive shapes, especially for characters that are similar, such as "b" and "d" and"p' and "q. 

Long ascenders and descenders to emphasize the difference in the letters. 

Good spacing between the letters, so that shapes like "r""n," and "m" don't run together. 

Wider openings in letters to make them easier to recognize.

Do Zebra Stripes Make Tables More Readable? 

The formatting of tables can make a big difference in how readable the informa- tion is. In a study comparing different ways of presenting tabular data, Tom Tullis and Stan Fleischman found that a larger font, loose spacing, and alternate color rows helped participants find specific information more accurately and effi- ciently than using lines around the cells (see Figure 7.4). 

A few years later, Jessica Enders took a look at the common practice of zebra strip- Ing or displaying alternate rows in a table with different background colors. When she ran an experiment, she did not find strongly improved accuracy or speed. How- ever, participants preferred tables with alternating background colors.

In 2003, Mary Frances Theofanos and Ginny Redish conducted a research study with a group of users whose vision was impaired enough to require screen magnification software. Vision disabili- ties varied among the participants, from congenital to those types that come with aging. An important outcome from the study was the following insight: "The needs of low-vision users are too diverse for simple solutions to web accessibility and usability."

Some websites include customization features to allow users to adjust the display directly on the website-for example, by enlarging the text, changing color settings, and adjusting page width and number of col- umns. To some extent, these are helpful, although it's a bit like providing reading glasses along with a book. People visit many websites and will likely arrive at yours with their glasses in place-that is, running nec- essary software and with their browser and operating system settings configured to meet their needs and preferences. 

Design for flexibility requires more than just stylesheets. There are many aspects of a design that are affected by different contexts. For example, when a user changes the width of the browser window, the page is redis- played to fit. Using relative measures, like ems or percentages, results In a page that adapts better when users enlarge type size or viewa page on large and small screens. No one wins when text overlaps or the whole SIde of the page is cut off and the page is unreadable.

In his 2009 A List Apart article, Ethan Marcotte found a way to create a grid based on relative measures (ems) that would adjust while keeping the relative proportions of the design. Using the formula target + context= result, he showed how to arrive at the correct em value to use to size dif- ferent elements of the design.

For users, flexible layouts work best because they can adjust designs to fit certain criteria; for example, by enlarging the default text size in browser preferences. Fixed designs make it harder for users to adapt their view. For designers who want to be able to control the visual presentation precisely, flexible designs are harder to embrace. One approach to designing for different devices has been to create fixed designs that display wel different contexts. However, it's costly to have several versions to maintain.

Unfortunately, business requirements and client expectations often lead to cluttered designs. When adding a new feature to a design that is already cluttered, one way to draw attention is to add motion of some sort. And with the next new feature, more motion, and so on.

To design simply is to design with restraint. Unfortunately, there are many competing factors that must be considered in a design, and busi- ness concerns can too easily win over user needs. Clients may request "lashy" designs that "pop" as they look for ways to stand out from com- petitors. But simplicity can be a great differentiator, where important elements stand out and the site stays true to purpose (see Chapter 3, "Clear Purpose," Design for clarity and simplicity).

Design and development collaborate on easy interaction. It is possible to create interactions that are both innovative and accessible, but it takes coordination. Working together to come up with ideas and ways of cod- ing the design can take experimentation, prototyping, and cleverness in solving problems.

Deciding whether to open a new window is a simple illustration of an important principle: Don't take actions on behalf of users that they can already accomplish on their own.

Sequencing also matters for instructions. Sometimes, forms are coded so that instructions and labels appear after the form fields and buttons. Users (and assistive technology) have to read ahead to determine the purpose of each field and then backtrack to fill in the field. Be sure that the elements in a form follow a logical sequence: identify and describe an element before the interaction, both visually and in the code. Instructions and labels that appear inside the field are problematic because they disappear when the field is activated. Users who need to look at the keyboard as they type will miss the hint entirely. Others won't remember the details in the instructions and labels once they are no longer displayed.

Giles went back to the drawing board. Rather than have the software identify possible options, he had users create lists of locations and places that were of interest to them. The computer didn't try to work out whether or not the itinerary was practical-it gave people enough data to figure it out themselves. People are good at imagining the future. Computers are good at remembering stuff. By handing off the task of imagining to the user and the task ofremem- bering to the computer, it all worked out. The process taught mne apowerful lesson about where complexity belongs, who should own it.

Accessibility is not black and white, on and off. You should aim for full accessibility, but when you hit roadblocks, it's helpful to think about a range of approaches, listed here from most to least desirable. 

• Universal (or inclusive) design-one site. Everyone has the same means of use, with elements that work for everyone, no matter what interaction mode is chosen. The goal of this book is to help you create universal or inclusive websites and apps, so no one is left out of the experience. For example, a video with captions and video description accessible video player lets everyone watch the same video. 

• Equivalent use-includes alternatives. Products contain similar ways to meet the same goals but present them in different ways. For example, a transcript for an audio file has the same information, but someone reading the information has a different experience than someone listening to the audio. 

• Accommodation-a separate accessible version. Accommodation is disability-speak for working around a barrier without moving it-"separate but not equal." Accommodations like a "text only version are not acceptable. It's not okay to create a separate design-one that delivers a separate and degraded experience--for people with disabilities.

A Web for Everyone Designing Accessible User Experiences

Reviews

Highlights