Dennis Lembrée gave a presentation on building accessible web applications. He covered topics like HTML semantics and structure, CSS design principles, JavaScript accessibility, ARIA roles and properties, and writing for accessibility. He used his own web application Easy Chirp as an example of an accessible site and discussed how it works across different browsers, devices, and assistive technologies.

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