A comprehensive overview of The Web Content Accessibility Guidelines (WCAG) Key Takeaways: 1. Inclusive design fosters inclusivity for all users. 2. Accessibility benefits everyone, including you and me. 3. Accessible design principles are applicable across various fields, from web design to game development, mobile app development, hardware with user interfaces, and even poster design. Accessibility knows no bounds!

1. Unlocking the Web:
Crafting Inclusive
and Accessible Web
Design
Raymond Zeng
Tech Lead, GDSC
University of WIndsor

2. What is Web
Accessibility?

3. “Web accessibility means
that websites, tools, and
technologies are
designed and developed
so people with disabilities
can use them.”
-W3C WAI Introduction to Web Accessibility
https://www.crestdatasys.com/blogs/web-accessib
ility-how-to-enable-access-for-everyone/ img src

4. 15%
According to WHO:
about
Of the world
identifies as having
a disability.
https://easterseals.ca/en/disabil
ity-in-canada-facts-figures/
https://www.crestdatasys.com/blogs/web-accessib
ility-how-to-enable-access-for-everyone/ img src

5. Accessible Design
Benefits Everyone
https://www.crestdatasys.com/blogs/web-accessib
ility-how-to-enable-access-for-everyone/ img src

6. Web Content
Accessibility Guidelines
(WCAG)

7. The four principles:
● Perceivable
● Operable
● Understandable
● Robust
https://guides.cuny.edu/accessibility/whyitmatters

8. Conformance levels:
● Level A
● Level AA (ideal)
● Level AAA
https://webaim.org/standards/wcag/checklist

9. Accessible colors

10. www.csun.edu/universal-design-center/web-accessibility-criteria-color-contrast

11. www.csun.edu/universal-design-center/web-accessibility-criteria-color-contrast

12. https://webaim.org/resources/contrastchecker/
Chrome Dev Tools Element Picker
Ways to Check for Contrast

13. Which button one is red?
Don’t convey information with just colors.
https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-accessible-colors

14. Which button one is red?
Don’t convey information with just colors.
https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-accessible-colors

15. Touch Screen
Responsive

16. Responsive Across
Devices
https://www.w3.org/WAI/WCAG21/
Understanding/target-size.html
How to make a website responsive is
another topic I won’t cover today.
Done through css by using a mix of media
queries, flex/grid, responsive font size,
responsive images, meta-viewport,
avoiding fixed width/height etc.
Chrome dev tool is a great way to check if
your website is responsive across all
devices without actually using those
devices.

17. Scalable Fonts
https://www.w3.org/WAI/WCAG
21/Understanding/resize-text
Should be able to zoom up to 200% without loss
of content or functionality.
CSS:
-Use % for font size
-Use em for font size
-Use named font sizes (like strong & bold)
-Use headings

18. Target Size
https://www.crestdatasys.com/blogs/web-acce
ssibility-how-to-enable-access-for-everyone/

19. Keyboard Navigation
and Screen Readers

20. Importance of Semantic HTML
Sections your website.
More readable HTML code.
Provides meaning and
context.
Default focusable by
keyboard navigation.
Helps Section a
Website:
● <header>
● <main>
● <section>
● <footer>
● <aside>
● <nav>
● <form>
● <h1> … <h6>
Provides content and
function accessible by
keyboard:
● <button>
● <p>
Semantically neutral
(not picked up by
screen readers):
● <div>
● <span>

21. Importance of Semantic HTML in keyboard navigation
https://youtu.be/vAAzdi1xuUY?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&t=83

22. Divs and Spans are Not Focusable!
https://www.theodinproject.com/lessons/node-pat
h-advanced-html-and-css-semantic-html

23. Focus Styles - How do we know it is in focus?

24. Focus Styles - How do we know it is in focus?
Don’t do this!
Completely removing focus styles
also removes keyboard focus

25. Focus Styles - How do we know it is in focus?
https://webaim.org/standards/wcag/checklist

26. Tab order
https://youtu.be/Pe0Ce1WtnUM (A11y casts with Rob Dodson Controlling focus with tabindex)

27. Tab order - Hidden content

28. Avoid having important information on images
Screen readers cannot read text on an image.
Google translate cannot translate text on an
image.
Text on image should be decorational. It’s nice
to have them there but it shouldn’t be essential
to know.

29. Meaningful text

30. Meaningful text - Links

31. Meaningful text - Links
Rules:
1. Text content of <a> should briefly
indicate where the link redirects
you.
2. If a link opens or downloads a file:
indicate the type and file size.
3. If a link takes you to a new tab, you
should indicate to the user that it
does so.

32. Meaningful text - Useful Error Messages
https://neal.fun/password-game/
Good!
Bad!

33. Meaningful text - Image alt attribute

34. Meaningful text - Images, alt redundancy
https://webaim.org/techniques/alttext/

35. Aria-Labels

36. Aria-labels
Overrides native HTML labels and
provides descriptive text instead.
Also useful in hiding elements from tab
focus with aria-hidden=‘true’.
Only modifies semantic context:
- can’t change tab order
- can’t make divs/spans focusable
https://www.youtube.com/watch?v=
9Irk7PIjHBE

37. Additional Mentions
● Avoid Time Sensitive Tasks
● Don’t use blinking/flashing content or
colors.
● Don’t have distracting background
audio, or at least provide a way to
turn it off.
● Always have ways to adjust volume
on audio media.
● Provide multiple ways to find the
same content
○ Search bar
○ Nav bar
○ Assistive chat bot

38. Accessibility Auditing
Tools:
● Chrome Dev Tools: Lighthouse
● Chrome extension: Axe Dev Tools
● Wave by WebAIM:
https://wave.webaim.org/

39. Follow us on Social Media:
https://www.linkedin.com/in/shilei-zeng/
Connect with me on Linkedin if you
wanna chat.