Slide 1
Slide 1 text
@shaundunne
R3T & A11Y
This is for everyone
Slide 2
Slide 2 text
@shaundunne
When sites are correctly designed, developed and
edited, all users have equal access to information
and functionality.
- Wikipedia, Web Accessibility
Slide 3
Slide 3 text
@shaundunne
When sites are correctly designed, developed and
edited, all users have equal access to information
and functionality.
- Wikipedia, Web Accessibility
Slide 4
Slide 4 text
@shaundunne
285 million people are estimated to be visually impaired worldwide.
39 million are blind.
WHO | Visual impairment and blindness. http:/
/www.who.int/mediacentre/factsheets/fs282/en/#
Slide 5
Slide 5 text
@shaundunne
Current A11Y is not quite right
Slide 6
Slide 6 text
@shaundunne
No reason not to
Slide 7
Slide 7 text
@shaundunne
Slide 8
Slide 8 text
@shaundunne
Accessibility === Usability
Slide 9
Slide 9 text
@shaundunne
Shaun Dunne
@shaundunne
www.boticca.com
www.shaundunne.com
Head of FE Development
Slide 10
Slide 10 text
@shaundunne
Don’t feel bad
Slide 11
Slide 11 text
@shaundunne
Some quick wins
Slide 12
Slide 12 text
@shaundunne
// presentational
// Part of the content
alt tag
// Part of the content
alt tag
Slide 13
Slide 13 text
@shaundunne
username
username
labels
Slide 14
Slide 14 text
@shaundunne
class="label">username
username
labels
Slide 15
Slide 15 text
@shaundunne
Slide 16
Slide 16 text
@shaundunne
Slide 17
Slide 17 text
@shaundunne
Visual issues
Motor
Auditory
Seizures
Cognitive
Slide 18
Slide 18 text
@shaundunne
Keyboard Accessibility
Slide 19
Slide 19 text
@shaundunne
Slide 20
Slide 20 text
@shaundunne
:focus{
outline:none;
}
Slide 21
Slide 21 text
@shaundunne
Slide 22
Slide 22 text
@shaundunne
Slide 23
Slide 23 text
@shaundunne
Slide 24
Slide 24 text
@shaundunne
With great
share-ability
comes great
responsibility
- no-one ever
Slide 25
Slide 25 text
@shaundunne
Even Carousels can be Accessible
Slide 26
Slide 26 text
@shaundunne
Slide 27
Slide 27 text
@shaundunne
Good Ol’ HTML
Use Native Elements
var WarpButton = React.createClass({displayName: "WarpButton",
render: function() {
return React.createElement("button", null, "Engage!");
}
});
Slide 28
Slide 28 text
@shaundunne
var WarpButton = React.createClass({displayName: "WarpButton",
render: function() {
return React.createElement("span", { onClick: this.engage }, "Engage!");
}
});
Slide 29
Slide 29 text
@shaundunne
ARIA to the rescue
var WarpButton = React.createClass({displayName: "WarpButton",
render: function() {
return React.createElement("span",{
onClick: this.engage,
tabindex: "0"
}, "Engage!");
}
});
Slide 30
Slide 30 text
@shaundunne
ARIA to the rescue
var WarpButton = React.createClass({displayName: "WarpButton",
render: function() {
return React.createElement("span",{
onClick: this.engage,
tabindex: "0",
role: "button"
}, "Engage!");
}
});
Slide 31
Slide 31 text
@shaundunne
ARIA to the rescue
var WarpButton = React.createClass({displayName: "WarpButton",
render: function() {
return React.createElement("span",{
onClick: this.engage,
onKeyUp: this.keyUp,
tabindex: "0",
role: "button"
}, "Engage!");
}
});
Slide 32
Slide 32 text
@shaundunne
ARIA Roles
alert
alertdialog
application
article
banner
button
checkbox
columnheader
combobox
command [abstract]
complementary
composite [abstract]
contentinfo
definition
dialog
directory
document
form
grid
gridcell
group
heading
img
input [abstract]
landmark [abstract]
link
list
listbox
listitem
log
main
marquee
math
menu
seperator
slider
spinbutton
status
structure [abstract]
tab
tablist
tabpanel
textbox
timer
toolbar
tooltip
tree
treegrid
treeitem
widget [abstract]
window [abstract]
navigation
note
option
presentation
progressbar
radio
radiogroup
range [abstract]
region
roletype [abstract]
row
rowgroup
rowheader
scrollbar
search
section [abstract]
sectionhead [abstract]
select [abstract]
http://www.w3.org/TR/wai-aria/roles
Slide 33
Slide 33 text
@shaundunne
ARIA States & Properties
aria-atomic
aria-busy (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-autocomplete
aria-checked (state)
aria-disabled (state)
aria-expanded (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-level
aria-multiline
aria-multiselectable
aria-orientation
aria-pressed (state)
aria-readonly
aria-required
aria-selected (state)
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
http://www.w3.org/TR/wai-aria/states_and_properties
Slide 34
Slide 34 text
@shaundunne
ARIA States & Properties
aria-atomic
aria-busy (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-autocomplete
aria-checked (state)
aria-disabled (state)
aria-expanded (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-level
aria-multiline
aria-multiselectable
aria-orientation
aria-pressed (state)
aria-readonly
aria-required
aria-selected (state)
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
http://www.w3.org/TR/wai-aria/states_and_properties
Slide 35
Slide 35 text
@shaundunne
ARIA States & Properties
aria-atomic
aria-busy (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-autocomplete
aria-checked (state)
aria-disabled (state)
aria-expanded (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-level
aria-multiline
aria-multiselectable
aria-orientation
aria-pressed (state)
aria-readonly
aria-required
aria-selected (state)
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
http://www.w3.org/TR/wai-aria/states_and_properties
Slide 36
Slide 36 text
@shaundunne
const React = require('react');
const AppStore = require('../stores/app_store.js');
function cartItems(){
return{items: AppStore.getCart()}
}
let LiveRegion = React.createClass({
getInitialState: function(){
return cartItems();
},
componentWillMount: function(){
AppStore.addChangeListener(this._onChange);
},
_onChange:function(){
this.setState({
a11y: 'Cart Updated. You have' + this.state.items.length + 'items in your cart'
});
},
render(){
return (
{this.state.a11y}
);
}
});
module.exports = LiveRegion;
Slide 37
Slide 37 text
@shaundunne
const React = require('react');
const AppStore = require('../stores/app_store.js');
function cartItems(){
return{items: AppStore.getCart()}
}
let LiveRegion = React.createClass({
getInitialState: function(){
return cartItems();
},
componentWillMount: function(){
AppStore.addChangeListener(this._onChange);
},
_onChange:function(){
this.setState({
a11y: 'Cart Updated. You have' + this.state.items.length + 'items in your cart'
});
},
render(){
return (
{this.state.a11y}
);
}
});
module.exports = LiveRegion;
Slide 38
Slide 38 text
@shaundunne
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Slide 39
Slide 39 text
@shaundunne
The Chosen One
Slide 40
Slide 40 text
@shaundunne
Slide 41
Slide 41 text
@shaundunne
react-a11y
https://github.com/rackt/react-a11y
Slide 42
Slide 42 text
@shaundunne
Chrome ADT
http://goo.gl/wnIA8m
Slide 43
Slide 43 text
@shaundunne
Chrome ADT
http://goo.gl/wnIA8m
Slide 44
Slide 44 text
@shaundunne
chrome://accessibility
Slide 45
Slide 45 text
@shaundunne
http://accesslint.com/
Slide 46
Slide 46 text
@shaundunne
http://tenon.io/
Slide 47
Slide 47 text
@shaundunne
Resources
http://www.w3.org/TR/wai-aria/
http://a11yproject.com/
https://code.facebook.com/accessibility
https://www.google.com/accessibility/
Slide 48
Slide 48 text
@shaundunne
Talks
Marcy Sutton : Javascript For Everyone
Léonie Watson : ”Rock & roll guide to HTML5 & ARIA"
Jörn Zaefferer : Talk to me
Accessibility is a Feature You Can Build
Talk playlist : http://j.mp/a11y-vids
Slide 49
Slide 49 text
@shaundunne
Thanks!
@shaundunne