open and accessible ui
DESCRIPTION
From Flourish 2009 conference in Chicago (http://flourishconf.com). Discussing the value of accessibility and universality for web UIs.TRANSCRIPT
![Page 1: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/1.jpg)
Open and Accessible
Mark Meeker
![Page 2: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/2.jpg)
About Me
Now...
Previously...
![Page 3: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/3.jpg)
Image Source: http://en.wikipedia.org/wiki/Britannica
Barriers“The Sum of Human Knowledge”
![Page 4: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/4.jpg)
Barriers“The Sum of Human Knowledge”NEWv
![Page 5: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/5.jpg)
“ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
- Tim Berners-Lee
![Page 6: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/6.jpg)
![Page 7: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/7.jpg)
![Page 8: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/8.jpg)
![Page 9: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/9.jpg)
“Browsers are the most hostile software engineering
environment possible”- Douglas Crockford
![Page 10: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/10.jpg)
http://churchcrunch.com/2009/01/25/above-the-fold-make-it-count/
![Page 11: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/11.jpg)
Users will never use your site in theway you expect them to.
![Page 12: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/12.jpg)
Barriershttp://www.flickr.com/photos/goldfishsnaps/2830876853/
![Page 13: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/13.jpg)
Disabilities
• Blind, low vision
• color blindness
• Limited mobility
• Deaf, hearing impaired
![Page 14: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/14.jpg)
![Page 15: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/15.jpg)
Old Technology
Release date: August 27, 2001
![Page 16: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/16.jpg)
Accessibility
Universality
![Page 17: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/17.jpg)
Usability
![Page 18: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/18.jpg)
Solutionshttp://www.flickr.com/photos/82046831@N00/514212023/
![Page 19: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/19.jpg)
W3C - WCAG 2.0
![Page 20: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/20.jpg)
![Page 21: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/21.jpg)
• Use the HTML elements the way they were intended.
• There are 91. How many can you name?
• http://www.oneplusyou.com/bb/html_quiz
Semantic Markup
![Page 22: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/22.jpg)
Progressive Enhancement
• Separate HTML from CSS from JavaScript.
• No in-line style or onclick attributes
http://www.alistapart.com/articles/understandingprogressiveenhancement
![Page 23: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/23.jpg)
• 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
![Page 24: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/24.jpg)
Graded Browser Support
http://developer.yahoo.com/yui/articles/gbs/
![Page 29: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/29.jpg)
JavaScript Libraries
![Page 30: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/30.jpg)
“As far as the customer is concerned, the interface
is the product.”- Jef Raskin
![Page 31: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/31.jpg)
Redundant Inputs
![Page 32: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/32.jpg)
• 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
![Page 34: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/34.jpg)
http://developer.yahoo.com/yui/examples/
Redundant Inputs
![Page 35: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/35.jpg)
Linearization
![Page 37: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/37.jpg)
State/Province
Zip/Postal Code
Examples
No Yes United Kingdom, France, Germany
Drop Down Yes United States, Canada, Australia
Input Yes
No No Ireland
Linearization
![Page 39: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/39.jpg)
Focus
![Page 40: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/40.jpg)
Focus
vs.
<input>
<a>
<button>
<div>
<td>
<img>
![Page 42: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/42.jpg)
http://amazon.com
Real Checkbox?
![Page 43: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/43.jpg)
http://amazon.com
Real Checkbox?
1 2 3
4 5 6
7 8 9
![Page 44: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/44.jpg)
http://amazon.com
Real Checkbox?
1 2 34 5 67 8 9
![Page 45: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/45.jpg)
http://apple.com
Is that a button?
![Page 46: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/46.jpg)
Where to Next?
http://facebook.com
![Page 47: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/47.jpg)
Updates
![Page 48: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/48.jpg)
Updates
http://finance.yahoo.com/
![Page 49: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/49.jpg)
Updates
http://finance.yahoo.com/
![Page 50: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/50.jpg)
Set Focus on Update?
http://orbitz.com
![Page 51: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/51.jpg)
<div id=”tripcost” tabindex="-1">// trip cost markup
</div>
onclick:document.getElementById('tripcost').focus();
Set Focus on Update?
![Page 52: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/52.jpg)
Set Focus on Update?
Screen Magnifiers?
![Page 53: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/53.jpg)
![Page 54: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/54.jpg)
![Page 55: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/55.jpg)
![Page 57: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/57.jpg)
http://blaugh.com/2006/08/21/ajax-makes-everything-better/
Ajax is Everywhere
![Page 58: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/58.jpg)
• Filters• Transitions• Auto-complete• Calendar Pickers• Collapse• Drag and Drop• Lightboxes• Yellow Fade• Auto Update• Hover• Tabs
• Rating Widgets• Sliders• Micro-content• Auto-fill• Expand / Collapse• Inline Validation• Zoom• Navigation• Auto Refresh• Carrousel• Inline edit
Interaction Patterns
![Page 59: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/59.jpg)
WAI-ARIA
![Page 60: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/60.jpg)
• <div> can be a button
• <span> can be a slider
• Need a better API
• Leverage accessibility support in the OS
Replicating the Desktop
![Page 61: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/61.jpg)
• W3C Web Accessibility InitiativeAccessible Rich Internet Applications
• Adds hooks into accessibility API of the platform
• Define Roles and States so scripts can interact with AT APIs
• http://www.w3.org/WAI/
WAI - ARIA
![Page 62: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/62.jpg)
• link• combobox, options• checkbox• radio, radiogroup• button• progressbar• slider• spinbutton• tree,treeitem
• application• presentation• group• grid, gridcell• tab, tablist, tabpanel• list, listitem• menu, menubar• toolbar• alert
Roles
![Page 63: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/63.jpg)
States
• checked
• disabled
• readonly
• expanded
• valuemin, valuemax, valuenow
![Page 64: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/64.jpg)
ARIA
<div role="dialog" ... >
![Page 65: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/65.jpg)
ARIA
<div role="dialog" ... >
![Page 66: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/66.jpg)
ARIA
<li role="treeitem" aria-expanded="true" ... >
![Page 67: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/67.jpg)
ARIA
<div role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="1”>
![Page 68: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/68.jpg)
ARIA
<div role="region” aria-live=”polite” ... >
![Page 69: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/69.jpg)
Resources
![Page 70: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/70.jpg)
Testing
Just Ask: Integrating Accessibility Throughout Design
Shawn Lawton Henry
http://www.uiaccess.com/accessucd/
![Page 71: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/71.jpg)
Testing
http://developer.yahoo.com/yui/theater/
![Page 72: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/72.jpg)
Assistive Technologies
JAWS: Freedom Scientific
Window-Eyes: GW Micro
ZoomText: Ai Squared
FireVox
![Page 73: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/73.jpg)
• Lists of headings
• Text equivalents for images
• Disable scripting, mouse events
• Validation and testing tools
• Zoom
Toolbars
![Page 74: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/74.jpg)
Toolbars
http://firefox.cita.uiuc.edu/
http://www.paciellogroup.com/resources/wat-ie-about.html
http://www.paciellogroup.com/resources/wat-about.html
![Page 75: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/75.jpg)
• Colour Analyzer: http://juicystudio.com/services/colourcontrast.php
Color Contrast
![Page 76: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/76.jpg)
“For most people, technology makes things easier. For people with disabilities, technology makes things possible.”
- President’s Council on Disability
![Page 77: Open and Accessible UI](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559929b41a28ab3b298b4743/html5/thumbnails/77.jpg)
Questions?