Front-End Developer Interviews: The Crucial Aspect of Accessibility

Let me start with this: Accessibility is not a buzzword; it’s a crucial feature that every web application should have.

It should not be mandated by the government, but rather it should be taken as the responsibility of every developer to make their websites accessible to all users.

Making a website accessible will not just help you avoid government penalties, it will also give you a wider user base. Accessibility is all about making your website accessible to everyone.

On that note, let’s get this blog started -

What is Accessibility

Accessibility is ensuring that your web application is usable by people with disabilities, including people with

• Visual impairment (Blindness, Colour Blindness) -

• Hearing loss

• Motor Impairment ( Difficulty using the mouse)

• Cognitive limitation (Dyslexia, Attention Disorder)

Accessibility Core Principle (POUR)

How can people with disabilities use the applications

Accessibility Standards

Web Content Accessibility Guidelines (WCAG)

Defines Accessibility levels as A, AA & AAA

Read More: https://www.w3.org/WAI/standards-guidelines/wcag/

Accessible Rich Internet Applications (ARIA)

Adds accessibility support to non-semantic elements.

Read More: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/

Americans with Disabilities Act (ADA)

Legal mandate in the US for accessible digital content

Read More: https://www.ada.gov/

AA is the most commonly required level of compliance.

How to make a web application Accessible

Use Semantic Tags

• Use tags like <button> , <nav>, <header>, <section> etc.

• Avoid using div and span all over your application

Support Keyboard Accessibility

• Actions should be usable via. keyboard, including opening modals, dropdowns, and toasts.

• Use tabindex to align focus correctly.

• Use focus, keydown event listeners correctly

Use Aria Roles when needed

• Use aria-label, aria-hidden, role="dialog", etc., when native semantics are not sufficient

• https://w3c.github.io/aria/

Focus Management

• Trap focus in modals

• Restore focus when modals close

• Visibly indicate focus using focus-visible or outline

Maintain Colour Contrast

• 4.5: 1 for normal text in AA Standard

• 7:2 for AAA

• Check contrast: https://webaim.org/resources/contrastchecker/

Using Images and Other Media

• Use alt text for images

• Add transcripts/captions for videos/audio

• Avoid autoplaying media files. i.e. Video

Tools for Accessibility Testing

The tools listed below are some of the most common tools for testing accessibility in a web application.

WCAG AAA is harder to implement, and most website are expected to maintain AA compliant.

I hope by the end of this post, you have a good idea of why accessibility is important and how you can add accessibility support to your application.

That’s all, folks! I hope you found this helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/

Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

Twitter | Instagram | Github | Website