SlideShare a Scribd company logo
1 of 42
Download to read offline
Keyboard and Interaction
Accessibility Techniques
Jared Smith
http://webaim.org
@webaim
Keyboard User
!=
Screen Reader User
Screen Reader User
(usually) =
Keyboard User
Keyboard
Accessibility Testing
+
Keyboard Accessibility
is Different When a
Screen Reader
is Running
Source Code Order
=
Navigation Order
and screen reader reading order too!
Navigation Order
• Use CSS (float, position, etc.) to control
positioning
• Navigation order should follow visual flow
• Sidebars before or after main content?
• Be careful with “content first” approach
• Design reading/navigation order early
Screen Reader Navigation
• Links and form controls
• Headings
• Landmarks
• Lists
• Forms
• Buttons
• etc.
Standard Browser Navigation
• Links and form controls
Do not remove the focus
indicators from links
a {
outline:0;
}
“Skip” links
“Skip to main content” or
“Skip navigation”???
<a href=”#maincontent”>Skip
to main content</a>
<a name=”maincontent”
id=”maincontent”></a>
or
<div id=”maincontent”>...
Hidden “Skip” links
a#skip {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
a#skip:focus {
position:static;
width:auto;
height:auto;
}
Don't display:none the 'skip' link.
CSS3 to enhance visibility
a#skip {
position: absolute;
top:-42px;
left:0px;
background:transparent;
transition: top .7s .5s ease-out,
background .7s linear;
}
a#skip:focus {
top:0px;
background:#860000;
transition: top .1s ease-in,
background .25s linear;
}
http://webaim.org/presentations/2012/ariahtml5/hiddenlinks2
ARIA Landmark Roles
• application, banner, complementary,
contentinfo, main, navigation, form, and
search
• Allows easy access to major page
components
• The end of "skip" links? What about
sighted keyboard users?
Landmark Roles
<div role="navigation"
aria-label="Main navigation">
<div role="main">
<form role="search">
You can add aria-label to differentiate
multiple landmarks of the same type.
HTML5 and Landmark
Roles Mapping
<main> - role="main"
<article> - role="article"
<footer> - role="contentinfo"
<header> - role="banner"
<nav> - role="navigation"
<aside> - role="complementary"
ARIA Support > HTML5 Support
so use both... for now
<main role="main">
Ensure Interactive Elements
are Links or Form Controls
or...
make non-focusable elements focusable with
tabindex
Avoid Tabindex!!!
... unless you're sure you know what you're doing.
If the default tab order is not logical,
fix your source code order.
tabindex="1+" defines an explicit tab order
tabindex="0" allows things besides links and
form elements to receive keyboard focus.
tabindex="-1" allows things besides links and
form elements to receive programmatic focus
(by scripting, links, etc.)
<p tabindex=”0”
onclick=”submitForm()”>Submit Search</p>
But
<input type=”submit” value=”Submit
Search”>
or
<button onclick=”submitForm()”>Submit
Search</button>
are better!
WARNING!
Click events do not always trigger via keyboard
for things other than links or form controls...
... even with tabindex=”0”
if(event.keyCode==13 || event.keyCode==32)
{
doStuff();
}
Attach an onkeyup event and then check for
Enter (13) and Space (32) key presses:
• Allows non-focusable elements to receive
programmatic focus (by scripting, links, etc.)
• Necessary for focusing dialog boxes, error
messages, etc.
• WARNING:This removes the element from
the default tab order.
tabindex=”-1”
Review
• Ensure all interactive elements are links or
form controls, or make them focusable
with tabindex=”0”.
• If using tabindex, detect Enter and Space
key events.
• Ensure non-focusable elements (such as
dialog windows) have tabindex=”-1”
before focusing them programmatically.
Roving tabindex
• Useful for controlling focus within interactive
widgets (menus, tab panels, tree widgets, etc.)
• Set tabindex=”0” on currently active item.This
places it in the tab order.
• Set tabindex=”-1” on all other items.This
removes them from the tab order and makes them
focusable with scripting.
• Use focus() to set focus as user navigates
(arrow keys, etc.)
• tabindex=”0” roves or follows the active item
allowing users to return directly to it later.
http://hanshillen.github.io/jqtest/#goto_tabs
In an ARIA tab panel, the entire tab group functions as one tab stop, then
arrow keys are used to select the active tab.
1
3
2
tabindex=0 tabindex=-1
tabindex=0
tabindex=-1 tabindex=-1
Press to select the next tab
tabindex=0
If you tab away from the tab panel and later return,“Cats” remains
the active and focused tab because it has tabindex=0.
Carousels
http://shouldiuseacarousel.com/
Carousels
http://shouldiuseacarousel.com/
Carousels
• The target was the biggest item on the homepage
- the first carousel item.“Nonetheless, the user
failed the task.” - Nielsen Norman Group
• “We have tested rotating offers many times and
have found it to be a poor way of presenting home
page content.” - Wider Funnel
• 1% clicked a feature. Of those, 89% were the first
position. 1% of clicks for the most significant
object on the home page? - Notre Dame
University
Carousels
• “Almost all of the testing I’ve managed has proven
content delivered via carousels to be missed by
users. Few interact with them.” - Adam Fellows
• “Carousels are effective at being able to tell
people in Marketing/Senior Management that their
latest idea is now on the Home Page. In summary,
use them to put content that users will ignore on
your Home Page. Or, if you prefer, don’t use them.
Ever.” - Lee Duddell
• “Carousels are this decade’s <blink> tag.” - Jared
Smith
Carousels
• http://conversionxl.com/dont-use-automatic-
image-sliders-or-carousels-ignore-the-fad/
• http://www.nngroup.com/articles/auto-forwarding/
• http://weedygarden.net/2013/07/carousel-
interaction-stats/
• http://bradfrostweb.com/blog/post/carousels/
• http://www.uofadmissionsmarketing.com/2013/02/
using-carousels-in-higher-education.html
Carousel Accessibility Issues
• Automated carousels violate WCAG 2.0 Success
Criteria 2.2.2. - Pause, Stop, Hide
• Distracting and confusing
• Difficult interaction model
• No relationship between controls and content
• Loss of focus when carousel changes
Carousel Accessibility Solutions
• Avoid auto-playing (optimal) or include a visible
pause button (preferably) before the carousel
• Pause carousel on mouse hover and on keyboard
focus.
• Ensure appropriate alternative text.
• Provide context for controls
• Descriptive text
• ARIA tab panel?
• Ensure focused or activated items do not
disappear, or set focus when they do
ARIA Design Patterns for
Widget Interaction
http://www.w3.org/WAI/PF/aria-practices/#aria_ex
Questions?
Jared Smith
http://webaim.org
@webaim

More Related Content

What's hot

Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
 
Essential html tweaks for accessible themes
Essential html tweaks for accessible themesEssential html tweaks for accessible themes
Essential html tweaks for accessible themesMartin Stehle
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with IonicMorris Singer
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...Patrick Lauke
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusioncolinbdclark
 
Building WebApp with HTML5
Building WebApp with HTML5Building WebApp with HTML5
Building WebApp with HTML5Tien Tran Le Duy
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript AccessibleDennis Lembree
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web AccessibilityHagai Asaban
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPressJoseph Dolson
 
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesHeather Rock
 

What's hot (20)

Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
P.S. I love you
P.S. I love youP.S. I love you
P.S. I love you
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
Essential html tweaks for accessible themes
Essential html tweaks for accessible themesEssential html tweaks for accessible themes
Essential html tweaks for accessible themes
 
Xxx
XxxXxx
Xxx
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
 
Hacking For Innovation Delhi
Hacking For Innovation DelhiHacking For Innovation Delhi
Hacking For Innovation Delhi
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusion
 
What is jQuery?
What is jQuery?What is jQuery?
What is jQuery?
 
Building WebApp with HTML5
Building WebApp with HTML5Building WebApp with HTML5
Building WebApp with HTML5
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
IconFonts
IconFontsIconFonts
IconFonts
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPress
 
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
 

Viewers also liked

Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricksDirk Ginader
 
The Legend of the Typical Screen Reader User
The Legend of the Typical Screen Reader UserThe Legend of the Typical Screen Reader User
The Legend of the Typical Screen Reader UserJared Smith
 
Accessibility in Responsive web design
Accessibility in Responsive web designAccessibility in Responsive web design
Accessibility in Responsive web designNexer Digital
 
Implementing ARIA for Real World Accessibility
Implementing ARIA for Real World AccessibilityImplementing ARIA for Real World Accessibility
Implementing ARIA for Real World AccessibilityJared Smith
 
Insights into Cognitive Web Accessibility
Insights into Cognitive Web AccessibilityInsights into Cognitive Web Accessibility
Insights into Cognitive Web AccessibilityJared Smith
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIDirk Ginader
 
Again with the Ajax accessibility
Again with the Ajax accessibilityAgain with the Ajax accessibility
Again with the Ajax accessibilityChristian Heilmann
 
Joining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXJoining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXDavid Sloan
 
UX Camp Ottawa: Accessibility as a Design Tool
UX Camp Ottawa: Accessibility as a Design ToolUX Camp Ottawa: Accessibility as a Design Tool
UX Camp Ottawa: Accessibility as a Design ToolDerek Featherstone
 
Designing and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityUsability Matters
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesSteven Faulkner
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Access iQ
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityInnoTech
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Dylan Wilbanks
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Karen Mardahl
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosDennis Lembree
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & AccessibilityChristopher Schmitt
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise John Foliot
 

Viewers also liked (20)

Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
The Legend of the Typical Screen Reader User
The Legend of the Typical Screen Reader UserThe Legend of the Typical Screen Reader User
The Legend of the Typical Screen Reader User
 
Accessibility in Responsive web design
Accessibility in Responsive web designAccessibility in Responsive web design
Accessibility in Responsive web design
 
Implementing ARIA for Real World Accessibility
Implementing ARIA for Real World AccessibilityImplementing ARIA for Real World Accessibility
Implementing ARIA for Real World Accessibility
 
Insights into Cognitive Web Accessibility
Insights into Cognitive Web AccessibilityInsights into Cognitive Web Accessibility
Insights into Cognitive Web Accessibility
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
 
Again with the Ajax accessibility
Again with the Ajax accessibilityAgain with the Ajax accessibility
Again with the Ajax accessibility
 
Joining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXJoining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UX
 
UX Camp Ottawa: Accessibility as a Design Tool
UX Camp Ottawa: Accessibility as a Design ToolUX Camp Ottawa: Accessibility as a Design Tool
UX Camp Ottawa: Accessibility as a Design Tool
 
Designing and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital Accessibility
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
 

Similar to Keyboard and Interaction Accessibility Techniques

a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for DevelopersMonika Piotrowicz
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpRussell Heimlich
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UXAdrian Roselli
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessiblecolinbdclark
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can buildMonika Piotrowicz
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Centurydreamwidth
 
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
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Webgreenideas
 
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteTear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteSarah Joy Arnold
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXStoian Dipchikov
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018Patrick Lauke
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone WildJared Smith
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
 

Similar to Keyboard and Interaction Accessibility Techniques (20)

a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground Up
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
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 code-patterns
Accessible code-patternsAccessible code-patterns
Accessible code-patterns
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
Developing an Accessible Web
Developing an Accessible WebDeveloping an Accessible Web
Developing an Accessible Web
 
Touch the web
Touch the webTouch the web
Touch the web
 
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteTear Down This Wall! Removing Boundaries to Create an Accessible Website
Tear Down This Wall! Removing Boundaries to Create an Accessible Website
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 

Recently uploaded

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 

Recently uploaded (20)

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 

Keyboard and Interaction Accessibility Techniques