Universal Design For Web Applications Wendy Chisholm & Matt May - - PowerPoint PPT Presentation

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

Universal Design for Web Applications. Wendy Chisholm & Matt May

ADAPTS

• Ability
• Device
• Age
• Preference
• Task
• Situation

Universal Design for Web Applications. Wendy Chisholm & Matt May

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

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

Universal Design for Web Applications. Wendy Chisholm & Matt May

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

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

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

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

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

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

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

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

Universal Design for Web Applications. Wendy Chisholm & Matt May

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

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

APIs, cont.

• UIA (User Interface Automation)

– Windows Vista – Windows Presentation Framework/Silverlight

Universal Design for Web Applications. Wendy Chisholm & Matt May

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

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

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

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

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

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

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
• wn problems
• Make it easy for your people to do the right thing

Universal Design for Web Applications. Wendy Chisholm & Matt May

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

For more info

Universal Design for Web Applications. Wendy Chisholm & Matt May

Thank you!

Universal Design for Web Applications. Wendy Chisholm & Matt May

Questions?

Wendy Chisholm

• chisholm.wendy@gmail.com
• friendfeed.com/wendyc

Matt May

• mattmay@gmail.com
• twitter.com/mattmay
• bestkungfu.com

Universal Design for Web Applications. Wendy Chisholm & Matt May