Design for Accessibility

Designing for Accessibility
After successfully completing this module, you will be able to:
create accessibility personas
understand the challenges of users with disabilities
apply design tips for different disability types

Outline
Accessibility Hit or Myth
Design Process and Personas
Design for Disability
Type definition
Challenges users face
Design tips
Summary and Design Resource

Hit or Myth
Accessible sites look boring
“Text-only” pages are a good way to provide accessibility
(Myth)
(Myth)

Hit or Myth
Accessible sites look boring
“Text-only” pages are a good way to provide accessibility
It’s possible to design a single version of web content that is accessible across all spectrum of disabilities
(Myth)
(Myth)
(Myth)
Universal Design

Design Process
When in a project do you think “accessibility?”

User-Centred Design Process
Evaluate
User Research
Design
Development
Scenarios and Requirements

Personas:a description of a representative user(a pretend person who represents a type or a group of users)

Create Personas for Your Design
Ask yourself :
Who are the users?
What are the activities they wish to perform?
Why they might visit your websites? i.e. motivation
How does our website/services fit into their context of life?

Create Accessibility Personas
Background: picture, name, age, job, interests, …
Attributes: ability, access points, technical expertise,..
Goals:
What are they trying to achieve?
Why are they trying to achieve this?

Persona Example: Robert(Retiree with aging related conditions)
Background
age: 65
occupation: retired
aging related disabilities: low-vision, hand tremor, short-term memory loss
Technical level: not tech savvy, only uses the web to manage some of his household services and finances
Attributes
uses screen magnifier
uses computers only at home
preferred large links and icons
finds scrolling stickers and flashing animations very distracting
easy to get lost in the site
“I often get stuck on a website.”
Goals
able to use basic services on the web easily
don’t get stuck on pages and able to save his data
able to customize a website font and color

Tips for Creating Personas
Empathy: focus on our target users and their pain points
Concrete: include details of your personas and make them real
Apply a face to your persona
Include disability condition and AT information for accessibility personas

User-Centred Design Process
Evaluate
User Research
Design
Development
Scenarios and Requirements

Design for Disability
Vision
Hearing
Mobility
Cognitive
Speech
Focus of today

The Four POUR Principles
The Four POUR Principles
WCAG 2.0 principles:
Perceivable
Operable
Understandable
Robust

Vision Disability
Blindness
Low Vision
Color-blindness
Seizure

Blindness
Let’s experience it!
What are the challenges?

Blindness: Challenges
cannotscan for content
primary interact with keyboard
hard to access visual information
limitations of screen readers

Blindness: Design Tips
Perceivable: include detailed text description for graphics, video, animation
Operable: fully operable with keyboard
Understandable: make sure your page has a clear, and consistent structure, and avoid using complex tables
Robust: be careful with new technologies that will raise incapability with AT

Low-Vision
Let’s Experience it!

Low-Vision: Challenges
cannot see without magnifier
text in graphics is hard to read
cannot see pages with low contrast

Low-Vision: Design Tips
Perceivable:
To make text more legible when enlarged, use true text as much as possible, rather than text in graphics.
To the extent possible, use percentages, rather than absolute units (e.g. pixels), in your document layout.
To the extent possible, maximize the contrast of your web pages, including graphics, fonts, and backgrounds

Color-Blindness
Assessment Samples
Test Plate 1
Test Plate 2
Test Image
(The number 12 should be visible by all.)
Test Plate 3
Test Plate 4

Color-Blindness: Types
Protanopia and protanomaly (red deficiencies)
Deuteranopia and deuteranomaly (green deficiencies)
Tritanopia (blue deficiencies)
Rod monochromacy or achromacy (no color)

Color Blindness
Let’s Experience it!

Color-Blindness: Challenges
problem color combinations
color used as the only way to convey information

Color Basics: Hue

Color Basics: Lightness & Saturation

Effective Color Contrast Guidelines
1
Exaggerate lightness differences between foreground and background colors

2
Choose dark colors from the bottom half of the circle against light colors from the top half of the circle.
Light Colors
Dark Colors

3
Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.
Light Colors
Dark Colors

Color-Blindness: Design Tips
Perceivable:
Avoid colors or color pairs that cause problems for people who are colorblind.
Provide sufficient contrast between foreground and background colors.
Make sure that colors are not your only method of conveying important information.

Seizure Disorders

Hearing Disability
Let’s hear it!

Hearing: Challenges
auditory prompts without visual signposts
lacking caption/transcript for video and audio content

Hearing: Design Tips
Perceivable:
Make sure they can perceive (hear) auditory content
Alternative text for animation
Synchronized captioning
Transcript
Text description (e.g. for audio instructions)
Allow for user control of start/stop, animations, and other equivalent options.

Hearing Disability
a word about sign language…

Mobility Disability

Mobility
Let’s hear it!

Motor: Assistive Technologies

Mobility: Challenges
may not be able to control mouse or keyboard well
may become fatigue very easily when using AT

Their biggest challenge is…
Navigating on the web

How we read online...

How do we read online?
People almost always scan your pages
Userswon't read your text thoroughlyin a word-by-word manner
Most readers have 2 key questions:
Am I on the right page?
If not, where do I go next?
Headings
links

"Provide clear and consistent navigation mechanisms to increase the likelihood that a person will find what they are looking for at a site."
Web Content Accessibility Guideline 13

Mobility: Design Tips
Operable:
build a good navigation structure
give feedback to user actions
help users navigate efficiently through keyboard

Effective Navigation Tips
1
build a good navigation structure
Reduce the number of entry points
consistent navigation structure
provide sitemap
Use standard navigation UI

How many different ways to view winners?
4
1
3
2

2
give feedback to user actions
mouse movement feedback
keyboard focus feedback

Mouse Movement
A clickable area needs to appear obviously clickable.
QUIT
QUIT

Vote This Submission

Mouse Movement
A clickable area needs to appear obviously clickable.
Change mouse cursor appearance when appropriate.
The clickable area should be clearly identified on the hover.

Keyboard Focus
There is always an object with focus.
Keyboard focus should be visible and obvious.
Keyboard focus and selection should have separate and unique indicators.

3
help users navigate efficiently through keyboard

Keyboard Navigation
Enable navigation to all elements using tab or arrow keys.
Provide keyboard shortcuts to important links and content. (e.g. skip links)

Help! … Skip Links please!

Keyboard Navigation
Enable navigation to all elements using tab or arrow keys.
Provide keyboard shortcuts to important links and content. (e.g. skip links)
Provide keyboard commands (e.g. access keys) for all commands, menus, and controls.
Make sure that your pages are error-tolerant

What Is Your Role in Accessibility?
User Experience Designers
Recognize the accessibility implications of your designs.
Apply appropriate accessibility personas and scenarios to ensure your designs are accessible to all.
User Experience Researchers
Design usability tests to include users with disabilities and impairments.
Conduct usability tests on specific accessibility features.

Summary: Designing for Accessibility
In this module, we discussed:
accessibility design myth
Integrate accessibility into your design process and how to create accessibility personas
explained the challenges of different types of disability users face
design tips for different disability types

“Good Design Enables,
Bad Design Disables”
The Institute for Design and Disability

Design Resource
Web Accessibility in Mind: http://webaim.org/
Personas: http://www.deyalexander.com.au/resources/uxd/personas.html
Effective Color Contrast: http://www.lighthouse.org/accessibility/effective-color-contrast/
Bad website design examples: http://websitesthatsuck.com/
How People with Disability Use the Web: http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
Accessibility Color Wheel: http://gmazzocato.altervista.org/colorwheel/wheel.php
Contrast Analyser: http://www.paciellogroup.com/resources/contrast-analyser.html
Color Doctor: http://www.fujitsu.com/global/accessibility/assistance/cd/download.html
Vischeck: http://www.vischeck.com/vischeck/vischeckURL.php

http://blogs.msdn.com	156
http://www.slideshare.net	5
http://design-for-innovation.com	2
http://www.cstylez.com	2
http://www.paretouserexperience.com	2
http://i1.blogs.msdn.com	1

Design for Accessibility

by qixingz

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 168

Statistics

Design for Accessibility Presentation Transcript