$30 off During Our Annual Pro Sale. View Details »

A11Y for Everyone: Building Inclusive and Accessible Web Applications

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.

Egwuenu Gift

July 16, 2020

More Decks by Egwuenu Gift

Other Decks in Technology


  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

  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-

  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