In this talk we will go over the basics of accessibility and building it into your website. We will cover accessibility principles (POUR: Perceivable, Operable, Understandable, Robust), using screen readers, and approaches to achieving accessibility guidelines.

1. 1
Web Accessibility 101
Eric Malcolm
Front-End Accessibility Developer

2. Hello!
Eric Malcolm
@eric_malcolm
Front-End, Accessibility, UX, SEO, WordPress Enthusiast
I make websites, interfaces, apps, etc. that are aesthetically
pleasing, developed properly, human-friendly and usable.
2

3. Accessibility is the practice of making your websites usable
by as many people as possible. We are all different, but we
are all human, and therefore have the same human rights.
Accessibility is the right thing to do.
3
Accessibility:
What and Why?

4. 4
Types of
disabilities or
situations to consider
There are a handful of disabilities to consider when building
for the web. Most of these cover a lot of what is needed for
a wide range of people to have access to the web.

5. ▪ Visual - Low Level Vision, Blindness, Color
Blindness, Something in Your Eye, etc.
▪ Hearing - Low Level Hearing, No Hearing,
Situational, etc.
▪ Mobility - Limb Loss, Paralysis, Situational, etc.
▪ Cognitive - Depression, Dyslexia, ADHD, etc.
▪ Situational - broken limbs, low internet
speeds, holding a child, cognitive overload, etc.
5

6. Tools to Help with
Different Impairments:
▪ Visual - physical magnifiers, zoom, screen
readers, etc.
▪ Hearing - simple text transcripts, captions, etc.
▪ Mobility - head pointer, mouth stick, stylus,
etc.
▪ Cognitive - use plain language, organize
content properly, watch sentence/paragraph
length, etc. 6

7. Accessibility:
How?
First thing we are going to look at are the Web Content
Accessibility Guidelines (WCAG). Then we will go onto talk
about Design, Development and Testing for Accessibility.
7

8. Web Content
Accessibility
Guidelines (WCAG)
WCAG guidelines are categorized into three levels of
conformance: A (lowest), AA (mid range), and AAA (highest).
Conformance at higher levels covers the lower levels.
8

9. WCAG
Principles
Source

10. Perceivable
Perceivability means the user can
identify content and interface
elements by means of the senses.
WCAG Principles
Operable
Operability means that a user can
successfully use controls, buttons,
navigation, and other necessary
interactive elements.
10
Understandable
Understandable technology is
consistent in its presentation and
format, predictable in its design
and usage patterns...
Robust
Robust things should be
standards-compliant, and designed
to function on all appropriate
technologies.

11. https://www.w3.org/WAI/WCAG21/quickref/
Demo

12. Checking
Color Contrast,
Sizing and Spacing
Color contrast is one of the most common accessibility
issues. A contrast ratio of at least 4.5:1 is recommended
for normal text. That along with spacing and sizing sets
the base accessibility for the site.

13. Developing for
Accessibility
There are some key things to do since you are creating the
code that goes into the browser or app.
13
</>
</>
</>

14. Semantic HTML
From a development perspective Semantic HTML is one
of the key things that will get your site accessible. If
used properly it will help your site immensely.

15. Semantic HTML
When we write semantically correct HTML, we’re
letting the browser know what type of content it’s
dealing with and how that content relates to
other content.
▪ Use container elements for layout only.
▪ Use other elements properly: anchors,
buttons, lists, images, headers, paragraphs, etc.
15

16. Page Structure
and Headings
Doing proper structure and organization sets the base of
the coding for assistive technology to work properly. This
is part of having Semantic HTML, it is pretty important.

17. Page Structure
Utilize proper elements for their intent.
▪ header
▪ nav
▪ main
▪ article
▪ aside
▪ footer
17

18. Headings
▪ Use one H1 per page.
▪ Do not skip heading levels when increasing,
but you can skip levels when decreasing (h1,
h2, h3, h2, h3, h4, h2, h3, h4).
▪ The headings taken out of context should
logically represent the page content.
18

19. Add Meaning to Links
Links and other elements should have an clear cut
meaning, other than “read more” or “click here”. In
some cases it may be clear what I am reading more
about, but navigating a site via links or skimming and
the “read more” type links lose their meaning.

20. Testing for
Accessibility
There are some basic things you can do to test accessibility
that are really easy to do. These 2 things are an absolute
must in my opinion.
20

21. Device Independent
User Input
A main point for working with assistive technology is to
allow the website to be interacted with through a variety of
devices; for the most part, focus on being able to do
keyboard only testing and touch device testing.
https://webaim.org/techniques/keyboard/
21

22. 22

23. Keyboard Only Testing
Demo

24. aXe
Accessibility Audit
There are a few extensions that help test accessibility,
one of the most robust and easy to use in Deque’s aXe.
https://www.deque.com/axe/

25. aXe Extension Testing
Demo

26. Double check things
with a screen reader.
Actual testing with an assistive technology is one of
the best ways to test it! Do it yourself, or find a user.
VoiceOver Guide

27. Screen Reader Testing
Demo

28. Bottom Line
The main thing to take away would be Web
Accessibility is everyone’s responsibility. Improving
Web Accessibility may be challenging, but it is not
as complicated as it seems. Every improvement,
even the tiniest one, counts.
28

29. Thanks!
Any questions?
▪ @eric_malcolm
▪ malcolmdigital.com
29

30. Resources
▪ https://developer.mozilla.org/en-
US/docs/Learn/Accessibility/What_is_accessibility
▪ https://uiowa.instructure.com/courses/40/pages/accessibility-
principles-pour
▪ https://www.w3.org/WAI/WCAG21/quickref/
▪ https://webaim.org/techniques/keyboard/
▪ https://www.deque.com/axe/
▪ https://dequeuniversity.com/assets/pdf/screenreaders/voiceov
er-osx-guide.pdf
30