SlideShare a Scribd company logo
1 of 64
Download to read offline
The
Pointerless
Web
Nicholas C. Zakas
The Pointerless Web
@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
         Uses monitor, keyboard,
         mouse, and high contrast
               http://webaim.org/intro/#people
Deaf
           Uses monitor, keyboard,
           and mouse (subtitles on
           videos)

           Low Hearing
           Uses monitor, keyboard,
           and mouse (subtitles on
           videos)

Auditory

                 http://webaim.org/intro/#people
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


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

            Problem-Solving Deficit

            Attention Deficit

            Reading, Linguistic, Verbal
            Comprehension Deficit

            Math Comprehension
Cognitive   Deficit

            Visual Comprehension
            Deficit
                  http://webaim.org/intro/#people
Them
Me
Carpel Tunnel Syndrome
Compression of the
median nerve between
ligament and carpal bones
Not me :)
The Pointerless Web
The Pointerless Web
The Pointerless Web
Browser Keyboard Shortcuts
Ctrl   N    New browser window

Ctrl   T    New browser tab

Ctrl   W    Close browser tab
Browser Keyboard Shortcuts
Alt    D    Set focus to address bar

Ctrl   L    Set focus to address bar

Ctrl   E    Set focus to search box
Browser Keyboard Shortcuts
Ctrl   +    Zoom in

Ctrl   -    Zoom out

Ctrl   0    Reset zoom level
Browser Keyboard Shortcuts
Ctrl      Tab         Go to next tab

Ctrl      Shift       Tab          Go to previous tab

Alt       →       Forward button

Alt       ←       Back button
Navigating the Web
    with Focus
Click here
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 {
Who?
Upgrade!
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
Spatial Navigation
*



* 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
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
     ?   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
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 letter
  to navigate to sections
• Use single letters for
  common actions
• Shift focus appropriately
Demos
Accessibility
Visual   Auditory   Motor           Cognitive




                       http://webaim.org/intro/#people
Them
Me
Us
Thank you
Etcetera
• My blog:      nczonline.net
• Twitter:      @slicknet
• These Slides: slideshare.net/nzakas

More Related Content

Similar to The Pointerless Web

Vivid Video And Really Embedding
Vivid Video And Really EmbeddingVivid Video And Really Embedding
Vivid Video And Really Embeddingtllandry
 
The Audio User Experience for Widgets
The Audio User Experience for WidgetsThe Audio User Experience for Widgets
The Audio User Experience for Widgetstoddkloots
 
WCAG 2.1 update for designers
WCAG 2.1 update for designersWCAG 2.1 update for designers
WCAG 2.1 update for designersIntopia
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesJared Smith
 
Tips for building fast multi touch enabled web sites
 Tips for building fast multi touch enabled web sites Tips for building fast multi touch enabled web sites
Tips for building fast multi touch enabled web sitesAspenware
 
Fast multi touch enabled web sites
Fast multi touch enabled web sitesFast multi touch enabled web sites
Fast multi touch enabled web sitesAspenware
 
CSS Disable Button - How to Disable Buttons Using CSS - Blogs
CSS Disable Button - How to Disable Buttons Using CSS - BlogsCSS Disable Button - How to Disable Buttons Using CSS - Blogs
CSS Disable Button - How to Disable Buttons Using CSS - BlogsRonDosh
 
ADVANCE PRESENTATION SKILLS.pptx
ADVANCE PRESENTATION SKILLS.pptxADVANCE PRESENTATION SKILLS.pptx
ADVANCE PRESENTATION SKILLS.pptxROWELTREYES
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
Time to Stop Wasting Time
Time to Stop Wasting TimeTime to Stop Wasting Time
Time to Stop Wasting Timeangiebakke
 
Clickable DIVs and other icebergs
Clickable DIVs and other icebergsClickable DIVs and other icebergs
Clickable DIVs and other icebergsBen Buchanan
 
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for DevelopersMonika Piotrowicz
 
DHTML - Events & Buttons
DHTML - Events  & ButtonsDHTML - Events  & Buttons
DHTML - Events & ButtonsDeep Patel
 
5 free tools for web accessibility testing
5 free tools for web accessibility testing5 free tools for web accessibility testing
5 free tools for web accessibility testingJohn McNabb
 
Accessible modal windows
Accessible modal windowsAccessible modal windows
Accessible modal windowsRuss Weakley
 
About Mobile Accessibility
About Mobile AccessibilityAbout Mobile Accessibility
About Mobile AccessibilityJohnny Sung
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessibleRuss Weakley
 
Visual Basic IDE Introduction
Visual Basic IDE IntroductionVisual Basic IDE Introduction
Visual Basic IDE IntroductionAhllen Javier
 

Similar to The Pointerless Web (20)

menus controls
menus controlsmenus controls
menus controls
 
Vivid Video And Really Embedding
Vivid Video And Really EmbeddingVivid Video And Really Embedding
Vivid Video And Really Embedding
 
The Audio User Experience for Widgets
The Audio User Experience for WidgetsThe Audio User Experience for Widgets
The Audio User Experience for Widgets
 
WCAG 2.1 update for designers
WCAG 2.1 update for designersWCAG 2.1 update for designers
WCAG 2.1 update for designers
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
 
Tips for building fast multi touch enabled web sites
 Tips for building fast multi touch enabled web sites Tips for building fast multi touch enabled web sites
Tips for building fast multi touch enabled web sites
 
Fast multi touch enabled web sites
Fast multi touch enabled web sitesFast multi touch enabled web sites
Fast multi touch enabled web sites
 
CSS Disable Button - How to Disable Buttons Using CSS - Blogs
CSS Disable Button - How to Disable Buttons Using CSS - BlogsCSS Disable Button - How to Disable Buttons Using CSS - Blogs
CSS Disable Button - How to Disable Buttons Using CSS - Blogs
 
ADVANCE PRESENTATION SKILLS.pptx
ADVANCE PRESENTATION SKILLS.pptxADVANCE PRESENTATION SKILLS.pptx
ADVANCE PRESENTATION SKILLS.pptx
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Time to Stop Wasting Time
Time to Stop Wasting TimeTime to Stop Wasting Time
Time to Stop Wasting Time
 
Clickable DIVs and other icebergs
Clickable DIVs and other icebergsClickable DIVs and other icebergs
Clickable DIVs and other icebergs
 
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
 
DHTML - Events & Buttons
DHTML - Events  & ButtonsDHTML - Events  & Buttons
DHTML - Events & Buttons
 
5 free tools for web accessibility testing
5 free tools for web accessibility testing5 free tools for web accessibility testing
5 free tools for web accessibility testing
 
Accessible modal windows
Accessible modal windowsAccessible modal windows
Accessible modal windows
 
About Mobile Accessibility
About Mobile AccessibilityAbout Mobile Accessibility
About Mobile Accessibility
 
MacBook Pro Out of the Box - Secondary Faculty
MacBook Pro Out of the Box - Secondary FacultyMacBook Pro Out of the Box - Secondary Faculty
MacBook Pro Out of the Box - Secondary Faculty
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessible
 
Visual Basic IDE Introduction
Visual Basic IDE IntroductionVisual Basic IDE Introduction
Visual Basic IDE Introduction
 

More from Nicholas Zakas

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorNicholas Zakas
 

More from Nicholas Zakas (20)

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
 

Recently uploaded

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 

Recently uploaded (20)

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 

The Pointerless Web

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

Editor's Notes

  1. Go to browser and show navigation using the keyboard.
  2. Go to blog navigation example.
  3. Put this into Web Inspector and show the difference.
  4. Show Gmail
  5. Demo!
  6. Don’t hide important information and then show on hoverI can’t get to it
  7. Show Twitter
  8. Show GitHub keyboard shortcut dialog
  9. Show Twitter
  10. GoogleGmailShortcuts dialogNavigate messagesReplyCreate newNavigate to link in emailGo to labelGo to InboxTwitterShortcuts dialogNavigate tweetsGo HomeGo to ConnectDirect MessagesReplyGitHubHomeIssuesShortcuts Dialog“T” for file finder