Your SlideShare is downloading. ×
Accessibility jane zhou
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Accessibility jane zhou

860
views

Published on

碳酸饮料会40期 …

碳酸饮料会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
最终的目的是为了在我们的设计过程中,根据不同的用户情况,为他们创造“无障碍的”使用环境,完善我们的用户体验

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
860
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Accessibility Jane Zhou
  • 2. 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
  • 3. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 4. Accessibility
  • 5. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 6. 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
  • 7. Accessibility Impairment Description Solutions Visual Ranges from mild (affecting 17 percent of users) to severe (affecting 9 percent of users). Customizable magnification, colors, and contrast; Braille utilities; screen readers. Hearing Ranges from mild (affecting 18 percent of users) to severe (affecting 2 percent of users). Information redundancy: sound used only as supplement to text or visual communication. Dexterity Ranges from mild (affecting 19 percent of users) to severe (affecting 5 percent of users). This impairment often involves difficulty performing certain motor skills with keyboard or mouse. Input method redundancy: program features accessed by mouse or keyboard equivalents. Cognitive Includes memory impairments and perceptual differences. Affects 16 percent of users. Highly-customizable user interface (UI); use of progressive disclosure to hide complexity; use of icons and other visual aids. Speech or language Includes dyslexia and oral communication difficulties. Spell-check and grammar-check utilities; speech recognition and text-to-speech technology.
  • 8. 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)
  • 9. Accessibility
  • 10. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 11. Section 508? • Workforce Rehabilitation Act (美國復健法案 第 508 款) Section 508 – Why?
  • 12. 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?
  • 13. 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“),
  • 14. 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, ...
  • 15. Section 508 – Focus? The whole thing: www.section508.gov
  • 16. 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
  • 17. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 18. Accessibility
  • 19. 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
  • 20. 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
  • 21. Tools Nero Burning ROM/ Nero Express in high contrast mode
  • 22. Agenda Accessibility? §508 – why? §508 in detail Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 23. 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
  • 24. 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
  • 25. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 26. 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)>)
  • 27. 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)
  • 28. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 29. 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
  • 30. 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
  • 31. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 32. 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
  • 33. 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, the handicapped Cognitive disabilities, developmental disabilities Slow learner, retarded, mentally handicapped Use system colors, fonts, and common controls whenever possible
  • 34. 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!
  • 35. Accessible application design Limit animations Use progressive disclosure to hide complexity Use auto-complete functionality for editable text
  • 36. Accessible application design Most important Test the application for accessibility (test plans...) Train developers/ QA for taking care about accessibility
  • 37. Agenda Accessibility? §508 – why? Tools Excercise: using the screen reader Excercise: keyboard support Excercise: using high contrast Accessible application design Overview
  • 38. Overview What How Keyboard 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
  • 39. Accessibility
  • 40. Accessibility Q & A
  • 41. Accessibility THANK YOU!