Open and Accessible UI

Open and Accessible Mark Meeker

About Me Now... Previously...

Barriers “The Sum of Human Knowledge” Image Source: http://en.wikipedia.org/wiki/Britannica

NEW v Barriers “The Sum of Human Knowledge”

“ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee

“Browsers are the most hostile software engineering environment possible” - Douglas Crockford

http://churchcrunch.com/2009/01/25/above-the-fold-make-it-count/

Users will never use your site in the way you expect them to.

Barriers http://www.ﬂickr.com/photos/goldﬁshsnaps/2830876853/

Disabilities • Blind, low vision • color blindness • Limited mobility • Deaf, hearing impaired

Old Technology Release date: August 27, 2001

Accessibility Universality

Usability

Solutions http://www.ﬂickr.com/photos/82046831@N00/514212023/

W3C - WCAG 2.0

Semantic Markup • Use the HTML elements the way they were intended. • There are 91. How many can you name? • http://www.oneplusyou.com/bb/html_quiz

Progressive Enhancement • Separate HTML from CSS from JavaScript. • No in-line style or onclick attributes http://www.alistapart.com/articles/understandingprogressiveenhancement

Graded Browser Support • Not every browser is equal in capability. • Don’t serve what a browser can’t support. • Color TV versus Black and White TV • http://developer.yahoo.com/yui/articles/gbs/

Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/

http://tv.yahoo.com

http://sa.watson.ibm.com

JavaScript Libraries

“As far as the customer is concerned, the interface is the product.” - Jef Raskin

Redundant Inputs

Redundant Inputs • Offer multiple input options • GUI input and keyboard input • Enhance visual cues with text-based cues • Look to desktop interfaces for patterns • Seek out CLI developers for testing

Redundant Inputs http://netﬂix.com

Redundant Inputs http://developer.yahoo.com/yui/examples/

Linearization

Linearization http://ebookers.com

Linearization State/ Zip/Postal Examples Province Code No Yes United Kingdom, France, Germany Drop Down Yes United States, Canada, Australia Input Yes No No Ireland

Linearization http://basecamphq.com

Focus <input> <div> vs. <a> <td> <button> <img>

Real Link? http://ebookers.com

Real Checkbox? http://amazon.com

Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com

Real Checkbox? 123 456 789 http://amazon.com

Is that a button? http://apple.com

Where to Next? http://facebook.com

Updates

Updates http://ﬁnance.yahoo.com/

Set Focus on Update? http://orbitz.com

Set Focus on Update? <div id=”tripcost” tabindex=quot;-1quot;> // trip cost markup </div> onclick: document.getElementById('tripcost').focus();

Set Focus on Update? Screen Magniﬁers?

http://apple.com

Ajax is Everywhere http://blaugh.com/2006/08/21/ajax-makes-everything-better/

Interaction Patterns • Filters • Rating Widgets • Transitions • Sliders • Auto-complete • Micro-content • Calendar Pickers • Auto-ﬁll • Collapse • Expand / Collapse • Drag and Drop • Inline Validation • Lightboxes • Zoom • Yellow Fade • Navigation • Auto Update • Auto Refresh • Hover • Carrousel • Tabs • Inline edit

WAI-ARIA

Replicating the Desktop • <div> can be a button • <span> can be a slider • Need a better API • Leverage accessibility support in the OS

WAI - ARIA • W3C Web Accessibility Initiative Accessible Rich Internet Applications • Adds hooks into accessibility API of the platform • Deﬁne Roles and States so scripts can interact with AT APIs • http://www.w3.org/WAI/

Roles • link • application • combobox, options • presentation • checkbox • group • radio, radiogroup • grid, gridcell • button • tab, tablist, tabpanel • progressbar • list, listitem • slider • menu, menubar • spinbutton • toolbar • tree,treeitem • alert

States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow

ARIA <div role=quot;dialogquot; ... >

ARIA <li role=quot;treeitemquot; aria-expanded=quot;truequot; ... >

ARIA <div role=quot;sliderquot; aria-valuemin=quot;1quot; aria-valuemax=quot;5quot; aria-valuenow=quot;1”>

ARIA <div role=quot;region” aria-live=”polite” ... >

Resources

Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/

Testing http://developer.yahoo.com/yui/theater/

Assistive Technologies JAWS: Freedom Scientiﬁc Window-Eyes: GW Micro ZoomText: Ai Squared FireVox

Toolbars • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom

Toolbars http://ﬁrefox.cita.uiuc.edu/ http://www.paciellogroup.com/resources/wat-ie-about.html http://www.paciellogroup.com/resources/wat-about.html

Color Contrast • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php

“For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability

Questions?

Open and Accessible UI

by Mark Meeker on Apr 04, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Open and Accessible UI — Presentation Transcript