Inclusive Javascript

Quick fixes to make interactive sites more accessible to people with disabilities

Transcript

1. Inclusive JavaScript Julie Grundy @stringy
2. Web Content Accessibility Guidelines v2.0 www.w3.org/TR/WCAG20/ Plain English version: www.webaim.org/standards/wcag/checklist
3. Focus management ARIA Device independence
4. Device independence
5. Brad Frost’s device layout: https://flic.kr/p/cfQwL7
6. Credit: Sebastien Delorme
7. Credit: Spectronics.com.au
8. Credit: Inclusive.co.uk
9. Credit: Spectronics.com.au
10. Accessibility API www.w3.org/TR/core-aam-1.1/ Smashing Magazine Accessibility APIs: A Key to Web Accessibility
13. Basic accessible button <div class=“btn btn-primary” id=“myButton”>Click Me</div> myButton.click(function(){ console.log(“I’ve been clicked!”); });
14. Basic accessible button <div class=“btn btn-primary” id=“myButton” tabindex=“0”>Click Me</div> myButton.click(function(){ console.log(“I’ve been clicked!”); });
15. Basic accessible button <div class=“btn btn-primary” id=“myButton” tabindex=“0” role=“button”>Click Me</div> myButton.click(function(){ console.log(“I’ve been clicked!”); });
16. Basic accessible button <div class=“btn btn-primary” id=“myButton” tabindex=“0” role=“button”>Click Me</div> myButton.click(function(){ console.log(“I’ve been clicked!”); }); myButton.keypress(function(e){ if (keycode == 13) { console.log(“I’ve been clicked by the Enter key!”); } });
17. Basic accessible button <div class=“btn btn-primary” id=“myButton” tabindex=“0” role=“button”>Click Me</div> myButton.click(function(){ console.log(“I’ve been clicked!”); }); myButton.keypress(function(e){ if (keycode == 13) { console.log(“I’ve been clicked by the Enter key!”); } }); myButton.keypress(function(e) { if (keycode == 32) { console.log(“I’ve been clicked by the spacebar!”); } });
18. Basic accessible button <button class=“btn btn-primary” id=“myButton>Click Me</button> myButton.click(function(){ console.log(“I’ve been clicked!”); });
20. Semantic HTML helps achieve device independence <div class=“wrapper”> <div class=“heading heading1”>City Farmers, Belmont</div> <div class=“summary”>Leading provider of bulk pet and garden supplies. <a href=“www.cityfarmers.com.au/belmont”>Visit Website</a></div> <div class=“rating-summary”><span>4.5/5 stars</span><span>32 reviews</span><span><a href=“www.google.com/fj5qp23984ht/”>Review on Google</a></span></div> <div class=“btn”>Open in Google Maps</div> </div>
21. Semantic HTML helps achieve device independence <div class=“wrapper”> <h1>City Farmers, Belmont</h1> <p>Leading provider of bulk pet and garden supplies. <a href=“www.cityfarmers.com.au/belmont”>Visit Website</a></p> <ul> <li>4.5/5 stars</li> <li>32 reviews</li> <li><a href=“www.google.com/fj5qp23984ht/”>Review on Google</a></li> </ul> <button>Open in Google Maps</button> </div>
22. Focus management Device independence
25. Focus management <p id=“dataSummary”>…</p> <button id=“myButton”>Sort A to Z</button>
26. Focus management <p id=“dataSummary”>…</p> <button id=“myButton”>Sort A to Z</button> myButton.addEventListener(“click”, function(event){ dataSummary.focus(); }, false);
27. Focus management <p id=“dataSummary” tabindex=“-1”>…</p> <button id=“myButton”>Sort A to Z</button> myButton.addEventListener(“click”, function(event){ dataSummary.focus(); }, false);
28. Focus management <p id=“dataSummary” tabindex=“-1”>…</p> <button id=“myButton”>Sort A to Z</button> myButton.addEventListener(“click”, function(event){ dataSummary.focus(); }, false); <a href=“#transcript”>Show Transcript</a>
29. Focus management ARIA Device independence
30. ARIA a bridge between the HTML we have and the HTML we want
31. Don’t use ARIA
32. https://www.w3.org/TR/using-aria/
33. http://simplyaccessible.com/article/the-accessibility-stack/
34. Don’t use ARIA
39. ARIA Live Updates <div id=“myBag”> <a href=“shoppingbag.html”>My Bag <span id=“bagCount”>1</span> </a> </div>
40. ARIA Live Updates <div id=“myBag” aria-live=“polite” aria-atomic=“true”> <a href=“shoppingbag.html”>My Bag <span id=“bagCount”>1</span> </a> </div>
41. ARIA Live Updates <div id=“myBag” aria-live=“polite” aria-atomic=“true”> <a href=“shoppingbag.html”>My Bag <span id=“bagCount”>1</span> <span class=“visually-hidden”>item added</span> </a> </div>
42. ARIA Live Updates <form> <label for=“memNum”>Member ID:</label> <input type=“text” id=“memNum”> <button type=“submit”>Log In</button> </form>
43. ARIA Live Updates <form> <label for=“memNum”>Member ID:</label> <input type=“text” id=“memNum”> <button type=“submit”>Log In</button> <p class=“error”>This is not a valid ID</p> </form>
44. ARIA Live Updates <form> <label for=“memNum” aria-labelledby=“loginerror”>Member ID:</label> <input type=“text” id=“memNum”> <button type=“submit”>Log In</button> <p class=“error” id=“loginerror”>This is not a valid ID</p> </form>
45. Don’t use ARIA • Thoughtfully • For scripted events • Which aren’t easily explainable with just HTML/CSS
46. https://www.w3.org/TR/wai-aria-practices-1.1/
47. The internet is about communication Find me on Twitter: @stringy