1. 1
How to Build an Accessible
Web Application
Presented by Dennis Lembrée
#a11yBos | @a11y_bos
September 15, 2012
@DennisL @WebAxe @EasyChirp

2. 2
Agenda
• About @DennisL • ARIA
• Foundations • Writing
• HTML • Tips
▫ Headings, images, • Results
lists, forms, tables, • Other Resources
title, more • Contact
• CSS & Design • Questions
• JavaScript
@DennisL @WebAxe @EasyChirp

3. 3
About @DennisL
• Author of Easy Chirp.
• Author of Web Axe.
• Day job at PayPal.
• Also worked for Ford, Google, Disney and a few
start-ups.
• Live in Cupertino, CA with wife and 2 boys.
• I like drinking espresso, strumming guitar, and
motorcycling to work.
@DennisL @WebAxe @EasyChirp

4. 4
Foundations
1. HTML
2. CSS & Design
3. JavaScript
4. ARIA
5. +CSS for JavaScript
▫ 5 Layers of Web Accessibility
by Dirk Ginader
@DennisL @WebAxe @EasyChirp

5. 5
Foundations
• Our example:
Easy Chirp
▫ Web-accessible and standards-compliant Twitter
web application.
▫ Recipient of the AFB 2011 Access Award.
▫ Recipient of the 2009 Access IT @web2.0 Award.
▫ RNIB featured website December 2011.
@DennisL @WebAxe @EasyChirp

6. 6
HTML
• Semantics • Lists
• Headings • Title
• Images • Unobtrusive
• Forms • HTML5
• Tables
@DennisL @WebAxe @EasyChirp

7. 7
HTML – Semantics
• Semantics
▫ Accessibility
▫ Graceful degradation
▫ Future-proofing
▫ Easier to maintain (standard, consistency)
▫ SEO
• Content Order = Source Order = Tab Order
@DennisL @WebAxe @EasyChirp

8. 8
HTML – Semantics cont.
• POSH: Plain Ol’ Semantic HTML
• KISS: Keep It Simple, Stupid
@DennisL @WebAxe @EasyChirp

9. 9
HTML – Semantics cont.
• Validate.
▫ Important, but don’t go overboard.
▫ User experience is ultimate test.
▫ Tools
 W3C Markup Validation Service
 HTML Validator for Firefox
@DennisL @WebAxe @EasyChirp

10. 10
HTML – Semantics cont.
• Test semantics, order.
▫ Turn off CSS.
▫ Check doc structure with toolbar.
▫ Check content order with toolbar.
▫ Text-only browser such as Lynx.
▫ Tab through.
▫ Run Fangs.
@DennisL @WebAxe @EasyChirp

11. 11
HTML – Semantics
• “Naked” Easy Chirp
@DennisL @WebAxe @EasyChirp

12. 12
HTML – Headings
• One H1, for now.
• Brief, succinct text.
• Nicely nested.
• Ensure inclusion of all
sections of content.
▫ Or balance with
landmarks roles and
aria-labels
@DennisL @WebAxe @EasyChirp

13. 13
HTML – Images
• Provide alternative text for images.
• If decorative, use alt=“” (but better to use CSS)
• If content on page text, use alt=“”
• If image linked, alt text should describe purpose
of link.
• Be accurate and succinct.
• Don’t use phrases like “image of…”
• Avoid text in images
@DennisL @WebAxe @EasyChirp

14. 14
HTML – Forms
• Labels
▫ All form elements must have a label.
▫ Other methods such as title are not robust.
<label for="firstname">First Name</label>
<input name="firstname" id="firstname" type="text" />
@DennisL @WebAxe @EasyChirp

15. 15
HTML – Forms cont.
• Fieldsets
▫ Great for long forms and radio/checkbox groups.
▫ Screen readers will announce Legend text before
each label text.
<fieldset>
<legend>Name</legend>
<label for="firstname">First Name</label>
<input name="firstname" id="firstname" type="text" />
<label for="lastname">Last Name</label>
<input name="lastname" id="lastname" type="text" />
</fieldset>
@DennisL @WebAxe @EasyChirp

16. 16
HTML – Forms cont.
• Placeholder attribute is not an input label!
▫ May not be supported.
▫ Disappears when entering text.
▫ Placeholder is meant for hint/sample input; not
an elements name/label.
▫ Must not be required information.
▫ This technique is trendy.
▫ More: Placeholder is not a label!
@DennisL @WebAxe @EasyChirp

17. 17
@DennisL @WebAxe @EasyChirp

18. 18
HTML – Tables
• Provide caption (title of table).
• The summary attribute is no longer suggested.
▫ Original purpose of summary, define structure of
table, no longer needed as AT does this.
▫ Obsolete in HTML5.
▫ Difficult to maintain.
▫ Instead use aria-describedby with P.
@DennisL @WebAxe @EasyChirp

19. 19
HTML – Tables
• TH with scope for table header cells.
▫ Use for col and row.
• Avoid complex data tables if possible.
▫ If necessary, use id and headers attributes.
@DennisL @WebAxe @EasyChirp

20. 20
HTML – Tables
@DennisL @WebAxe @EasyChirp

21. 21
HTML – Lists
• Use list a element (ol/ul/dl) for lists.
• Do:
▫ <ol>
<li>First item here</li>
</ol>
• Do not:
▫ <div>1. &nbsp; First item here</div>
@DennisL @WebAxe @EasyChirp

22. 22
HTML – Title attribute
• No keyboard support (silly browser vendors!)
• No mouseover support on touch/mobile
• Supplementary information only
• Use sparingly
• DO NOT create redundant titles on links
• PS: Title is not a label either!
@DennisL @WebAxe @EasyChirp

23. 23
@DennisL @WebAxe @EasyChirp

24. 24
HTML – Unobtrusive
• Put CSS & JavaScript in external files as much as
possible.
• Load CSS at top; JavaScript at the bottom.
▫ Except libraries like Modernizr
@DennisL @WebAxe @EasyChirp

25. 25
HTML5
• HTML5
▫ More native power
▫ Lighter code
▫ Good support on mobile
▫ Exciting
• Currently browser and accessibility/AT issues
▫ http://html5accessibility.com/
• Use carefully and with fallbacks.
@DennisL @WebAxe @EasyChirp

26. 26
HTML5
• required and aria=required
• alt optional with figure/figcaption
• aria-describedby vs longdesc
▫ My 2-part article
Longdesc & Other Long Image Description Solutions
@DennisL @WebAxe @EasyChirp

27. 27
CSS & Design
• Consistent layout & navigation
• Display account name/info
• Opportunity to logout
• Provide search
@DennisL @WebAxe @EasyChirp

28. 28
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%
@DennisL @WebAxe @EasyChirp

29. 29
@DennisL @WebAxe @EasyChirp

30. 30
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 a:focus { outline: 0; }
outlinenone.com
@DennisL @WebAxe @EasyChirp

31. 31
CSS & Design
• Easy Chirp’s links are keyboard accessible.
▫ And have clear visual focus.
@DennisL @WebAxe @EasyChirp

32. 32
CSS & Design
• Colors
▫ Not for meaning alone.
 Also use shapes as well as textual content.
▫ Provide sufficient contrast.
 Contrast Rebellion
@DennisL @WebAxe @EasyChirp

33. 33
@DennisL @WebAxe @EasyChirp

34. 34
CSS & Design
• Hide content with discretion.
▫ Labeling a form element that has meaning conveyed
visually (search input).
▫ Providing headings where related content has meaning
conveyed visually, but not otherwise, such as a menu.
 Or balance with landmarks roles and aria-labels
​
▫ “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
@DennisL @WebAxe @EasyChirp

35. 35
JavaScript
• Progressive Enhancement, Unobtrusive
• Libraries
▫ YUI3
▫ jQuery, jQueryUI
 Still a work in progress.
 jQuery UI Accessibility Review by Everett Zufelt.
• Hijax (Jeremy Keith, 2006).
▫ Develop server-side first.
▫ Then “hijack” and enhance behavior with JS.
@DennisL @WebAxe @EasyChirp

36. 36
@DennisL @WebAxe @EasyChirp

37. 37
JavaScript
• focus()
▫ Managing focus is essential for accessibility as
well as usability.
• tabindex
▫ tabindex=0 makes element tabbable
▫ tabindex=-1 makes element tabbable only with
JavaScript
▫ Don’t use otherwise.
@DennisL @WebAxe @EasyChirp

38. 38
JavaScript
@DennisL @WebAxe @EasyChirp

39. 39
JavaScript
@DennisL @WebAxe @EasyChirp

40. 40
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.
@DennisL @WebAxe @EasyChirp

41. 41
ARIA
• Accessible Rich Internet Applications (WAI-
ARIA) 1.0
http://www.w3.org/TR/wai-aria/
▫ Landmark Roles
▫ States and Properties
▫ Live Regions
• Attributes that define user interface elements to
improve the accessibility and interoperability of
web content and applications.
@DennisL @WebAxe @EasyChirp

42. 42
ARIA - Landmark Roles
• ARIA role attribute (HTML5 element):
▫ banner (page header)
▫ complementary (aside)
▫ contentinfo (page footer)
▫ main (div)
▫ navigation (nav)
▫ search (div or form)
▫ form, application [rare]
@DennisL @WebAxe @EasyChirp

43. 43
ARIA - Landmark Roles
role=“banner”
role=“navigation” role=“main” role=“complementary”
role=“search”
role=“contentinfo”
@DennisL @WebAxe @EasyChirp

44. 44
ARIA - States and Properties
• aria-describedby (property)
▫ Like longdesc but on page.
• aria-labelledby (property)
▫ Like form label.
• aria-checked (state)
▫ Indicates the current "checked" state of
checkboxes, radio buttons, and other widgets.
• aria-required (property)
▫ Like HTML5 required.
@DennisL @WebAxe @EasyChirp

45. 45
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.
@DennisL @WebAxe @EasyChirp

46. 46
ARIA – Live Regions
• aria-live (property)
▫ off, polite, assertive
• aria-busy (state)
• aria-atomic (property)
• aria-relevant (property)
• Great for Ajax!
@DennisL @WebAxe @EasyChirp

47. 47
ARIA – Live Regions
@DennisL @WebAxe @EasyChirp

48. 48
ARIA – Live Regions
• 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.
@DennisL @WebAxe @EasyChirp

49. 49
Writing
• Page title (unique)
• Headings
• Descriptive link text (meaningful on own)
• Abbreviations
▫ Best to spell out in full at least once per page.
▫ Use abbr element; acronym deprecated.
@DennisL @WebAxe @EasyChirp

50. 50
Writing cont.
• Alternative text
• Transcriptions, captions
• Legends and Labels (brief and succinct)
• Define language (page level and inline)
@DennisL @WebAxe @EasyChirp

51. 51
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.
• Test often on different browsers and devices.
@DennisL @WebAxe @EasyChirp

52. 52
Results
• Easy Chirp works with
▫ All operating systems
▫ All major browsers
▫ No JavaScript, no CSS
▫ Variety of mobile devices and tablets
▫ Screen readers
▫ Text-only (Lynx)
▫ Kindle
▫ Low-band connections
@DennisL @WebAxe @EasyChirp

53. 53
Konquerer (Linux)
Results
• Robust
Kindle (first release)
IE6
@DennisL @WebAxe @EasyChirp

54. 54
Results
• More usable.
• Better functionality with assistive technology
such as screen readers & Braille output devices.
• Keyboard accessibility opens gate for many other
types of input devices.
• Future proof with web standards.
• Providing clear, consistent content and
navigation benefits those with cognitive
impairments (and is more usable in general).
• Use with a mobile device is possible.
@DennisL @WebAxe @EasyChirp

55. 55
Other Resources
• Companies:
▫ WebAIM, Yahoo, IBM, Adobe, Nomensa,
Knowbility, Deque Systems, Paciello Group
• People: too many to name, check Twitter!
▫ Hash tags such as #a11y
▫ Twitter lists
• Not a tweep? Try: Facebook.com/WebAxe
• 25 Ways To Make Your Site More Accessible
• Attend events (like this one!)
@DennisL @WebAxe @EasyChirp

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

57. 57
Questions?
@DennisL @WebAxe @EasyChirp