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

Accessible UX

Accessible UX

Manuel Matuzovic

April 22, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Programming

Transcript

  1. Accessibility The quality of being able to be reached or

    entered. as defined by the Oxford Dictionary
  2. Accessibility in web design means creating web pages that everyone

    can use, regardless of hardware, software, or any sensory or physical impairment. WordPress Codex – Accessibility
  3. 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
  4. event.keyCode window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.keyCode ===

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

    { moveLeftAndRight(1); } if (e.code === 'KeyY') { shootMissile(); } } event.keyCode
  7. TWEETABLE TAKE-AWAY The web is international and so are your

    users. Don’t assume that all users use the same input devices.
  8. lang-Attribute impacts • Assistive Technology • Translation tools and browsers

    • Quote characters • Date and number inputs • Search engines • Hyphenation
  9. <!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js no-svg"> <head> <?php

    wp_head(); ?> </head> <body> </body> </html> lang attribute in WordPress
  10. TWEETABLE TAKE-AWAY Make sure to tell the browser the correct

    language in use. Everyone benefits from it.
  11. Issues • Missing or insufficient focus styles • Off-screen content

    • Bad semantics (e.g. button) • Bad focus management (e.g. modal window)
  12. Possible solutions • :focus styling • Setting tabindex • Knowing

    and using basic HTML • Manage focus • Trap focus
  13. Semantics matter <!-- 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> <!-- DO: --> <button>Just use button</button>
  14. Remember last focus // Store the last focused element let

    lastFocusedElement = document.activeElement; // Set focus to the modal window modal.focus(); // Close the window by clicking the close button close.addEventListener('click', removeModal); function removeModal() { // Remove the modal window if it's visible modal.classList.remove('is-visible'); // Return focus to last focused element lastFocusedElement.focus(); }
  15. Trap focus // If the current element in focus is

    the first focusable element within the modal window… if (document.activeElement === firstTabStop) { e.preventDefault(); // ...jump to the last focusable element lastTabStop.focus(); }
  16. 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.
  17. TWEETABLE TAKE-AWAY Make sure to test plugins and JS components

    for keyboard support before you use them.
  18. The HTML5 document outline is a myth <!-- DON'T DO

    THAT: --> <h1>Heading</h1> <section> <h1>Heading</h1> <section> <h1>Heading</h1> </section> </section>
  19. Use properly ranked h-elements <!-- DO THAT: --> <h1>Heading</h1> <section>

    <h2>Heading</h2> <section> <h3>Heading</h3> </section> </section>
  20. TWEETABLE TAKE-AWAY A sound document outline has a huge impact

    on users and third party software. Get it right!
  21. WordPress and a11y • Make WordPress Accessible
 (https://make.wordpress.org/accessibility/) • Accessibility

    Handbook
 (https://make.wordpress.org/accessibility/handbook/) • Accessibility Theme Review
 (https://make.wordpress.org/themes/handbook/review/accessibility/) • Useful Tools
 (https://make.wordpress.org/accessibility/useful-tools/) • WP Accessibility Plugin
 (https://wordpress.org/plugins/wp-accessibility/)
  22. 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.
  23. Images • Slide4: Daniel Gerersdorfer www.gerersdorfer.net • Slide5: https://maps.google.com •

    Slide11: https://en.wikipedia.org/wiki/QWERTZ#/media/File:KB_Germany.svg • Slide12: https://en.wikipedia.org/wiki/QWERTY#/media/File:KB_Intl_English_Mac_- _Apple_Keyboard_(MC184Z).svg • Slide13: https://upload.wikimedia.org/wikipedia/commons/4/41/Belgian_pc_keyboard.svg • Slide14: https://upload.wikimedia.org/wikipedia/commons/6/60/KB_Russian.svg • Slide21: https://www.w3.org/TR/uievents-code/#code-value-tables • Slide38: https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/ INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf