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

Semantics and focus:

Lang attribute

Microsoft Inclusive Design

Medium articles


Manuel Matuzovic

June 16, 2017

More Decks by Manuel Matuzovic

Other Decks in Technology


  1. Manuel Matuzović @mmatuzo pitercss 06/2017 UX ACCESSIBLE

  2. None
  3. Manuel Matuzovic

  4. Manuel Matuzović

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

  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



  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

  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
  21. None
  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
  30. None
  31. None
  32. None
  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

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

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

  45. None
  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

  48. None
  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>

  52. None
  53. <h2 tabindex="-1"> A focusable heading </h2> tabindex (just focusable)

  54. Bad Semantics

  55. None
  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>
  57. None
  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
  66. None
  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
  71. None
  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