Accessibility jane zhou

AccessibilityJane Zhou

Intro – Target Audience & Objectives

Target Audience

UX Engineers, QA, and PM in Application Groups, Platform/ R&S Departments (no

development insights)

Everyone else who is interested in accessibilty

Objectives

What means accessibility?

Why it is important?

What means Section 508 for applications?

Which tools are provided by Windows, how to use them?

How to design an application with accessibility in mind

Agenda

Accessibility?

§508 – why?

Tools

Excercise: using the screen reader

Excercise: keyboard support

Excercise: using high contrast

Accessible application design

Overview

Accessibility

Agenda

Accessibility?

§508 – why?

Tools





Overview

Accessibility

What

• Providing people with disabilities the possibility to use our products

Why?

1 out of 5 Americans has some type of disability (due to a survey performed by

the U.S. Census Bureau)

Old people: 15% of people older than 65 years have special needs

Selling our products to governmental institutions

Image

AccessibilityImpairment Description Solutions

Visual Ranges from mild (affecting 17 percent ofusers) to severe (affecting 9 percent ofusers).

Customizable magnification, colors, andcontrast; Braille utilities; screen readers.

Hearing Ranges from mild (affecting 18 percent ofusers) to severe (affecting 2 percent ofusers).

Information redundancy: sound used only assupplement to text or visual communication.

Dexterity Ranges from mild (affecting 19 percent ofusers) to severe (affecting 5 percent ofusers). This impairment often involvesdifficulty performing certain motor skillswith keyboard or mouse.

Input method redundancy: programfeatures accessed by mouse or keyboardequivalents.

Cognitive Includes memory impairments andperceptual differences. Affects 16 percentof users.

Highly-customizable user interface (UI); useof progressive disclosure to hidecomplexity; use of icons and other visualaids.

Speech or language

Includes dyslexia and oral communicationdifficulties.

Spell-check and grammar-check utilities;speech recognition and text-to-speechtechnology.

Accessibility

About 8% of adult males have some form of color confusion...

The primary colors – seen by a user with

normal color vision Deuteranopia(6% of male population)

Protanopia(1% of male population)

Tritanopia(1% of male population)

Accessibility

Agenda

Accessibility?

§508 – why?

Tools





Overview

Section 508?

• Workforce Rehabilitation Act ( 美國復健法案第 508 款 )

Section 508 – Why?

Why 508?

In contrast to German or UK laws, Section 508 directly includes detailed rules for

software applications and multi media systems

German/ UK laws only covers intranet and internet applications

Section 508 – Why?

Section 508 – Focus

Basis are the following subparts of Section 508:

Subpart B („Technical Standards“), §1194.21 only („Software Applications and

Operating Systems“)

Subpart C, §1194.31 („Functional Performance Criteria“)

Subpart D, §1194,41 („Information, Documentation, and Support“),

Section 508 – Focus

Following subparts might be interesting for some AGs, but will not be covered in

this presentation:

Subpart B („Technical Standards“), §1194.22 („Web-based intranet and

internet information and applications. 16 rules.“)

Section 508 is covered only partly by WCAG 1.0

Subpart B („Technical Standards“), §1194.24 („Video and multimedia

products“)

E.g. supporting closed captions, supporting secondary audio program

playback, ...

Section 508 – Focus?

The whole thing:

www.section508.gov

http://www.section508.gov/

If you do only 3 things...

• Complete and compliant keyboard support

• Support high contrast mode

• Support screen reader

... you‘ve already covered most of the accessibility requirements.

Section 508 – Final

Agenda

Accessibility?

§508 – why?

Tools





Overview

Accessibility

Tools

Screen Reader: narrator.exe

“Start” “Run” “narrator.exe”

<CTRL> + <SHIFT> + <SPACEBAR>: read the whole active window

Navigate to an interface element: read information about the element

High-Contrast Mode

• XP: Start Control Center Accessibility

Accessibility Tools Display Enable

High Contrast

• Vista: Start Control Panel Ease of

Access Optimize Visual Display

High Contrast

• Or: <alt> + <shift> + <print>

• Different color schemes could be used

by using the “settings” button

Tools

Tools

Nero Burning ROM/ Nero Express in high contrast mode

Agenda

Accessibility?

§508 – why?

§508 in detail

Tools





Overview

Exercise: Using the screen reader

Info

Read the whole window: <ctrl> + <shift> + <space>

Read a single control: navigate to the control (e.g. via <tab>/ <shift> +

<tab>

XP: Narrator reads from top to bottom

If more than one element are placed on the same y-position, narator

reads the corresponding line from left to right

Vista: Narrator seems to read according to the tab order

Optimize for XP – Vista should work automatically (if keyboard support is

implemented well additionally), but test on both systems

Exercise: Using the screen reader

How to

• Turn of video projector

• Start Narrator.exe

• Start example application/ Dialog: „Narrator Support (wrong)“

• Listen to the dialog

• Close the application/ narrator.exe

• Attendencies draw the dialog on the whiteboard

Agenda

Accessibility?

§508 – why?

Tools





Overview

Exercise: keyboard support

Info

• Navigate via <tab> (forward) and <shift>+<tab> (backward)

• Use controls correct (e.g. <space> for checking a radio button, <up> and

<down> for navigation within a group)

• Test shortcuts (<ctrl> + something) and access keys (<alt> + <alphanumeric

key (underlined)>)

Exercise: keyboard support

How to

• Start example application/ Dialog: „Keyboard Support (wrong)“

• Step through the dialog via <tab> and <shift> + <tab>

• Use access keys(<alt> + the underlined letter)

Agenda

Accessibility?

§508 – why?

Tools





Overview

Exercise: Using high contrast mode

How to

Start example application/ Dialog: „High Contrast (wrong)“

Close example application

Change Windows Theme


Task: Find the problems!


Turn on high contrast mode „High Contrast Black (large)“ (default)




How to

Turn on high contrast mode „High Contrast White (large)“




Exercise: Using high contrast mode

Agenda

Accessibility?

§508 – why?

Tools





Overview


Use standard controls and dialogs

Learn the standard controls/ dialogs and their behaviour, e.g.

Check box, radio buttons

Command button/ Command links

Drop down list/ combo boxes

List boxes/ list view

Progress bar

Progressive disclosure controls

Toolbars, ribbons,...

Dialogs: Open/ Save File, Print (preview), color selection...

Try to get as many things covered with standard controls as possible


Accessible application design starts with the wording...

Use these terms Instead of

Has limited dexterity, has motion disabilities Crippled, lame

Without disabilities Normal, able-bodied, healthy

One-handed, people who type with one hand Single-handed

People with disabilities The disabled, disabled people, people with handicaps, thehandicapped

Cognitive disabilities, developmental disabilities

Slow learner, retarded, mentally handicapped

Use system colors, fonts, and common controls whenever possible


Do screen reader friendly layouts

E.g. placing descriptions for edit boxes/ combo boxes... above (left aligned),

corresponding controls below

No layout with more than one column

Define shortcuts and access keys, default button, tab order, high contrast

behaviour...

Do not forget colons where colons belong!


Limit animations

Use progressive disclosure to hide complexity

Use auto-complete functionality for editable text


Most important

Test the application for accessibility (test plans...)

Train developers/ QA for taking care about accessibility

Agenda

Accessibility?

§508 – why?

Tools





Overview

Overview

What HowKeyboard support Tab order

Shortcuts Use max. 3, better only 2 keys at the same time

Access keys Focus

Screen reader Read single elements Read whole window Identity, operation, state Use „:“ at the end of descriptive labels Tab order

High contrast Detect high contrast Adapt to OS wide display settings

at least after application restart Remove (background) pictures

Addtional Turn off animations on request No blinking/ flashing elements (between 2Hz and 55Hz) No information coding via color only Provide textual information where it is not available (e.g. pictures,

animations)

Documentation & Support Provide documentation for „accessibility features“

Process related Test, test, test! (Test plan creation, turn off your monitor, remove your mouse...)

Trigger Section 508 certification through TL-UX – when your own tests succeeds

Accessibility

Accessibility

Q & A

Accessibility

THANK YOU!

Technology

Accessibility jane zhou