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

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

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

ADAPTS Ability Device Age Preference Task Situation

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

Ryan Turner - http://tinyurl.com/67slpq

Mobile and Accessibility Technique overlap Mobile 2.0 - ½ 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

Situational Disabilities Scenario: check email 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

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

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

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

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.

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

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

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 http://www.w3.org/tr/wcag20 W3C Mobile Web Best Practices http://www.w3.org/tr/mwbp10 Universal Design http://en.wikipedia.org/wiki/universal_design

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

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)

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

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

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

WAI-ARIA Direct accessibility Live regions, roles, states Maps IAccessible2 to Ajax Support being built into Mozilla, Dojo, JAWS and other products http://www.w3.org/wai/intro/aria.php

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

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

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

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

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)

For more info

Thank you!

Questions? Wendy Chisholm chisholm.wendy@gmail.com friendfeed.com/wendyc Matt May mattmay@gmail.com twitter.com/mattmay bestkungfu.com