Accessible UX

A presentation at Wordcamp Vienna in April 2017 in Vienna, Austria by Manuel Matuzovic

UX ACCESSIBLE Manuel Matuzovi ć
@mmatuzo
WordCamp Vienna 04/2017

#WCVIE @mmatuzo

Manuel Matuzovic

Manuel Matuzovi ć

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

Accessibility The quality of being able to be reached or entered. as defined by the Oxford Dictionar y

Accessibility in web design means creating web pages that everyone can use, regardless of hardware, so ! ware, or any sensory or physical impairment. WordPress Codex – Accessibility

Accessibility The quality of being easily understood or appreciated . *as defined by the Oxford Dictionar y

č , ć , đ , 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

QWERTY

QWERTZ

AZERTY

JCUKEN

Demo: Keyboard controls

QWERTY QWERT Z

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

QWERTY

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 specification

Reference keyboard

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

Browsersupport

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

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

lang-A & ribute impacts • Assistive Technology • Translation tools and browsers • Quote characters
• Date and n umber inputs • Search engines
• Hyphenation

<!DOCTYPE html > <html <?php
language_attributes ();
?>
class
"no-js no-svg"
<head> <?php wp_head (); ?> </head> <body> </body> </html> lang a & ribute in WordPress

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

Keyboard users

Issues • Missing or insu ﬃ cient focus style s • Off-screen content
• Bad semantics (e.g. bu $ on)
• Bad focus management (e.g. modal window)

Possible solutions • :focus styling
• Se $ ing tabindex
• Knowing and using basic HTML • Manage focus
• T rap focus

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

Hiding content
[hidden]
{
display :
none ;
}

Se & ing tabindex
<h2
tabindex
"0"
A focusable heading
</h2>

Semantics ma & er
 <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>  <button> Just use button </button>

Remember last focus // Store the last focused element
let
lastFocusedElement
=
document . activeElement ;
// Set focus to the modal window modal . focus ();
// Close the window by clicking the close button
close . addEventListener ( 'click' ,
removeModal );
function
removeModal () {
// Remove the modal window if it's visible
modal . classList . remove ( 'is-visible' );
// Return focus to last focused element
lastFocusedElement . focus ();
}

Trap focus // If the current element in focus is the first focusable element within the modal window … if
( document . activeElement
===
firstTabStop ) {
e . preventDefault ();
// ...jump to the last focusable element
lastTabStop . focus ();
}

Who are we doing this for?

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.

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

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

Navigation via headings

The HTML5 document outline is a myth
 <h1> Heading </h1> <section> <h1> Heading </h1> <section> <h1> Heading </h1> </section> </section>

Use properly ranked h-elements
 <h1> Heading </h1> <section> <h2> Heading </h2> <section> <h3> Heading </h3> </section> </section>

T WEETABLE TAKE-AWAY A sound document outline has a huge impact on users and third party so ( ware. Get it right!

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

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

WordPress and a11y • Make WordPress Accessible   ( h $ ps://make.wordpress.org/accessibility/ )
• Accessibility Handbook   ( h $ ps://make.wordpress.org/accessibility/handbook/ )
• Accessibility Theme Review   ( h $ ps://make.wordpress.org/themes/handbook/review/accessibility/ )
• Useful Tools   ( h $ ps://make.wordpress.org/accessibility/useful-tools/ )
• WP Accessibility Plugin   ( h $ ps://wordpress.org/plugins/wp-accessibility/ )

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.

THANK YOU Manuel Matuzovi ć
@mmatuzo
medium.com /@matuzo codepen.io/matuzo
manuel@matuzo.at

Images • Slide4: Daniel Gerersdorfer www.gerersdorfer.net • Slide5: h $ ps://maps.google.com • Slide11: h $ ps://en.wikipedia.org/wiki/QWERTZ#/media/File:KB_Germany.svg
• Slide12: h $ ps://en.wikipedia.org/wiki/QWERTY#/media/File:KB_Intl_English_Mac_- Apple_Keyboard(MC184Z).svg
• Slide13: h $ ps://upload.wikimedia.org/wikipedia/commons/4/41/Belgian_pc_keyboard.svg
• Slide14: h $ ps://upload.wikimedia.org/wikipedia/commons/6/60/KB_Russian.svg
• Slide21: h $ ps://www.w3.org/TR/uievents-code/#code-value-tables
• Slide38: h $ ps://download.microso & .com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/ INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf

Manuel Matuzovic
@matuzo

1 / 51

UI Events API: https://hacks.mozilla.org/2017/03/internationalize-your-keyboard-controls/ https://caniuse.com/#feat=keyboardevent-code

Semantics and focus: http://codepen.io/matuzo/pen/xgwxNw http://codepen.io/matuzo/pen/EmKrZq http://codepen.io/matuzo/pen/YNyPMj http://codepen.io/matuzo/pen/BpQreX http://codepen.io/matuzo/pen/pRNVJN http://codepen.io/matuzo/pen/GrNdvK

Lang attribute: https://www.youtube.com/watch?v=ox5QVbZSPBk

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