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

▶
ux
SMART_READER_LITE
LIVE PREVIEW

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

slide-1
SLIDE 1

Manuel Matuzović @mmatuzo pitercss 06/2017

UX

ACCESSIBLE

slide-2
SLIDE 2
slide-3
SLIDE 3

Manuel Matuzovic

slide-4
SLIDE 4

Manuel Matuzović

slide-5
SLIDE 5

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

slide-6
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

  • ther typographic keyboard.”

Wikipedia

slide-7
SLIDE 7

QWERTY

slide-8
SLIDE 8

QWERTZ

slide-9
SLIDE 9

AZERTY

slide-10
SLIDE 10

JCUKEN

slide-11
SLIDE 11

Soooo?

slide-12
SLIDE 12

event.keyCode

window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.keyCode === 68) { moveLeftAndRight(1); } if (e.keyCode === 90) { shootMissile(); } }

slide-13
SLIDE 13

Issues

  • Different meaning of properties when handling a key event (keydown
  • r 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
slide-14
SLIDE 14

w s a d z forward back lefu right shoot

A W S D Z

slide-15
SLIDE 15

QWERTY QWERTZ

slide-16
SLIDE 16

QWERTY

slide-17
SLIDE 17

Remember AZERTY?

slide-18
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
slide-19
SLIDE 19

Reference keyboard

slide-20
SLIDE 20

window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.code === 'KeyD') { moveLeftAndRight(1); } if (e.code === 'KeyY') { shootMissile(); } }

event.keyCode

slide-21
SLIDE 21
slide-22
SLIDE 22

Browsersupport

slide-23
SLIDE 23

Browsersupport

slide-24
SLIDE 24

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

Fallback

slide-25
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 Drafu: There are some inconsistencies between

browsers.

slide-26
SLIDE 26

https://codepen.io/matuzo/pen/PmgWRm?editors=0010

slide-27
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.

slide-28
SLIDE 28

lang aturibute

slide-29
SLIDE 29

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> </body> </html>

lang aturibute

slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33

lang aturibute: impacts

  • Assistive Technology
  • Translation tools and browsers
  • Quote characters
  • Date and Number inputs
  • Search engines
  • Hyphenation
slide-34
SLIDE 34

TWEETABLE TAKE-AWAY

Make sure to tell the browser the correct language in use. Everyone benefits from it.

slide-35
SLIDE 35

keyboard usage

slide-36
SLIDE 36

Surfing the web without a mouse sucks…

slide-37
SLIDE 37

…and it’s our fault!

slide-38
SLIDE 38

BUT!

slide-39
SLIDE 39

We can fix it!

slide-40
SLIDE 40

Missing or insufficient focus styles

slide-41
SLIDE 41
slide-42
SLIDE 42

* {

  • utline: none;

}

:focus styling

slide-43
SLIDE 43
slide-44
SLIDE 44

a:focus { color: #FF00FF; }

:focus styling

slide-45
SLIDE 45
slide-46
SLIDE 46

a:focus-ring {

  • utline: 1px solid #FF00FF;

}

:focus-ring

Polyfill: https://github.com/WICG/focus-ring

slide-47
SLIDE 47

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

:focus-within

slide-48
SLIDE 48
slide-49
SLIDE 49

Browsersupport

slide-50
SLIDE 50

Tabbable/focusable elements

  • Input elements, selects, textareas
  • Links
  • Contenteditable elements
  • audio, video with controls
  • …
slide-51
SLIDE 51

tabindex (focusable and tabbable)

<h2 tabindex="0"> A focusable heading </h2>

slide-52
SLIDE 52
slide-53
SLIDE 53

<h2 tabindex="-1"> A focusable heading </h2>

tabindex (just focusable)

slide-54
SLIDE 54

Bad Semantics

slide-55
SLIDE 55