Accessible UX

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

Manuel Matuzovi ć
`@mmatuzo`
pitercss 06/2017 UX ACCESSIBLE

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

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

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

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

w s a d z forward back le (
right shoot A W S D Z

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

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

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

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.

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

T WEETABLE TAKE-AWAY The web is international and so are your users. Don’t assume that all users use the same input devices.

<!DOCTYPE html > <html
lang
"en"
<head> <title> Document </title> </head> <body> </body> </html>
lang a ) ribute

lang a ) ribute: impacts • Assistive Technology • Translation tools and browsers • Quote characters
• Date and Number inputs • Search engines
• Hyphenation

T WEETABLE TAKE-AWAY Make sure to tell the browser the correct language in use. Everyone benefits from it.

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

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

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

Tabbable/focusable elements • Input elements, selects, textareas
• Links
• Contenteditable elements • audio, video with controls
• …

tabindex (focusable and tabbable)
<h2
tabindex
"0"
A focusable heading
</h2>

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

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

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

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

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.

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

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

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

<!-- DON'T DO THAT: --> <h1> Heading </h1> <section> <h1> Heading </h1> <section> <h1> Heading </h1> </section> </section> The HTML5 document outline is a myth

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

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!

<header
role
"banner"
</header> <section> <form
role
"search"
</form>
</section> <aside></aside> <footer
role
"contentinfo"
</footer>
Navigation via landmarks

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

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.

Manuel Matuzovi ć
!
@mmatuzo pitercss 06/2017 THANK YOU medium.com /@matuzo codepen.io/matuzo
manuel@matuzo.at Slides: h
ps://speakerdeck.com/matuzo

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

Manuel Matuzovic
@matuzo

1 / 75

What is the first thing that comes to your mind when you think about web accessibility? Maybe optimising a website in a way that it’s easier to use with assistive technology like screen readers? Of course, that’s one part, but accessibility is more than that. Accessibility is about making websites and web apps easier to understand and use for everyone. With better accessibility comes better usability and user experience. This talk aims to demystify web accessibility and provide you with simple and practical takeaways, which you can easily incorporate in your workflow today. You are going to get a better understanding of how other people surf the web and find out how to make your web projects more inclusive and improve the usability and user experience at the same time.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Links

UI Events API https://hacks.mozilla.org/2017/03/internationalize-your-keyboard-controls/ https://codepen.io/matuzo/pen/PmgWRm?editors=0010 https://caniuse.com/#feat=keyboardevent-code https://caniuse.com/#feat=keyboardevent-key

Semantics and focus: https://codepen.io/matuzo/pen/QvNJOW?editors=1100 https://codepen.io/matuzo/pen/EmKrZq?editors=1100 http://codepen.io/matuzo/pen/YVqRaj?editors=1010 https://codepen.io/matuzo/pen/xgwxNw https://codepen.io/matuzo/pen/YNyPMj https://codepen.io/matuzo/pen/BpQreX https://codepen.io/matuzo/pen/pRNVJN https://codepen.io/matuzo/pen/GrNdvK https://allyjs.io/data-tables/focusable.html https://codepen.io/matuzo/pen/awdevz https://codepen.io/matuzo/pen/LLGKmP

Lang attribute https://www.youtube.com/watch?v=ox5QVbZSPBk https://adrianroselli.com/2015/01/on-use-of-lang-attribute.html

Microsoft Inclusive Design https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf

Medium articles https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412 https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9

Accessible UX

lang

tabindex

tabindex

class

class

tabindex

class

class

tabindex

class

tabindex

role

role

role

role

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Links