ux
play

UX Manuel Matuzovi @mmatuzo pitercss 06/2017 Manuel Matuzovic - PowerPoint PPT Presentation

Sep 09, 2022 •113 likes •679 views

ACCESSIBLE UX Manuel Matuzovi @mmatuzo pitercss 06/2017 Manuel Matuzovic Manuel Matuzovi , , , d , , , nj, lj q, w, x Keyboard layouts A keyboard layout is any specific mechanical, visual, or functional arrangement

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

  3. Manuel Matuzovic

  4. Manuel Matuzovi ć

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

  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

  7. QWERTY

  8. QWERTZ

  9. AZERTY

  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 • Di ff erent meaning of properties when handling a key event (keydown or keyup) versus a character event (keypress). • The values of keys in keypress events are di ff erent between browsers. • Inconsistent values for keys and events cross-browser • keyCode on key events tries to be international-friendly , but isn’t

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

  15. QWERTZ QWERTY

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

  22. Browsersupport

  23. Browsersupport

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

  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 Dra fu : 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 a tu ribute

  29. lang a tu ribute <!DOCTYPE html > <html lang ="en" > <head> <title> Document </title> </head> <body> </body> </html>

  33. lang a tu ribute: 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 insu ffi cient focus styles

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

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

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

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

  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>

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

  54. Bad Semantics

Recommend

More recommend