How to make your web apps accessible(WCAG 2.1)

What is Web Accessibility?

We can simply term it as access to everyone regardless of disability is an essential aspect. It should definitely work for all people(physical disability, a visual impairment that is people with total inability to see or color issues, hearing impairment etc.)

Importance of Web Accessibility

  • To create a high-quality website and web tools and not exclude people from using their products

  • support social inclusion for people with disability

Examples?

  1. Alt text for images(image information)

  2. Keyboard input (we simply don't need a mouse)

  3. Transcript for audio.

WCAG (Web Content Accessibility Guidelines)

This defines how to make web content more accessible to people with disabilities(visual, physical, language, cognitive, speech, auditory). WA depends not only on accessible content but also on accessible web browsers.

The Essentials of WCAG?

  • Web browser and media players

  • Evaluation tools (HTML Validators, CSS validators) eg error message on input text

  • Assistive technology(screen readers and alt keyboard).

Most common A11Y eslint plugins

  1. jsx-a11y/click-events-have-key-events

  2. jsx-a11y/label-has-associated-control

  3. jsx-a11y/anchor-is-valid

  4. jsx-a11y/no-static-element-interactions