A Web for Everyone Blog

Designing Accessible User Experiences

Posts written by Sarah Horton & Whitney Quesenbery

  • Meet Trevor

    Posted on

    Trevor is one of the personas from our book, A Web for Everyone.  The first step in creating an accessible user experience – as with any UX work – is to know your audience. And that includes people with disabilities. People are the first consideration, so you can design needs of everyone in the audience in mind.

    You can download an overview of all eight personas from our Resources page. The personas images, created by Tom Biby, twofinechaps.com, are available on Flickr. Tune in for a new persona every Tuesday until all eight are posted.

    Trevor:  High school student with autism

    A young man reads a tablet. Three pencils are neatly lined up on the table near him.
    “I like consistent, familiar places on the web.”

    Trevor is a bright 18-year-old who plays games and watches music videos on his laptop. He lives at home with his parents and younger sister. He attends a special school where the teachers and staff can help with his social and communication challenges from his Autism Spectrum Disorder, while he works to pass his high school exams.

    He has problems with visual information and recognizing things on the page, and his reading skills are not helped by his trouble concentrating on the page or screen long enough to read. His teachers showed him how to make the text bigger on the page, and told him how to use a printable view to hide all the ads with moving images that distract him, because he reads every word on the page very carefully and literally. He can be easily confused by colloquialisms and metaphors. He can also be overwhelmed by sites that offer too many choices.

    He likes using the school’s forum to talk to his friends. It’s easier to just read what they want to say than to listen and try to figure out their facial expressions.

    He shares a laptop with the family, but has first dibs on it because his parents want him to get his schoolwork done. He uses it for homework, but he really likes games with repetitive actions. He doesn’t like new sites much, in the same way that he doesn’t like any changes in his routine: they are tolerated, but not encouraged.

    When I can learn the pattern, I can find my way.

    Talking about wayfinding (in Chapter 6), Trevor says, “I like games. The ones where you have to find your way around a maze are good because I can go over them, and I can learn how they work. It’s OK to get lost and have to figure out a game.

    “But when I’m trying to find something, like an assignment for school, I don’t like getting lost. I want to know where I’m going—because it’s easier, and it’s easier to find things again when I need them. When it’s clear and I can tell where I am, I like the site. It’s like learning how to walk to school on my own. I practiced finding my landmarks, so I would know where to turn. I know that it’s 500 steps from 1st Avenue to the first street I have to cross. Just like I know what to click on to get to my history class page on my school’s website.”

    Reading is hard for me

    He also talks about how hard reading is for him (in Chapter 8). It takes me a long time to read things. My teachers want me to work on my vocabulary, but I’d rather just find easier pages to read. Instructions are really hard for me. Going back and forth between the instructions and what I have to do is very, very distracting. Sometimes I’m trying to read, and I get interested in something on the side of the page and forget what I’m supposed to be doing. But sometimes, I get really involved in what I’m reading and keep going, even after I found what I’m looking up. It can take me a very long time to do any homework assignment. I wish websites were more like books, with nothing to distract me.”

    Snapshot of Trevor

    • 18 years old
    • Lives with family
    • Goes to high school
    • Computers at school; laptop at home; basic mobile phone with SMS

    The A’s: Ability, Aptitude, Attitude

    • Ability: Autism Spectrum Disorder. Uses larger text and a program that hides everything but the text, so he doesn’t get distracted
    • Aptitude: Uses the computer well for games, but doesn’t learn new sites easily
    • Attitude: Prefers familiar sites in an established routine

    Assistive Technology

    • Text preference settings
    • Chat and forums
    • Power keyboard user

    The Bigger Picture

    Source: Autism & Developmental Disability Monitoring Network/CDC

    • 1 in 88 children in the U.S. have Autism Spectrum Disorder, ranging from severe to mild social and communications challenges, from classic autism to Asperger’s.
    • 5 times more boys than girls are diagnosed with ASDs.
    • The majority do not have an intellectual disability.

    Happy Birthday!

    Posted on

    The launch of a book is like a birthday. Something new to celebrate.  On their birthdays, hobbits are expected to give gifts to their friends. In that tradition, we have posted some things we hope you will find useful:

    • The Accessible UX principles and guidelines – the heart of the book
    • A cross-reference between the WCAG 2.0 and the AUX principles and guidelines
    • An overview of the eight personas we created to illustrate the diverse ways people use the web

    You can read or download them from the Resources page in printable and accessible formats.

    Each chapter in the book includes a profile of someone whose work helped make the web more accessible. Sarah recorded deep, thoughtful conversations, and, naturally, we had more material than fit in the printed pages. We hated leaving so much goodness on the cutting room floor, so we will post a longer version of each interview here every week or so until they are all online.

    We will also post the full version of the personas, so you can use them in your own work. We hope they will help you think about the many different people in your audience and how to make the web work for them.

    So, happy birthday to A Web for Everyone. One stage ends, and the next adventure begins.

    Whitney (@whitneyq) and Sarah (@gradualclearing)

     

    Personas for Accessible UX

    Posted on

    This page has a quick introduction to the personas we created for this book. The full version of the personas with more details about them and their stories will be posted over the next few weeks.

    Trevor

    A young man reading a tablet

    High school student with autism
    Likes games and computer worlds
    Poor reading skills and poor social skills; difficulty with visual comprehension

    Meet Trevor

     

    Emily

    A woman using a wheelchair
    Goes to college and works in a community center
    Has cerebral palsy and uses a computer for communication
    Uses a scooter for mobility and has minimal use of her hands

    Meet Emily

     

    Jacob

    A man wearing dark glasses at a computer
    Paralegal with dreams of going to law school
    Proficient with technology; uses computers for “everything”
    Blind since birth

    Meet Jacob

     

    Lea

    A woman wearing a headset and leaning on her hand
    Works from home, as an editor and writer for a small magazine
    Uses a split keyboard and dictation software
    Copes with fatigue and weakness from fibromyalgia

    Meet Lea

    Steven

    A man signing, using his phone for video chat
    Graphic artist for a small ad agency
    Uses video chat and texting to connect with anyone else who is deaf or hard of hearing
    Deaf; uses ASL along with interpreters

    Meet Steven

    Vishnu

    A man at a desk with a large print keyboard
    Engineer and world citizen through technology
    Low vision due to glaucoma
    Uses screen magnifiers and contrast adjustment

    Meet Vishnu

     

    Maria

    A woman sitting in a chair
    Community health worker
    Her mobile phone is her first computer
    Uses computer translations,  needs clearly written information
    Immigrant family is Spanish/ English bilingual

    Meet Maria

    Carol

    An older woman with glasses, reading a book
    Grandmother learning to use technology from her grandkids
    Macular degeneration starting to affect her reading ability and slight tremor in her hands
    Has learned to enlarge text in her browser

    Meet Carol

    Accessible UX Principles and Guidelines

    Posted on

    Designing a web for everyone combines good design and usability with accessibility to create inclusive design.

    The accessible UX principles draw on three main sources:  The W3C Web Content Accessibility Guidelines (WCAG) 2.0, which  provide the foundation for web accessibility guidelines and best practices; the Principles of Universal Design, seven principles that work for the widest range of human abilities; and design thinking, an approach that emphasizes grounding the process in human needs.

    Using the accessible UX principles and guidelines, you can create websites and web applications that work for everyone—including people with disabilities.

    Each of the guidelines is explained and illustrated in the book, A Web for Everyone.

    People First: Designing for differences

    People are the first consideration, and sites are designed with the needs of everyone in the audience in mind.

    • Know your audience.

    Clear Purpose: Well-defined goals

    People enjoy products that are designed for the audience and guided by a defined purpose and goals.

    • Start with purpose and goals.
    • Design for clarity and simplicity.
    • Think “accessibility first.”
    • Make templates accessible.
    • Choose an accessibility strategy.

    Solid Structure: Built to standards

    People feel confident using the design because it is stable, robust, and secure.

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

    Easy Interaction: Everything works

    People can use the product across all modes of interaction and operating with a broad range of devices.

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

    Helpful Wayfinding: Guides users

    People can navigate a site, feature, or page following self-explanatory signposts.

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

    Clean Presentation:  Supports meaning

    People can perceive and understand elements in the design.

    • 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 white space.
    • Provide enough space between lines of text.
    • Use clean typography.

    Plain Language: Creates a conversation

    People can read, understand, and use the information.

    • Write for your audience.
    • Follow plain language guidelines for writing content.
    • Write sentences and paragraphs for easy scanning.
    • Support users through their tasks.
    • Structure the whole page for scanning and comprehension.
    • 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.

    Accessible Media: Supports all senses

    People can understand and use information contained in media, such as images, audio, video, animation, and presentations.

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

    Universal Usability: Creates delight

    People can focus on the experience and their own goals because the product anticipates their needs.

    • Design for exploration and discovery:
      • Design for direct manipulation.
      • Disclose the right things at the right time.
      • Give rewards.
      • Support beginners and experts.
    • Create a conversation:
      • Layer information.
      • Tell a story.
    • Be informative and helpful
      • Give instructions at the right time, in the right place.
    • Practice usability for accessibility:
      • Do usability testing.
      • Include people with disabilities in usability work.

    In Practice: An Integrated Process

    People and organizations consider accessibility integral to their work and products.

    • Make accessibility the way you do business.
    • Make a commitment to accessibility.
    • Assess 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.
    • Support 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.
      • Make accessibility part of site maintenance.

     

    What’s the future of web accessibility?

    Posted on

    What’s will web accessibility be like in the future?

    This question has been knocking around in our heads for a while. We’ve always known we want to end the book with a look forward to the accessible web of the future.

    Deep in the throes of writing the book, it’s easy to get lost in all the ways we wish that web sites (and web apps) are more accessible. There are so many problems that would be so easy to avoid by thinking about designing a web for everyone – including not only different devices, but different ways of interacting.

    We also see promise in the robust community of designers, in platforms with more accessibility features built in, and every time we hear about a company that makes a commitment to developing to standards.

    But we’d like the book to reflect more than just two people’s opinions, so we’d like to hear from you.

    • What do you think the next few years will bring? 
    • How might  a web for everyone be different than the web we have today?
    • What signs are there that we are moving towards that goal?
    • And what holds us back from that vision?

    If you have some ideas, we hope you’ll contribute.

    Head over to our GoogleDocs form to share your thoughts. 

    Help create a US strategic plan for accessibility

    Posted on

    Crowdsourcing is all the rage, even in government UX work. Two projects going on right now invite you — yes, you — to contribute your ideas for making our world more accessible:

    OpenIDEO is a collaborative innovation platform that invites creative thinkers to work together to solve social problems. In the elections challenge, we’re down to the final days: evaluations of a shortlist of 20 final concepts. This challenge is part of the EAC-funded Accessible Voting Technology Initiative. Winners will be announced on March 28. 
    With the Section 508 Refresh is nearing the end of a long regulatory process (we submitted the final report of the Advisory Commitee in April 2008), The National Dialogue is a chance for the public to provide input on how to manage a strategic accessibility program. 
    You don’t have to work in government to have input. Share what’s worked in your own UX, usability or accessibility program — or your ideas for fixing what didn’t work.

    Cool (and accessible) gadgets

    Posted on

    One of the basic premises of universal design is that design can have accessibility built right in, giving you both good design and good accessibility. And there are lots of examples out there of features or products that started out as assistive technologies, but work for everyone (think curb cuts, OXO good grips, and text-to-speech).

    But we don’t often think about just how a cool gadget can be just the thing to solve a need for people with disabilities. In fact, we don’t usually think of assistive technology as cool at all.

    The Enabled blog, run by a group of social entrepreneurs in India, has compiled a list of 10 gadgets that turn out to be great technology for people with disabilities.

    My favorites are:

    • MyTobiiP10, a gaze controlled computer from the makers of one of the popular eyetracking systems for usability testing
    • Panasonic’s combo washer-dryer
    • A walking stick that vibrates when you get too close to something
    • and, of course the iPad

    Read the rest of the list at Enabled:  Top 10 tech gadgets for persons with disabilities

    Negotiated Accessibility

    Posted on

    Think accessibility is just about web sites?

    The Law Office of Lainey Feingold announced that two companies they are working with “recently let us know that they believe their sites substantially comply with WCAG 2.0 AA.  Any feedback you can provide will help our monitoring and implementation efforts.”

    This progress comes through Structured Negotiations, which Feingold describes as a way of settling disputes through collaboration rather than litigation. These agreements, in which Feingold represents disability advocacy groups, often go beyond the web to cover other information formats, access in retail stores, and telephone support.

    • The American Cancer Society will make all of their cancer-related information available in alternative formats such as Braille, large print, audio and electronic formats.
    • Radio Shack also agreed (in 2008) to ensure that all of its 5000 stores across the United States will have tactile point of sale devices so that blind and visually impaired customers can independently enter their PIN and other confidential information.

    Harnessing the human cloud

    Posted on

    This is an interesting and innovative idea: mix an iPhone app with crowd-sourcing to provide real-time answers to assist the blindness community.

    “The process is quite simple – the user snaps a photo with their mobile device (currently the iPhone and iPod Touch), they are then prompted to record an audio question to be attached with their photo, and then make the decision of which means they would like to use for collecting answers and identification.”  The options are a database of images or a social network that let’s another human answer the question.

    “Let me tell you – it’s an incredible experience to have someone respond to a question in under 45 seconds or so. Life is too fast-paced to rely on a pair of eyes – but, this is a solid, very capable solution that I’ve been excited to put through its paces today.”

    Rochester HCI project site

    Hat tip to Jennifer Sutton for this link.

    UX and accessibility

    Posted on

    As we get started on this book, we’ve been spending time on Skype talking about what the perspectives and information we hope this book can represent. In addition to this blog, Sarah has a long-running blog at sarahhortondesign.com. This week, she writes about why a framework for thinking about accessible design is so important to UX.

    Since then I have been looking for ways to provide attractive designs
    that transform elegantly for different users in different contexts. I
    have found the universal design principles
    that guide the best accessible designs in the built environment to be a
    useful framework for designing digital access. I have also looked to
    architects and builders to understand how the profession has taken on
    responsibility for access requirements.

    The user experience
    profession will be asked to absorb responsibility for accessibility
    compliance. We want our book to provide solutions that are both
    practical and inspiring. And we want to establish a universal design
    framework for web development that will give rise to accessible design
    solutions.

    Read the whole post