Download - The Pointerless Web
![Page 1: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/1.jpg)
ThePointerlessWebNicholas C. Zakas
![Page 2: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/2.jpg)
![Page 3: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/3.jpg)
@slicknet
Complaints: @jcleblanc
![Page 4: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/4.jpg)
Accessibility
He means blind people,
right?
![Page 5: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/5.jpg)
Visual Auditory Motor Cognitive
http://webaim.org/intro/#people
![Page 6: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/6.jpg)
Visual
http://webaim.org/intro/#people
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
![Page 7: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/7.jpg)
Auditory
http://webaim.org/intro/#people
DeafUses monitor, keyboard, and mouse (subtitles on videos)
Low HearingUses monitor, keyboard, and mouse (subtitles on videos)
![Page 8: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/8.jpg)
Motor
http://webaim.org/intro/#people
Limited Fine Motor ControlUses monitor and keyboard
Only Gross Motor ControlUses monitor and single switch
Pain/Paralysis/RSIVarious other means of accessing a computer
![Page 9: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/9.jpg)
Cognitive
http://webaim.org/intro/#people
Memory Deficit
Problem-Solving Deficit
Attention Deficit
Reading, Linguistic, Verbal Comprehension Deficit
Math Comprehension Deficit
Visual Comprehension Deficit
![Page 10: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/10.jpg)
Them
![Page 11: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/11.jpg)
Me
![Page 12: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/12.jpg)
Carpel Tunnel SyndromeCompression of the median nerve between ligament and carpal bones
![Page 13: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/13.jpg)
Not me :)
![Page 14: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/14.jpg)
![Page 15: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/15.jpg)
![Page 16: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/16.jpg)
![Page 17: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/17.jpg)
Browser Keyboard Shortcuts
Ctrl N
Ctrl T
Ctrl W
New browser window
New browser tab
Close browser tab
![Page 18: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/18.jpg)
Browser Keyboard Shortcuts
Alt D Set focus to address bar
Ctrl L Set focus to address bar
Ctrl E Set focus to search box
![Page 19: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/19.jpg)
Browser Keyboard Shortcuts
Ctrl +
Ctrl -
Ctrl 0
Zoom in
Zoom out
Reset zoom level
![Page 20: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/20.jpg)
Browser Keyboard Shortcuts
Ctrl
Ctrl
Go to next tab
Go to previous tab
Tab
Shift Tab
Alt →
Alt ←
Forward button
Back button
![Page 21: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/21.jpg)
Navigating the Webwith Focus
![Page 22: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/22.jpg)
Click here
![Page 23: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/23.jpg)
Click here
This outline tells me where the input focus is
![Page 24: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/24.jpg)
Move forward between links and
form controls
Activate currently-focused
link or button
Hold with tab to move backward
![Page 25: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/25.jpg)
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}
![Page 26: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/26.jpg)
Custom Focus Styles
a:focus,input:focus { outline: 1px solid red; color: red;}
![Page 27: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/27.jpg)
Eliminating Focus Styles?!?!
a { outline: 0;}
![Page 28: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/28.jpg)
You might already be doing this!!!
![Page 29: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/29.jpg)
/* 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;}
![Page 30: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/30.jpg)
Who?
![Page 31: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/31.jpg)
Upgrade!
![Page 32: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/32.jpg)
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
![Page 33: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/33.jpg)
Working with Focus
var button = document.getElementById("my-btn");
button.focus();
var focused = document.activeElement;
console.log(button === focused); // true
![Page 34: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/34.jpg)
Make Focusable
<span id="my-span" tabindex="0"> Howdy!</span>
var mySpan = document.getElementById(“my-span”);mySpan.focus();
Add into the normal tab order
![Page 35: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/35.jpg)
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()
![Page 36: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/36.jpg)
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
![Page 37: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/37.jpg)
Links & Buttons
The only way I can interact with
the page
![Page 38: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/38.jpg)
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
![Page 39: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/39.jpg)
Not a Button!
<span onclick="doSomething()"> Click Me</span>
Focusable
Visual Focus
Tab Order
Enter for onclick
![Page 40: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/40.jpg)
Still Not a Button!
<span tabindex="0" onclick="doSomething()"> Click Me</span>
Focusable
Visual Focus
Tab Order
Enter for onclick
![Page 41: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/41.jpg)
Still Not a Button!
<span tabindex="0" role="button" onclick="doSomething()"> Click Me</span>
Focusable
Visual Focus
Tab Order
Enter for onclick
![Page 42: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/42.jpg)
Spatial Navigation
![Page 43: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/43.jpg)
*
* Requires CrossFire Chrome extension
![Page 44: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/44.jpg)
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
![Page 45: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/45.jpg)
Hover
I can’t hover
![Page 46: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/46.jpg)
Bad Hover
.rect .controls { display: none;}
.rect:hover .controls { display: block;}
![Page 47: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/47.jpg)
Better Hover
.rect .controls { display: none;}
.rect:hover .controls,
.rect:focus .controls { display: block;}
![Page 48: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/48.jpg)
Hover
• Don’t rely on hover to show important details or functionality
• Whenever you use :hover, also use :focus
![Page 49: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/49.jpg)
Dialogs
Don’t lose focus
![Page 50: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/50.jpg)
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
![Page 51: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/51.jpg)
Keep Focus in Dialog
document.addEventListener(“focus”, function(event) { if (!dialogNode.contains(event.target)) { event.stopPropagation(); dialogNode.focus(); } }, true);
![Page 52: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/52.jpg)
Keyboard Shortcuts
Not a replacement for everything else!
![Page 53: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/53.jpg)
Common Keyboard Shortcuts?
J
K
Show shortcuts
Go to next item
Go to previous item
U Back to list view
/ Focus Search
![Page 54: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/54.jpg)
Common Keyboard Shortcuts
I
H
Go to something
Go to Inbox
Go to Home
G
G
G
then
then
then
![Page 55: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/55.jpg)
Common Keyboard Shortcuts
![Page 56: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/56.jpg)
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
![Page 57: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/57.jpg)
Demos
![Page 58: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/58.jpg)
Accessibility
![Page 59: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/59.jpg)
Visual Auditory Motor Cognitive
http://webaim.org/intro/#people
![Page 60: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/60.jpg)
Them
![Page 61: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/61.jpg)
Me
![Page 62: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/62.jpg)
Us
![Page 63: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/63.jpg)
Thank you
![Page 64: The Pointerless Web](https://reader033.vdocuments.net/reader033/viewer/2022051818/54b783d64a79591f6f8b4605/html5/thumbnails/64.jpg)
Etcetera
• My blog: nczonline.net• Twitter: @slicknet• These Slides: slideshare.net/nzakas