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