A11Y for Everyone: Building Inclusive and Accessible Web Applications

Accessibility is a term known to most people, but not everyone is keen to follow its principles. The web today is used by everyone including those with disabilities and with the way we build our applications or websites it segregates people with disabilities. In this talk, I'll be engaging with the audience on how we can improve web accessibility and ways in which we can start taking this action to enable everyone to feel welcome on the web regardless of their abilities. We'll take a look at a site that does not follow accessibility principles and we'll walk through how to fix these violations with accessibility in mind.

Transcript

1. A11y for Everyone Building Inclusive and Accessible Web Applications Gift Egwuenu @lauragift_
2. Gift Egwuenu Frontend Engineer and Technical Writer | A11y Advocate | Auth0 Ambassador Learn more at: giftegwuenu.com
3. https://www.who.int/health-topics/disability Over a billion people or 15% of the world’s population experience some form of disabIlity.
4. Forms of Disabilities Situational Noisy environment, Bright sunlight, Multi-tasking Permanent Deaf/Hard on Hearing, Color Blindness, Autism, Dyslexia Infrastructure Barrier Temporary Broken Arm, Eye Injuries, Hearing Injuries Low Bandwidth, Slow connectivity
5. Web Accessibility? Web accessibility means that people with disabilities can equally perceive, understand, navigate, and interact with websites, technology and tools.
6. —Marcy Sutton Accessibility is a lifestyle and a culture we all should cultivate.
7. Accessibility & Inclusion Building a web that includes people with disabilities. Building a web that’s usable to people with the widest possible range of abilities.
8. Accessibility & Inclusion Poorly designed zig zag ramp built specifically for people with disabilities. Well designed dual ramp and stairs built for everyone regardless of their abilities.
9. Inclusion & Diversity http://bit.ly/microsoft-inclusive-toolkit
10. Story Time: Twitter Voice
11. Be Empathetic. Show your users you care by considering their needs.
12. The Business Case for Accessibility What’s in it for you as a business when you prioritise accessibility asides from the fact that it’s the right thing to do? • Enhance Your Brand Reputation • Extend Market Reach • Minimize Legal Risk
13. https://www.nme.com/news/music/beyonce-sued-website- inaccessible-blind-people-2426891
14. About 1 in 10 websites meets the accessibility standards. https://www.abilitynet.org.uk/news-blogs/less-1-website-home-pages- are-likely-meet-accessibility-standards
15. Case Study: GatsbyJS A11Y Win https://www.gatsbyjs.org/blog/2020-06-29-Gatsby-most-accessible-W ebAIM-Million/
16. How to Ensure High Standards of Accessibility Craft an Accessibility Statement This shows commitment to all users and it's a good move for the organization Accessibility Checklist Make sure accessibility checks is included as part of the product rollout checklist. Develop a plan for Implementing Accessibility Create a strategy for implementing fundamental accessibility features into your products. Educate & Advocate Educate everyone working on the team about the importance of accessibility and provide resources to help aid their training.
17. Accessibility Guidelines ATAG WCAG UAAG Authoring Tool Accessibility Guidelines Web Content Accessibility Guidelines User Agent Accessibility Guidelines
18. Accessibility Guidelines WCAG Web Content Accessibility Guidelines
19. Web Content Accessibility Guidelines (aka WCAG 2.1) Information and user interface components must be presentable to users in ways they can perceive Perceivable Operable Users can find and use content regardless of how they choose to access it Understandable Information and the operation of the user interface must be understandable Robust Information can be interpreted by a wide variety of user agents, including assistive technologies
20. WCAG Conformance Levels Conformance to a standard means that you meet or satisfy the 'requirements' of the standard. • Level A (the minimum level of conformance) • Level AA* (the middle level of conformance, satisfies both Level A and AA) • Level AAA (the highest level of conformance, satisfies all Levels A, AA, and AAA)
21. Is this really accessible? This image is of an ACROD (Australian Council for Rehabilitation of Disabled) parking bay obstructed with crates. W3CX:WAI: Intro to Accessibility
22. What can I do to make the web more accessible? Photo by Sigmund from Unsplash
23. Add Text Alternatives for non-text content(ALT Text)
24. Visible Focus Styles Don’t Do Don’t hide Focus on your web pages. Make it Visible.
25. Color Contrast Text should have a ratio of 4.5:1 or greater with the background.
26. Skip Links
27. Use Semantic HTML Always use a semantic element when you can. If you want a custom element use ARIA attributes
28. Specify Language Attribute EN: English FR: French
29. Provide Captions or Transcripts for Media content
30. • Lighthouse • Screen Readers • Wave • aXe • Accessibility Insights • Chrome Color Contrast Debugger • Automated Testing with cypress-axe Accessibility Auditing Tools
31. Web Accessibility Lifecycle Develop an understanding of accessibility and understand the current state and where to make improvements on the team Initiate Create a definite plan, communicate responsibilities and assign budget and resources to aid implementation Plan Develop core skills across team and integrate support for accessibility. Evaluate throughout the process and prioritize quick wins Implement Make continuous improvement and repeat the process over time to ensure a high level of accessibility Sustain
32. Summary • Disability and how it affects our users. • How Accessibility and Inclusion are related. • Business case for accessibility. • WCAG 2.1 & POUR Principles. • Implementing Accessibility: Make your site accessible. • Auditing and Debugging Accessibility. • The Accessibility Lifecycle
33. —Tim Berners-Lee, W3C Director and inventor of the World Wide Web The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
34. Thanks for your attention! giftegwuenu.com Gift Egwuenu @lauragift_ Got any questions?