While many in the UX community are aware of inclusivity and accessible design practices, the reasons are not often fully understood. In this session, Homer will talk through the WCAG 2.1 and how the four principles, commonly known as POUR, can be integrated into the overall process of your product team. You will walk away: - understanding what the POUR principles are; - how to test to accessibility & functionality of your product; and - how to ensure that accessibility is an overall team responsibility

1. The Four Principles of
Web Accessibility
Homer Gaines

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

3. 3
But people with disabilities
don’t use our products.

4. 4
Gen X, Y, and Z
19.3M
10% of the population between the age of
21 - 64 have a disability
https://disabilitystatistics.org/reports/acs.cfm?statistic=1

6. 6
Invisabilities

7. 7
Cognitive disabilities are
the most prevalent
● Autism
● Attention Deficit
● Memory Loss

8. 8
Long COVID
20% - 70%
● Attention Deficits
● Anxiety
● Depression
https://jamanetwork.com/journals/jamapsychiatry/fullarticle/2778090

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

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

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

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

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

14. People use different methods
to browse web content.

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

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

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

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

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

20. “Users spend most of their time on websites
other than yours. Thus a big part of customers'
mental models of your site will be influenced
by information gleaned from other sites.
People expect websites to act alike”
Jakob Nielsen

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

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

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

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

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

26. First Name
Last Name
Email
Phone

27. Enable Dark Mode
Quiet Notification
Enable Dark Mode
Quiet Notification
Enable Dark Mode
Quiet Notification

28. Enable Dark Mode
Quiet Notification
Enable Dark Mode
Quiet Notification
Enable Dark Mode
Quiet Notification

29. 29
Be Mindful of Over Engineering

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

31. “Ableism is incredibly limiting and we need
to be aware of ableism and all the different
ways it comes into our technology.”
@HabenGirma

32. 32

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

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

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

36. 36
Applying Empathy
What can I see
or not see?
Perceivable
What can I do
and how?
Operable & Understandable
Does it work with
assistive tech?
Robust

37. 37
Thank you!

38. 38
@xirclebox
I'm Homer Gaines. A Staff UI Engineer
at GetGuru.com and an IAAP Certified
Accessibility Professional.