# 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)

| **Principle** | **Description** |
| --- | --- |
| **P**erceivable | Content must be perceivable by all (e.g., alt text, captions) |
| **O**perable | All functionality must work via keyboard or assistive devices |
| **U**nderstandable | Content should be readable and predictable |
| **R**obust | Must work with various assistive technologies |

## How can people with disabilities use the applications

| Visual impairment | Should be able to use with screen readers, VoiceOver, and Font Scaling support |
| --- | --- |
| Hearing loss | Close Captions for Video and Audio |
| Motor Impairment | Keyboard Accessibility Support |
| Cognitive limitation | Simple Language |

## Accessibility Standards

### Web Content Accessibility Guidelines (WCAG)

Defines Accessibility levels as **A**, **AA** & **AAA**

Read More: [https://www.w3.org/WAI/standards-guidelines/wcag/](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/](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)

### Americans with Disabilities Act (ADA)

Legal mandate in the US for accessible digital content

Read More: [https://www.ada.gov/](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/](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/](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.

| **Tool** | **Use Case** |
| --- | --- |
| **axe DevTools** | Chrome extension to audit a11y |
| **Lighthouse** | Built-in browser audits |
| **NVDA / VoiceOver** | Screen reader testing |
| **Tab key** | Test keyboard navigation |

> 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/](https://blog.nandan.dev/)

Feel free to comment, email me at [**connect@nandan.dev**](http://mailto: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**](https://twitter.com/_sirius93_) | [**Instagram**](https://www.instagram.com/nandandotdev) | [**Github**](https://github.com/sirius93) | [**Website**](https://nandan.dev/)
