Slide 1
Slide 1 text
a11y-friendly
documentation
@carolstran
bit.ly/a11y-docs-resources
Slide 2
Slide 2 text
a11y
@carolstran
Slide 3
Slide 3 text
accessibility
@carolstran bit.ly/a11y-numeronym
Slide 4
Slide 4 text
@carolstran
a11y
bit.ly/a11y-numeronym
Slide 5
Slide 5 text
@carolstran a11yproject.com
Slide 6
Slide 6 text
@carolstran
accessibility
web accessibility
degree to which an environment is
usable by as many people as possible
degree to which a website is usable
by as many people as possible
bit.ly/a11yfore
Slide 7
Slide 7 text
@carolstran
1,000,000,000
World Health Organization
bit.ly/who-at
Slide 8
Slide 8 text
how people interact
with the web
@carolstran
Slide 9
Slide 9 text
assistive technology
@carolstran
Slide 10
Slide 10 text
screen readers
@carolstran
• jaws - job access
with speech
• apple’s voiceover
• microsoft’s narrator
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
keyboard navigation
@carolstran
• specialist
• custom
• on-screen
Slide 14
Slide 14 text
@carolstran bit.ly/shopify-dp
Slide 15
Slide 15 text
navigation hardware
@carolstran
• touchscreens
• mouth sticks
• foot-operated
mice
Slide 16
Slide 16 text
switch inputs
@carolstran
• mechanical
buttons
• foot plates
• electronic sensors
Slide 17
Slide 17 text
trackers
@carolstran
• eye
• head
• dwell control
Slide 18
Slide 18 text
@carolstran
there's a business
case for a11y
bit.ly/w3-bcase
Slide 19
Slide 19 text
but documentation
is left out
@carolstran
Slide 20
Slide 20 text
“documentation is
for developers”
@carolstran
Slide 21
Slide 21 text
One out of every 66
software developers is
blind or hard of sight
@carolstran
StackOverflow Developer Survey
bit.ly/so-devsurvey
Slide 22
Slide 22 text
@carolstran
Florian Beijers, freeCodeCamp
“The tutorials are undoubtedly
good, but were completely
unreadable for me”
bit.ly/fcc-florian
Slide 23
Slide 23 text
@carolstran
most of us are
already doing it
Slide 24
Slide 24 text
• logical layouts
• user journeys
• localization
• cross-browser testing
@carolstran
Slide 25
Slide 25 text
@carolstran
this is our
responsibility
Slide 26
Slide 26 text
@carolstran
“We may or may not be responsible for
writing the HTML, but if the developers we’re
working with don’t produce semantic
structure, then they’re not actually
representing the structures that we’re
building in our designs”
Anne Gibson, independent consultant
bit.ly/pfa-anne
Slide 27
Slide 27 text
structure
and hierarchy
@carolstran
Slide 28
Slide 28 text
@carolstran
Slide 29
Slide 29 text
@carolstran
Slide 30
Slide 30 text
html - hypertext
markup language
@carolstran bit.ly/a11yfore
Slide 31
Slide 31 text
• h1
• nav
• aside
• ul / ol
@carolstran
Slide 32
Slide 32 text
@carolstran bit.ly/react-gs
Slide 33
Slide 33 text
@carolstran bit.ly/react-gs
Slide 34
Slide 34 text
aria - accessible rich
internet applications
@carolstran
Slide 35
Slide 35 text
aria roles
@carolstran
Your changes were automatically saved.
bit.ly/mdn-aria
Slide 36
Slide 36 text
aria properties
@carolstran
bit.ly/mdn-aria
Newsletter
Email
Slide 37
Slide 37 text
aria states
@carolstran
There was an error. Please try again.
bit.ly/mdn-aria
Slide 38
Slide 38 text
best for
and
elements
@carolstran
Slide 39
Slide 39 text
@carolstran
focus indicators
Slide 40
Slide 40 text
@carolstran bit.ly/stripe-connect
Slide 41
Slide 41 text
• links
• form fields
• widgets
• buttons
• menu items
@carolstran
Slide 42
Slide 42 text
@carolstran gov.uk
Slide 43
Slide 43 text
• can I tab through the page without
getting lost?
• do all focusable elements have focus
states?
• can I operate tabs, accordions, search
results, etc with just my keyboard?
• do I have a skip navigation link?
@carolstran
Slide 44
Slide 44 text
@carolstran
skip links
Slide 45
Slide 45 text
@carolstran twilio.com/docs
Slide 46
Slide 46 text
@carolstran twilio.com/docs
Slide 47
Slide 47 text
@carolstran developer.mozilla.org
Slide 48
Slide 48 text
@carolstran
images
Slide 49
Slide 49 text
alt tags
@carolstran
Slide 50
Slide 50 text
@carolstran isthereuber.in
Slide 51
Slide 51 text
@carolstran isthereuber.in
Slide 52
Slide 52 text
@carolstran isthereuber.in
Slide 53
Slide 53 text
918e15484df8b5806e
f5612f985260e9.svg
@carolstran
Slide 54
Slide 54 text
@carolstran
Slide 55
Slide 55 text
@carolstran
charts and
infographics
Slide 56
Slide 56 text
• what are the highlights and
lowlights of the graphic?
• what are the most important
and notable parts?
@carolstran
Slide 57
Slide 57 text
@carolstran
0
40
80
120
160
April May June July
Slide 58
Slide 58 text
0
40
80
120
160
April May June July
@carolstran
iOS vs Android Downloads
Slide 59
Slide 59 text
102 iOS downloads and 115 Android
downloads occurred in April. 143 iOS
downloads and 126 Android downloads
occurred in May. 27 iOS downloads
and 18 Android downloads occurred in
June. 124 iOS downloads and 138
Android downloads occurred in July.
@carolstran
Slide 60
Slide 60 text
0
40
80
120
160
April May June July
@carolstran
iOS vs Android Downloads
Slide 61
Slide 61 text
The lowest amount of
downloads occurred in June,
with 27 iOS and 18 Android.
@carolstran
Slide 62
Slide 62 text
alt tag
@carolstran
Slide 63
Slide 63 text
@carolstran
...
bit.ly/charts-a11y
Slide 64
Slide 64 text
@carolstran
...
bit.ly/charts-a11y
Slide 65
Slide 65 text
@carolstran
The lowest amount…
...
bit.ly/charts-a11y
Slide 66
Slide 66 text
@carolstran
Slide 67
Slide 67 text
@carolstran trello.com
Slide 68
Slide 68 text
@carolstran
Slide 69
Slide 69 text
@carolstran
Slide 70
Slide 70 text
bit.ly/charts-a11y
Slide 71
Slide 71 text
@carolstran
code snippets
Slide 72
Slide 72 text
@carolstran
if (x == true) {
console.log(“hello world!”)
}
example if-block in JavaScript
Slide 73
Slide 73 text
if left paren x equals equals true
right paren left brace console dot log
left paren quote hello world exclaim
quote right paren right brace
@carolstran
the example if-statement read by a screen reader
Slide 74
Slide 74 text
@carolstran
Slide 75
Slide 75 text
@carolstran
use meaningful
variable names
Slide 76
Slide 76 text
@carolstran
use meaningful
variable names
watch for extra spaces
Slide 77
Slide 77 text
@carolstran
inclusive writing
Slide 78
Slide 78 text
plain language
@carolstran
Slide 79
Slide 79 text
@carolstran
Slide 80
Slide 80 text
“No one has ever
complained that something
was too easy to read”
@carolstran
Ashley Bischoff, copy editor at The Paciello Group
bit.ly/ashley-fronteers
Slide 81
Slide 81 text
testing for
accessibility
@carolstran
Slide 82
Slide 82 text
wcag - web content
accessibility guidelines
@carolstran
Slide 83
Slide 83 text
@carolstran
Slide 84
Slide 84 text
most assistive
technologies are
free or inexpensive
@carolstran
Slide 85
Slide 85 text
@carolstran
Slide 86
Slide 86 text
@carolstran
Slide 87
Slide 87 text
dev tools
@carolstran
• firefox
• chrome
• safari
Slide 88
Slide 88 text
@carolstran
Slide 89
Slide 89 text
free extensions
and validators
@carolstran
Slide 90
Slide 90 text
@carolstran
Slide 91
Slide 91 text
@carolstran bit.ly/vue-v2
Slide 92
Slide 92 text
@carolstran
Slide 93
Slide 93 text
@carolstran bit.ly/slack-integrations
Slide 94
Slide 94 text
make accessibility
a priority
@carolstran
Slide 95
Slide 95 text
create an
accessibility policy
@carolstran
Slide 96
Slide 96 text
@carolstran
Slide 97
Slide 97 text
update your
development checklists
@carolstran
Slide 98
Slide 98 text
@carolstran
Slide 99
Slide 99 text
browse the web from
a different perspective
@carolstran
Slide 100
Slide 100 text
host an a11y
hackathon
@carolstran bit.ly/mdn-a11y-hack
Slide 101
Slide 101 text
final thoughts
@carolstran
Slide 102
Slide 102 text
this is for everyone
@carolstran bit.ly/govuk-dp
Slide 103
Slide 103 text
documentation is
for everyone
@carolstran
Slide 104
Slide 104 text
Ask questions in the
chat or on Twitter
@carolstran
bit.ly/a11y-docs-resources