A11Y & React : This is for Everyone

Talk about A11Y and tackling some things with React.js. Talk given at the London React Meetup April 2015

Transcript

1. @shaundunne R3T & A11Y This is for everyone
2. @shaundunne When sites are correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia, Web Accessibility
3. @shaundunne When sites are correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia, Web Accessibility
4. @shaundunne 285 million people are estimated to be visually impaired worldwide. 39 million are blind. WHO | Visual impairment and blindness. http:/ /www.who.int/mediacentre/factsheets/fs282/en/#
5. @shaundunne Current A11Y is not quite right
6. @shaundunne No reason not to
7. @shaundunne
8. @shaundunne Accessibility === Usability
9. @shaundunne Shaun Dunne @shaundunne www.boticca.com www.shaundunne.com Head of FE Development
10. @shaundunne Don’t feel bad
11. @shaundunne Some quick wins
12. @shaundunne // presentational <img src="USSEnterprise1701-D.png" alt=""> // Part of the content <img src="USSEnterprise1701-D.png" alt="Image of The Galaxy Class Federation Ship USS Enterprise"> alt tag
13. @shaundunne <table> <tr> <td class="label">username</td> <td class='username-input'><input type="text" name="username"></td> </tr> </table> <div> <label for="username">username</label> <input name="username" id="username"></input> </div> labels
14. @shaundunne <table> <tr> <td> class="label">username</td> <td class='username-input'><input type="text" name="username"></td> </tr> </table> <div> <label for="username">username</label> <input name="username" id="username"></input> </div> labels
15. @shaundunne
16. @shaundunne
17. @shaundunne Visual issues Motor Auditory Seizures Cognitive
18. @shaundunne Keyboard Accessibility
19. @shaundunne
20. @shaundunne :focus{ outline:none; }
21. @shaundunne
22. @shaundunne
23. @shaundunne
24. @shaundunne With great share-ability comes great responsibility - no-one ever
25. @shaundunne Even Carousels can be Accessible
26. @shaundunne
27. @shaundunne Good Ol’ HTML Use Native Elements var WarpButton = React.createClass({displayName: "WarpButton", render: function() { return React.createElement("button", null, "Engage!"); } });
28. @shaundunne var WarpButton = React.createClass({displayName: "WarpButton", render: function() { return React.createElement("span", { onClick: this.engage }, "Engage!"); } });
29. @shaundunne ARIA to the rescue var WarpButton = React.createClass({displayName: "WarpButton", render: function() { return React.createElement("span",{ onClick: this.engage, tabindex: "0" }, "Engage!"); } });
30. @shaundunne ARIA to the rescue var WarpButton = React.createClass({displayName: "WarpButton", render: function() { return React.createElement("span",{ onClick: this.engage, tabindex: "0", role: "button" }, "Engage!"); } });
31. @shaundunne ARIA to the rescue var WarpButton = React.createClass({displayName: "WarpButton", render: function() { return React.createElement("span",{ onClick: this.engage, onKeyUp: this.keyUp, tabindex: "0", role: "button" }, "Engage!"); } });
32. @shaundunne ARIA Roles alert alertdialog application article banner button checkbox columnheader combobox command [abstract] complementary composite [abstract] contentinfo definition dialog directory document form grid gridcell group heading img input [abstract] landmark [abstract] link list listbox listitem log main marquee math menu seperator slider spinbutton status structure [abstract] tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem widget [abstract] window [abstract] navigation note option presentation progressbar radio radiogroup range [abstract] region roletype [abstract] row rowgroup rowheader scrollbar search section [abstract] sectionhead [abstract] select [abstract] http://www.w3.org/TR/wai-aria/roles
33. @shaundunne ARIA States & Properties aria-atomic aria-busy (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-flowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-live aria-owns aria-relevant aria-autocomplete aria-checked (state) aria-disabled (state) aria-expanded (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-pressed (state) aria-readonly aria-required aria-selected (state) aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext http://www.w3.org/TR/wai-aria/states_and_properties
34. @shaundunne ARIA States & Properties aria-atomic aria-busy (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-flowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-live aria-owns aria-relevant aria-autocomplete aria-checked (state) aria-disabled (state) aria-expanded (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-pressed (state) aria-readonly aria-required aria-selected (state) aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext http://www.w3.org/TR/wai-aria/states_and_properties
35. @shaundunne ARIA States & Properties aria-atomic aria-busy (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-flowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-live aria-owns aria-relevant aria-autocomplete aria-checked (state) aria-disabled (state) aria-expanded (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-pressed (state) aria-readonly aria-required aria-selected (state) aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext http://www.w3.org/TR/wai-aria/states_and_properties
36. @shaundunne const React = require('react'); const AppStore = require('../stores/app_store.js'); function cartItems(){ return{items: AppStore.getCart()} } let LiveRegion = React.createClass({ getInitialState: function(){ return cartItems(); }, componentWillMount: function(){ AppStore.addChangeListener(this._onChange); }, _onChange:function(){ this.setState({ a11y: 'Cart Updated. You have' + this.state.items.length + 'items in your cart' }); }, render(){ return ( <div role="region" aria-live="assertive" aria-atomic="true">{this.state.a11y}</div> ); } }); module.exports = LiveRegion;
37. @shaundunne const React = require('react'); const AppStore = require('../stores/app_store.js'); function cartItems(){ return{items: AppStore.getCart()} } let LiveRegion = React.createClass({ getInitialState: function(){ return cartItems(); }, componentWillMount: function(){ AppStore.addChangeListener(this._onChange); }, _onChange:function(){ this.setState({ a11y: 'Cart Updated. You have' + this.state.items.length + 'items in your cart' }); }, render(){ return ( <div role="region" aria-live="assertive" aria-atomic="true">{this.state.a11y}</div> ); } }); module.exports = LiveRegion;
38. @shaundunne .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
39. @shaundunne The Chosen One
40. @shaundunne
41. @shaundunne react-a11y https://github.com/rackt/react-a11y
42. @shaundunne Chrome ADT http://goo.gl/wnIA8m
43. @shaundunne Chrome ADT http://goo.gl/wnIA8m
44. @shaundunne chrome://accessibility
45. @shaundunne http://accesslint.com/
46. @shaundunne http://tenon.io/
47. @shaundunne Resources http://www.w3.org/TR/wai-aria/ http://a11yproject.com/ https://code.facebook.com/accessibility https://www.google.com/accessibility/
48. @shaundunne Talks Marcy Sutton : Javascript For Everyone Léonie Watson : ”Rock & roll guide to HTML5 & ARIA" Jörn Zaefferer : Talk to me Accessibility is a Feature You Can Build Talk playlist : http://j.mp/a11y-vids
49. @shaundunne Thanks! @shaundunne