![Page 1: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/1.jpg)
Universal DesignFor Web Applications
Wendy Chisholm & Matt MayWeb 2.0 Expo
17 September 2008
![Page 2: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/2.jpg)
![Page 3: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/3.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 4: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/4.jpg)
ADAPTS
● Ability● Device● Age● Preference● Task● Situation
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 5: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/5.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 6: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/6.jpg)
Ryan Turner - http://tinyurl.com/67slpq
![Page 7: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/7.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 8: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/8.jpg)
![Page 9: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/9.jpg)
![Page 10: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/10.jpg)
![Page 11: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/11.jpg)
![Page 12: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/12.jpg)
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●
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 13: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/13.jpg)
Cognitive, Reading & Learning
●Dyslexia, ADHD, Low reading level ●ADHD - 4.4% of adults●Search engines - low-level interpretation of meaning●International or young readers
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 14: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/14.jpg)
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 ill-
fitting earbuds● Watching TV in a pub with the sound off
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 15: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/15.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 16: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/16.jpg)
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.”
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 17: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/17.jpg)
The people who brought you...
●Speech recognition●Speech synthesis●Closed captioning●On-screen keyboards●Alt text and title●Find as you type●Curb cuts
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 18: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/18.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 19: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/19.jpg)
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 Guidelineshttp://www.w3.org/TR/WCAG20
– W3C Mobile Web Best Practiceshttp://www.w3.org/TR/MWBP10
– Universal Design http://en.wikipedia.org/wiki/Universal_design
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 20: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/20.jpg)
A well-rounded approach
●Valid, semantic HTML●CSS●Unobtrusive script●Accessibility APIs
● Ajax/ARIA, ● Flash/IAccessible2, ● Silverlight/UIA
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 21: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/21.jpg)
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)
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 22: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/22.jpg)
APIs, cont.
● UIA (User Interface Automation)– Windows Vista– Windows Presentation Framework/Silverlight
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 23: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/23.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 24: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/24.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 25: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/25.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 26: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/26.jpg)
![Page 27: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/27.jpg)
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”
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 28: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/28.jpg)
![Page 29: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/29.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 30: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/30.jpg)
![Page 31: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/31.jpg)
Misc Other Things
● CMS Templates (e.g. WordPress)● User-generated Content/Metadata (e.g. Flickr)● APIs (e.g. Digg)
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 32: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/32.jpg)
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
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 33: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/33.jpg)
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)
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 34: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/34.jpg)
For more info
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 35: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/35.jpg)
Thank you!
Universal Design for Web Applications. Wendy Chisholm & Matt May
![Page 36: Universal Design - O'Reilly Mediaassets.en.oreilly.com/1/event/16/Universal Design...Inclusive Universe 1.0 A cloud of services and applications that ADAPTS to support an inclusive](https://reader033.vdocuments.mx/reader033/viewer/2022043019/5f3b1eb530e51530a84b78ec/html5/thumbnails/36.jpg)
Questions?
Wendy Chisholm● [email protected]● friendfeed.com/wendycMatt May● [email protected]● twitter.com/mattmay● bestkungfu.com
Universal Design for Web Applications. Wendy Chisholm & Matt May