How To Build An Accessible Web Application

How to Build an Accessible Web Application (Easy Chirp) Presented by Dennis Lembrée Accessibility DC Meet-up Martin Luther King (MLK) Library November 15, 2011

Agenda
Intro
Foundation
HTML
CSS [and Design]
JavaScript
ARIA
Writing
Tips
Results
Other Resources
Contact
Questions

Intro
Author of Easy Chirp.
Author of Web Axe.
Day job at PayPal.
Also worked for RIM, Ford, Google & Disney.
Live in Cupertino, CA with wife and 2 boys.

Foundations
HTML
CSS
JavaScript
ARIA
5 Layers of Web Accessibility by Dirk Ginader
+CSS for JavaScript

Foundations
Our example: Easy Chirp
Web-accessible and standards-compliant Twitter web application.
Winner of the AFB 2011 Access Award .
Winner of the 2009 Access IT @web2.0 Award .

HTML
Semantics
Accessibility
Graceful degradation
Easier to maintain
SEO
Content Order = Source Order = Tab Order

HTML
Headings
Forms
Tables
Lists
Use the title attribute sparingly.
Not HTML:
Put CSS & JavaScript in external files.

HTML
Headings Example
One H1.
Brief, succinct text.
Nicely nested.
Ensure inclusion of all sections of main content.

HTML
Validate.
Important, but don’t go overboard.
User experience is ultimate test.
Test semantics, order.
Turn off CSS.
Check doc structure.
Text-only browser such as Lynx.
Check often on different browsers and devices.

HTML
“ Naked” Easy Chirp

HTML
HTML5
More native power
Lighter code
Exciting
Currently browser and accessibility/AT issues
http://html5accessibility.com/
Use carefully and with fallbacks.

CSS & Design
Consistent layout & navigation.
Display account name/info.
Opportunity to logout.
Provide search.

CSS & Design
Relative sizing
Flexible width
Adaptive layout
For different screen resolutions
For different devices
Responsive Web Design (ALA)
media query
Next slide: Easy Chirp at 1024 x 768, 200%

CSS & Design
Sufficient text size.
16 PIXELS For Body Copy . Anything Less Is A Costly Mistake.
Make links focusable and visually clear.
Use :focus with :hover
Don’t remove the link underline in body copy.
Never do :focus { outline: 0; } outlinenone.com

CSS & Design
Easy Chirp’s links are keyboard accessible.
And have clear visual focus.

CSS & Design
Colors
Not for meaning alone.
Also use shapes as well as textual content.
Provide sufficient contrast.
Contrast Rebellion

CSS & Design
Hide content with discretion.
Labeling a form element that has meaning conveyed visually (phone number).
Providing headings where related content has meaning conveyed visually, but not otherwise, such as a menu.
“ skip-to” links (should be focusable and viewable for sighted keyboard users)
Instructions in special cases where interaction may be confusing to users of assistive technology.
When and How to Visually Hide Content

JavaScript
Progressive Enhancement, Unobtrusive
Libraries
YUI3
jQuery, jQueryUI
jQuery UI Accessibility Review by Everett Zufelt
Hijax (Jeremy Keith, 2006) .
Develop server-side first.
Then “hijack” and enhance behavior with JS.

JavaScript
focus() is your friend.
Managing focus is essential for accessibility as well as usability.
tabindex not dead.
tabindex=0 makes element tabbable
tabindex=-1 makes element tabbable only with JavaScript

JavaScript

JavaScript
Device Independence
Handlers:
If you use the onMouseOver and onMouseOut JavaScript handlers, you must also use onFocus and onBlur .
Do not use the double-click handler onDblClick .

ARIA
Accessible Rich Internet Applications (WAI-ARIA) 1.0 http://www.w3.org/TR/wai-aria/
Landmark Roles
States and Properties
Live Regions

ARIA - Landmark Roles
ARIA role attribute (HTML5 element):
banner (page header)
complementary (aside)
contentinfo (page footer)
main (div)
navigation (nav)
search (div or form)

ARIA - Landmark Roles role=“banner” role=“navigation” role=“contentinfo” role=“main” role=“complementary” role=“search”

ARIA - States and Properties
aria-describedby (property)
Kinda like longdesc.
aria-labelledby (property)
Kinda like form label.
aria-checked (state)
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-required (property)
Like HTML5 required.

ARIA - States and Properties
aria-expanded (state)
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed (boolean).
aria-valuemax, aria-valuemin (properties)
Defines the minimum and maximum values for a range widget.

ARIA – Live Regions
aria-live (property)
off, polite, assertive
aria-busy (state)
aria-atomic (property)
aria-relevant (property)
Great for Ajax!

More Ajax tips:
Show that something’s happening such as displaying a ‘spinner’.
Show yellow flash for visual indication of change.
JSON is easy and light.
Returning HTML can save a step.
Plan from beginning, implement at the end.

Writing
Page title (unique)
Headings
Descriptive link text (meaningful on own)
Abbreviations (abbr; acronym deprecated)
Alternative text
Transcriptions, captions
Legends and Labels (brief and succinct)
Define language (page level and inline)

Tips
Plan accessibility from the very start.
Small file sizes (low-band, mobile).
NVDA is free.
Error handling is important.
Screen readers use JavaScript.
Warn user when linking to anything other than an HTML page.

Results
Easy Chirp works with
All operating systems
All major browsers
No JavaScript, no CSS
Mobile devices (iPhone, Droid, Blackberry, etc.)
Screen readers
Tablets
Text-only (Lynx)
Kindle
Low-band connections

Results
Robust
Konquerer (Linux) IE6 Kindle (first release)

Results
“ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” [and now ARIA]
“ really easy with a Braille Display to use”
“ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!”

Results
More usable .
Better functionality with assistive technology such as text browsers & Braille devices.
Keyboard accessibility opens gate for many other types of input devices .
Providing clear, consistent content and navigation benefits those with cognitive impairments (and is more usable in general).
Use with a mobile device is possible.

Other Resources
Companies:
WebAIM, Yahoo, IBM, Adobe, Nomensa, Knowbility, Deque Systems, Paciello Group
People: too many, check Twitter!
#a11y on Twitter
Not a tweep? Try: Facebook.com/WebAxe
25 Ways To Make Your Site More Accessible
Attend events (like this one!)

Contact Details
Web Sites
www.EasyChirp.com
WebAxe.blogspot.com
www.DennisLembree.com
Twitter Accounts
@EasyChirp
@WebAxe
@DennisL
SlideShare
www.slideshare.net/webaxe/presentations

Questions?

http://webaxe.blogspot.com	1277
http://paper.li	61
http://feeds.feedburner.com	60
http://www.webaxe.org	18
http://us-w1.rockmelt.com	12
http://www.webaxe.blogspot.com	12
http://webaxe.blogspot.in	5
http://a0.twimg.com	4
http://webaxe.blogspot.com.au	4
http://apps.synaptive.net	3
https://twitter.com	3
http://webaxe.blogspot.ch	2
http://tweetedtimes.com	2
http://web-development-all.blogspot.com	1
http://bummerware.tumblr.com	1
https://si0.twimg.com	1
http://webcache.googleusercontent.com	1
http://webaxe.blogspot.co.uk	1
http://127.0.0.1	1
http://web-access.cmb.med.rug.nl	1
http://hardpodcafe.com	1
http://www.rss-one.com	1
http://translate.googleusercontent.com	1

How To Build An Accessible Web Application

by Web Axe

Accessibility

Categories

Upload Details

Usage Rights

23 Embeds 1,473

Statistics

How To Build An Accessible Web Application Presentation Transcript