An overview of the available tools
Radimir Bitsov @radibit
Better development
strategy for web a11y
Slide 2
Slide 2 text
@radibit
Slide 3
Slide 3 text
@radibit
Radimir
Bitsov
Front-end engineer who ❤
web performance, accessibility,
and interface animation.
Slide 4
Slide 4 text
@radibit
@radibit
GitHub · Twi er · CodePen
Slide 5
Slide 5 text
@radibit
What is Web Accessibility?
Slide 6
Slide 6 text
@radibit
“…the degree to which a website is
accessible by as many people as
possible”
Laura Kalbag,
Designer & Writer, Ind.ie
Accessibility For Everyone
Slide 7
Slide 7 text
@radibit
It’s not about a few
people
Nearly 1 in 5 people have a disability in the EU
Web A11y helps people with physical,
mental, vision, hearing challenges and
more. A lot of different groups!
Slide 8
Slide 8 text
@radibit
# $
Slide 9
Slide 9 text
@radibit
% &
Slide 10
Slide 10 text
@radibit
Everyone might
experience impairments
h ps://www.microso .com/en-us/Design/inclusive
The persona spectrum helps to foster
empathy and to scale a solution to a
broader audience.
Slide 11
Slide 11 text
@radibit
“What if there was no such thing as
a normal human being? If there’s
no normal, there’s no edge cases –
just diverse people changing from
one moment to the next.”
Kat Holmes,
Director of Inclusive Design,
Microso
Slide 12
Slide 12 text
@radibit
Web a11y should be an
integral part of an ethical
and empathetic
development process
Slide 13
Slide 13 text
@radibit
A11y Tooling ⚒
Slide 14
Slide 14 text
@radibit
Color and Contrast
Slide 15
Slide 15 text
@radibit
Color Oracle
h p://colororacle.org/
Open source, cross-platform
application which simulates
common color vision impairments.
Slide 16
Slide 16 text
@radibit
Slide 17
Slide 17 text
@radibit
Slide 18
Slide 18 text
@radibit
Slide 19
Slide 19 text
@radibit
Colorable
h p://jxnblk.com/colorable/
Find a safe color
combination with
predefined colors according
to the WCAG standards.
Slide 20
Slide 20 text
@radibit
Color Safe
h p://colorsafe.co/
Create an accessible color
pale es based on WCAG
guidelines of text and
background contrast ratios.
Slide 21
Slide 21 text
@radibit
Slide 22
Slide 22 text
@radibit
Color Contrast
Sketch Plugin
h ps://github.com/getflourish/Sketch-Color-
Contrast-Analyser
Calculates the color
contrast of two layers and
evaluates it against the
WCAG.
Slide 23
Slide 23 text
@radibit
Readability
Slide 24
Slide 24 text
@radibit
Readability
Analyzer
h ps://datayze.com/readability-analyzer.php
Calculate the readability of a
passage of text.
Slide 25
Slide 25 text
@radibit
Readability
Analyzer
h ps://datayze.com/readability-analyzer.php
Aim for a Flesch Reading Ease
level between 50 – 60.
Slide 26
Slide 26 text
@radibit
Use simple word
and phrases
h ps://plainlanguage.gov/guidelines/words/use-
simple-words-phrases/
Plainlanguage.gov's list of
simpler words.
Slide 27
Slide 27 text
@radibit
Plain English
words and
phrases
h ps://www.wikiwand.com/en/
List_of_plain_English_words_and_phrases
Slide 28
Slide 28 text
@radibit
h p://www.handcoding.com/presentations/be eraccessibility/
Slide 29
Slide 29 text
@radibit
Screen Readers
Slide 30
Slide 30 text
@radibit
JAWS
h ps://www.freedomscientific.com/Products/
Blindness/JAWS
Jaws (Job Access With Speech) is a
proprietary screen reader for
Windows from Freedom Scientific.
Slide 31
Slide 31 text
@radibit
NVDA
h ps://www.nvaccess.org/
NVDA (NonVisual Desktop Access)
is a free (open source) screen reader
for Windows from NVAccess.
@radibit
VoiceOver
h ps://www.apple.com/accessibility/mac/vision/
Integrated screen reader available
in macOS and all Apple devices.
Slide 34
Slide 34 text
@radibit
Slide 35
Slide 35 text
@radibit
h ps://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/
Slide 36
Slide 36 text
@radibit
A11y Audit
Slide 37
Slide 37 text
@radibit
aXe
h ps://www.axe-core.org/
Comprehensive accessibility
checker for detecting issues on your
website or web app.
Slide 38
Slide 38 text
@radibit
Slide 39
Slide 39 text
@radibit
Sonarwhal
h ps://sonarwhal.com/
A linting tool that will help you
with your site's accessibility,
speed, and security.
Slide 40
Slide 40 text
@radibit
Slide 41
Slide 41 text
@radibit
Lighthouse
h ps://developers.google.com/web/tools/lighthouse/
Lighthouse is an open-source,
automated tool integrated into the
Chrome DevTools for improving the
quality of web pages.
Slide 42
Slide 42 text
@radibit
Slide 43
Slide 43 text
@radibit
Automated Testing
Slide 44
Slide 44 text
@radibit
PA11Y
h ps://github.com/pa11y/pa11y
Your automated accessibility
testing pal. It runs HTML
CodeSniffer from the command
line for programmatic
accessibility reporting.
Slide 45
Slide 45 text
@radibit
Slide 46
Slide 46 text
@radibit
h ps://open-indy.github.io/Koa11y/
Slide 47
Slide 47 text
@radibit
AATT
h ps://github.com/paypal/AATT
Automated Accessibility Testing
Tool (AATT) according to the
WCAG standards.
Slide 48
Slide 48 text
@radibit
AATT + NemoJS
h p://nemo.js.org/
AATT can be integrated into
NemoJS testing framework to run
accessibility analysis during
automated unit testing.
Slide 49
Slide 49 text
@radibit
AccessibilityJS
h ps://github.com/github/accessibilityjs
Client side accessibility error
scanner.
Slide 50
Slide 50 text
@radibit
More resources
Slide 51
Slide 51 text
@radibit
Funkify
h p://www.funkify.org/
Funkify is a Chrome extension that
helps you experience the web and
interfaces through the eyes of people
with different abilities and disabilities.
Slide 52
Slide 52 text
@radibit
Slide 53
Slide 53 text
@radibit
a11y.css
h ps://ffoodd.github.io/a11y.css/
CSS file which indicates potential
accessibility related issues in the
HTML files. It can be used as a
bookmarklet.
Slide 54
Slide 54 text
@radibit
a11y.css
h ps://ffoodd.github.io/a11y.css/
CSS file which indicates potential
accessibility related issues in the
HTML files. It can be used as a
bookmarklet.
Slide 55
Slide 55 text
@radibit
revenge.css
h p://heydonworks.com/revenge_css_bookmarklet/
CSS bookmarklet that notifies
developers for problems in their
HTML code.
Slide 56
Slide 56 text
@radibit
revenge.css
h p://heydonworks.com/revenge_css_bookmarklet/
CSS bookmarklet that notifies
developers for problems in their
HTML code.
Slide 57
Slide 57 text
@radibit
Cupper
h ps://thepaciellogroup.github.io/cupper/
Documentation builder created
with web accessibility in mind
for organizing inclusive
components.
Slide 58
Slide 58 text
@radibit
WebAIM
h ps://webaim.org/
Amazing collection of resources,
trainings, evaluation tools
(WAVE, Colour Checker etc.) on
web accessibility.
Slide 59
Slide 59 text
@radibit
Inclusive
Components
h ps://inclusive-components.design/
Pa ern library of common
interface components with focus
on inclusive design.
Slide 60
Slide 60 text
@radibit
“The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”
Tim Berners-Lee,
Engineer & Computer Scientist
Slide 61
Slide 61 text
@radibit
Resources
• h ps://abookapart.com/products/accessibility-for-everyone
• h ps://www.microso .com/en-us/Design/inclusive
• h p://colororacle.org/
• h p://jxnblk.com/colorable/
• h ps://github.com/getflourish/Sketch-Color-Contrast-Analyser
• h ps://datayze.com/readability-analyzer.php
• h ps://plainlanguage.gov/guidelines/words/use-simple-words-phrases/
• h p://www.handcoding.com/presentations/be eraccessibility/
• h ps://www.axe-core.org/
• h ps://sonarwhal.com/
• h ps://developers.google.com/web/tools/lighthouse/
Slide 62
Slide 62 text
@radibit
Resources
• h ps://github.com/pa11y/pa11y
• h ps://open-indy.github.io/Koa11y/
• h ps://github.com/paypal/AATT
• h p://nemo.js.org/
• h ps://github.com/github/accessibilityjs
• h p://www.funkify.org/
• h ps://ffoodd.github.io/a11y.css/
• h p://heydonworks.com/revenge_css_bookmarklet/
• h ps://thepaciellogroup.github.io/cupper/
• h ps://webaim.org/
• h ps://inclusive-components.design/
Slide 63
Slide 63 text
@radibit
Thank you
@radibit
Slides: h p://bit.ly/web-a11y-tooling