accessibility jane zhou
Post on 30-Jun-2015
923 views
DESCRIPTION
碳酸饮料会40期 分享一:Accessibility 适用人群:交互设计师 分享人:周洁 Jane Zhou 毕业于中国美术学院工业设计系 进入Alibaba之前在Nero TL_UX department工作了3年 主要负责和参与的项目有Nero Move-it, Nero Vision, Nero Mediahub, Back It Up, Moto Mobile Link等 目前任职于阿里金融UED团队,主要负责金融贷款产品的设计。 .对Accessibility, Section 508基本概念的介绍,不同残障人群的特征分析 .如何使用一些系统工具来测试Accessibility 最终的目的是为了在我们的设计过程中,根据不同的用户情况,为他们创造“无障碍的”使用环境,完善我们的用户体验TRANSCRIPT
![Page 1: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/1.jpg)
AccessibilityJane Zhou
![Page 2: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/2.jpg)
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
![Page 3: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/3.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 4: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/4.jpg)
Accessibility
![Page 5: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/5.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 6: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/6.jpg)
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
![Page 7: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/7.jpg)
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.
![Page 8: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/8.jpg)
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)
![Page 9: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/9.jpg)
Accessibility
![Page 10: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/10.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 11: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/11.jpg)
Section 508?
• Workforce Rehabilitation Act ( 美國復健法案 第 508 款 )
Section 508 – Why?
![Page 12: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/12.jpg)
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?
![Page 13: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/13.jpg)
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“),
![Page 14: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/14.jpg)
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, ...
![Page 16: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/16.jpg)
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
![Page 17: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/17.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 18: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/18.jpg)
Accessibility
![Page 19: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/19.jpg)
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
![Page 20: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/20.jpg)
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
![Page 21: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/21.jpg)
Tools
Nero Burning ROM/ Nero Express in high contrast mode
![Page 22: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/22.jpg)
Agenda
Accessibility?
§508 – why?
§508 in detail
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 23: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/23.jpg)
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
![Page 24: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/24.jpg)
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
![Page 25: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/25.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 26: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/26.jpg)
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)>)
![Page 27: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/27.jpg)
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)
![Page 28: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/28.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 29: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/29.jpg)
Exercise: Using high contrast mode
How to
Start example application/ Dialog: „High Contrast (wrong)“
Close example application
Change Windows Theme
Start example application/ Dialog: „High Contrast (wrong)“
Task: Find the problems!
Close example application
Turn on high contrast mode „High Contrast Black (large)“ (default)
Start example application/ Dialog: „High Contrast (wrong)“
Task: Find the problems!
Close example application
![Page 30: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/30.jpg)
How to
Turn on high contrast mode „High Contrast White (large)“
Start example application/ Dialog: „High Contrast (wrong)“
Task: Find the problems!
Close example application
Exercise: Using high contrast mode
![Page 31: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/31.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 32: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/32.jpg)
Accessible application design
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
![Page 33: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/33.jpg)
Accessible application design
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
![Page 34: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/34.jpg)
Accessible application design
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!
![Page 35: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/35.jpg)
Accessible application design
Limit animations
Use progressive disclosure to hide complexity
Use auto-complete functionality for editable text
![Page 36: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/36.jpg)
Accessible application design
Most important
Test the application for accessibility (test plans...)
Train developers/ QA for taking care about accessibility
![Page 37: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/37.jpg)
Agenda
Accessibility?
§508 – why?
Tools
Excercise: using the screen reader
Excercise: keyboard support
Excercise: using high contrast
Accessible application design
Overview
![Page 38: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/38.jpg)
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
![Page 39: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/39.jpg)
Accessibility
![Page 40: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/40.jpg)
Accessibility
Q & A
![Page 41: Accessibility jane zhou](https://reader035.vdocuments.site/reader035/viewer/2022081519/5591b0ca1a28ab39518b4713/html5/thumbnails/41.jpg)
Accessibility
THANK YOU!