Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Gift Egwuenu

July 16, 2020
Tweet

More Decks by Gift Egwuenu

Other Decks in Technology

Transcript

  1. Gift Egwuenu Frontend Engineer and Technical Writer | A11y Advocate

    | Auth0 Ambassador Learn more at: giftegwuenu.com
  2. 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
  3. Web Accessibility? Web accessibility means that people with disabilities can

    equally perceive, understand, navigate, and interact with websites, technology and tools.
  4. 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.
  5. 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.
  6. 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
  7. 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.
  8. Accessibility Guidelines ATAG WCAG UAAG Authoring Tool Accessibility Guidelines Web

    Content Accessibility Guidelines User Agent Accessibility Guidelines
  9. 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
  10. 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)
  11. 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
  12. What can I do to make the web more accessible?

    Photo by Sigmund from Unsplash
  13. Use Semantic HTML Always use a semantic element when you

    can. If you want a custom element use ARIA attributes
  14. • Lighthouse • Screen Readers • Wave • aXe •

    Accessibility Insights • Chrome Color Contrast Debugger • Automated Testing with cypress-axe Accessibility Auditing Tools
  15. 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
  16. 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
  17. —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.