How To Build An Accessible Web Application


Published on

Presentation slides for Accessibility DC Meetup, November 15, 2011.

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Thanks to John F Croston III (@jfc3)
  • Text links remain. And sufficient text size.
  • Any browser-based user-agent!
  • How To Build An Accessible Web Application

    1. 1. 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
    2. 2. Agenda <ul><li>Intro </li></ul><ul><li>Foundation </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS [and Design] </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>ARIA </li></ul></ul><ul><li>Writing </li></ul><ul><li>Tips </li></ul><ul><li>Results </li></ul><ul><li>Other Resources </li></ul><ul><li>Contact </li></ul><ul><li>Questions </li></ul>
    3. 3. Intro <ul><li>Author of Easy Chirp. </li></ul><ul><li>Author of Web Axe. </li></ul><ul><li>Day job at PayPal. </li></ul><ul><li>Also worked for RIM, Ford, Google & Disney. </li></ul><ul><li>Live in Cupertino, CA with wife and 2 boys. </li></ul>
    4. 4. Foundations <ul><li>HTML </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul><ul><li>ARIA </li></ul><ul><li>5 Layers of Web Accessibility by Dirk Ginader </li></ul><ul><ul><li>+CSS for JavaScript </li></ul></ul>
    5. 5. Foundations <ul><li>Our example: Easy Chirp </li></ul><ul><ul><li>Web-accessible and standards-compliant Twitter web application. </li></ul></ul><ul><ul><li>Winner of the AFB 2011 Access Award . </li></ul></ul><ul><ul><li>Winner of the 2009 Access IT @web2.0 Award . </li></ul></ul>
    6. 6. HTML <ul><li>Semantics </li></ul><ul><ul><li>Accessibility </li></ul></ul><ul><ul><li>Graceful degradation </li></ul></ul><ul><ul><li>Easier to maintain </li></ul></ul><ul><ul><li>SEO </li></ul></ul><ul><li>Content Order = Source Order = Tab Order </li></ul>
    7. 7. HTML <ul><li>Headings </li></ul><ul><li>Forms </li></ul><ul><li>Tables </li></ul><ul><li>Lists </li></ul><ul><li>Use the title attribute sparingly. </li></ul><ul><li>Not HTML: </li></ul><ul><ul><li>Put CSS & JavaScript in external files. </li></ul></ul>
    8. 8. HTML <ul><li>Headings Example </li></ul><ul><ul><li>One H1. </li></ul></ul><ul><ul><li>Brief, succinct text. </li></ul></ul><ul><ul><li>Nicely nested. </li></ul></ul><ul><ul><li>Ensure inclusion of all sections of main content. </li></ul></ul>
    9. 9. HTML <ul><li>Validate. </li></ul><ul><ul><li>Important, but don’t go overboard. </li></ul></ul><ul><ul><li>User experience is ultimate test. </li></ul></ul><ul><li>Test semantics, order. </li></ul><ul><ul><li>Turn off CSS. </li></ul></ul><ul><ul><li>Check doc structure. </li></ul></ul><ul><ul><li>Text-only browser such as Lynx. </li></ul></ul><ul><li>Check often on different browsers and devices. </li></ul>
    10. 10. HTML <ul><li>“ Naked” Easy Chirp </li></ul>
    11. 11. HTML <ul><li>HTML5 </li></ul><ul><ul><li>More native power </li></ul></ul><ul><ul><li>Lighter code </li></ul></ul><ul><ul><li>Exciting </li></ul></ul><ul><li>Currently browser and accessibility/AT issues </li></ul><ul><ul><li> </li></ul></ul><ul><li>Use carefully and with fallbacks. </li></ul>
    12. 12. CSS & Design <ul><li>Consistent layout & navigation. </li></ul><ul><li>Display account name/info. </li></ul><ul><li>Opportunity to logout. </li></ul><ul><li>Provide search. </li></ul>
    13. 13. CSS & Design <ul><li>Relative sizing </li></ul><ul><li>Flexible width </li></ul><ul><li>Adaptive layout </li></ul><ul><ul><li>For different screen resolutions </li></ul></ul><ul><ul><li>For different devices </li></ul></ul><ul><ul><li>Responsive Web Design (ALA) </li></ul></ul><ul><ul><ul><li>media query </li></ul></ul></ul><ul><li>Next slide: Easy Chirp at 1024 x 768, 200% </li></ul>
    14. 14.
    15. 15. CSS & Design <ul><li>Sufficient text size. </li></ul><ul><ul><li>16 PIXELS For Body Copy . Anything Less Is A Costly Mistake. </li></ul></ul><ul><li>Make links focusable and visually clear. </li></ul><ul><ul><li>Use :focus with :hover </li></ul></ul><ul><ul><li>Don’t remove the link underline in body copy. </li></ul></ul><ul><ul><li>Never do :focus { outline: 0; } </li></ul></ul>
    16. 16. CSS & Design <ul><li>Easy Chirp’s links are keyboard accessible. </li></ul><ul><ul><li>And have clear visual focus. </li></ul></ul>
    17. 17. CSS & Design <ul><li>Colors </li></ul><ul><ul><li>Not for meaning alone. </li></ul></ul><ul><ul><ul><li>Also use shapes as well as textual content. </li></ul></ul></ul><ul><ul><li>Provide sufficient contrast. </li></ul></ul><ul><ul><ul><li>Contrast Rebellion </li></ul></ul></ul>
    18. 18.
    19. 19. CSS & Design <ul><li>Hide content with discretion. </li></ul><ul><ul><li>Labeling a form element that has meaning conveyed visually (phone number). </li></ul></ul><ul><ul><li>Providing headings where related content has meaning conveyed visually, but not otherwise, such as a menu. </li></ul></ul><ul><ul><li>“ skip-​​to” links (should be focusable and viewable for sighted keyboard users) </li></ul></ul><ul><ul><li>Instructions in special cases where interaction may be confusing to users of assistive technology. </li></ul></ul><ul><ul><li>When and How to Visually Hide Content </li></ul></ul>
    20. 20. JavaScript <ul><li>Progressive Enhancement, Unobtrusive </li></ul><ul><li>Libraries </li></ul><ul><ul><li>YUI3 </li></ul></ul><ul><ul><li>jQuery, jQueryUI </li></ul></ul><ul><ul><ul><li>jQuery UI Accessibility Review by Everett Zufelt </li></ul></ul></ul><ul><li>Hijax (Jeremy Keith, 2006) . </li></ul><ul><ul><li>Develop server-side first. </li></ul></ul><ul><ul><li>Then “hijack” and enhance behavior with JS. </li></ul></ul>
    21. 21.
    22. 22. JavaScript <ul><li>focus() is your friend. </li></ul><ul><ul><li>Managing focus is essential for accessibility as well as usability. </li></ul></ul><ul><li>tabindex not dead. </li></ul><ul><ul><li>tabindex=0 makes element tabbable </li></ul></ul><ul><ul><li>tabindex=-1 makes element tabbable only with JavaScript </li></ul></ul>
    23. 23. JavaScript
    24. 24. JavaScript
    25. 25. JavaScript <ul><li>Device Independence </li></ul><ul><li>Handlers: </li></ul><ul><ul><li>If you use the onMouseOver and onMouseOut JavaScript handlers, you must also use onFocus and onBlur . </li></ul></ul><ul><ul><li>Do not use the double-click handler onDblClick . </li></ul></ul>
    26. 26. ARIA <ul><li>Accessible Rich Internet Applications (WAI-ARIA) 1.0 </li></ul><ul><ul><li>Landmark Roles </li></ul></ul><ul><ul><li>States and Properties </li></ul></ul><ul><ul><li>Live Regions </li></ul></ul>
    27. 27. ARIA - Landmark Roles <ul><li>ARIA role attribute (HTML5 element): </li></ul><ul><ul><li>banner (page header) </li></ul></ul><ul><ul><li>complementary (aside) </li></ul></ul><ul><ul><li>contentinfo (page footer) </li></ul></ul><ul><ul><li>main (div) </li></ul></ul><ul><ul><li>navigation (nav) </li></ul></ul><ul><ul><li>search (div or form) </li></ul></ul>
    28. 28. ARIA - Landmark Roles role=“banner” role=“navigation” role=“contentinfo” role=“main” role=“complementary” role=“search”
    29. 29. ARIA - States and Properties <ul><li>aria-describedby (property) </li></ul><ul><ul><li>Kinda like longdesc. </li></ul></ul><ul><li>aria-labelledby (property) </li></ul><ul><ul><li>Kinda like form label. </li></ul></ul><ul><li>aria-checked (state) </li></ul><ul><ul><li>Indicates the current &quot;checked&quot; state of checkboxes, radio buttons, and other widgets. </li></ul></ul><ul><li>aria-required (property) </li></ul><ul><ul><li>Like HTML5 required. </li></ul></ul>
    30. 30. ARIA - States and Properties <ul><li>aria-expanded (state) </li></ul><ul><ul><li>Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed (boolean). </li></ul></ul><ul><li>aria-valuemax, aria-valuemin (properties) </li></ul><ul><ul><li>Defines the minimum and maximum values for a range widget. </li></ul></ul>
    31. 31. ARIA – Live Regions <ul><li>aria-live (property) </li></ul><ul><ul><li>off, polite, assertive </li></ul></ul><ul><li>aria-busy (state) </li></ul><ul><li>aria-atomic (property) </li></ul><ul><li>aria-relevant (property) </li></ul><ul><li>Great for Ajax! </li></ul>
    32. 32. ARIA – Live Regions
    33. 33. ARIA – Live Regions <ul><li>More Ajax tips: </li></ul><ul><ul><li>Show that something’s happening such as displaying a ‘spinner’. </li></ul></ul><ul><ul><li>Show yellow flash for visual indication of change. </li></ul></ul><ul><ul><li>JSON is easy and light. </li></ul></ul><ul><ul><li>Returning HTML can save a step. </li></ul></ul><ul><ul><li>Plan from beginning, implement at the end. </li></ul></ul>
    34. 34. Writing <ul><li>Page title (unique) </li></ul><ul><li>Headings </li></ul><ul><li>Descriptive link text (meaningful on own) </li></ul><ul><li>Abbreviations (abbr; acronym deprecated) </li></ul><ul><li>Alternative text </li></ul><ul><li>Transcriptions, captions </li></ul><ul><li>Legends and Labels (brief and succinct) </li></ul><ul><li>Define language (page level and inline) </li></ul>
    35. 35. Tips <ul><li>Plan accessibility from the very start. </li></ul><ul><li>Small file sizes (low-band, mobile). </li></ul><ul><li>NVDA is free. </li></ul><ul><li>Error handling is important. </li></ul><ul><li>Screen readers use JavaScript. </li></ul><ul><li>Warn user when linking to anything other than an HTML page. </li></ul>
    36. 36. Results <ul><li>Easy Chirp works with </li></ul><ul><ul><li>All operating systems </li></ul></ul><ul><ul><li>All major browsers </li></ul></ul><ul><ul><li>No JavaScript, no CSS </li></ul></ul><ul><ul><li>Mobile devices (iPhone, Droid, Blackberry, etc.) </li></ul></ul><ul><ul><li>Screen readers </li></ul></ul><ul><ul><li>Tablets </li></ul></ul><ul><ul><li>Text-only (Lynx) </li></ul></ul><ul><ul><li>Kindle </li></ul></ul><ul><ul><li>Low-band connections </li></ul></ul>
    37. 37. Results <ul><li>Robust </li></ul>Konquerer (Linux) IE6 Kindle (first release)
    38. 38. Results <ul><li>“ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” [and now ARIA] </li></ul><ul><li>“ really easy with a Braille Display to use” </li></ul><ul><li>“ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!” </li></ul>
    39. 39. Results <ul><li>More usable . </li></ul><ul><li>Better functionality with assistive technology such as text browsers & Braille devices. </li></ul><ul><li>Keyboard accessibility opens gate for many other types of input devices . </li></ul><ul><li>Providing clear, consistent content and navigation benefits those with cognitive impairments (and is more usable in general). </li></ul><ul><li>Use with a mobile device is possible. </li></ul>
    40. 40. Other Resources <ul><li>Companies: </li></ul><ul><ul><li>WebAIM, Yahoo, IBM, Adobe, Nomensa, Knowbility, Deque Systems, Paciello Group </li></ul></ul><ul><li>People: too many, check Twitter! </li></ul><ul><li>#a11y on Twitter </li></ul><ul><li>Not a tweep? Try: </li></ul><ul><li>25 Ways To Make Your Site More Accessible </li></ul><ul><li>Attend events (like this one!) </li></ul>
    41. 41. Contact Details <ul><li>Web Sites </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Twitter Accounts </li></ul><ul><ul><li>@EasyChirp </li></ul></ul><ul><ul><li>@WebAxe </li></ul></ul><ul><ul><li>@DennisL </li></ul></ul><ul><li>SlideShare </li></ul><ul><ul><li> </li></ul></ul>
    42. 42. Questions?