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
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
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
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. 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
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
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
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
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
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
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
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
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
For long fieldsets: <p id="question">Fieldset legends may not...</p> <div role="radiogroup" aria-labelledby="question"> <input…><label…> </div>
You can add aria-label to differentiate multiple landmarks of the same type: <div role="navigation" aria-label="Main navigation">