Accessible UX @ pitercss

What is the first thing that comes to your mind when you think about web accessibility? Maybe optimising a website in a way that it’s easier to use with assistive technology like screen readers? Of course, that’s one part, but accessibility is more than that. Accessibility is about making websites and web apps easier to understand and use for everyone. With better accessibility comes better usability and user experience. This talk aims to demystify web accessibility and provide you with simple and practical takeaways, which you can easily incorporate in your workflow today. You are going to get a better understanding of how other people surf the web and find out how to make your web projects more inclusive and improve the usability and user experience at the same time.

UI Events API
https://hacks.mozilla.org/2017/03/internationalize-your-keyboard-controls/
https://codepen.io/matuzo/pen/PmgWRm?editors=0010
https://caniuse.com/#feat=keyboardevent-code
https://caniuse.com/#feat=keyboardevent-key

Semantics and focus:
https://codepen.io/matuzo/pen/QvNJOW?editors=1100
https://codepen.io/matuzo/pen/EmKrZq?editors=1100
http://codepen.io/matuzo/pen/YVqRaj?editors=1010
https://codepen.io/matuzo/pen/xgwxNw
https://codepen.io/matuzo/pen/YNyPMj
https://codepen.io/matuzo/pen/BpQreX
https://codepen.io/matuzo/pen/pRNVJN
https://codepen.io/matuzo/pen/GrNdvK
https://allyjs.io/data-tables/focusable.html
https://codepen.io/matuzo/pen/awdevz
https://codepen.io/matuzo/pen/LLGKmP

Lang attribute
https://www.youtube.com/watch?v=ox5QVbZSPBk
https://adrianroselli.com/2015/01/on-use-of-lang-attribute.html

Microsoft Inclusive Design
https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf

Medium articles
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9

Transcript

1. Manuel Matuzović @mmatuzo pitercss 06/2017 UX ACCESSIBLE
3. Manuel Matuzovic
4. Manuel Matuzović
5. č, ć, đ, dž, š, ž, nj, lj q, w, x
6. Keyboard layouts “A keyboard layout is any specific mechanical, visual, or functional arrangement of the keys, legends, or key-meaning associations (respectively) of a computer, typewriter, or other typographic keyboard.” Wikipedia
7. QWERTY
8. QWERTZ
9. AZERTY
10. JCUKEN
11. Soooo?
12. event.keyCode window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.keyCode === 68) { moveLeftAndRight(1); } if (e.keyCode === 90) { shootMissile(); } }
13. Issues • Different meaning of properties when handling a key event (keydown or keyup) versus a character event (keypress). • The values of keys in keypress events are different between browsers. • Inconsistent values for keys and events cross-browser • keyCode on key events tries to be international-friendly, but isn’t
14. w s a d z forward back left right shoot A W S D Z
15. QWERTY QWERTZ
16. QWERTY
17. Remember AZERTY?
18. UI Events: API • Two new properties: key and code • event.key - printable character or a descriptive string, e.g. z • event.code - physical key, e.g. KeyY • Reference keyboard in the specification
19. Reference keyboard
20. window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.code === 'KeyD') { moveLeftAndRight(1); } if (e.code === 'KeyY') { shootMissile(); } } event.keyCode
22. Browsersupport
23. Browsersupport
24. switch(e.code || e.keyCode ) { ... case 'KeyD': case 'ArrowRight': case 39: moveLeftAndRight(1); 
 ... } Fallback
25. Notes • There is no way of checking for the current keyboard layout. • Use the repeat property to check if the user keeps pressing a key and the event is sent repeatedly • Boolean properties for modifier keys (altKey, ctrlKey, metaKey, shiftKey). • Still a Working Draft: There are some inconsistencies between browsers.
26. https://codepen.io/matuzo/pen/PmgWRm?editors=0010
27. TWEETABLE TAKE-AWAY The web is international and so are your users. Don’t assume that all users use the same input devices.
28. lang attribute
29. <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> </body> </html> lang attribute
33. lang attribute: impacts • Assistive Technology • Translation tools and browsers • Quote characters • Date and Number inputs • Search engines • Hyphenation
34. TWEETABLE TAKE-AWAY Make sure to tell the browser the correct language in use. Everyone benefits from it.
35. keyboard usage
36. Surfing the web without a mouse sucks…
37. …and it’s our fault!
38. BUT!
39. We can fix it!
40. Missing or insufficient focus styles
42. * { outline: none; } :focus styling
44. a:focus { color: #FF00FF; } :focus styling
46. a:focus-ring { outline: 1px solid #FF00FF; } :focus-ring Polyfill: https://github.com/WICG/focus-ring
47. form:focus-within { background:#FF00FF; } :focus-within
49. Browsersupport
50. Tabbable/focusable elements • Input elements, selects, textareas • Links • Contenteditable elements • audio, video with controls • …
51. tabindex (focusable and tabbable) <h2 tabindex="0"> A focusable heading </h2>
53. <h2 tabindex="-1"> A focusable heading </h2> tabindex (just focusable)
54. Bad Semantics
56. <button>I'm a button</button> Buttons vs. “Buttons” <div class="btn">I'm a div</div> <div class="btn" tabindex="0">I'm a div</div>
58. <!-- DON'T: --> <div class="btn">I'm a div</div> <div class="btn" tabindex="0">I'm a div</div> <div class="btn" tabindex="0" role="button">I'm a div</div> Semantics matter <!-- DO: --> <button>Just use button</button>
59. There’s more…
60. Who are we making this for? https://www.microsoft.com/en-us/design/inclusive
61. TWEETABLE TAKE-AWAY Assuming that everybody is able to see, hear, say, and touch all the time creates the potential to ignore a lot of users.
62. Plugins and best practices • frend.co • inclusive-components.design • heydonworks.com/practical_aria_examples
63. TWEETABLE TAKE-AWAY Make sure to test JS components for keyboard support before you use them.
64. the document outline
65. The Document Outline (h1-h6) • Convey document structure • SEO • Navigation for screen readers
67. <!-- DON'T DO THAT: --> <h1>Heading</h1> <section> <h1>Heading</h1> <section> <h1>Heading</h1> </section> </section> The HTML5 document outline is a myth
68. <!-- DO THAT: --> <h1>Heading</h1> <section> <h2>Heading</h2> <section> <h3>Heading</h3> </section> </section> Use properly ranked h-elements
69. TWEETABLE TAKE-AWAY A sound document outline has a huge impact on third party software. Do your best to get it right!
70. <header role="banner"> </header> <section> <form role="search"></form> </section> <aside></aside> <footer role="contentinfo"></footer> Navigation via landmarks
72. TWEETABLE TAKE-AWAY Take enough time to think about your document structure and markup content correctly.
73. TWEETABLE TAKE-AWAY Accessibility is something that concerns all of us, you and me, every day. What we create is useless if it isn’t accessible.
74. Manuel Matuzović @mmatuzo pitercss 06/2017 THANK YOU medium.com/@matuzo codepen.io/matuzo manuel@matuzo.at Slides: https://speakerdeck.com/matuzo
75. Images • http://www.daniel.at/images/pictures/_DSF2655.jpg • https://en.wikipedia.org/wiki/QWERTZ#/media/File:KB_Germany.svg • https://en.wikipedia.org/wiki/QWERTY#/media/File:KB_Intl_English_Mac_- _Apple_Keyboard_(MC184Z).svg • https://upload.wikimedia.org/wikipedia/commons/4/41/Belgian_pc_keyboard.svg • https://upload.wikimedia.org/wikipedia/commons/6/60/KB_Russian.svg • https://www.microsoft.com/en-us/design/inclusive