UX ACCESSIBLE Manuel Matuzovi ć
@mmatuzo
WordCamp Vienna 04/2017
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
• 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"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
language_attributes ();
?>
"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 ffi 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"0"
A focusable heading
</h2>
Semantics ma & er
<!-- DON'T: --> <div"btn"
I'm a div
</div> <div"btn"
"0"
I'm a div
</div> <div"btn"
"0"
"button"
I'm a div
</div> <!-- DO: --> <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
<!-- DON'T DO THAT: --> <h1> Heading </h1> <section> <h1> Heading </h1> <section> <h1> Heading </h1> </section> </section>
Use properly ranked h-elements
<!-- DO THAT: --> <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"banner"
</header> <section> <form"search"
</form></section> <aside></aside> <footer
"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
