Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How To Build An Accessible Web Application - a11yBos

46,965 views

Published on

Preso for Boston Accessibility Conference, Sep 15, 2012.

Published in: Technology, Design
  • Be the first to comment

How To Build An Accessible Web Application - a11yBos

  1. 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. 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. 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. 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. 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. 6 HTML • Semantics • Lists • Headings • Title • Images • Unobtrusive • Forms • HTML5 • Tables@DennisL @WebAxe @EasyChirp
  7. 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. 8 HTML – Semantics cont. • POSH: Plain Ol’ Semantic HTML • KISS: Keep It Simple, Stupid@DennisL @WebAxe @EasyChirp
  9. 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. 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. 11 HTML – Semantics • “Naked” Easy Chirp@DennisL @WebAxe @EasyChirp
  12. 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. 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. 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. 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. 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. 17@DennisL @WebAxe @EasyChirp
  18. 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. 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. 20 HTML – Tables@DennisL @WebAxe @EasyChirp
  21. 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. 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. 23@DennisL @WebAxe @EasyChirp
  24. 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. 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. 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. 27 CSS & Design • Consistent layout & navigation • Display account name/info • Opportunity to logout • Provide search@DennisL @WebAxe @EasyChirp
  28. 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. 29@DennisL @WebAxe @EasyChirp
  30. 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. 31 CSS & Design • Easy Chirp’s links are keyboard accessible. ▫ And have clear visual focus.@DennisL @WebAxe @EasyChirp
  32. 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. 33@DennisL @WebAxe @EasyChirp
  34. 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. 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. 36@DennisL @WebAxe @EasyChirp
  37. 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. 38 JavaScript@DennisL @WebAxe @EasyChirp
  39. 39. 39 JavaScript@DennisL @WebAxe @EasyChirp
  40. 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. 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. 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. 43 ARIA - Landmark Roles role=“banner” role=“navigation” role=“main” role=“complementary” role=“search” role=“contentinfo”@DennisL @WebAxe @EasyChirp
  44. 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. 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. 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. 47 ARIA – Live Regions@DennisL @WebAxe @EasyChirp
  48. 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. 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. 50 Writing cont. • Alternative text • Transcriptions, captions • Legends and Labels (brief and succinct) • Define language (page level and inline)@DennisL @WebAxe @EasyChirp
  51. 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. 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. 53 Konquerer (Linux) Results • Robust Kindle (first release) IE6@DennisL @WebAxe @EasyChirp
  54. 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. 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. 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. 57 Questions?@DennisL @WebAxe @EasyChirp

×