Introduction to accessibility

# About the talk:

Humans! We interact with products in a very wide range of ways. In this introduction to accessibility we’ll talk about:

- how small accessibility improvements help more people than we might think;
- what Web Accessibility Standards there are;
- which first few checks and tests we can take towards making our products more accessible;

# About the speaker:

Steve Barnett is a human-centered front-end developer and user experience designer. He works at Xero as a Technical Digital Accessibility Analyst where he helps designers and developers make things ever more usable and accessible.

Transcript

1. Kia ora Talk starts at 5:30pm Please put yourself on mute Please type your questions into the chat (instead of using the raise hand option)
3. Disclaimer The purpose of these talks is to share knowledge, learnings and stories with the wider technology community. This presentation relates solely to the individual presenting and does not reflect the opinion or analysis of Xero.
4. Be respectful of each other.
5. Introduction to accessibility By: Steve Barnett
6. Steve Barnett He/him Technical Digital Accessibility Analyst Also: sketcher, mixer, gamer. naga.co.za Most-used emoji: 🙈 About the speaker
7. Disclaimer . The purpose of these talks is to share knowledge, learnings and stories with the wider technology community. This presentation relates solely to the individual presenting and does not reflect the opinion or analysis of Xero.
8. Introduction to accessibility (a11y for short)
9. Most important thing Small accessibility improvements help more people than we might think
10. “ IMAGE GOES OVER HERE The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
11. 1. Accessibility and Disability 👈 2. Standards and Compliance 3. Checks and Tests Agenda Weʼll have tiny question breaks throughout, as well as Q&A at the end
12. A human uses the Web
13. A human with a mouse and Safari on a Mac uses the Web
14. A human with a mouse / trackpad / keyboard / switch control / puffer / magnification tool / voice control / screen reader and Safari / Chrome / Firefox / Edge on a Windows / Mac / Linux / iOS / Android on a desktop / laptop / tablet / phone in light / dark / high contrast mode with reduced motion enabled with smaller / larger text size uses the Web
15. Delicious takeaway 😋 Humans use the web in a very wide range of ways
16. There are many types of disability, for example Auditory Cognitive Physical Visual
17. Social model of disability Disability = Ability + Barrier Itʼs about mismatched interactions between the human and the world, between the human and the web
18. (Gentle!) activity 🤔 Let's think about the visual category under the social model of disability
19. Do the raise hand thing ✋ if you or someone you know is: blind
20. Potential barrier 🚧 No text alternatives for non-text content (images, video)
21. Do the raise hand thing ✋ if you or someone you know has: low vision or poor eyesight (perhaps from old age)
22. Potential barrier 🚧 No (or bad) responsive styles
23. Do the raise hand thing ✋ if you or someone you know is: colour blind
24. Potential barrier 🚧 Using only colour to convey information
25. Do the raise hand thing ✋ if you or someone you know has: been outside on a sunny day with a shiny screen
26. Potential barrier 🚧 Low colour contrast between the text and the background
27. Delicious takeaway 😋 Mismatched interactions can create barriers to access for many people
28. Questions about humans using the web, the social model of disability? 🙋
29. 1. Accessibility and Disability ✔ 2. Standards and Compliance 👈 3. Checks and Tests Agenda
30. Standards Tell us what good looks like Compliance Tells us if weʼre meeting the standard
31. Web Content Accessibility Guidelines (WCAG) A list of Success Criteria grouped by four Principles: Perceivable, Operable, Understandable, Robust
32. Level A is minimum compliance. Probably some barriers. Level AA is acceptable compliance. No significant barriers. Level AAA is optimal compliance. Almost no barriers.
33. Most governments, big companies aim for WCAG 2.1 Level AA compliance Meet all Level A and AA Success Criteria
34. Delicious takeaway 😋 Standards and Compliance set the minimum We set the maximum
35. Questions about WCAG, POUR, Standards, Compliance? 🙋
36. 1. Accessibility and Disability ✔ 2. Standards and Compliance ✔ 3. Checks and Tests 👈 Agenda
37. Checks and Tests How do we check if itʼs accessible? What are the first few steps?
38. QAC (Quick A11y Checks) 🦆 1. Headings (semantics, nesting) 2. Keyboard (functionality, visibility) 3. axe DevTools (errors, omissions)
39. Tiny demo of QAC 💁 🦆
40. Questions about the QAC? 🙋
41. 1. Accessibility and Disability ✔ 2. Standards and Compliance ✔ 3. Checks and Tests ✔ Recap
42. “ IMAGE GOES OVER HERE It doesn't have to be perfect, just a little bit better than yesterday - Léonie Watson
43. Most important thing Small accessibility improvements help more people than we might think
44. Any Questions?
45. QAC for Designers QAC for Developers WCAG Quick Reference More than a QAC QACs TPGi's ARC Toolkit Microsoft Accessibility Insights Test with screen readers Links
46. We are hiring! https://jobs.lever.co/xero