Accessibility for the Disabled_A Design Manual for a Barrier Free Environment
Design for Accessibility
description
Transcript of 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 DisabilityType 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?”
EvaluateUser Research
Scenarios and Requirements
Design Development
User-Centred Design Process
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
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
“I often get stuck on a website.”
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
EvaluateUser Research
Scenarios and Requirements
Design Development
User-Centred Design Process
Design for Disability
Vision
Hearing
Mobility
Cognitive
Speech
Focus of today
The Four POUR PrinciplesWCAG 2.0 principles:
Perceivable
Operable
Understandable
Robust
The Four POUR Principles
Vision Disability• Blindness
• Low Vision
• Color-blindness
• Seizure
BlindnessLet’s experience it!
What are the challenges?
Blindness: Challenges
• cannot scan for content
• primary interact with keyboard
• hard to access visual information
• limitations of screen readers
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
Blindness: Design Tips
Low-VisionLet’s Experience it!
What are the challenges?
Low-Vision: Challenges
• cannot see without magnifier
• text in graphics is hard to read
• cannot see pages with low contrast
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
Low-Vision: Design Tips
Color-Blindness
Test Plate 1 Test Plate 2
Test Plate 3 Test Plate 4
Test Image
(The number 12 should be visible by all.)
Assessment Samples
Color-Blindness: Types
Protanopia and protanomaly (red deficiencies)
Deuteranopia and deuteranomaly (green deficiencies)
Tritanopia (blue deficiencies)
Rod monochromacy or achromacy (no color)
Color BlindnessLet’s Experience it!
What are the challenges?
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 Guidelines1
Exaggerate lightness differences between foreground and background colors
Effective Color Contrast Guidelines2
Choose dark colors from the bottom half of the circle against light colors from the top half of the circle.
Light Colors
Dark Colors
Effective Color Contrast Guidelines3
Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.
Light Colors
Dark Colors
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.
Color-Blindness: Design Tips
Seizure Disorders
Hearing DisabilityLet’s hear it!
What are the challenges?
Hearing: Challenges
• auditory prompts without visual signposts
• lacking caption/transcript for video and audio content
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: Design Tips
Hearing Disability
a word about sign language…
Mobility Disability
MobilityLet’s hear it!
What are the challenges?
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
Users won't read your text thoroughly in a word-by-word manner
Most readers have 2 key questions:
Am I on the right page?
If not, where do I go next? Headingslinks
"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
Operable:
build a good navigation structure
give feedback to user actions
help users navigate efficiently through keyboard
Mobility: Design Tips
Effective Navigation Tips
• Reduce the number of entry points
• consistent navigation structure
• provide sitemap
• Use standard navigation UI
build a good navigation structure
1
How many different ways to view winners?
1
2
3
4
Effective Navigation Tips
• mouse movement feedback
• keyboard focus feedback
give feedback to user actions
2
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.
Effective Navigation Tips
help users navigate efficiently through keyboard
3
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 ResourceWeb Accessibility in Mind: http://webaim.org/Personas: http://www.deyalexander.com.au/resources/uxd/personas.htmlEffective 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.phpContrast Analyser: http://www.paciellogroup.com/resources/contrast-analyser.htmlColor Doctor: http://www.fujitsu.com/global/accessibility/assistance/cd/download.htmlVischeck: http://www.vischeck.com/vischeck/vischeckURL.php