The Pointerless Web

The
Pointerless
Web
Nicholas C. Zakas

@slicknet

Complaints: @jcleblanc

Accessibility
He means
blind people,
right?

Visual Auditory Motor Cognitive

http://webaim.org/intro/#people

Blind
Uses screen reader and
keyboard (and/or braille
reader)

Low Vision
Uses monitor, keyboard,
mouse, and screen
magnifier

Visual Color Blind
mouse, and high contrast

Deaf
and mouse (subtitles on
videos)

Low Hearing
and mouse (subtitles on
videos)

Auditory


Limited Fine Motor
Control
Uses monitor and
keyboard

Only Gross Motor Control
Uses monitor and single
switch

Pain/Paralysis/RSI
Motor Various other means of
accessing a computer


Memory Deficit

Problem-Solving Deficit

Attention Deficit

Reading, Linguistic, Verbal
Comprehension Deficit

Math Comprehension
Cognitive Deficit

Visual Comprehension
Deficit

Carpel Tunnel Syndrome
Compression of the
median nerve between
ligament and carpal bones

Browser Keyboard Shortcuts
Ctrl N New browser window

Ctrl T New browser tab

Ctrl W Close browser tab

Alt D Set focus to address bar

Ctrl L Set focus to address bar

Ctrl E Set focus to search box

Ctrl + Zoom in

Ctrl - Zoom out

Ctrl 0 Reset zoom level

Ctrl Tab Go to next tab

Ctrl Shift Tab Go to previous tab

Alt → Forward button

Alt ← Back button

Navigating the Web
with Focus

This outline tells
me where the
input focus is

Click here

Move forward Activate currently-
between links and focused
form controls link or button

Hold with tab to
move backward

nobr {
white-space: nowrap
}

/* states */

:focus {
outline: auto 5px -webkit-focus-ring-color
}

/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus, body:focus, input[readonly]:focus {
outline: none
}

applet:focus, embed:focus, iframe:focus, object:focus {
outline: none
}

input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
outline-offset: -2px
}

Custom Focus Styles

a:focus,
input:focus {
outline: 1px solid red;
color: red;
}

Eliminating Focus Styles?!?!

a{
outline: 0;
}

You might already
be doing this!!!

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {

What’s Focusable?
Focusable Not Focusable*
<a> <span>
<input> <div>
<textarea> <p>
<select> <section>
<button> <header>
<body> <footer>
<iframe> <article>
<object> EVERYTHING ELSE!

* By default

Working with Focus
var button = document.getElementById("my-btn");

button.focus();

var focused = document.activeElement;

console.log(button === focused); // true

Make Focusable
<span id="my-span" tabindex="0">
Howdy!
</span>
Add into the
normal tab order

var mySpan = document.getElementById(“my-span”);
mySpan.focus();

Make Focusable
<span id="my-span" tabindex="-1">
Howdy!
</span> Not in tab order
but can use
focus()
var mySpan = document.getElementById(“my-span”);
mySpan.focus();

Focus
• Don’t hide the focus rectangle
– Unless you’re using a custom focus style
• Use links to navigate to URLs
• Use buttons for in-page actions
or form submission

Links & Buttons
The only way I
can interact with
the page

Characteristics of Links & Buttons
 Can receive focus
Click here
 Show focus visually

 Part of normal tab order

 The onclick handler is
called when Enter is
pressed

Not a Button!
<span onclick="doSomething()">
Click Me
</span>
Focusable

Visual Focus

Tab Order

Enter for onclick

Still Not a Button!
<span tabindex="0" onclick="doSomething()">
Click Me
</span>

 Focusable

 Visual Focus
 Tab Order
Enter for onclick

Still Not a Button!
<span tabindex="0" role="button"
onclick="doSomething()">
Click Me
</span>
 Focusable

 Visual Focus
 Tab Order
Enter for onclick

*

* Requires CrossFire Chrome extension

Spatial Navigation

Shift → Next link to the right

Shift ← Next link to the left

Shift ↑ Next link to the top

Shift ↓ Next link to the bottom

Bad Hover
.rect .controls {
display: none;
}

.rect:hover .controls {
display: block;
}

Better Hover
.rect .controls {
display: none;
}

.rect:hover .controls,
.rect:focus .controls {
display: block;
}

Hover
• Don’t rely on hover to show important details
or functionality
• Whenever you use :hover, also use :focus

Dialogs
• Set focus to dialog element when displayed
– Set tabIndex = -1 and use focus()
• Remember where focus was before the dialog
was opened
– document.activeElement
• Pressing Esc should close
the dialog and set focus
back to where it was
• Keep focus in the dialog

Keep Focus in Dialog
document.addEventListener(“focus”,
function(event) {
if (!dialogNode.contains(event.target)) {
event.stopPropagation();
dialogNode.focus();
}
}, true);

Keyboard Shortcuts
Not a
replacement for
everything else!

Common Keyboard Shortcuts
? Show shortcuts

J Go to next item

K Go to previous item

U Back to list view

/ Focus Search

Common Keyboard Shortcuts

G then Go to something

G then I Go to Inbox

G then H Go to Home

Keyboard Shortcuts
• Use ? to bring up shortcuts list in a dialog
• Make use of common keyboard shortcuts
where possible (lists)
• Use the convention of G
followed by another letter
to navigate to sections
• Use single letters for
common actions
• Shift focus appropriately

Etcetera
• My blog: nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas

The Pointerless Web

Recommended

More Related Content

Similar to The Pointerless Web (20)

More from Nicholas Zakas (20)

Recently uploaded (20)

The Pointerless Web

Editor's Notes