A11y for Everyone Building Inclusive and Accessible Web Applications Gift Egwuenu @lauragift_

Gift Egwuenu Frontend Engineer and Technical Writer | A11y Advocate | Auth0 Ambassador Learn more at: giftegwuenu.com

https://www.who.int/health-topics/disability Over a billion people or 15% of the world’s population experience some form of disabIlity.

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

Web Accessibility? Web accessibility means that people with disabilities can equally perceive, understand, navigate, and interact with websites, technology and tools.

—Marcy Sutton Accessibility is a lifestyle and a culture we all should cultivate.

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.

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.

Inclusion & Diversity http://bit.ly/microsoft-inclusive-toolkit

Story Time: Twitter Voice

Be Empathetic. Show your users you care by considering their needs.

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

https://www.nme.com/news/music/beyonce-sued-website- inaccessible-blind-people-2426891

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

Case Study: GatsbyJS A11Y Win https://www.gatsbyjs.org/blog/2020-06-29-Gatsby-most-accessible-W ebAIM-Million/

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.

Accessibility Guidelines ATAG WCAG UAAG Authoring Tool Accessibility Guidelines Web Content Accessibility Guidelines User Agent Accessibility Guidelines

Accessibility Guidelines WCAG Web Content Accessibility Guidelines

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

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)

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

What can I do to make the web more accessible? Photo by Sigmund from Unsplash

Add Text Alternatives for non-text content(ALT Text)

Visible Focus Styles Don’t Do Don’t hide Focus on your web pages. Make it Visible.

Color Contrast Text should have a ratio of 4.5:1 or greater with the background.

Skip Links

Use Semantic HTML Always use a semantic element when you can. If you want a custom element use ARIA attributes

Specify Language Attribute EN: English FR: French

Provide Captions or Transcripts for Media content

● Lighthouse ● Screen Readers ● Wave ● aXe ● Accessibility Insights ● Chrome Color Contrast Debugger ● Automated Testing with cypress-axe Accessibility Auditing Tools

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

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

—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.

Thanks for your attention! giftegwuenu.com Gift Egwuenu @lauragift_ Got any questions?