Smart Solutions Ensuring the Accessibility without breaking the bank

Speaker: Krupa Nanda

Transcript

1. Smart Solutions: Ensuring the Accessibility without breaking the bank - Krupa Nanda 1
2. Agenda - Understanding the Accessibility - Why it is important - Principle and Guidelines - Busting some Myths about Accessibility testing - Who is responsible to address Accessibility - Tools that different stakeholders can use - Closing note 2
3. Understanding the Accessibility - Accessibility is the practice of making your web and mobile apps usable to as many people as possible. 3
4. Why it is important - Social responsibility - Legal requirement - Better UI/UX 4
5. The 4 Principles of Accessibility 5
6. WCAG Guidelines - The Web Content Accessibility Guidelines were developed by the W3C - There are three different levels of WCAG conformance: - Level A: Minimum degree - Level AA: Mid-range degree - Level AAA: The highest degree 6
8. Myth 1: Only a small percentage of my users need an accessible website or app 8
10. Myth 2: It will take too much time/effort/money - Mobile first - Accessibility first approach 10
11. Myth 3 : Digital accessibility is only developers job 11
12. Myth 4: Accessible websites/apps are plain or ugly - Nomensa - 24 Ways - CSS Zen Garden - Indiana University - Funka 12
13. - Different success rate of tool - Real users - Automated testing tools most effective when coupled with manual testing Myth 5: I used some automated testing tools, so my website or app is now accessible 13
14. Myth 6 : My users don’t have issues with accessing my website! 14
15. Myth 7 : Web accessibility is nice to have, but not obligatory - UK Equality Act 2010 - ADA - PwD Act 15
16. So who is responsible for Accessibility? - Clients/Shareholders - Product Owner - Marketing/Sales - Web Architects/Designers/UI and UX Specialists - Editors/Content creators - Developers - Test Engineers - Real Users 16
17. Tools 🔧 17
18. 🎨 Designers - Figma Plugins - AXE for Designer - Stark - A11y Color Contrast Checker - Common issue - color contrast - Accessibility Checker 18
19. Cont… 19
20. Cont… 20
21. 󰞦 Developers - Using semantic HTML Markup - Keyboard friendly navigation - Using ARIA attribute - Roles - State - Properties - Challenges while using the ARIA - Code Linters - GH Action Workflow 21
22. 󰟲 Content Writers/Editors - Clear and concise writing - Break up the content into different chunks - Heading, subheading, <p>, bullet points, etc - Accessible Hyperlink - Colored link ❌ - Inter linking of content with proper descriptive linking text with underline - E.g. Click Here, Read more, Check here - E.g. Read more about accessibility here - Avoid use of word “link” as part of linking text 22
23. 🐞 QA - Manual Checklist - Magenta a11y Checklist - A11y Checklist - Automation Tools - WAVE Extension - AXe DevTool - Free + 7 days trial period for paid - Google chrome Lighthouse - Pa11y - CLI - NVDA / Voice Over 23
24. Conclusion - No Perfect tool - Don’t rely on one testing tool - Course - https://www.edx.org/learn/web-accessibility/the-world-wide-web-consortium-w 3c-introduction-to-web-accessibility - chrome://settings/accessibility - https://chromewebstore.google.com/collection/3p_accessibility_extensions - https://www.accessibility.com/events 24
25. Resources - https://beaccessible.com/post/automated-vs-manual-web-accessibility-testing/ - https://www.usertesting.com - https://www.deque.com/ - https://a11y.pearson.com/accessibility-process/ - https://www.audioeye.com/ - https://www.funka.com/en/ 25
26. Thank You! 󰢜 26 📧 krupananda.it@gmail.com 𝕏 @krupajnanda