Universal Design. For Web Applications. Wendy Chisholm & Matt May Web 2.0 Expo 17 September 2008

Transcription

1 Universal Design For Web Applications Wendy Chisholm & Matt May Web 2.0 Expo 17 September 2008

2

3 Universal Design [T]he design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. Ron Mace

4 ADAPTS Ability Device Age Preference Task Situation

5 Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive community, to the greatest extent possible, without the need for specialized design. For people to share knowledge, the Web must be a universal space... Universality must exist along several dimensions. TBL, pg 163 Programmers are cheaper than lawyers; save yourself $6m

6 Ryan Turner -

7 Mobile and Accessibility Technique overlap Mobile ½ the world population by 2010? Content adaptation and user experience We're not saying one size fits all We are saying one source-to-many outputs We want to maximize every user experience

8

9

10

11

12 Situational Disabilities Scenario: check on laptop in kitchen, craft response on mobile on bus, read responses on desktop at work Res: 1280px -> 120px -> 1440px db: kitchen -> bus -> quiet office Kinesthetic: stable -> bouncy -> stable Light: soft -> daylight -> fluorescent Input: trackpad -> keyboard-only -> mouse

13 Cognitive, Reading & Learning Dyslexia, ADHD, Low reading level ADHD - 4.4% of adults Search engines - low-level interpretation of meaning International or young readers

14 Hearing Includes: hard of hearing, Deafness Deafness 421,000 in both ears Hard of hearing 36.4 million with hearing trouble Riding a packed train while listening through illfitting earbuds Watching TV in a pub with the sound off

15 Movement Paralysis, tremor, missing or loss of limb, weakness 2.5 million can't grasp or handle small objects With an iphone, your pixel finger has difficulty accurately selecting 20 pixel links Texting while walking or bouncing

16 Vision Low vision, blindness, color blindness 14.1 million people with vision trouble (includes colorblindness) 1.3 million people are legally blind Screen magnification on an iphone/ipod touch Contrast lost while using LCD outdoors Google is a deaf-blind user...with millions of friends and dollars to spend.

17 The people who brought you... Speech recognition Speech synthesis Closed captioning On-screen keyboards Alt text and title Find as you type Curb cuts

18 Demos/Examples Captioning demo Mac OS screen magnification Free screen readers NVDA (Win XP) Orca (Linux) VoiceOver (OS X) On-screen keyboards - iphone Speech recognition

19 Framework Key concepts that increase accessibility, basic mobile access, and some SEO benefits WCAG 2.0, MWBP 1.0, principles of UD W3C Web Content Accessibility Guidelines W3C Mobile Web Best Practices Universal Design

20 A well-rounded approach Valid, semantic HTML CSS Unobtrusive script Accessibility APIs Ajax/ARIA, Flash/IAccessible2, Silverlight/UIA

21 Accessibility APIs IAccessible2 Linux Foundation project Extends MSAA on Windows Support on Linux, Mac OS X Enables DHTML/Ajax on assistive technology MSAA (Microsoft Active Accessibility) Windows 95==broadly supported IAccessible (basis for IA2)

22 APIs, cont. UIA (User Interface Automation) Windows Vista Windows Presentation Framework/Silverlight

23 Software accessibility basics Keyboard operation e.g. CSS :hover, :focus, :active e.g. onmouseover(), onclick() Notification of changes Role and state of UI components Names and labels for UI components

24 Ajax Accessibility issues Assistive technologies not notified of changes Roles and states of custom components not identified. Degrade gracefully Allow simple HTTP logins Allow access to the same content using other means Directly accessible Ajax

25 WAI-ARIA Direct accessibility Live regions, roles, states Maps IAccessible2 to Ajax Support being built into Mozilla, Dojo, JAWS and other products

26

27 WAI-ARIA example <ul role="menubar"> <li role="menuitem ><a href="...">about BCC ></a> <li role="menuitem ><a href="...">classes ></a> <ul role="menu"> <li role="menuitem"><a href="...">class Schedules</a></li> <li role="menuitem"><a href="...">course Catalog</a></li>... </ul> All links are real

28

29 Flash/Flex Most accessibility exposed via ActionScript Flash Player supports MSAA Flash 9 components support accessibility Flex 26 Flex components support accessibility Components can implement MSAA themselves via ActionScript

30

31 Misc Other Things CMS Templates (e.g. WordPress) User-generated Content/Metadata (e.g. Flickr) APIs (e.g. Digg)

32 No silver bullets Automated tools are only as good as their users Policy puts the focus in the wrong place CMSs and app frameworks may introduce their own problems Make it easy for your people to do the right thing

33 Tool highlights Web Accessibility Toolbar Firebug W3C Validation Tools (HTML, CSS, MobileOK) Browsers (Opera small screen view) Know the accessibility features in each, e.g. know how to navigate via keyboard System accessibility (mag, high contrast)

34 For more info

35 Thank you!

36 Questions? Wendy Chisholm friendfeed.com/wendyc Matt May twitter.com/mattmay bestkungfu.com