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