• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Accessibility jane zhou

on

  • 1,030 views

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

Statistics

Views

Total Views
1,030
Views on SlideShare
1,030
Embed Views
0

Actions

Likes
0
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accessibility jane zhou Accessibility jane zhou Presentation Transcript

    • Accessibility
      Jane 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
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      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
    • Accessibility
    • Accessibility
      About 8% of adult males have some form of color confusion...
      The primary colors – seen by a user with
      Deuteranopia
      (6% of male population)
      normal color vision
      Protanopia
      (1% of male population)
      Tritanopia
      (1% of male population)
    • Accessibility
    • Agenda
      Accessibility?
      §508 – why?
      Tools
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      Overview
    • Section 508 – Why?
      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 – 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
    • Section 508 – Final
      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.
    • Agenda
      Accessibility?
      §508 – why?
      Tools
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      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
    • Tools
      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
      Nero Burning ROM/ Nero Express in high contrast mode
    • Agenda
      Accessibility?
      §508 – why?
      §508 in detail
      Tools
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      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
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      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
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      Overview
    • 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
    • Exercise: Using high contrast mode
      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
    • Agenda
      Accessibility?
      §508 – why?
      Tools
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      Overview
    • 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
    • Accessible application design
      Accessible application design starts with the wording...
      Use system colors, fonts, and common controls whenever possible
    • 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!
    • Accessible application design
      Limit animations
      Use progressive disclosure to hide complexity
      Use auto-complete functionality for editable text
    • Accessible application design
      Most important
      Test the application for accessibility (test plans...)
      Train developers/ QA for taking care about accessibility
    • Agenda
      Accessibility?
      §508 – why?
      Tools
      Excercise: using the screen reader
      Excercise: keyboard support
      Excercise: using high contrast
      Accessible application design
      Overview
    • Overview
    • Accessibility
    • Accessibility
      Q & A
    • Accessibility
      THANK YOU!