The document discusses web accessibility and the importance of making digital spaces usable for individuals with disabilities, highlighting the World Health Organization's report of 1 billion people affected. It outlines the WCAG 2.1 guidelines, including the foundational POUR principles (Perceivable, Operable, Understandable, Robust), and emphasizes the role of semantic HTML and ARIA in enhancing accessibility. Additionally, it lists testing tools and learning resources for improving web accessibility, advocating for an inclusive digital environment.

1. WEB ACCESSIBILITY 101
Intersectional Inclusion in the
Digital World
Leonardo Graterol
@pankas87

2. ¡HOLA!
I ‘m Leonardo Graterol
Venezuelan in Chile
UI Engineer @Globant
Mozilla Tech Speaker
@pankas87

3. 1.
a11y
What and
why?

4. The World Health Organization reports
that there are 1 billion people in the
world experiencing some form of
disability

5. WWW
Most popular
method for
accessing the
internet

6. WWW Remove the
barriers
Enable access
to new
opportunities
Most popular
method for
accessing the
internet

7. Accessibility
What is
that?
Digital spaces that are
usable and understandable
by the largest range of
people possible

8. Accessibility
What is
that?
Multidisciplinary Endeavor

9. ABILITY + BARRIER = DISABILITY
A Web for Everyone: Designing Accessible User Experiences
Sarah Horton and Whitney Quesenbery

11. ...break
down the
barriers

12. 2.
WCAG + POUR
principles

13. “
The power of the web is in
its universality. Access by
everyone regardless of
their ability is an
essential aspect
“
Tim Berners-Lee
Creator of the World Wide Web
and director of the W3C

14. WCAG 2.1
Web Content Accessibility Guidelines
PPerceivable
OOperable
UUnderstable
RRobust
4 foundational principles

15. Perceivable
Consider all the
different ways that
people with
disabilities receive
sensory
information

16. Operable
Websites created in
a way that allows
interaction through
different input
methods,
regardless of ability

17. Understandable
Websites that allow
a user to
understand the
information
presented and the
operation
mechanisms of the
UI

18. Understandable
Websites that allow
a user to
understand the
information
presented and the
operation
mechanisms of the
UI

19. Understandable
Websites that allow
a user to
understand the
information
presented and the
operation
mechanisms of the
UI

20. Understandable
Websites that allow
a user to
understand the
information
presented and the
operation
mechanisms of the
UI

21. Robust
Web sites can be
operated with
multiple user
agents and tools,
both present and
future

22. The Guidelines
Technical
Implementation
Details
WCAG 2.1
Testable
Compliance
Criteria
Related to the
“how” of web
accessibility
https://www.w3.org/WAI/standards-guidelines/wcag/

23. Conformance Levels
A AA AAA

24. The Principles
Foundational
POUR
Help users
meet their
goals
Explain the
“why” of web
accessibility

25. 3.
DOM + ARIA
Accessibility
Tree

26. Accessibility Tree
DOM-like structure, built for the OS’s accessibility APIs

27. Semantics and
the
accessibility
tree
Communicate the
default behavior
defined by the
HTML specification
and implemented by
the browser for
semantic elements
● Using an appropriate hierarchy of heading
elements, for titles and subtitles
● Using the correct form controls like text
inputs, radio button or checkboxes for
interactive form elements
● Using semantic HTML elements like
<header>, <article>, <footer> to define the
structure

28. Semantics and
the
accessibility
tree
Communicate the
default behavior
defined by the
HTML specification
and implemented by
the browser for
semantic elements
● Using an appropriate hierarchy of heading
elements, for titles and subtitles
● Using the correct form controls like text
inputs, radio button or checkboxes for
interactive form elements
● Using semantic HTML elements like
<header>, <article>, <footer> to define the
structure

29. Semantics and
the
accessibility
tree
Communicate the
default behavior
defined by the
HTML specification
and implemented by
the browser for
semantic elements
● Using an appropriate hierarchy of heading
elements, for titles and subtitles
● Using the correct form controls like text
inputs, radio button or checkboxes for
interactive form elements
● Using semantic HTML elements like
<header>, <article>, <footer> to define the
structure

31. Developing semantic web sites
solves more than 50% of the
most common accessibility
issues

32. WAI-ARIA:
Accessibility beyond semantics
Accessible Rich Internet Applications
▹ Specification written by the
W3C’s Web Accessibility Initiative
▹ Extends the accessibility
features of native and semantic
web elements

33. ARIA
When should I
use it?
● Define Landmarks in our content
● Dynamic content updates
● Enhancing keyboard accessibility
● Accessibility for non-semantic controls
● Gaining more control over the accessibility
tree
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

34. ARIA roles
▹ Widgets
￭ Button
￭ Checkbox
￭ Progressbar
￭ Slider
▹ Composite
￭ Combobox
￭ Grid
￭ Menu
▹ Document
Structure
￭ Article
￭ Heading
￭ List
￭ Presentation
▹ Landmark
￭ Search
￭ Complementary
￭ Form
￭ Navigation
￭ Main
￭ Region
▹ Live Region
￭ Alert
￭ Timer
▹ Window
￭ Dialog
￭ WindowDialog
Define a type of user interface element
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_
Techniques

35. ARIA states and properties
▹ Widget attributes
￭ aria-checked
￭ aria-disabled
￭ aria-expanded
▹ Live Region
Attributes
￭ aria-live
￭ aria-relevant
▹ Drag & Drop
￭ aria-dropeffect
￭ aria-dragged
▹ Relationship
Attributes
￭ aria-controls
￭ aria-describedby
￭ aria-labelledby
￭ aria-detials
￭ aria-owns
￭ aria-colcount
￭ aria-colindex
Control the different attributes and states supported
by a role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_
Techniques

37. We use HTML semantics and the
ARIA specification to design an
user experience for assistive
technologies, just like we use
CSS to design a visual
experience

38. 4.
Testing,
Empathy Tools,
Learning
Resources

39. Screen
Readers
● NVDA: Free, Windows only
● JAWS: Paid, Windows only
● VoiceOver: Paid, Mac OS only
● ChromeVox: Free, Chrome extension,
browser only
● Orca: Free, Linux, not the best

40. Browser
Extensions
● aXe: Accessibility auditing
● Wave: Accessibility auditing
● Chrome DevTools Accessibility Audit
● NoCoffee vision simulator

41. CLI Tools
● pa11y
● axe-cli

42. Learning
Resources
● WCAG2.1:
○ https://www.w3.org/TR/WCAG21/
● WAI-ARIA authoring practices:
○ https://www.w3.org/TR/wai-aria-practices/
● MDN accessibility tutorials:
○ https://developer.mozilla.org/en-US/docs/Learn/Acc
essibility
● W3C accessibility introduction:
○ https://www.w3.org/WAI/fundamentals/accessibility
-intro/

43. An individual has not started living until
he can rise above the narrow confines of
his individualistic concerns to the
broader concerns of all humanity.
Martin Luther King Jr.

44. WEB ACCESSIBILITY 101
Intersectional Inclusion in the
Digital World
Leonardo Graterol
@pankas87
Thank you!
Now it’s time for some Q&A
http://bit.ly/refactr-web-a11y-101