SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
6.
Keyboard Accessibility
is Different When a
Screen Reader
is Running
7.
Source Code Order
=
Navigation Order
and screen reader reading order too!
8.
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
9.
Screen Reader Navigation
• Links and form controls
• Headings
• Landmarks
• Lists
• Forms
• Buttons
• etc.
10.
Standard Browser Navigation
• Links and form controls
11.
Do not remove the focus
indicators from links
a {
outline:0;
}
12.
“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”>...
15.
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?
16.
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.
17.
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">
18.
Ensure Interactive Elements
are Links or Form Controls
or...
make non-focusable elements focusable with
tabindex
19.
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.
20.
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.)
22.
But
<input type=”submit” value=”Submit
Search”>
or
<button onclick=”submitForm()”>Submit
Search</button>
are better!
23.
WARNING!
Click events do not always trigger via keyboard
for things other than links or form controls...
... even with tabindex=”0”
24.
if(event.keyCode==13 || event.keyCode==32)
{
doStuff();
}
Attach an onkeyup event and then check for
Enter (13) and Space (32) key presses:
25.
• 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”
26.
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.
27.
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.
35.
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
36.
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
38.
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
39.
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
40.
ARIA Design Patterns for
Widget Interaction
http://www.w3.org/WAI/PF/aria-practices/#aria_ex
41.
Questions?
Jared Smith
http://webaim.org
@webaim