Is my website accessible? Common mistakes (and how to fix them)
Download as PPTX, PDF0 likes1,598 views
The document discusses the importance of web accessibility, outlining common mistakes and tools to improve accessibility for users with disabilities. It covers key concepts such as WCAG guidelines, 508 compliance, and various auditing tools to identify and fix accessibility errors. The session aims to educate developers and content managers on achieving better accessibility outcomes on their websites.
Is my website accessible? Common mistakes (and how to fix them)
- 1. | 1 Is my website accessible? Common mistakes (and how to fix them) October 15, 2020
- 3. Our Mission To bring together the most talented team members to improve technology for our clients
- 5. This Session is For | 5 Developers General Audience Content Managers People in charge of content who would like to know a few common accessibility issues to preemptively avoid. For anybody who is interested in learning how to make a more accessible website and the steps needed to start. Developers interested in learning beginning skills in tracking accessibility issues.
- 6. Learning a general understanding on the importance of accessibility Learning how to use automated tools to help track and manage accessibility errors Learning why both automated and manual testing are important Goals of the Session | 6 Goal 1 Goal 2 Goal 3
- 7. Today’s Agenda 1. Why is Accessibility Important 2. What do all these things mean? (WCAG, 508, A, AA, & AAA) 3. Available Tools to Identify Problems 4. Tracking Issues and Recommended Remedies 5. Fixing Common Mistakes 6. Next Steps and Q&A
- 8. | 8 Why is Web Accessibility Important? | 8
- 9. | 9 26%US Adults identify as having a disability 8%Males are color blind 10k+Disparity in median earnings between those with and without disabilities ~1/2the number of the disabled population earned a Bachelor's Degree or higher (compared to non-disabled) 10%+Increase in the US obesity rate for people with disabilities 21%+US civilians with disabilities of working-age were living in poverty 51%US civilians who identify as disabled are between the ages of 18-64
- 10. | 10 The ramps, or “curb cuts”, on street corners were originally put in as accessibility features but they ended up benefiting more than the intended audience. The same can happen when applying accessibility features to a website. Accessibility Benefits Everyone
- 11. | 11 Accessibility Benefits Everyone
- 12. 1. WCAG: Web Content Accessibility Guidelines a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the internet. 2. 508 Compliance: Section 508 is a federal law mandating that all electronic and information technology be accessible to people with disabilities. Historically this has been limited to federal or federally funded institutions but with cases such as Winn-Dixie in 2017, it is a legal concern for many businesses. Terms to Know
- 13. | 13 Compliance Options Level A Level AA Level AAA 25 Criteria 25 Level A criteria PLUS 13 additional 25 Level A criteria, 13 Level AA criteria, PLUS 23 additional Sets minimum level of accessibility Emphasis on color contrast not as applicable in Level A Very specialized sites may aim for this level
- 14. GOOD NEWS!
- 15. | 15 ● Missing title tag ● Images missing ALT text ● Poor header structure ● Non-descriptive link text ● Color contrast issues ● Inputs missing labels ● Visually reordered content ● Removed focus styling Common Accessibility Problems
- 17. Time to Test
- 18. | 18
- 19. | 19 ● Errors ● Contrast Errors ● Alerts Introducing the WAVE tool
- 20. | 20 ● Summary gives an idea of how many issues were found. ● Details Give a brief idea of what those issues are. Summary and Details
- 21. | 21 ● Missing Alternative Text ● Alternative text is important for people who rely on screen readers to understand the content they are listening to. Documenting Our First Error
- 22. | 22 What You See
- 23. | 23| 23 Results Spreadsheet
- 24. | 24 The Contrast Error ● Poor contrast hurts those with poor vision ● Not pointed out, but still as important is the logo is using the same color.
- 25. | 25 What You See
- 26. | 26| 26 Results Spreadsheet
- 27. | 27 Headers Out of Order Skipped headings can cause confusion for trying to navigate a website using alternative means.
- 28. | 28 What You See
- 29. | 29 Which One Works Best?
- 30. | 30| 30 Results Spreadsheet
- 31. | 31 Non-Descriptive Link Text Screen readers need context for what they are reading. Non-Descriptive text doesn’t give anything meaningful.
- 32. | 32 What You See
- 33. | 33| 33 Results Spreadsheet
- 34. | 34 Automated Testing Vs. Manual Testing | 34
- 35. | 35 Visual & Manual Flow
- 36. | 36| 36 Results Spreadsheet
- 37. | 37 Key Takeaways Perform accessibility tests on your website every few months Make sure your accessibility levels are meeting the 508 compliance standards Document errors in a way that makes it easy to fix them Make accessibility a priority at your organization and involve various teams Experiment with accessibility tools to find which work best for your organization
- 38. | 38 Learn the essential fundamentals of website accessibility and apply them to your website. http://bit.ly/accessibility-best-practices Accessibility Best Practices for Non-Developers
- 39. Does something resonate with you today? Get in touch with us. mediacurrent.com/contact-us mediacurrent.com/resources Questions
Editor's Notes
- #2: Need Accessibility logo in blue
- #3: We are the “Open Source Expansion Partners” We help organizations that want to elevate and advance their open source digital experience. How do we do it? By aligning with our partner’s business goals and needs and solve them with open source technologies.
- #6: Ben:
- #7: Bob:
- #9: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #14: DT
- #23: DT
- #24: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #26: DT
- #27: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #29: DT
- #31: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #32: DT
- #33: DT
- #34: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #35: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #37: DT An inclusive approach to website design and development allows access to information and interaction for individuals with disabilities. Barriers of traditional mediums such as print, audio and visual media can be overcome through web technology.
- #39: One last thing before we open for questions, much of the content on accessibility covered in this presentation can be found in our eBook. You can download it at the link here. We’ll also be sharing the link to download the ebook in the webinar recap email.