ReactFoo Delhi

As web developers, we all have a responsibility to develop accessible sites/apps, but for most of us it’s another checkbox to tick. This talk will be about how accessibility and good user experience goes hand in hand, and are not mutually exclusive.

In this talk, we will talk about what is accessibility and how we raised awareness about it in HackerRank. We will talk about the process to integrate accessibility first mindset and various ways in which we improved accessibility and ingrained it in our development process which helped the company grow.

Key takeaways from case study:

• Why should we care about accessibility.
• How to improve accessibility of react apps.
• How to use test react apps for accessibility(Resources)
  • Unit testing
  • Browser testing
  • Keyboard testing
  • Screen reader testing
  • Linters in code editor

Outline

1. What is accessibility

   1. General accessibility
   2. Web accessibility

2. Why we did it(Making HackerRank websites accessible)

   1. Business reasons
      1. UX improvement
      2. Inclusion/Increase in user base(more people can user our site)
      3. Corporate Social Responsibility
      4. More enterprise customer(some customer requires product accessibility compliance in contract)
   2. Legal reasons(accessibility compliance laws in various countries, latest Apple and Dominos fiasco)
   3. Others(Empathy, WCAG, ATAG)

3. How we did it

   1. Updating existing reusable UI components(will have examples of few major components with code and demo)
   2. Custom components specific to accessibility(HOC to detect keyboard navigation with code and demo)
   3. Showing minimum contrast pass/fail on internal colour library(code and demo)
   4. Setting up Unit testing(code and examples)
   5. Setting up Dev tools warning(code and demo)
   6. Dark mode.(Strategy/code and demo, and screenshots of feature requests from visually impaired users)
   7. eslint-plugin-jsx-a11y to catch issues while coding(screenshots/demo)
   8. ChromeVox/VoiceOver for screen reader testing(demo)

4. What’s next/We’re still doing it

   1. Accessibility is a process and not a project.
   2. Integrating reach router functionality with react router 5
   3. CI/CD integration.

5. Impact

   1. Positive and exciting feedback from users on dark mode and on user experience.
   2. As of now, there is no way to track screenreader users or distinguish different users with disabilities from the rest.
   3. Idea of web accessibility is to remove discrimination from web and any attempt towards that helps the cause.
   4. Levelling the field for candidates as now they don’t need to disclose their disability and ask for special treatment. We are closer to make our site accessible for everyone which removes the dependency from customer support team.

Requirements

None

Speaker bio

Vikas Parashar is frontend engineer and web accessibility evangelist at HackerRank. He has also co-organised InOut hackathons in the past.

Links

• https://twitter.com/vicode_in
• https://codepen.io/vikas-parashar
• https://github.com/vikas-parashar

Slides

https://docs.google.com/presentation/d/11V7cLvC3b367mOWTPfUw7Ki9mksC18LS2o6r6XYHsQo/edit?usp=sharing