The Pointerless Web

ThePointerlessWebNicholas C. Zakas

@slicknet

Complaints: @jcleblanc

Accessibility

He means blind people,

right?

Visual Auditory Motor Cognitive

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

Visual


BlindUses screen reader and keyboard (and/or braille reader)

Low VisionUses monitor, keyboard, mouse, and screen magnifier

Color BlindUses monitor, keyboard, mouse, and high contrast

Auditory


DeafUses monitor, keyboard, and mouse (subtitles on videos)

Low HearingUses monitor, keyboard, and mouse (subtitles on videos)

Motor


Limited Fine Motor ControlUses monitor and keyboard

Only Gross Motor ControlUses monitor and single switch

Pain/Paralysis/RSIVarious other means of accessing a computer

Cognitive


Memory Deficit

Problem-Solving Deficit

Attention Deficit

Reading, Linguistic, Verbal Comprehension Deficit

Math Comprehension Deficit

Visual Comprehension Deficit

Carpel Tunnel SyndromeCompression of the median nerve between ligament and carpal bones

Not me :)

Browser Keyboard Shortcuts

Ctrl N

Ctrl T

Ctrl W

New browser window

New browser tab

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 +

Ctrl -

Ctrl 0

Zoom in

Zoom out

Reset zoom level


Ctrl

Ctrl

Go to next tab

Go to previous tab

Tab

Shift Tab

Alt →

Alt ←

Forward button

Back button

Navigating the Webwith Focus

Click here

Click here

This outline tells me where the input focus is

Move forward between links and

form controls

Activate currently-focused

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 { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}

/* remember to define focus styles! */:focus { outline: 0;}

/* remember to highlight inserts somehow! */ins { text-decoration: none;}del { text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */table { border-collapse: collapse; border-spacing: 0;}

Upgrade!

What’s Focusable?Focusable<a><input><textarea><select><button><body><iframe><object>

Not Focusable*<span><div><p><section><header><footer><article>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>

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

Add into the normal tab order

Make Focusable

<span id="my-span" tabindex="-1"> Howdy!</span>

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

Not in tab order but can use

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

Click here Can receive focus

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

Spatial Navigation

*

* Requires CrossFire Chrome extension

Spatial Navigation

Shift →

Shift ←

Next link to the right

Next link to the left

Shift ↑

Shift ↓

Next link to the top

Next link to the bottom

Hover

I can’t hover

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

Don’t lose 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?

J

K

Show shortcuts

Go to next item

Go to previous item

U Back to list view

/ Focus Search

Common Keyboard Shortcuts

I

H

Go to something

Go to Inbox

Go to Home

G

G

G

then

then

then

Common Keyboard Shortcuts

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 letterto navigate to sections

• Use single letters forcommon actions

• Shift focus appropriately

Accessibility

Visual Auditory Motor Cognitive


Thank you

Etcetera

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

The Pointerless Web

Technology

Transcript of The Pointerless Web