"The Four Principles of Accessibility" is an informative presentation meant to shine a light on the benefits of building inclusive products and explain the four basic principles that serve as the foundation for accessibility. These four areas specifically target areas where users have the most trouble when accessing digital products and provide guidelines for understanding how to think and approach accessibility.

1. The Four Principles of
Web Accessibility
Homer Gaines, CPACC

3. 3
The Disability Discrimination Act from 1995 &
The Equality Act of 2010
Directive (EU) 2016/2102 All public sector apps and websites must
meet Level AA Success Criteria as presented in the WCAG 2.1
Americans with Disabilities Act of 1990 (ADA for short)
A person (a “service-provider”) concerned with the provision of a
service to the public or a section of the public (for payment or not)
must not discriminate against a person requiring the service by not
providing the person with the service.
legislation.gov.uk / wikis.ec.europa.eu / ada.gov

5. Title III
Applies to all business open to the public

7. Part 3
Services and Public Functions

8. 8
https://www.3playmedia.com/blog/countries-that-have-adopted-wcag-standards-map/
https://afri-can.org/policies-and-laws-on-disability-in-different-african-countries/

9. Angola
Argentina
Australia
Austria
Belgium
Bolivia
Botswana
Brazil
Bulgaria
Burkina Faso
Cape Verde
Chile
China
Colombia
Hong Kong
Hungary
India
Ireland
Israel
Italy
Japan
Kenya
Latvia
Lesotho
Libya
Lithuania
Luxembourg
Malawi
Malta
Mauritius
Mozambique
Netherlands
New Zealand
Nigeria
Norway
Peru
Poland
Portugal
Republic of Korea
Romania
Rwanda
Seychelles
Sierra Leone
Slovakia
Slovenia
Somalia
South Africa
Spain
Swaziland
Sweden
Uganda
United Kingdom
United States
Uruguay
Venezuela
Zimbabwe
Croatia
Cyprus
Czech Republic
Denmark
Ecuador
Estonia
Ethiopia
European Union
Fiji
Finland
France
Germany
Ghana
Greece

10. 10
World Population
~1 billion people globally
have a disability.
https://www.who.int/
15%

11. 11
Number of People With Disabilities in the UK
14.6M
22% of the total population
https://commonslibrary.parliament.uk/research-briefings/cbp-9602/#:~:text=How%20
many%20people%20have%20a,22%25%20of%20the%20total%20population.

12. 12
But, people with disabilities
don’t use our products.

14. 14
Invisabilities

15. 15
Cognitive disabilities are
the most prevalent
● Autism
● Attention Deficit
● Memory Loss
● Dyslexia
● Long COVID

16. 16
WCAG 2.1
Web Content Accessibility Guidelines
3 Levels
4 Sections
78 Success Criteria

17. 17
WCAG 2.1 Success Criteria
Bare Minimum
A
https://disabledaccessdenied.wordpress.com/2014/05/09/accessibility-fails-or-when-idiots-design-wheelchair-access/

18. 18
WCAG 2.1 Success Criteria
Wut?
AAA
@erniesjourney

19. 19
WCAG 2.1 Success Criteria
Sweet Spot
AA

20. 20
Bare Minimum
Sweet Spot
Wut?
WCAG 2.1 Success Criteria
A AA AAA

21. 21
WCAG 2.1
Web Content Accessibility Guidelines
The Four Principles
of Accessibility

22. 22
Perceivable
POUR
1
Operable
Understandable
Robust
2
3
4

23. 23
Perceivable
Users must be able to perceive the content
by using their senses. Until the day comes
where we can taste and smell digital content,
we must focus on the user’s ability to see,
hear, and or feel the available content.
● Focus state
● Error handling
● Closed captions
● Color contrast

24. To improve scannability,
ensure buttons, and links are
distinguishable from the content to
reduce the need to hunt for them.
:focus { outline: none };
https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#link-purpose-link-only

25. Customize focus rings to fit brand
aesthetics by using CSS to style the
box-shadow or the outline properties.
SEND
SEND
Inactive :hover
SEND
:focus
:active
https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#focus-visible

26. People use different methods
to browse web content.

27. 27
Operable
Because we all don’t use computers the same
way, users have a variety of methods for
accessing and interacting with digital content.
Keeping this in mind, developers need to
ensure the content is accessible to the various
input devices.
● Keyboards
● Switches / Adaptive controllers
● Sip-and-puff
● Headmouse

28. 28
Of screen reader users
use headings to navigate the page
Navigation
64%
https://www.unimelb.edu.au/accessibility/techniques/headings

29. 29
Headings
Headings establish hierarchy and should be in
sequential order
<h3> <h1> <h2> <h1> <h5>
<h1> <h2> <h2> <h3> <h2>

30. 30
Headings
Don’t use headings for styling
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
.heading--lg { font-size: 2em; }
.heading--md { font-size: 1.5em; }
.heading--sm { font-size: 1.17em; }
Leads to semantic issues More flexible and allows for semantic markup

31. 31
Understandable
Being able to understand content goes
beyond comprehending the words, it extends
to the UI and UX as well.
Presenting a well-structured navigation
scheme within a consistent theme allows for a
better user experience. Using alerts and
avoiding complex sentence structures also
play key roles in the overall experience by
reducing cognitive load.
userinyerface.com

32. Name

34. Name

35. Name

36. 36
Robust
Providing accessible content begins with semantically correct markup.
Doing so ensures the content will be compatible with the range of
devices used to consume digital content.

37. Use Responsive Layouts
• Reduces horizontal scrolling
• Reduces the need to modify the field of vision.
• Avoid multi-column layouts when possible.

39. Not Just Mobile
When we consider small screens, it's not
only about mobile. 13 inch MacBook Pro
users have issues with some applications
that weren't designed to fit the 1440 x 900
screen resolution even though that
resolution is seen as desktop.

40. Form Elements and Label Placement
First Name Last Name
Email Phone
Field of Vision

41. Form Elements and Label Placement
First Name Last Name
Email Phone
Field of Vision

42. First Name
Last Name
Email
Phone

43. “Plan for what it is difficult
while it is easy, do what is
great while it is small.”
Sun Tzu

44. https://reactjs.org/docs/accessibility.html
WCAG 2.1
Web Content Accessibility
Guidelines
WAI-ARIA 1.1
Web Accessibility Initiative -
Accessible Rich Internet
Applications
HTML 5.2
Hypertext Markup Language

45. 45
1 Million Websites Surveyed in 2022
96.8%
“96.8% of home pages had detected WCAG 2 failures”
https://webaim.org/projects/million/

46. 46
74.6%
“ARIA code usage increased 26% in just one
year and has nearly tripled since 2019”
https://webaim.org/projects/million/
1 Million Websites Surveyed in 2022

47. First Rule of ARIA
=
Don’t Use ARIA

48. 48
Be Mindful of Over Engineering

49. 49
Be Mindful of Over Engineering
Lesson learned… my bad!
DISABLED
DIMMED

50. HTML 5.2
Hypertext Markup Language

51. 51
Semantics
<a href=”a11y.html”>Learn more about A11y</a>
Use links when explicitly changing the URL
<button type=”button”>Open Modal</button>
<button type=”button” aria-label=”Close Modal” />
Use buttons when the URL doesn’t change
Buttons and Links

52. 52
Semantics
<span onClick={clickme()}>NOPE!</span>
<span role=”button” tabindex=”0”>Not the best</span>
<button type=”button”>Yes!</button>
<button type=”button” onClick={clickme()} aria-label=”Yes!” />
Buttons

53. 53
Semantics
Common Issues with Buttons
<button
type={type}
onClick={onClick}
className={buttonClasses}
>
<div>{buttonLabel}</div>
</button>
Flow content elements are invalid

54. 54
Semantics
Common Issues with Buttons
<button
type={type}
onClick={onClick}
className={buttonClasses}
>
<span>{buttonLabel}</span>
</button>
Phrasing content elements are valid

55. 55
Semantics
<input type={type} className={inputClasses} />
<input
type={type}
className={inputClasses}
placeholder={placeHolder}
/>
Inputs

56. 56
Semantics
<label className={labelClasses}>
{label}
<input id={id} type={type}
className={inputClasses}
name={inputName}
/>
</label>
Input with an Implicit Label

57. 57
Semantics
<label className={labelClasses} htmlfor={id}>
{label}
</label>
<input id={id} type={type}
className={inputClasses}
name={inputName}
/>
Preferred: Input with an Explicit Label

58. 58
Semantics
Don’t set tabindex to a value greater than 1
Use tabindex=”0” to add an element to the tab order
Use tabindex=”-1” to remove an element from tab order
Tabindex and Tab Order

59. 59
Semantics
<img src=”logo.png” />
<img alt=”company logo” src=”logo.png” />
Images and Alt Attributes

60. 60
Semantics
<img src=”decor.png” />
Screen reader will speak the image name
<img alt=”” role=”presentation” src=”decor.svg” />
Sets alt to null while role removes the element’s semantic meaning
<img alt=”” aria-hidden=”true” src=”decor.jpg” />
aria-hidden behaves just like display: none;
Decorative Images

61. Testing All the Things!

62. 62
AXE by Deque
For Automated
Accessibility Testing
www.deque.com/axe

63. 63
NVDA JAWS
Screen Readers to
Help with Manual Testing
VOICEOVER

64. 64
Empathy

65. 65

66. 66
Empathy
Cognitive
1
Emotional
Compassionate
2
3

67. 67
Cognitive Empathy
Our ability to understand what someone may be
thinking and how they feel.

68. 68
Emotional Empathy
Puts us in the person’s shoes, so to speak.
Even more so if you can relate to what that person is
going through.

69. 69
Compassionate Empathy
Makes us react and do something.
Drives us to make a change.

70. 70
Questions To Ask
What can I see
or not see?
Perceivable
What can I do
and how?
Operable & Understandable
Does it work with
assistive tech?
Robust

71. 71
Thank you!

72. 72
Homer Gaines, CPACC
Twitter: @xirclebox
Mastodon: @homer@a11y.info