In this talk we will go over the basics of designing, developing and testing for accessibility. Including: Color Contrast, Sizing & Spacing, Device Independent User Input, Page Structure, Headings, Testing Tools, Extensions, Testing with a Screen Reader.

1. 1
Designing,
Developing
& Testing
for Accessibility
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. Note the numbers throughout the talk as 10 things that will
help you build and maintain accessible websites and apps.
3
10 Key Takeaways

4. Accessibility is the practice of making your websites usable
by as many people as possible.
4
Accessibility:
What and Why?

5. Accessibility is the
right thing to do.
We are all different, but we are all human, and
therefore have the same human rights.
1.

6. Never Assume!
Be inclusive.
2.

7. Disability used to be defined as
something wrong with the human,
something broken or “impaired”. The
World Health Organization redefined
disability in 2011 as a mismatch between
the person and the environment they
are in – basically, a design challenge.
7

8. Inclusive Design is a
methodology, born out
of digital environments,
that enables and draws
on the full range of
human diversity.
Inclusivity
▪ ... with design
▪ ... with development
▪ ... with testing
▪ ... with everything!
8

9. 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.
9

10. People with Visual Impairments
▪ blindness
▪ low-level vision
▪ color blindness
▪ something in your eye
▪ went to the eye doctor
10
Types of disabilities or situations to consider:

11. The World Health Organization
estimates that "285 million
people are estimated to be
visually impaired worldwide:
39 million are blind and 246
have low vision."
11

12. Tools to Help with
Visual Impairments
▪ physical magnifiers
▪ software zoom capabilities
▪ screen readers
▪ and more...
12

13. People with Hearing Impairments
▪ low hearing levels
▪ no hearing at all
▪ using headphones
▪ kids running around crazy
13
Types of disabilities or situations to consider:

14. Hearing-impaired people also
represent a significant user base —
"466 million people worldwide have
disabling hearing loss", says the World
Health Organization's Deafness and
hearing loss fact sheet.
14

15. Tools to Help with
Hearing Impairments
▪ text alternatives to audio content
▪ simple text transcripts to text tracks (i.e.
captions)
▪ and more...
15

16. People with Mobility Impairments
▪ loss of limb or paralysis
▪ neurological/genetic disorders that lead to
weakness or loss of control in limbs
▪ This kind of disability can also be a result of
old age— some users might not have a mouse.
16
Types of disabilities or situations to consider:

17. In terms of statistics, a significant
number of people have mobility
impairments. The U.S. Centers for
Disease Control and Prevention Disability
and Functioning (Noninstitutionalized
Adults 18 Years and Over) reports the
USA "Percent of adults with any physical
functioning difficulty: 16.1%".
17

18. Tools to Help with
Mobility Impairments
▪ head pointer
▪ stylus
▪ mouthstick
▪ and more...
18

19. People with Cognitive Impairments
▪ Cognitive impairment refers to a broad range
of disabilities, from people with intellectual
disabilities who have the most-limited
capabilities, to all of us as we age and have
difficulty thinking and remembering.
19
Types of disabilities or situations to consider:

20. People with Cognitive Impairments
▪ depression and schizophrenia
▪ dyslexia and ADHD
▪ difficulty with understanding content,
remembering how to complete tasks, and
confusion caused by inconsistent layouts.
20
Types of disabilities or situations to consider:

21. Tools to Help with
Cognitive Impairments
▪ use plain language
▪ watch sentence and paragraph length
▪ organize content properly
▪ and more...
21

22. People with Temporary Disabilities
▪ broken limbs
▪ hand injuries
▪ short term impairments following surgery
▪ something in your eye
▪ went to the eye doctor
22
Types of disabilities or situations to consider:

23. People with Situational Disabilities
▪ low internet connection
▪ holding a child
▪ holding a phone
▪ loud volume
▪ cognitive overload
23
Types of disabilities or situations to consider:

24. 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.
24

25. 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.
25

26. WCAG
Principles
Source
3.

27. 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.
27
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.

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

29. Design for
Accessibility
If you are a designer, or build websites, you should know
basic user experience principles, and that gets you on the
right track for accessibility by following similar principles.
29

30. 7 Principles of Universal Design
▪ Equitable Use
▪ Flexibility in Use
▪ Simple and Intuitive Use
▪ Perceptible Information
▪ Tolerance for Error
▪ Low Physical Effort
▪ Size and Space for Approach and Use
30

31. Checking
Color Contrast,
Sizing and Spacing
Color contrast is one of the most common accessibility
issues. That along with spacing and sizing sets the base
accessibility for the site.
4.

32. https://color.review/
Demo

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

34. 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.
5.

35. 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.
35

36. 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.
6.

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

38. 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.
38

39. 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.
7.

40. Take it further with
ARIA
ARIA enhances accessibility of interactive controls, provides
content roles for identifying page structure, better support
for keyboard accessibility and interactivity, and much more.
40

41. Roles
ARIA roles define what an element
is or does: button, navigation, form,
dialog, etc.
ARIA
Properties
ARIA properties define just that:
required, label, labelledby, live,
haspopup, autocomplete, etc.
41
States
ARIA states are properties that
define the current condition of an
element: disabled, hidden, busy,
checked, pressed, etc.
...
ARIA roles, states, and properties
can be defined in markup or they
can be defined and dynamically set
and changed using scripting.

42. 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.
42

43. 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/
43
8.

44. 44

45. Keyboard Only Testing
Demo

46. 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/
9.

47. aXe Extension Testing
Demo

48. 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
10.

49. Screen Reader Testing
Demo

50. Team Roles
for Accessibility
Everyone on the team has to be responsible for accessibility.
Different roles need to focus on different things, but overall
accessibility, user experience and inclusive design principles
should be followed.
50

51. 51
https://accessibility.digital.gov/

52. 10 Key Takeaways
1. Working on accessibility is the right thing to do.
2. Never assume! Be inclusive.
3. Don't forget POUR (Perceivable, Operable,
Understandable, Robust).
4. Check color contrast, spacing and sizing.
5. Code semantic HTML.
52

53. 10 Key Takeaways
1. Follow a proper page structure and
heading order.
2. Links should have meaning.
3. Websites should work device independently.
4. Run the axe tool to check your accessibility.
5. Double check things with a screen reader.
53

54. 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.
54

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

56. Resources
▪ https://www.who.int/disabilities/world_report/2011/accessible_
en.pdf
▪ https://www.microsoft.com/design/inclusive/
▪ https://www.who.int/en/news-room/fact-
sheets/detail/blindness-and-visual-impairment
▪ https://www.who.int/news-room/fact-sheets/detail/deafness-
and-hearing-loss
▪ https://developer.mozilla.org/en-
US/docs/Learn/Accessibility/What_is_accessibility
56

57. Resources
▪ https://uiowa.instructure.com/courses/40/pages/accessibility-
principles-pour
▪ https://www.w3.org/WAI/WCAG21/quickref/
▪ https://color.review/
▪ https://webaim.org/techniques/keyboard/
▪ https://www.deque.com/axe/
▪ https://dequeuniversity.com/assets/pdf/screenreaders/voiceov
er-osx-guide.pdf
▪ https://webaim.org/techniques/aria/
▪ https://accessibility.digital.gov/
57