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. 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
  2. event.keyCode window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.keyCode ===

    68) { moveLeftAndRight(1); } if (e.keyCode === 90) { shootMissile(); } }
  3. 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
  4. 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
  5. window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.code === 'KeyD')

    { moveLeftAndRight(1); } if (e.code === 'KeyY') { shootMissile(); } } event.keyCode
  6. switch(e.code || e.keyCode ) { ... case 'KeyD': case 'ArrowRight':

    case 39: moveLeftAndRight(1); 
 ... } Fallback
  7. 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.
  8. TWEETABLE TAKE-AWAY The web is international and so are your

    users. Don’t assume that all users use the same input devices.
  9. lang attribute: impacts • Assistive Technology • Translation tools and

    browsers • Quote characters • Date and Number inputs • Search engines • Hyphenation
  10. TWEETABLE TAKE-AWAY Make sure to tell the browser the correct

    language in use. Everyone benefits from it.
  11. Tabbable/focusable elements • Input elements, selects, textareas • Links •

    Contenteditable elements • audio, video with controls • …
  12. <!-- 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>
  13. 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.
  14. TWEETABLE TAKE-AWAY A sound document outline has a huge impact

    on third party software. Do your best to get it right!
  15. 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.