1                How to Build an Accessible                     Web Application                              Presented by ...
2     Agenda      • About @DennisL            •   ARIA      • Foundations               •   Writing      • HTML           ...
3     About @DennisL      • Author of Easy Chirp.      • Author of Web Axe.      • Day job at PayPal.      • Also worked f...
4     Foundations      1.    HTML      2.    CSS & Design      3.    JavaScript      4.    ARIA      5.    +CSS for JavaSc...
5     Foundations      • Our example:        Easy Chirp          ▫ Web-accessible and standards-compliant Twitter         ...
6     HTML      •   Semantics           •   Lists      •   Headings            •   Title      •   Images              •   ...
7     HTML – Semantics      • Semantics          ▫   Accessibility          ▫   Graceful degradation          ▫   Future-p...
8     HTML – Semantics cont.      • POSH: Plain Ol’ Semantic HTML      • KISS: Keep It Simple, Stupid@DennisL @WebAxe @Eas...
9     HTML – Semantics cont.      • Validate.          ▫ Important, but don’t go overboard.          ▫ User experience is ...
10     HTML – Semantics cont.      • Test semantics, order.          ▫   Turn off CSS.          ▫   Check doc structure wi...
11     HTML – Semantics      • “Naked” Easy Chirp@DennisL @WebAxe @EasyChirp
12     HTML – Headings      •   One H1, for now.      •   Brief, succinct text.      •   Nicely nested.      •   Ensure in...
13     HTML – Images      • Provide alternative text for images.      • If decorative, use alt=“” (but better to use CSS) ...
14     HTML – Forms      • Labels          ▫ All form elements must have a label.          ▫ Other methods such as title a...
15     HTML – Forms cont.      • Fieldsets          ▫ Great for long forms and radio/checkbox groups.          ▫ Screen re...
16     HTML – Forms cont.      • Placeholder attribute is not an input label!          ▫ May not be supported.          ▫ ...
17@DennisL @WebAxe @EasyChirp
18     HTML – Tables      • Provide caption (title of table).      • The summary attribute is no longer suggested.        ...
19     HTML – Tables      • TH with scope for table header cells.          ▫ Use for col and row.      • Avoid complex dat...
20     HTML – Tables@DennisL @WebAxe @EasyChirp
21     HTML – Lists      • Use list a element (ol/ul/dl) for lists.      • Do:          ▫ <ol>              <li>First item...
22     HTML – Title attribute      •   No keyboard support (silly browser vendors!)      •   No mouseover support on touch...
23@DennisL @WebAxe @EasyChirp
24     HTML – Unobtrusive      • Put CSS & JavaScript in external files as much as        possible.      • Load CSS at top...
25     HTML5      • HTML5          ▫   More native power          ▫   Lighter code          ▫   Good support on mobile    ...
26     HTML5      • required and aria=required      • alt optional with figure/figcaption      • aria-describedby vs longd...
27     CSS & Design      •   Consistent layout & navigation      •   Display account name/info      •   Opportunity to log...
28     CSS & Design      • Relative sizing      • Flexible width      • Adaptive layout          ▫ For different screen re...
29@DennisL @WebAxe @EasyChirp
30     CSS & Design      • Sufficient text size.          ▫ 16 PIXELS For Body Copy. Anything Less Is A            Costly ...
31     CSS & Design      • Easy Chirp’s links are keyboard accessible.          ▫ And have clear visual focus.@DennisL @We...
32     CSS & Design      • Colors          ▫ Not for meaning alone.              Also use shapes as well as textual conte...
33@DennisL @WebAxe @EasyChirp
34     CSS & Design      • Hide content with discretion.        ▫ Labeling a form element that has meaning conveyed       ...
35     JavaScript      • Progressive Enhancement, Unobtrusive      • Libraries          ▫ YUI3          ▫ jQuery, jQueryUI...
36@DennisL @WebAxe @EasyChirp
37     JavaScript      • focus()          ▫ Managing focus is essential for accessibility as            well as usability....
38     JavaScript@DennisL @WebAxe @EasyChirp
39     JavaScript@DennisL @WebAxe @EasyChirp
40     JavaScript      • Device Independence      • Handlers:          ▫ If you use the onMouseOver and onMouseOut        ...
41     ARIA      • Accessible Rich Internet Applications (WAI-        ARIA) 1.0        http://www.w3.org/TR/wai-aria/     ...
42     ARIA - Landmark Roles      • ARIA role attribute (HTML5 element):          ▫   banner (page header)          ▫   co...
43     ARIA - Landmark Roles                                role=“banner”      role=“navigation”        role=“main”       ...
44     ARIA - States and Properties      • aria-describedby (property)          ▫ Like longdesc but on page.      • aria-l...
45     ARIA - States and Properties      • aria-expanded (state)          ▫ Indicates whether the element, or another     ...
46     ARIA – Live Regions      • aria-live (property)          ▫ off, polite, assertive      • aria-busy (state)      • a...
47     ARIA – Live Regions@DennisL @WebAxe @EasyChirp
48     ARIA – Live Regions      • More Ajax tips:          ▫ Show that something’s happening such as            displaying...
49     Writing      •   Page title (unique)      •   Headings      •   Descriptive link text (meaningful on own)      •   ...
50     Writing cont.      •   Alternative text      •   Transcriptions, captions      •   Legends and Labels (brief and su...
51     Tips      • Plan accessibility from the very start.      • Small file sizes (low-band, mobile).      • NVDA is free...
52     Results      • Easy Chirp works with        ▫ All operating systems        ▫ All major browsers        ▫ No JavaScr...
53                                   Konquerer (Linux)     Results      • Robust          Kindle (first release)          ...
54     Results      • More usable.      • Better functionality with assistive technology        such as screen readers & B...
55     Other Resources      • Companies:          ▫ WebAIM, Yahoo, IBM, Adobe, Nomensa,            Knowbility, Deque Syste...
56     Contact      • Web Sites        ▫ www.EasyChirp.com        ▫ WebAxe.blogspot.com        ▫ www.DennisLembree.com    ...
57     Questions?@DennisL @WebAxe @EasyChirp
Upcoming SlideShare
Loading in …5
×

How To Build An Accessible Web Application - a11yBos

46,627 views

Published on

Preso for Boston Accessibility Conference, Sep 15, 2012.

Published in: Technology, Design
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
46,627
On SlideShare
0
From Embeds
0
Number of Embeds
3,895
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • http://a11y-bos.org/
  • http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility
  • http://validator.w3.org/ https://addons.mozilla.org/en-US/firefox/addon/html-validator/
  • http://validator.w3.org/ https://addons.mozilla.org/en-US/firefox/addon/html-validator/
  • For long fieldsets: &lt;p id=&quot;question&quot;&gt;Fieldset legends may not...&lt;/p&gt; &lt;div role=&quot;radiogroup&quot; aria-labelledby=&quot;question&quot;&gt; &lt;input…&gt;&lt;label…&gt; &lt;/div&gt;
  • http://webaxe.blogspot.com/2012/06/placeholder-attribute-is-not-label.html
  • http://html5accessibility.com/
  • http://dev.w3.org/html5/alt-techniques/#m6 http://designfestival.com/longdesc-and-other-long-image-description-solutions-part-1-the-issues/
  • http://browsershots.org/ http://www.alistapart.com/articles/responsive-web-design/
  • http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ http://outlinenone.com/
  • Text links remain. And sufficient text size.
  • http://contrastrebellion.com/
  • http://designfestival.com/when-and-how-to-visually-hide-content/
  • http://yuilibrary.com/ http://zufelt.ca/blog/jquery-ui-accessibility-review-wrapup http://domscripting.com/presentations/xtech2006/
  • Focus() is your friend!
  • http://www.w3.org/TR/wai-aria/
  • http://www.html5accessibility.com/tests/landmarks.html
  • You can add aria-label to differentiate multiple landmarks of the same type: &lt;div role=&quot;navigation&quot; aria-label=&quot;Main navigation&quot;&gt;
  • http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
  • Any browser-based user-agent!
  • http://sarahebourne.posterous.com/accessible-twitter-on-the-kindle
  • https://twitter.com/i/#!/search/%23a11y https://twitter.com/webaxe/web-accessibility-3 http://www.webhostingsearch.com/articles/25-ways-to-make-your-site-more-accessible.php
  • 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

    ×