A Web for Everyone Read online

  A WEB FOR EVERYONE

  DESIGNING ACCESSIBLE USER EXPERIENCES

  Sarah Horton and Whitney Quesenbery

  Rosenfeld Media

  Brooklyn, New York

  A Web for Everyone

  Designing Accessible User Experiences

  By Sarah Horton and Whitney Quesenbery

  Rosenfeld Media, LLC

  457 Third Street, #4R

  Brooklyn, New York

  11215 USA

  On the Web: www.rosenfeldmedia.com

  Please send errors to: [email protected]

  Publisher: Louis Rosenfeld

  Managing Editor: Marta Justak

  Interior Layout: Danielle Foster

  Cover Design: The Heads of State

  Cover Illustration: The Heads of State

  Artwork for Personas: Tom Biby

  Indexer: Sharon Shock

  Proofreader: Sue Boshers

  ©2013 Sarah Horton and Whitney Quesenbery

  All Rights Reserved

  ISBN: 1-933820-97-7

  ISBN-13: 978-1-933820-97-2

  LCCN: 2013944511

  Printed and bound in the United States of America

  This book is dedicated to the many hardworking

  and dedicated people for whom a web for everyone

  is a professional goal, a personal mission,

  and a daily endeavor.

  HOW TO USE THIS BOOK

  Who Should Read This Book?

  You may be a web or user experience designer, thinking about what makes a product appealing to many people or how to meet the needs of a niche audience. You may be a programmer just handed a list of accessibility coding issues that need repair. You may be a team lead with a mandate from leadership to make accessibility a product differentiator. You might have learned that your organization is under scrutiny from disability rights organizations. You may be an advocate for people with disabilities, looking for ways to make a case for accessibility to a product design team.

  No matter your title or skills, you are probably a member of a team that brings together many skills and roles to the task of building products. And you are thinking about accessibility. For accessibility thinking, you need to understand how your work fits with the work of others on your team, and how your decisions and actions affect millions of people around the world who use the web.

  This book will help you get started with accessibility or provide a structure for your accessibility thinking. It offers a framework composed of accessible user experience principles and guidelines that will help you create websites and web applications that are accessible for everyone.

  What’s in This Book?

  Chapter 1, “A Web for Everyone,” lays out the accessibility equation and a framework of principles and guidelines for an accessible user experience. The framework is formed from three bodies of work: the Web Content Accessibility Guidelines (WCAG 2.0), the Principles of Universal Design, and the concepts behind Design Thinking.

  Chapter 2, “People First,” introduces a group of personas—realistic but fictional characters that appear throughout the book to show how accessible design can have an impact on people’s lives.

  Chapters 3–10 cover accessible user experience principles. We start each chapter with an example that demonstrates how the principle is enacted in the “real world” and why it is important for the web. Then we detail how to achieve the principle through supporting guidelines related to strategy, design, content, and coding. We include information about who is responsible and list the relevant WCAG 2.0 principles, guidelines, and success criteria. At the end of each chapter, we profile a leader in the area of accessible design.

  The principles are:

  • Chapter 3, “Clear Purpose: Well-Defined Goals”

  • Chapter 4, “Solid Structure: Built to Standards”

  • Chapter 5, “Easy Interaction: Everything Works”

  • Chapter 6, “Helpful Wayfinding: Guides Users”

  • Chapter 7, “Clean Presentation: Supports Meaning”

  • Chapter 8, “Plain Language: Creates a Conversation”

  • Chapter 9, “Accessible Media: Supports All Senses”

  • Chapter 10, “Universal Usability: Creates Delight”

  Chapter 11, “In Practice: An Integrated Process,” provides guidance for how to weave accessibility best practices into the fabric of your organization. A web for everyone will become a reality when accessibility is a core value and is considered just part of making things.

  Chapter 12, “The Future: Design for All,” takes a look at what it might mean to have a web for everyone, before sending you off to your own journey into the future, to play your part.

  There are three appendixes. The first is a list of the accessible user experience principles and guidelines in this book, as a handy reference. The second maps the WCAG 2.0 principles, guidelines, and success criteria to the Accessible UX principles and guidelines to help organizations aiming to meet the standard. Finally, there is a comprehensive reading list.

  What Comes with This Book?

  This book’s companion website (rosenfeldmedia.com/books/a-web-for-everyone/) contains some templates, discussion, and additional content. The book’s diagrams and other illustrations are available under a Creative Commons license (when possible) for you to download and include in your own presentations. You can find these on Flickr at www.flickr.com/photos/rosenfeldmedia/sets/.

  FREQUENTLY ASKED QUESTIONS

  I’m not a designer (or I’m not a developer), so why should I read this book?

  It’s difficult to imagine a context in which one person could take a product, from soup to nuts, and make it accessible. There are so many decisions to be made, and accessibility must be considered at every step along the way. A designer or developer can’t make accessibility happen alone.

  If the decisions you make as part of your work impact someone’s experience of a digital product, you need to know how to make decisions that will not result in accessibility issues.

  If you are leading an organization or a team, you may need to shake things up and change how you do business in order to achieve accessibility. You can’t just tack it on and hope it sticks. You need everyone to change their processes to make accessibility part of their practice. Chapter 11 looks at putting accessibility into practice.

  This isn’t part of my job description, so whose job is it?

  The simple answer is that we are all responsible for making our part of a project accessible. Rather than try to list all the different roles, titles, and skills, we identify three big groups:

  • Design: How will we create a great user experience for all?

  Design includes all of the disciplines of UX and web design: information architecture, interaction design, information design, graphic design, and content strategy.

  • Content: What does the product say, and how does it say it?

  Content includes the ongoing work to plan and produce text, images, audio, video—all the information in the site or app.

  • Development: How is the product built?

  Development includes programming, coding, scripting, markup, as well as the templates and stylesheets that content authors use.

  In Chapters 3 through 10, we identify both who has the primary responsibility for each aspect of accessibility and how all the other roles support it.

  How big an issue is accessibility anyway?

  The U.S. Census Bureau says that over 47 million Americans have a disability of some kind. The UN and the World Bank say this adds up to 650 million people worldwide. That’s around 10% of everyone in the world.

  At some point in our lives, disability will affect most of us
, no matter who we are, especially as we get older. By the time we retire, over 30% of us will have some disability, even if it is minor.

  To put a face on these numbers, we’ve created a set of personas of web users. They don’t represent everyone, but they will introduce you to some of the ways people with disabilities use the web. You’ll meet them in Chapter 2.

  I’m already doing responsive

  design. Isn’t that enough?

  Working to standards and responsive design are both important criteria for accessibility. One way to think about accessibility is that assistive technologies, such as screen readers and alternate keyboards, are just another kind of device. When a site is designed to be flexible, it works better on all devices. Chapter 4 covers how to support accessibility with a solid structure.

  Accessible UX goes further, to be responsive to differences in people as well as devices. It’s about making sure that the ways users interact with your site or application (Chapter 5), navigate (Chapter 6), or read the screen (Chapter 7) allow for user preference.

  Is content part of accessibility?

  It sure is! There are many reasons why people have trouble reading: cognitive problems like aphasia or dyslexia, physical or vision disabilities, low literacy, or reading in a second language. But even skilled readers can have problems when they are rushed, tired, stressed, or reading on a small screen. Accessible content is written in plain language (Chapter 8) and presented clearly and flexibly (Chapter 7).

  Should I follow Section 508 or WCAG?

  WCAG 2.0, the Web Content Accessibility Guidelines, is a standard published by the W3C. That means it was created with input from people around the world and reflects the best international consensus. Section 508 is a national regulation in the United States. Other countries and the EU have their own laws and regulations.

  If your product is covered by a specific regulation, of course you must meet its requirements. But if you are thinking about accessibility for other reasons, WCAG 2.0 is the place to start. It’s a robust standard that is flexible enough to apply in different contexts—websites, desktop apps, mobile apps, even web-enabled teakettles can be measured against the WCAG success criteria.

  The good news is that most standards are very similar. The even better news is that the U.S. Access Board (the folks who manage Section 508) has proposed that the next version of Section 508 will use WCAG 2.0 Level AA as its requirements for web content. The EU is also working on new accessibility regulations, and we’ve been told that they, too, will be based on WCAG 2.0 Level AA. We have our fingers crossed, because in today’s global technology world, it would be great to have one standard for web accessibility. You’ll find a mapping of the accessible UX principles to WCAG 2.0 in Appendix B.

  CONTENTS

  How to Use This Book

  Frequently Asked Questions

  Foreword

  CHAPTER 1

  A Web for Everyone

  Understanding the Accessibility Equation

  Accessibility

  Inclusive design

  Building a Framework for Accessible User Experience

  Web Content Accessibility Guidelines

  Principles of Universal Design

  Design Thinking

  Using Design Thinking for Accessibility

  Summary

  CHAPTER 2

  People First: Designing for Differences

  Know Your Audience

  About Personas

  What’s in the Personas?

  Meet the Personas

  Summary

  CHAPTER 3

  Clear Purpose: Well-Defined Goals

  How Clear Purpose Supports Accessibility

  How to Design for a Clear Purpose

  Start with purpose and goals

  Design for clarity and simplicity

  Think “accessibility first”

  Make templates accessible, too

  Choose an accessibility strategy

  Who Is Responsible for Clear Purpose

  Summary

  Profile: Simple and Usable with Giles Colborne

  CHAPTER 4

  Solid Structure: Built to Standards

  How Solid Structure Supports Accessibility

  How to Create a Solid Structure

  Code content to be machine-readable

  Code to standards

  Use standard web technologies

  Organize code for clarity and flow

  Use stylesheets to separate content and presentation

  Use semantic markup for content

  Who Is Responsible for a Solid Structure?

  WCAG 2.0 and Solid Structure

  Summary

  Profile: Accessibility Standards with Mike Paciello

  CHAPTER 5

  Easy Interaction: Everything Works

  How Easy Interaction Supports Accessibility

  Designing for Easy Interaction

  Identify and describe interactive elements

  Use basic HTML codes correctly

  Use WAI-ARIA for complex elements

  Use features of the technology platform

  Provide accessible instructions and feedback

  Support keyboard interaction

  Make controls large enough to operate easily

  Let users control the operation of the interface

  Design for contingencies

  Allow users to request more time

  Who Is Responsible for Easy Interaction?

  WCAG 2.0 and Easy Interaction

  Summary

  Profile: Accessible Interaction with Derek Featherstone

  CHAPTER 6

  Helpful Wayfinding: Guides Users

  How Helpful Wayfinding Supports Accessibility

  How to Design Helpful Wayfinding

  Create consistent cues for orientation and navigation

  Present things that are the same in the same way

  Differentiate things that are different

  Provide orientation cues

  Provide clear landmarks within the page

  Provide alternative ways to navigate

  Who Is Responsible for Wayfinding?

  WCAG 2.0 and Helpful Wayfinding

  Summary

  Profile: Coding Accessibility with Steve Faulkner

  CHAPTER 7

  Clean Presentation: Supports Meaning

  How Clean Presentation Supports Accessibility

  How to Design for Clean Presentation

  Design simply

  Minimize distracting clutter

  Design for customization of the display

  Support customization through the browser

  Design content for easy comprehension

  Use color contrast to separate foreground from background

  Use visual and semantic space

  Provide enough space between lines of text

  Use clean typography

  Who Is Responsible for Clean Presentation?

  WCAG 2.0 and Clean Presentation

  Summary

  Profile: Responsive Design with Ethan Marcotte

  CHAPTER 8

  Plain Language: Creates a Conversation

  How Plain Language Supports Accessibility

  How to Design for Plain Language

  Write for your audience

  Follow plain language guidelines for writing content

  Support users through their tasks

  Structure the whole page for scanning and understanding

  Write sentences and paragraphs for easy scanning

  Write helpful links

  Use language your audience is familiar with or provide definitions

  Provide plain language summaries of complex content

  Don’t rely on readability formulas

  Usability test your content

  Who Is Responsible for Plain Language

  WCAG 2.0 and Plain Language

  Summary

  Profile: Universal Plain Language with Ginny Redish

  CHAPTER 9

&nbsp
; Accessible Media: Supports All Senses

  How Accessible Media Supports Accessibility

  How to Design for Accessible Media

  Don’t use only color to communicate meaning

  Provide instructions without relying on visual cues

  Describe the content or meaning of images

  Provide captions and descriptions for video

  Format captions to enhance meaning

  Provide alternatives to time-based media

  Use dynamic elements carefully

  Make presentations accessible

  Who Is Responsible for Accessible Media?

  WCAG 2.0 and Accessible Media

  Summary

  Profile: Accessible Media with Larry Goldberg

  CHAPTER 10

  Universal Usability: Creates Delight

  How Universal Usability Supports Web Accessibility

  How to Design for Universal Usability

  Design for exploration and discovery

  Create a conversation

  Be informative and helpful

  Practice usability for accessibility

  Who Is Responsible for Universal Usability?

  Summary

  Profile: Toward Universal Usability with Ben Shneiderman

  CHAPTER 11

  In Practice: An Integrated Process

  Making Accessibility the Way You Do Business

  Making a Commitment to Accessibility

  Assessing What’s Needed for an Integrated Practice

  Evaluate the current site

  Identify ways to allocate resources

  Identify opportunities to integrate accessibility into current processes

  Assess current knowledge and readiness

  Supporting an Integrated Practice

  Set policies and develop training

  Choose content and development tools that support accessibility

  Create a style guide and media library

  Include people with disabilities

  Provide tools and assistive technology for ongoing evaluation