Accessible UX

A presentation at pitercss conf in June 2017 in St Petersburg, Russia by Manuel Matuzovic

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

K eyboard layout s “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

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

Slide 14

Slide 14

w s a d z forward back le (

right shoot A W S D Z

Slide 15

Slide 15

QWERTY QWERT Z

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 Dra " : There are some inconsistencies between browsers.

Slide 26

Slide 26

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

Slide 27

Slide 27

T WEETABLE 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 a ) ribute

Slide 29

Slide 29

<!DOCTYPE html > <html

lang

"en"

<head> <title> Document </title> </head> <body> </body> </html>

lang a ) ribute

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

lang a ) ribute: impacts • Assistive Technology • Translation tools and browsers • Quote characters

• Date and Number inputs • Search engines

• Hyphenation

Slide 34

Slide 34

T WEETABLE 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 insu ffi cient focus styles

Slide 41

Slide 41

Slide 42

Slide 42

{

outline :

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

{

outline :

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

Slide 56

Slide 56

<button> I'm a button </button> Bu ) ons vs. “Bu ) ons ” <div

class

"btn"

I'm a div

</div> <div

class

"btn"

tabindex

"0"

I'm a div

</div>

Slide 57

Slide 57

Slide 58

Slide 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 ma ) er <!-- DO: --> <button> Just use button </button>

Slide 59

Slide 59

There’s more…

Slide 60

Slide 60

Who are we making this for? https://www.microsoft.com/en-us/design/inclusive

Slide 61

Slide 61

T WEETABLE 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.

Slide 62

Slide 62

Plugins and best practices • frend.co • inclusive-components.design • heydonworks.com/practical_aria_examples

Slide 63

Slide 63

T WEETABLE TAKE-AWAY Make sure to test JS components for keyboard support before you use them.

Slide 64

Slide 64

the document outline

Slide 65

Slide 65

The Document Outline (h1-h6) • Convey document structure • SEO • Navigation for screen readers

Slide 66

Slide 66

Slide 67

Slide 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

Slide 68

Slide 68

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

Slide 69

Slide 69

T WEETABLE TAKE-AWAY A sound document outline has a huge impact on third party so ( ware. Do your best to g et it right!

Slide 70

Slide 70

<header

role

"banner"

</header> <section> <form

role

"search"

</form>
</section> <aside></aside> <footer

role

"contentinfo"

</footer>

Navigation via landmarks

Slide 71

Slide 71

Slide 72

Slide 72

T WEETABLE TAKE-AWAY Take enough time to think about your document structure and markup content correctly.

Slide 73

Slide 73

T WEETABLE 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.

Slide 74

Slide 74

Manuel Matuzovi ć

!

@mmatuzo pitercss 06/2017 THANK YOU medium.com /@matuzo codepen.io/matuzo

manuel@matuzo.at Slides: h

ps://speakerdeck.com/matuzo

Slide 75

Slide 75

Images • h

p://www.daniel.at/images/pictures/_DSF2655.jpg

• h

ps://en.wikipedia.org/wiki/QWERTZ#/media/File:KB_Germany.svg

• h

ps://en.wikipedia.org/wiki/QWERTY#/media/File:KB_Intl_English_Mac_- Apple_Keyboard(MC184Z).svg

• h

ps://upload.wikimedia.org/wikipedia/commons/4/41/Belgian_pc_keyboard.svg

• h

ps://upload.wikimedia.org/wikipedia/commons/6/60/KB_Russian.svg

• h

ps://www.microso " .com/en-us/design/inclusive