Adding/Improving Accessibility Functionality To Your React App

Web Accessibility is often an over looked aspect when building websites. This is because of the difficulity, time and money it takes to make your website for accessible for the smaller amount of users with visual and hearing impairments. There is an easy fast way to drasticlly improve accessibility on your React apps and websites by installing a single package.

Lets Start with a simple fact,

There are an estimated 300 million people in the world with color vision deficiency.

But what is suprising is the next fact!

1 in 12 men are color blind (8%). 1 in 200 women are color blind (0.5%).

Probably more than you expected right?

Ok back to web development and programming... I said there was an easy way to drastically improve accessiblity on your website. With a single NPM package you can make your website more accessible to the impaired.

---

React Accessbility Package

---

An Accesibility Widget for React Apps/Websites.

The widget allows users to change the UI design/styling across the website/app to make the platform more accessible to their needs.

i.e for users that are color blind, the widget will change text colors across the whole site.

---

Installation

---

Available on the NPM Registry

In the command prompt run:

npm install react-accessibility --save

Alternatively you may use yarn:

yarn add react-accessibility

---

Usage

---

Extremely simple to use - import a single component and use in your JSX

import { AccessibilityWidget } from 'react-accessibility'

Use In your JSX:

<AccessibilityWidget />

---

That's It Your Finished.

---

Run your project and see the accessibility widget on your React app/website

if you want to try it out before you install the package. Your can demo it on the link below.

Click Here For DEMO

View Package On NPM - NPM Link

View Repository on Github - Github Link