Slide 1
Slide 1 text
Phil Sherry at FrontendNE @nonswearyphil
Accessibility testing
Adventures in…
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
ALT:
Adventures in accessibility testing
Simon Sherry at Kuchaman Fort, Rajasthan, in 2001. (eyefund.info)
Slide 4
Slide 4 text
ALT:
Adventures in accessibility testing
Global Accessibility Awareness Day on May 18th
Slide 5
Slide 5 text
Adventures in accessibility testing
Part one
What is accessibility?
Temporary impairments
Assistive technology
Easy wins: design and code
–
Intermission
@nonswearyphil
Slide 6
Slide 6 text
Adventures in accessibility testing
Part one
What is accessibility?
Temporary impairments
Assistive technology
Easy wins: design and code
–
Intermission
Part two
Browser plugins
VoiceOver on macOS & iOS
NVDA on Windows
Design patterns
–
Questions
Pub
@nonswearyphil
Slide 7
Slide 7 text
! Questions
@nonswearyphil
Adventures in accessibility testing
Slide 8
Slide 8 text
Part one
Slide 9
Slide 9 text
Adventures in accessibility testing
“accessibility” often written as: a11y
@nonswearyphil
Slide 10
Slide 10 text
Adventures in accessibility testing
“accessibility” often written as: a11y
a + 11 characters + y = a11y
@nonswearyphil
Slide 11
Slide 11 text
Adventures in accessibility testing
“accessibility” often written as: a11y
a + 11 characters + y = a11y
twitter.com/hashtag/a11y
@nonswearyphil
Slide 12
Slide 12 text
Please tag things with…
@nonswearyphil
Adventures in accessibility testing
#a11yatFNE
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Phil Sherry at FrontendNE @nonswearyphil
Accessibility?
What is…
Slide 15
Slide 15 text
Making websites work for
(blind | disabled) people?
most people
What is accessibility? – Adventures in accessibility testing
Slide 16
Slide 16 text
ALT:
What is accessibility? – Adventures in accessibility testing
Stern look from a massively unimpressed cat.
Slide 17
Slide 17 text
Making sites and apps usable for the
widest range of people, including —
but not limited to — people with
disabilities.
you lovely people, after tonight
What is accessibility? – Adventures in accessibility testing
Slide 18
Slide 18 text
This is for everyone.
Sir Tim Berners-Lee
What is accessibility? – Adventures in accessibility testing
Slide 19
Slide 19 text
Phil Sherry at FrontendNE @nonswearyphil
Impairments
Temporary and situational
Slide 20
Slide 20 text
ALT:
Temporary and situational impairments – Adventures in accessibility testing
Cat in a box, demonstrating a vision impairment.
Slide 21
Slide 21 text
ALT:
Temporary and situational impairments – Adventures in accessibility testing
Stupid dog, sitting on top of a cat, demonstrating a physical impairment.
Slide 22
Slide 22 text
ALT:
Temporary and situational impairments – Adventures in accessibility testing
A dog stressing-out a cat, resulting in a cognitive impairment.
Slide 23
Slide 23 text
ALT:
Temporary and situational impairments – Adventures in accessibility testing
A cat that has only partially loaded due to an environment impairment.
Slide 24
Slide 24 text
ALT:
Temporary and situational impairments – Adventures in accessibility testing
A cat’s member of staff being eaten alive while trying to work.
Slide 25
Slide 25 text
Phil Sherry at FrontendNE @nonswearyphil
Assistive technology
A quick look at…
Slide 26
Slide 26 text
! Questions
@nonswearyphil
Adventures in accessibility testing
Slide 27
Slide 27 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
THERE IS A NON-CAT THING ON THE SCREEN – it’s Joey, Chris’s service dog.
Slide 28
Slide 28 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
Survey results for types of assistive technology used to access GOV.UK.
Slide 29
Slide 29 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
Visually-impaired user with a screen magnifier.
Slide 30
Slide 30 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
Visually-impaired user with motor issues, using a screen magnifier.
Slide 31
Slide 31 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
User research with a fully-blind user and her Humanware Braillenote Touch.
Slide 32
Slide 32 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
User research with a fully-blind user and her Humanware Braillenote Touch.
Slide 33
Slide 33 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
https://twitter.com/HugoThePinkCat/status/846763206806847489
Slide 34
Slide 34 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
One of many reasons why the clapping hands emoji is a fucking annoying trend.
Slide 35
Slide 35 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
Stewie watching Brian puking after hearing that emoji abuse.
Slide 36
Slide 36 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
A cat kicking-off about the massive abuse of emoji on Twitter.
Slide 37
Slide 37 text
ALT:
A quick look at assistive technology – Adventures in accessibility testing
Poo emoji. Or is it smiling chocolate ice cream? Nah, it’s poo.
Slide 38
Slide 38 text
Phil Sherry at FrontendNE @nonswearyphil
User research
A quick word about…
Slide 39
Slide 39 text
ALT:
A quick word about user research – Adventures in accessibility testing
GOV.UK poster about user research. (github.com/alphagov/govdesign)
Slide 40
Slide 40 text
ALT:
A quick word about user research – Adventures in accessibility testing
GOV.UK poster about user research. (github.com/alphagov/govdesign)
Slide 41
Slide 41 text
ALT:
A quick word about user research – Adventures in accessibility testing
GOV.UK poster about user research. (github.com/alphagov/govdesign)
Slide 42
Slide 42 text
Phil Sherry at FrontendNE @nonswearyphil
Jack the a11y cat makes
something more accessible
Short story
Slide 43
Slide 43 text
ALT:
Short story: Jack the a11y cat makes something more accessible
Jack is complaining about the inaccessible state of his desk.
Slide 44
Slide 44 text
ALT:
Short story: Jack the a11y cat makes something more accessible
Jack is trying his best to use his desk, despite lack of human thought.
Slide 45
Slide 45 text
ALT:
Short story: Jack the a11y cat makes something more accessible
Jack has kicked the keyboard to the floor because fuck you.
Slide 46
Slide 46 text
Phil Sherry at FrontendNE @nonswearyphil
Design and code
Easy wins…
Slide 47
Slide 47 text
The ultimate decision-maker about
whether or not something is
accessible, is whether or not people
can use it — not if it is “compliant”
Derek Featherstone
Easy wins: design and code – Adventures in accessibility testing
Slide 48
Slide 48 text
Accessibility costs too much,
plus we don’t have time.
most developers
Easy wins: design and code – Adventures in accessibility testing
Slide 49
Slide 49 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Business man being business-as-fuck.
Slide 50
Slide 50 text
Meh, we can just bolt that shit
on at the end, right?
most developers
Easy wins: design and code – Adventures in accessibility testing
Slide 51
Slide 51 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
A cat eats a dog’s face for being an idiot.
Slide 52
Slide 52 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
A 19th-century painting which was unintentionally defaced during restoration.
Slide 53
Slide 53 text
Easy wins: design and code – Adventures in accessibility testing
Where I was previously mobile first…
1. Mobile
2. Desktop
Slide 54
Slide 54 text
Easy wins: design and code – Adventures in accessibility testing
Where I was previously mobile first…
I’m now screen reader first.
1. Screen reader
2. Mobile
3. Desktop
Slide 55
Slide 55 text
Phil Sherry at FrontendNE @nonswearyphil
Design
Easy wins…
Slide 56
Slide 56 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
A cat demonstrating the “if I fits, I sits” principle.
Slide 57
Slide 57 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Application progress menu, small viewport version.
Slide 58
Slide 58 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Black cat hiding in plain sight, in despair of human stupidity.
Slide 59
Slide 59 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Lea Verou’s contrast checker tool (leaverou.github.io/contrast-ratio)
Slide 60
Slide 60 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Four black cats, alike in every single way. No idea which is real. Nope.
Slide 61
Slide 61 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Application progress menu, no selection.
Slide 62
Slide 62 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Application progress menu, obvious selection on focus.
Slide 63
Slide 63 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
A cat giving a high-five.
Slide 64
Slide 64 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Application progress menu, nice big hit areas.
Slide 65
Slide 65 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
A cat who doesn’t give a fuck about your shit.
Slide 66
Slide 66 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
new `prefers-reduced-motion` media query (webkit.org/blog/7477)
Slide 67
Slide 67 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
macOS accessibility preferences option to reduce motion.
Slide 68
Slide 68 text
Phil Sherry at FrontendNE @nonswearyphil
Code
Easy wins…
Slide 69
Slide 69 text
Phil Sherry at FrontendNE @nonswearyphil
Slide 70
Slide 70 text
Just add alt tags, yeah?
most developers
Easy wins: design and code – Adventures in accessibility testing
Slide 71
Slide 71 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Death glare from a feline HTML enthusiast.
Slide 72
Slide 72 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Alternative text is an attribute attached to an element, or “tag”.
![]()
![“”]()
❌
✅
Slide 73
Slide 73 text
Phil Sherry at FrontendNE @nonswearyphil
Forms
A word about…
Slide 74
Slide 74 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
Cat filling in a tuna import duty form.
Slide 75
Slide 75 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
FrontendNE sign-up form.
Slide 76
Slide 76 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
FrontendNE sign-up form in VoiceOver on macOS.
Slide 77
Slide 77 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
FrontendNE sign-up form – revised.
Slide 78
Slide 78 text
ALT:
Easy wins: design and code – Adventures in accessibility testing
FrontendNE sign-up form – revised.
Slide 79
Slide 79 text
Phil Sherry at FrontendNE @nonswearyphil
Roles and ARIA
A word about…
Slide 80
Slide 80 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
A cat ponders accessibility matters over breakfast.
Slide 81
Slide 81 text
A word about roles and ARIA – Adventures in accessibility testing
1.
2.
3.
4.
5.
6.
7.
Slide 82
Slide 82 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
Browser showing divs with explicit roles.
Slide 83
Slide 83 text
A word about roles and ARIA – Adventures in accessibility testing
1.
2.
3.
4.
5.
6.
7.
Slide 84
Slide 84 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
Browser showing semantic elements with explicit roles.
Slide 85
Slide 85 text
A word about roles and ARIA – Adventures in accessibility testing
Browsers take care of the following landmark roles:
maps to role=“banner” *
maps to role=“navigation”
maps to role=“main”
maps to role=“article”
maps to role=“region”
maps to role=“complementary” **
maps to role=“contentinfo” *
* if not within an article or section element ** recently proposed
Slide 86
Slide 86 text
A word about roles and ARIA – Adventures in accessibility testing
1.
2.
3.
4.
5.
6.
7.
Slide 87
Slide 87 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
Browser showing semantic elements with implicit roles.
Slide 88
Slide 88 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
VoiceOver rotor showing landmarks.
Slide 89
Slide 89 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
Luke Stevens’ book, The Truth About HTML5 (Apress / thetruthabouthtml5.com)
Slide 90
Slide 90 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
FrontendNE sign-up form – revised.
Slide 91
Slide 91 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
FrontendNE sign-up form – revised.
Slide 92
Slide 92 text
ALT:
A word about roles and ARIA – Adventures in accessibility testing
W3C’s guide to Using ARIA (w3c.github.io/using-aria)
Slide 93
Slide 93 text
Phil Sherry at FrontendNE @nonswearyphil
Performance
A word about…
Slide 94
Slide 94 text
ALT:
A word about performance – Adventures in accessibility testing
Cats who heard there was a mouse around here somewhere.
Slide 95
Slide 95 text
ALT:
A word about performance – Adventures in accessibility testing
A whole bunch of cats. (Yes, it’s Photoshopped, but shush. Believe.)
Slide 96
Slide 96 text
ALT:
A word about performance – Adventures in accessibility testing
Catsplosion. Many cats on the same rug.
Slide 97
Slide 97 text
ALT:
A word about performance – Adventures in accessibility testing
Not even sure where to begin with this one. Some kinda cat launchpad.
Slide 98
Slide 98 text
ALT:
A word about performance – Adventures in accessibility testing
Mog on the Tyne’s cats, available for many concurrent users.
Slide 99
Slide 99 text
ALT:
Intermission – Adventures in accessibility testing
An excluded kitteh is locked out of an inaccessible kitchen.
Slide 100
Slide 100 text
Intermission
Slide 101
Slide 101 text
Phil Sherry at FrontendNE @nonswearyphil
Accessibility testing
Adventures in…
Phil Sherry at FrontendNE
Slide 102
Slide 102 text
Part two
Slide 103
Slide 103 text
Adventures in accessibility testing
Part one
What is accessibility?
Temporary impairments
Assistive technology
Easy wins: design and code
–
Intermission
Part two
Browser plugins
VoiceOver on macOS & iOS
NVDA on Windows
Design patterns
–
Questions
Pub
Slide 104
Slide 104 text
Phil Sherry at FrontendNE @nonswearyphil
Browser plugins
A very quick look at…
Slide 105
Slide 105 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
WAVE plugin for Chrome.
Slide 106
Slide 106 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
aXe plugin for Chrome.
Slide 107
Slide 107 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
aXe plugin for Chrome, showing a bunch of errors.
Slide 108
Slide 108 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Tenon plugin for Chrome, by @KarlGroves.
Slide 109
Slide 109 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Google’s Accessibility plugin for Chrome.
Slide 110
Slide 110 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
WCAG’s Accessibility Audit plugin for Chrome.
Slide 111
Slide 111 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Google’s Chromevox plugin for Chrome.
Slide 112
Slide 112 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Google’s Chromevox plugin for Chrome – just say No.
Slide 113
Slide 113 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Google’s Accessibility Experiment pane in Chrome.
Slide 114
Slide 114 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Search for how to activate Google’s Accessibility Experiment pane in Chrome.
Slide 115
Slide 115 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Accessible Technology (software) list on Trello
Slide 116
Slide 116 text
ALT:
A very quick look at browser plugins – Adventures in accessibility testing
Ghostery privacy plugin for Chrome.
Slide 117
Slide 117 text
Phil Sherry at FrontendNE @nonswearyphil
Screen readers
A quick look at…
Slide 118
Slide 118 text
A quick look at screen readers – Adventures in accessibility testing
VoiceOver on macOS
VoiceOver on iOS
NVDA on Windows
Slide 119
Slide 119 text
Phil Sherry at FrontendNE @nonswearyphil
VoiceOver on macOS
Testing with…
Slide 120
Slide 120 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
A map of VoiceOver key commands for macOS
Slide 121
Slide 121 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Key commands for turning on VoiceOver on macOS.
Slide 122
Slide 122 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Key commands for turning on VoiceOver’s rotor on macOS.
Slide 123
Slide 123 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
VoiceOver Utility’s web rotor options.
Slide 124
Slide 124 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
VoiceOver Utility’s web rotor showing the headings menu on GOV.UK.
Slide 125
Slide 125 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
VoiceOver Utility’s verbosity options.
Slide 126
Slide 126 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Apple’s VoiceOver Getting Started Guide. (apple.com/voiceover/info/guide)
Slide 127
Slide 127 text
Phil Sherry at FrontendNE @nonswearyphil
VoiceOver on iOS
Testing with…
Slide 128
Slide 128 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
VoiceOver’s rotor on iOS
Slide 129
Slide 129 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Apple’s iOS accessibility guide (help.apple.com/iphone/10/#/iph3e2e4367)
Slide 130
Slide 130 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Yahoo’s David Pogue with Joe Danowsky, using iOS VoiceOver
Slide 131
Slide 131 text
Phil Sherry at FrontendNE @nonswearyphil
NVDA on Windows
Testing with…
Slide 132
Slide 132 text
A quick look at screen readers – Adventures in accessibility testing
• JAWS (Job Access With Speech) – £700
• Dolphin’s Guide – £620
• Dolphin’s SuperNova – £1120
• Windows Narrator – free (only in Windows 10)
• NVDA (NonVisual Desktop Access) – free
Slide 133
Slide 133 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Paciello Group’s page about basic screen reader commands
Slide 134
Slide 134 text
ALT:
A quick look at screen readers – Adventures in accessibility testing
Understanding screen reader interaction modes, by Léonie Watson.
Slide 135
Slide 135 text
Phil Sherry at FrontendNE @nonswearyphil
Design patterns
A look at some…
Slide 136
Slide 136 text
ALT:
A look at some design patterns– Adventures in accessibility testing
Stealth cat sneaks in when the product owner isn’t looking.
Slide 137
Slide 137 text
Phil Sherry at FrontendNE @nonswearyphil
Heading levels
Design patterns
Slide 138
Slide 138 text
Design patterns: anchor context – Adventures in accessibility testing
1.
Oh dear
Slide 139
Slide 139 text
Design patterns: anchor context – Adventures in accessibility testing
1.
Oh dear
2.Sigh
Slide 140
Slide 140 text
Design patterns: anchor context – Adventures in accessibility testing
1.
Oh dear
2.Sigh
3.
4. OMFG, SRSLY
5.
Slide 141
Slide 141 text
ALT:
Design patterns: heading levels – Adventures in accessibility testing
Browser showing regular heading levels with default styles.
Slide 142
Slide 142 text
ALT:
Design patterns: heading levels – Adventures in accessibility testing
VoiceOver showing regular heading levels.
Slide 143
Slide 143 text
ALT:
Design patterns: heading levels – Adventures in accessibility testing
Browser showing suggested multiple header level 1 – just say no.
Slide 144
Slide 144 text
ALT:
Design patterns: heading levels – Adventures in accessibility testing
VoiceOver showing suggested multiple header level 1 – just say no.
Slide 145
Slide 145 text
Phil Sherry at FrontendNE @nonswearyphil
Anchor context
Design patterns
Slide 146
Slide 146 text
Design patterns: anchor context – Adventures in accessibility testing
I went to a clickbait conference, and what
happened next blew my mind. Read more.
Slide 147
Slide 147 text
Design patterns: anchor context – Adventures in accessibility testing
1.
2. Read more
3..
Slide 148
Slide 148 text
ALT:
Design patterns: anchor context – Adventures in accessibility testing
The context-free “read more” link.
Slide 149
Slide 149 text
ALT:
Design patterns: anchor context – Adventures in accessibility testing
VoiceOver showing lots of context-free “read more” links.
Slide 150
Slide 150 text
ALT:
Design patterns: anchor context – Adventures in accessibility testing
A visually hidden cat. (I had to think pretty hard how to include this one.)
Slide 151
Slide 151 text
Design patterns: anchor context – Adventures in accessibility testing
1.
2. Read more
3.
4. [add some context here]
5.
6..
Slide 152
Slide 152 text
Design patterns: anchor context – Adventures in accessibility testing
1..visuallyhidden {
2. display: none;
3.}
Slide 153
Slide 153 text
Design patterns: anchor context – Adventures in accessibility testing
1..visuallyhidden {
2. left: -8008135em;
3. position: absolute;
4.}
Slide 154
Slide 154 text
Design patterns: anchor context – Adventures in accessibility testing
1..visuallyhidden {
2. border: 0;
3. clip: rect(0 0 0 0);
4. height: 1px;
5. margin: -1px;
6. overflow: hidden;
7. padding: 0;
8. position: absolute;
9. width: 1px;
10.}
Slide 155
Slide 155 text
ALT:
Design patterns: anchor context – Adventures in accessibility testing
A “read more” link with visually-hidden context.
Slide 156
Slide 156 text
ALT:
Design patterns: anchor context – Adventures in accessibility testing
VoiceOver showing lots of “read more” links with added context.
Slide 157
Slide 157 text
Design patterns: anchor context – Adventures in accessibility testing
1..visuallyhidden:active,
2..visuallyhidden:focus {
3. clip: auto;
4. height: auto;
5. margin: 0;
6. overflow: visible;
7. position: static;
8. width: auto;
9.}
Slide 158
Slide 158 text
ALT:
Design patterns: anchor context – Adventures in accessibility testing
GOV.UK’s “Skip to main content” link, with focus.
Slide 159
Slide 159 text
Phil Sherry at FrontendNE @nonswearyphil
GOV.UK page header
Design patterns
Slide 160
Slide 160 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – original markup.
Slide 161
Slide 161 text
Design patterns: page header – Adventures in accessibility testing
1.
2. FrontendNE 3. Adventures in accessibility testing 4.
Slide 162
Slide 162 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – original markup, VoiceOver in iOS.
Slide 163
Slide 163 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – original markup, VoiceOver in macOS.
Slide 164
Slide 164 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – original markup, NVDA in Windows.
Slide 165
Slide 165 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – original markup, NVDA in Windows.
Slide 166
Slide 166 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard Gov.UK Elements page header – old and revised versions.
Slide 167
Slide 167 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard Gov.UK Elements page header – old and revised, VoiceOver on macOS.
Slide 168
Slide 168 text
Design patterns: page header – Adventures in accessibility testing
1.
2.
3. Adventures in accessibility testing 4.
5.6. This section is 7. FrontendNE
8.Slide 169
Slide 169 text
Design patterns: page header – Adventures in accessibility testing
1..page-header {
2. clear: both;
3. display: table;
5. .heading-secondary {
6. display: table-header-group;
7. }
8.}
Slide 170
Slide 170 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – revised markup, VoiceOver in iOS.
Slide 171
Slide 171 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – revised markup, VoiceOver in macOS.
Slide 172
Slide 172 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – revised markup, NVDA in Windows.
Slide 173
Slide 173 text
ALT:
Design patterns: page header – Adventures in accessibility testing
Standard GOV.UK Elements page header – revised markup, NVDA in Windows.
Slide 174
Slide 174 text
Phil Sherry at FrontendNE @nonswearyphil
GOV.UK check your answers
Design patterns
Slide 175
Slide 175 text
Phil Sherry at FrontendNE @nonswearyphil
Original GDS version
Check your answers v1.0
Slide 176
Slide 176 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers in the GOV.UK prototype kit. Original version.
Slide 177
Slide 177 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers in the GOV.UK prototype kit. Original version, mobile size.
Slide 178
Slide 178 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers in the GOV.UK prototype kit. Headings menu in VoiceOver.
Slide 179
Slide 179 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers in the GOV.UK prototype kit. VoiceOver in macOS.
Slide 180
Slide 180 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers in the GOV.UK prototype kit. NVDA on Windows.
Slide 181
Slide 181 text
Design patterns: check your answers – Adventures in accessibility testing
Original version
▸ uses a table – isn’t tabular data
▸ lacking in semantics
▸ hard to navigate
▸ not great for users of screen magnifiers
▸ ridiculously verbose for users of screen readers
Slide 182
Slide 182 text
Phil Sherry at FrontendNE @nonswearyphil
Revised GDS version
Check your answers v2.0
Slide 183
Slide 183 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version.
Slide 184
Slide 184 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version, mobile size.
Slide 185
Slide 185 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version. Headings menu in VoiceOver on macOS.
Slide 186
Slide 186 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version. Links menu in VoiceOver on macOS.
Slide 187
Slide 187 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version. VoiceOver on macOS.
Slide 188
Slide 188 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version. NVDA on Windows.
Slide 189
Slide 189 text
Design patterns: check your answers – Adventures in accessibility testing
1.
-
2.
15.
Slide 190
Slide 190 text
Phil Sherry at FrontendNE @nonswearyphil
Revised GDS version
Check your answers v2.1
Slide 191
Slide 191 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version with our data.
Slide 192
Slide 192 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers. New GDS version with our data, mobile size.
Slide 193
Slide 193 text
Phil Sherry at FrontendNE @nonswearyphil
My new version
Check your answers v3.0
Slide 194
Slide 194 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers v3.1. My new version with my page header and our data.
Slide 195
Slide 195 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers v3.1. My new version, mobile size.
Slide 196
Slide 196 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers v3.1. VoiceOver headings menu on macOS.
Slide 197
Slide 197 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers v3.1. VoiceOver links menu on macOS.
Slide 198
Slide 198 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers v3.1. VoiceOver reads through the page on macOS.
Slide 199
Slide 199 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Check your answers v3.1. NVDA reads through the page on Windows.
Slide 200
Slide 200 text
Design patterns: check your answers – Adventures in accessibility testing
1.
2.
Is your business currently registered for anti-money laundering supervision?
3. Answer: 4.Money laundering regulations number: 45628975
5. 6.Edit your answer for “Is your business currently registered for anti-money laundering supervision?”
7. 8.Slide 201
Slide 201 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Visually-impaired user with a screen magnifier, during a user research session.
Slide 202
Slide 202 text
ALT:
Design patterns: check your answers – Adventures in accessibility testing
Angry cat with a box that doesn’t quite meet its needs due to lack of research.
Slide 203
Slide 203 text
Phil Sherry at FrontendNE @nonswearyphil
Quick takeaways
And finally…
Slide 204
Slide 204 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
Slide 205
Slide 205 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
Slide 206
Slide 206 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
• use sensible, semantic markup
Slide 207
Slide 207 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
• use sensible, semantic markup
• use ARIA roles if necessary
Slide 208
Slide 208 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
• use sensible, semantic markup
• use ARIA roles if necessary
• sit in on user research
Slide 209
Slide 209 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
• use sensible, semantic markup
• use ARIA roles if necessary
• sit in on user research
• get familiar with assistive technology
Slide 210
Slide 210 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
• use sensible, semantic markup
• use ARIA roles if necessary
• sit in on user research
• get familiar with assistive technology
• be responsible for accessibility where you work
Slide 211
Slide 211 text
ALT:
Quick takeaways – Adventures in accessibility testing
Accessibility weekly newsletter. (a11yweekly.com)
Slide 212
Slide 212 text
Quick takeaways – Adventures in accessibility testing
• this is for everyone
• think screen reader first, mobile second, desktop third
• use sensible, semantic markup
• use ARIA roles if necessary
• sit in on user research
• get familiar with assistive technology
• be responsible for accessibility where you work
• be a decent human and help others
Slide 213
Slide 213 text
Phil Sherry at FrontendNE @nonswearyphil
One more thing…
And finally,
Slide 214
Slide 214 text
ALT:
One more thing… – Adventures in accessibility testing
The cats at Mog on the Tyne and Westgate Ark await your presence.
Slide 215
Slide 215 text
ALT:
Quick takeaways – Adventures in accessibility testing
Pictures of the guide dog that I’m sponsoring – Una.
Slide 216
Slide 216 text
That’s all folks
Slide 217
Slide 217 text
ALT:
Who needs a drink? – Adventures in accessibility testing
A cat in need of a drinking partner.
Slide 218
Slide 218 text
Phil Sherry at FrontendNE @nonswearyphil
Questions?
Are there any…
Slide 219
Slide 219 text
Website: philsherry.com
Twitter: nonswearyphil
Instagram: philsherry
Get in touch