Mando Front-End Accessibility Training

620 views

Published on

Front-End Accessibility Training document for Mando Group

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

No Downloads
Views
Total views
620
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mando Front-End Accessibility Training

  1. 1. A11Y* Accessibility and FED *Accessibility is often abbreviated to A11y. Where the number 11 refers to the number of letters omitted.
  2. 2. WHO?
  3. 3. WEB STANDARDS & PROGRESSIVE ENHANCEMENT
  4. 4. WEB STANDARDS & PROGRESSIVE ENHANCEMENT Content A layered methodology that allows everyone to access basic content and functionality HTML & WAI-ARIA CSS JavaScript & HTML CSS for JavaScript WAI-ARIA for Javascript
  5. 5. HTML & WAI-ARIA
  6. 6. CONSIDER THE MARK-UP ORDER
  7. 7. BYPASS BLOCKS & ARIA LANDMARK ROLES
  8. 8. THERE CAN BE ONLY ONE <h1> …and don’t put it round the logo
  9. 9. THE TITLE ATTRIBUTE WILL SAVE ME…RIGHT? <a href="www.mandogroup.com" title="The best website ever"> No …except on forms.
  10. 10. SEMANTICS Better! Not very helpful <ul> <li class=‚h1‛>Things I love:</li> <li>Sweets</li> <li>Holidays</li> <li>New socks</li> <h1>Things I Love:</h1> <ul> <li>Sweets</li> <li>Holidays</li> <li>New socks</li> </ul> </ul>
  11. 11. ALTERNATIVE METHODS OF NAVIGATION Headings Links
  12. 12. MEANINGFUL LINKS How would you code up these icons? Better! Empty <a> will fail validation <ul> <ul> <li class=‚i-linkedin"> <a href="http://www.linkedin.com"></a> </li> <li class=‚i-twitter"> <a href="https://twitter.com"></a> </li> </ul> <li class="i-linkedin"> <a href=" http://www.linkedin.com"> <span>LinkedIn</span> </a> </li> <li class="i-twitter"> <a href="https://www.twitter.com"> <span>Twitter</span> </a> </li> </ul>
  13. 13. FIELDSET, LEGEND, LABEL Not very helpful <h1>Contact Us</h1> <p> Surname: <input type="text" id=‛surname‛> </p> <p> Sign up for newsletter <input name=‚opt-in" id=‚opt-in‚ type=‚checkbox" value=‚opt-in" /> </p> <input type="submit" name=‚submit" value="submit‚> Better! <fieldset> <legend>Contact Us</legend> <ol> <li> <label for="surname">Surname: </label> <input type="text" id=‛surname‛> </li> <li> <input name=‚opt-in" id=‚opt-in" type=‚checkbox" value=‚opt-in"> <label for=‚opt-in">Sign up for newsletter</label> </li> <li> <input type="submit" name=‚submit" value="submit‚> </li> </ol> </fieldset>
  14. 14. PROVIDE INSTRUCTIONS aria-described-by <label for="birthdate">Date of Birth:</label> <input type="text" name="birthdate" id="birthdate" aria-describedby="dateformat agerule"> <span id="dateformat">(dd/mm/yyyy)</span> <span id="agerule"> Note: If under the age of 18 permission of parent or guardian will be required </span> aria-labelled-by <h2 id="title-FA1"> Dead souls: The perils of memory leaks by Gunther von Westendorff </h2> <p>11 places left</p> <p> </p> <input type="checkbox" id="FA1" aria-labelledby="title-FA1 FA1-att"> <label id="FA1-att" for="FA1">Attend</label>
  15. 15. FORM ERRORS 1. Let the user know there is an error; 2. Let the user access the error, and provide instructions on how to fix it; 3. Allow the user to resubmit the form. <div role="alert" aria-live="assertive" aria-atomic="true"> <p> There were 2 errors in the information submitted. </p> <ol> <li>Please <a href="#firstname">enter your first name</a>. </li> <li>Please <a href="#lastname">enter your last name</a>. </li> </ol> </div>
  16. 16. WAI-ARIA FOR FROM ERRORS alert Contents are spoken when alert is made visible. aria-live=‚assertive‛ Data will interrupt the screen reader, but may not do so immediately. aria-atomic=‚true‛ Presents the region as a whole when changes are detected
  17. 17. START WITH THE SOURCE • Consider the Mark-up order • Bypass blocks (aka skip links) • WAI-ARIA landmark roles • Unique <title> • Unique <h1> • Add hierarchical heading structure
  18. 18. START WITH THE SOURCE • Use most appropriate elements • Links make sense out of context • Don’t duplicate links • Code tables & forms correctly • ARIA roles & attribute where useful • Validate
  19. 19. CSS
  20. 20. DON’T LET CSS BE A BARRIER
  21. 21. HIDING TEXT OFF SCREEN
  22. 22. USE DISPLAY:NONE WITH CAUTION Hmm ok, but what if it is a link? .hide { position: absolute !important; top: -9999px !important; left: -9999px !important; } Better! .invisible { clip: rect(1px, 1px, 1px, 1px); border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; padding:0 !important; position: absolute !important; }
  23. 23. IMPLEMENT NO-JS LAYOUT newcorsa.co.uk squarespace.com
  24. 24. TEXT OVERLAPS WHEN RESIZED X2
  25. 25. MAKE :FOCUS OBVIOUS Not very helpful Better!
  26. 26. CHECK COLOUR CONTRAST FOR AA
  27. 27. CHECK IMAGES OFF
  28. 28. CSS • Implement non-js layout • Use display:none with caution • :focus in addition to :hover • Check font-size +2 • Check colour contrast • Check with images off
  29. 29. JAVASCRIPT
  30. 30. FEATURE DETECTION Browser detection if ($('html').hasClass(‘ie8')) { .thingy.slideToggle(); return false; } Better! if (!Modernizr.input.placeholder) { // fall back for no placeholder support } -------------------------------------------------if (Modernizr.csstransitions) { .thingy.toggleClass('active'); return false; } else { // fall back for no csstransition support .thingy.slideToggle(); return false; }
  31. 31. VALID & UPDATED JS GENERATED HTML No JS <h4> Get in touch </h4> JS <button> Get in touch </button> -----------------------<button> Close </button>
  32. 32. KEYBOARD TRAPS A “keyboard trap” occurs when a person who uses a keyboard cannot move focus away from an interactive element or control using the keyboard alone. Potential barriers: • Flash • Silverlight • Share this • Mouse only JS event handlers
  33. 33. JS EVENT HANDLER MAPPINGS Better! Not very helpful onmousedown onkeydown onmouseup onkeyup onclick* onkeypress * (works in most cases, but be careful! onkeypress more reliable) (fires an event as soon as any key is pressed – so use with caution) onmouseover onfocus onmouseout onblur
  34. 34. EVENT HANDLER BEST PRACTISES • Avoid onDblclick • Avoid mapping mouse co-ordinates • Avoid onChange on drop-down boxes • Don’t use createEvent(), initEvent(), and dispatchEvent() to give an element focus. Use element.focus() • Don’t use named anchors or inline code. E.g. <a href="#" onClick="javascript:window.open()>
  35. 35. JAVASCRIPT • Feature detection • Valid JS generated HTML • Update state labels (open/close) • Check keyboard access to all content • Check no keyboard traps
  36. 36. CSS FOR JAVASCRIPT
  37. 37. FEATURE DETECTION Html with modernizr.js <html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> CSS .background-class {} /* Shared properties for detected features */ .svg .background-class {background:url(img/graphic.svg);} /* SVG feature property */ .no-svg .background-class {background:url(img/graphic.png);} /* PNG feature property */
  38. 38. CSS FOR JAVASCRIPT • Contextual CSS html=‚js‛ • Prevent flicker as js loads
  39. 39. WAI-ARIA FOR JAVASCRIPT
  40. 40. KEEPING USERS INFORMED WAI-ARIA live regions are used on pages that update frequently • Stock tickers • Chat logs • DOM changes (new content) <div role=‚region‛> <div id=‚SingleLiveRegion‛ aria-live=‚polite‛ aria-atomic=‚false‛ > </div> </div>
  41. 41. KEEPING USERS INFORMED region Makes the element “live” aria-live=‚polite‛ Data will update politely and not rudely interrupt the screen reader aria-atomic=‚false‛ Only updates the change contained in the live region. Note this change must make sense on its own. Can be defined by aria-relevant attribute
  42. 42. USE APPROPRIATE WAI-ARIA ATTRIBUTES ROLES, STATES AND PROPERTIES role=alert; role=alertdialog; role=button; role=checkbox; role=dialog; role=gridcell; role=link; role=log; role=marquee; role=menuitem; role=menuitemcheckbox; role=itemradio; role=option; role=progressbar; role=radio; role=scrollbar; role=slider; role=spinbutton; role=status; role=tab; role=timer; role=tool-tip; role=treeitem; role=tabpanal; aria-activedescendant; aria-atomic; aria-autocomplete; aria-busy (state); aria-controls; aria-describedby; aria-disabled (state); ariadropeffect; aria-expanded (state); aria-flowto; aria-grabbed (state); aria-haspopup; aria-invalid (state); aria-label; aria-labelledby; aria-level; aria-live; ariamultiline; aria-multiselectable; aria-orientation; aria-hidden (state); aria-owns; aria-posinset; aria-pressed (state); aria-readonly; aria-relevant; aria-required; aria-slected (state); aria-setsize; aria-sort; aria-valuemax; aria-valuemin; ariavaluenow; aria-valuetext; http://www.w3.org/TR/wai-aria/roles
  43. 43. TAB PANEL EXAMPLE <ul role="tablist"> <li role="tab" tabindex="0" aria-controls="tabs-1" arialabelledby="ui-id-1" aria-selected="true"> <a href="#tabs-1" role="presentation" tabindex="-1" id="ui-id-1">Nunc tincidunt</a> </li> <div id="tabs-1" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" ariahidden="false"> <p>[…]</p> <li role="tab" tabindex="-1" aria-controls="tabs-2" arialabelledby="ui-id-2" aria-selected="false"> <a href="#tabs-2" role="presentation" tabindex="-1" id="ui-id-2">Proin dolor</a> </li> </div> <li role="tab" tabindex="-1" aria-controls="tabs-3" arialabelledby="ui-id-3" aria-selected="false"> <a href="#tabs-3" role="presentation" tabindex="-1" id="ui-id-3">Aenean lacinia</a> </li> </ul> <div id="tabs-2" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;"> <p>[…]</p> </div>
  44. 44. TAB INDEX Drawbacks • tabindex=0 adds focus • tabindex=-1 adds focus but with no tab order • Can create an illogical tab order • Can be a lazy solution to fix sloppy code, better to use elements that can receive focus e.g.<button>
  45. 45. KEYBOARD CONTROL To trigger a behaviour via the keyboard, sometimes you might need to script the actual key. 32 = Spacebar 13 = Enter key http://asquare.net/javascript/tests/KeyCode.html function someFunction(objEvent) { if (objEvent.type == ‘keydown’ { var iKeyCode = objEvent.keycode; if (iKeyCode != 13 && iKeyCode !=32) { return true; } } someFunction(); }
  46. 46. PROVIDE HIDDEN INSTRUCTIONS You may wish to provide for: Consider • Headings • If content is important enough to provide to screen readers, shouldn’t it be made available to all users? • Form labels • Date of Birth fields
  47. 47. WAI-ARIA FOR JAVASCRIPT • Keep users informed (live regions) • Use appropriate WAI-ARIA attributes – roles, states and properties • Manage focus (tabindex 0 and -1) • Implement keyboard controls • Provide hidden instructions
  48. 48. SOMETIMES IT’S JUST NOT POSSIBLE
  49. 49. SOMETIMES IT’S JUST NOT POSSIBLE Pragmatic (/pragˈ ɪk/) mat • Content in logical order “dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations” • Semantic and valid markup • Keyboard focus • …and the rest
  50. 50. RESOURCES http://templates.mandogroup.com/fed/a11y/ http://www.w3.org/TR/wai-aria/ http://www.w3.org/WAI/eval/preliminary.html http://www.w3.org/WAI/WCAG20/quickref/ http://wave.webaim.org http://www.paciellogroup.com/resources/contrastAnalyser http://www.nvaccess.org/ http://jqueryui.com/ http://dojotoolkit.org/ htt://fluidproject.org/

×