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

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