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
   

   View Slide

2. View Slide

3. Manuel Matuzovic
   

   View Slide

4. Manuel Matuzović
   

   View Slide

5. č, ć, đ, dž, š, ž, nj, lj
   q, w, x
   

   View Slide

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
   

   View Slide

7. QWERTY
   

   View Slide

8. QWERTZ
   

   View Slide

9. AZERTY
   

   View Slide

10. JCUKEN
    

    View Slide

11. Soooo?
    

    View Slide

12. event.keyCode
    window.addEventListener('keydown', navigate);
    function navigate(e) {
    ...
    if (e.keyCode === 68) {
    moveLeftAndRight(1);
    }
    if (e.keyCode === 90) {
    shootMissile();
    }
    }
    

    View Slide

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
    

    View Slide

14. w
    s
    a
    d
    z
    forward
    back
    left
    right
    shoot
    A
    W
    S D
    Z
    

    View Slide

15. QWERTY
    QWERTZ
    

    View Slide

16. QWERTY
    

    View Slide

17. Remember AZERTY?
    

    View Slide

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
    

    View Slide

19. Reference keyboard
    

    View Slide

20. window.addEventListener('keydown', navigate);
    function navigate(e) {
    ...
    if (e.code === 'KeyD') {
    moveLeftAndRight(1);
    }
    if (e.code === 'KeyY') {
    shootMissile();
    }
    }
    event.keyCode
    

    View Slide

21. View Slide

22. Browsersupport
    

    View Slide

23. Browsersupport
    

    View Slide

24. switch(e.code || e.keyCode ) {
    ...
    case 'KeyD':
    case 'ArrowRight':
    case 39:
    moveLeftAndRight(1); 

    ...
    }
    Fallback
    

    View Slide

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.
    

    View Slide

26. https://codepen.io/matuzo/pen/PmgWRm?editors=0010
    

    View Slide

27. TWEETABLE TAKE-AWAY
    The web is international and so are your users.
    Don’t assume that all users use the same input
    devices.
    

    View Slide

28. lang attribute
    

    View Slide

29. 
    
    
    Document
    
    
    
    
    lang attribute
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. lang attribute: impacts
    • Assistive Technology
    • Translation tools and browsers
    • Quote characters
    • Date and Number inputs
    • Search engines
    • Hyphenation
    

    View Slide

34. TWEETABLE TAKE-AWAY
    Make sure to tell the browser the correct
    language in use. Everyone benefits from it.
    

    View Slide

35. keyboard usage
    

    View Slide

36. Surfing the web without
    a mouse sucks…
    

    View Slide

37. …and it’s our fault!
    

    View Slide

38. BUT!
    

    View Slide

39. We can fix it!
    

    View Slide

40. Missing or insufficient
    focus styles
    

    View Slide

41. View Slide

42. * {
    outline: none;
    }
    :focus styling
    

    View Slide

43. View Slide

44. a:focus {
    color: #FF00FF;
    }
    :focus styling
    

    View Slide

45. View Slide

46. a:focus-ring {
    outline: 1px solid #FF00FF;
    }
    :focus-ring
    Polyfill: https://github.com/WICG/focus-ring
    

    View Slide

47. form:focus-within {
    background:#FF00FF;
    }
    :focus-within
    

    View Slide

48. View Slide

49. Browsersupport
    

    View Slide

50. Tabbable/focusable elements
    • Input elements, selects, textareas
    • Links
    • Contenteditable elements
    • audio, video with controls
    • …
    

    View Slide

51. tabindex (focusable and tabbable)
    
    A focusable heading
    
    

    View Slide

52. View Slide

53. 
    A focusable heading
    
    tabindex (just focusable)
    

    View Slide

54. Bad Semantics
    

    View Slide

55. View Slide

56. I'm a button
    Buttons vs. “Buttons”
    I'm a div
    I'm a div
    

    View Slide

57. View Slide

58. 
    I'm a div
    I'm a div
    I'm a div
    Semantics matter
    
    Just use button
    

    View Slide

59. There’s more…
    

    View Slide

60. Who are we making this for?
    https://www.microsoft.com/en-us/design/inclusive
    

    View Slide

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.
    

    View Slide

62. Plugins and best practices
    • frend.co
    • inclusive-components.design
    • heydonworks.com/practical_aria_examples
    

    View Slide

63. TWEETABLE TAKE-AWAY
    Make sure to test JS components for keyboard
    support before you use them.
    

    View Slide

64. the document outline
    

    View Slide

65. The Document Outline (h1-h6)
    • Convey document structure
    • SEO
    • Navigation for screen readers
    

    View Slide

66. View Slide

67. 
    Heading
    
    Heading
    
    Heading
    
    
    The HTML5 document outline is a myth
    

    View Slide

68. 
    Heading
    
    Heading
    
    Heading
    
    
    Use properly ranked h-elements
    

    View Slide

69. TWEETABLE TAKE-AWAY
    A sound document outline has a huge impact on
    third party software. Do your best to get it right!
    

    View Slide

70. 
    
    
    
    
    
    
    Navigation via landmarks
    

    View Slide

71. View Slide

72. TWEETABLE TAKE-AWAY
    Take enough time to think about your document
    structure and markup content correctly.
    

    View Slide

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.
    

    View Slide

74. Manuel Matuzović
    @mmatuzo
    pitercss 06/2017
    THANK YOU
    medium.com/@matuzo
    codepen.io/matuzo
    manuel@matuzo.at
    Slides: https://speakerdeck.com/matuzo
    

    View Slide

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
    

    View Slide