Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessible UX @ pitercss

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

Manuel Matuzovic

June 16, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Technology

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
    [email protected]
    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