UX
ACCESSIBLE
Manuel Matuzović
@mmatuzo
WordCamp Vienna 04/2017
Slide 2
Slide 2 text
#WCVIE
@mmatuzo
Slide 3
Slide 3 text
Manuel Matuzovic
Slide 4
Slide 4 text
Manuel Matuzović
Slide 5
Slide 5 text
č, ć, đ, dž, š, ž, nj, lj
q, w, x
Slide 6
Slide 6 text
Accessibility
The quality of being able to be reached
or entered.
as defined by the Oxford Dictionary
Slide 7
Slide 7 text
Accessibility in web design means
creating web pages that everyone can
use, regardless of hardware, software,
or any sensory or physical impairment.
WordPress Codex – Accessibility
Slide 8
Slide 8 text
Accessibility
The quality of being easily understood
or appreciated.
*as defined by the Oxford Dictionary
Slide 9
Slide 9 text
č, ć, đ, dž, š, ž, nj, lj
q, w, x
Slide 10
Slide 10 text
Keyboard layouts
“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
Slide 11
Slide 11 text
QWERTY
Slide 12
Slide 12 text
QWERTZ
Slide 13
Slide 13 text
AZERTY
Slide 14
Slide 14 text
JCUKEN
Slide 15
Slide 15 text
Demo: Keyboard controls
Slide 16
Slide 16 text
QWERTY
QWERTZ
Slide 17
Slide 17 text
event.keyCode
window.addEventListener('keydown', navigate);
function navigate(e) {
...
if (e.keyCode === 68) {
moveLeftAndRight(1);
}
if (e.keyCode === 90) {
shootMissile();
}
}
Slide 18
Slide 18 text
QWERTY
Slide 19
Slide 19 text
AZERTY
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
Reference keyboard
Slide 22
Slide 22 text
window.addEventListener('keydown', navigate);
function navigate(e) {
...
if (e.code === 'KeyD') {
moveLeftAndRight(1);
}
if (e.code === 'KeyY') {
shootMissile();
}
}
event.keyCode
Slide 23
Slide 23 text
Browsersupport
Slide 24
Slide 24 text
TWEETABLE TAKE-AWAY
The web is international and so are
your users.
Don’t assume that all users use the
same input devices.
Slide 25
Slide 25 text
lang attribute
Document
Slide 26
Slide 26 text
lang-Attribute impacts
• Assistive Technology
• Translation tools and browsers
• Quote characters
• Date and number inputs
• Search engines
• Hyphenation
Slide 27
Slide 27 text
class="no-js no-svg">
lang attribute in WordPress
Slide 28
Slide 28 text
TWEETABLE TAKE-AWAY
Make sure to tell the browser the
correct language in use. Everyone
benefits from it.
Slide 29
Slide 29 text
Keyboard users
Slide 30
Slide 30 text
Issues
• Missing or insufficient focus styles
• Off-screen content
• Bad semantics (e.g. button)
• Bad focus management (e.g. modal window)
Slide 31
Slide 31 text
Possible solutions
• :focus styling
• Setting tabindex
• Knowing and using basic HTML
• Manage focus
• Trap focus
Slide 32
Slide 32 text
:focus styling
a:focus {
color: #FF00FF;
}
Slide 33
Slide 33 text
Hiding content
[hidden] {
display: none;
}
Slide 34
Slide 34 text
Setting tabindex
A focusable heading
Slide 35
Slide 35 text
Semantics matter
I'm a div
I'm a div
I'm a div
Just use button
Slide 36
Slide 36 text
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();
}
Slide 37
Slide 37 text
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();
}
Slide 38
Slide 38 text
Who are we doing this for?
Slide 39
Slide 39 text
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.
Slide 40
Slide 40 text
TWEETABLE TAKE-AWAY
Make sure to test plugins and JS
components for keyboard support
before you use them.
Slide 41
Slide 41 text
The Document Outline (h1-h6)
• Convey document structure
• SEO
• Navigation for screen readers
Slide 42
Slide 42 text
Navigation via headings
Slide 43
Slide 43 text
The HTML5 document outline is a myth
Heading
Heading
Heading
Slide 44
Slide 44 text
Use properly ranked h-elements
Heading
Heading
Heading
Slide 45
Slide 45 text
TWEETABLE TAKE-AWAY
A sound document outline has a
huge impact on users and third
party software. Get it right!
Slide 46
Slide 46 text
Navigation via landmarks
Slide 47
Slide 47 text
TWEETABLE TAKE-AWAY
Take enough time to think about
your document structure and
markup content correctly.