Slide 1
Slide 1 text
Introduction to Accessibility
(a11y for short)
Slide 2
Slide 2 text
Most important thing
Small accessibility improvements
help more people than we might
think
Slide 3
Slide 3 text
Steve Barnett
Currently: Technical Digital
Accessibility Analyst at Xero
Previously: FEDUX at Totara
naga.co.za
Slide 4
Slide 4 text
Agenda
1. Accessibility and Disability
2. Standards and Compliance
3. Checks and Tests
Slide 5
Slide 5 text
“The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”
— Tim Berners-Lee
Slide 6
Slide 6 text
Agenda
1. Accessibility and Disability
2. Standards and Compliance
3. Checks and Tests
Slide 7
Slide 7 text
(Gentle!) activity
A human uses the Web
Slide 8
Slide 8 text
A human
using a mouse and Safari on a Mac
uses the Web
Slide 9
Slide 9 text
A human
using a mouse / trackpad / keyboard / switch
control / puffer / magnification tool / voice
control / screen reader and Safari / Chrome /
Firefox / Edge on a Windows / Mac / Linux
desktop / laptop / tablet / phone in light / dark
mode / high contrast mode with reduced motion
enabled with smaller / larger text size
uses the Web
Slide 10
Slide 10 text
Delicious takeaway:
Humans interact with our product in a
very wide range of ways
Any questions?
Slide 11
Slide 11 text
Many types of disability, for example:
Auditory
Cognitive
Physical
Visual
Slide 12
Slide 12 text
Social model of disability
Disability = Ability + Barrier
Mismatched interactions
Slide 13
Slide 13 text
(Gentle) activity time!
Let's think about the visual category
under the social model of disability
Slide 14
Slide 14 text
Do a reactji at me
✋
if you or someone you know is:
blind
Slide 15
Slide 15 text
Potential barrier
!
no text alternatives
for non-text content
Slide 16
Slide 16 text
Do a reactji at me
✋
if you or someone you know has:
low vision or poor eyesight
(perhaps from old age)
Slide 17
Slide 17 text
Potential barrier
!
no (or poor) responsive styles
Slide 18
Slide 18 text
Do a reactji at me
✋
if you or someone you know is:
colour blind
Slide 19
Slide 19 text
Potential barrier
!
using only colour
to convey information
Slide 20
Slide 20 text
Do a reactji at me
✋
if you or someone you know has:
been outside on a sunny day
with a shiny screen
Slide 21
Slide 21 text
Potential barrier
!
low colour contrast between
text and the background
Slide 22
Slide 22 text
Delicious takeaway:
Mismatched interactions can create
barriers to access for many people
Any questions?
Slide 23
Slide 23 text
Agenda
1. Accessibility and Disability ✔
2. Standards and Compliance
3. Checks and Tests
Slide 24
Slide 24 text
Standards and Compliance
How do we know what
good looks like?
Slide 25
Slide 25 text
Web Content Accessibility Guidelines
Perceivable, Operable,
Understandable, Robust
How to Meet WCAG (Quick Reference)
Slide 26
Slide 26 text
Most governments, big companies:
"WCAG 2.1 Level AA compliance"
This sets the minimum
We set the maximum
Slide 27
Slide 27 text
Questions about
accessibility standards?
Slide 28
Slide 28 text
Agenda
1. Accessibility and Disability ✔
2. Standards and Compliance ✔
3. Checks and Tests
Slide 29
Slide 29 text
Checks and Tests
How do make accessible things?
What are the first few steps?
Slide 30
Slide 30 text
QAC (Quick A11y Checks)
1. Headings (levels, nesting)
2. Keyboard (functionality, visibility)
3. axe DevTools (errors, omissions)
Slide 31
Slide 31 text
Tiny demo of QAC
!
Slide 32
Slide 32 text
Questions about QAC?
(Three flavours of QAC are in the
appendix: Content creator, Designer,
and Developer)
Slide 33
Slide 33 text
More than a QAC
TPGi's ARC Toolkit
Microsoft Accessibility Insights
Test using a screen reader
(Links included later,
plus more details in the appendix)
Slide 34
Slide 34 text
Tiny demo of Voice Over
(Screen Reader)
Slide 35
Slide 35 text
"It doesn't have to be perfect,
just a little bit better
than yesterday"
— Léonie Watson
Slide 36
Slide 36 text
Recap
1. Accessibility and Disability ✔
2. Standards and Compliance ✔
3. Checks and Tests ✔
Slide 37
Slide 37 text
Most important thing
Small accessibility improvements
help more people than we might
think
Slide 38
Slide 38 text
Thanks for your attention!
More questions?
!
Slide 39
Slide 39 text
Links
WCAG Quick Reference
ARC toolkit, Microsoft Accessibility Insights
Testing with screen readers
QAC for Developers
QAC for Designers
Slide 40
Slide 40 text
Appendix 1
Quick A11y Checks
Slide 41
Slide 41 text
QAC for Content creators
1. Headings (levels, nesting)
2. Text alternatives (images, videos)
3. High quality text (links, buttons)
Slide 42
Slide 42 text
QAC for Designers
1. Headings (levels, nesting)
2. Accessible names (forms, links)
3. Unique text (links, buttons)
Slide 43
Slide 43 text
QAC for Developers
1. Headings (levels, nesting)
2. Keyboard (functionality, visibility)
3. axe DevTools (HTML errors)
Slide 44
Slide 44 text
Appendix 2
Slower A11y Checks
Slide 45
Slide 45 text
TPGi's ARC Toolkit
This is a good tool to run to flag more errors. It
provides an easy way of inspecting the
accessibility of semantic structures such as
headings, landmarks, links, buttons, form
controls, and alt text.
Slide 46
Slide 46 text
Microsoft Accessibility Insights
(Do the assessment option)
This is a good tool to use next because it offers
good coverage of the WCAG SC (Success Criteria).
It’s a reasonably lengthy process, but gets faster
with practice.
Slide 47
Slide 47 text
Test using a screen reader
Check structure.
Check interactions.
Check alt text of images: does it convey the
content and function of the image?
Check form error handling. (Warning! This could
get a bit hairy.
!
)
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Super secret appendix 3!
Automated testing
Slide 51
Slide 51 text
The thing to search for is axe.
Industry-leading testing engine, made
by Deque, used inside lots of other
tools.
Slide 52
Slide 52 text
Deque has many axe-related repos.
Check for an axe package for your
favourite unit or E2E framework.
However! Please read the next few
slides too
!
Slide 53
Slide 53 text
Automated testing can pick up some
of the common, obvious, issues.
But it misses some stuff too.
Let's look at some
accessibility examples.
Slide 54
Slide 54 text
Does an automated test catch it?
✔ Missing alternative text for images
✖ Bad alternative for images
Slide 55
Slide 55 text
Slide 56
Slide 56 text
Does an automated test catch it?
✔ Empty links or empty buttons
✖ Bad link text or bad button text
Slide 58
Slide 58 text
Does an automated test catch it?
✔ Some HTML errors
✖ Weird HTML
Slide 60
Slide 60 text
Edit
Slide 61
Slide 61 text
Edit
Edit
Edit