Manuel Matuzović @Mmatuzo Pitercss 06/2017

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 speciﬁc mechanical, visual, or functional arrangement of the keys, legends, or key-meaning associations (respectively) of a computer, typewriter, or other typographic keyboard.”

Wikipedia QWERTY QWERTZ AZERTY JCUKEN Soooo? event.keyCode window.addEventListener('keydown', navigate); function navigate(e) { ...

if (e.keyCode === 68) { moveLeftAndRight(1); }

if (e.keyCode === 90) { shootMissile(); } } Issues

• Diﬀ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ﬀerent between browsers.

• Inconsistent values for keys and events cross-browser

• keyCode on key events tries to be international-friendly, but isn’t w forward s back W Z a lef A S D d right z shoot QWERTZ

QWERTY QWERTY Remember AZERTY? 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 speciﬁcation Reference keyboard event.keyCode window.addEventListener('keydown', navigate); function navigate(e) { ...

if (e.code === 'KeyD') { moveLeftAndRight(1); }

if (e.code === 'KeyY') { shootMissile(); } }

Browsersupport Browsersupport Fallback switch(e.code || e.keyCode ) { ...

case 'KeyD': case 'ArrowRight': case 39: moveLeftAndRight(1); ... } 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 modiﬁer keys (altKey, ctrlKey, metaKey, shiftKey).

• Still a Working Draf: There are some inconsistencies between browsers. https://codepen.io/matuzo/pen/PmgWRm?editors=0010 TWEETABLE TAKE-AWAY

The web is international and so are your users. Don’t assume that all users use the same input devices. lang atribute lang atribute

Document

lang atribute: impacts

• Assistive Technology

• Translation tools and browsers

• Quote characters

• Date and Number inputs

• Search engines

• Hyphenation TWEETABLE TAKE-AWAY

Make sure to tell the browser the correct language in use. Everyone benefits from it. keyboard usage Surfing the web without a mouse sucks… …and it’s our fault! BUT! We can fix it! Missing or insufficient focus styles

:focus styling

* { outline: none; }

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

:focus-ring a:focus-ring { outline: 1px solid #FF00FF; }

Polyﬁll: https://github.com/WICG/focus-ring :focus-within form:focus-within { background:#FF00FF; }

Browsersupport Tabbable/focusable elements

• Input elements, selects, textareas

• Links

• Contenteditable elements

• audio, video with controls

• … tabindex (focusable and tabbable)

A focusable heading

tabindex (just focusable)

A focusable heading

Bad Semantics

Butons vs. “Butons”

I'm a div

Semantics mater

I'm a div

There’s more… Who are we making this for?

https://www.microsoft.com/en-us/design/inclusive 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. Plugins and best practices

• frend.co

• inclusive-components.design

• heydonworks.com/practical_aria_examples TWEETABLE TAKE-AWAY

Make sure to test JS components for keyboard support before you use them. the document outline The Document Outline (h1-h6)

• Convey document structure

• SEO

• Navigation for screen readers

The HTML5 document outline is a myth

Heading

Use properly ranked h-elements

Heading

TWEETABLE TAKE-AWAY

A sound document outline has a huge impact on third party sofware. Do your best to get it right! Navigation via landmarks

TWEETABLE TAKE-AWAY

Take enough time to think about your document structure and markup content correctly. 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. Manuel Matuzović medium.com/@matuzo � @mmatuzo codepen.io/matuzo pitercss 06/2017 [email protected]

THANK YOU Slides: htps://speakerdeck.com/matuzo Images

• htp://www.daniel.at/images/pictures/_DSF2655.jpg

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

• htps://en.wikipedia.org/wiki/QWERTY#/media/File:KB_Intl_English_Mac_- _Apple_Keyboard_(MC184Z).svg

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

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

• htps://www.microsof.com/en-us/design/inclusive