# react-accessibility-package > The React Accessibility Enhancer is a powerful tool designed to improve the visual representation and accessibility of React applications. With this component, you can effortlessly enhance the user experience for individuals with diverse needs, ensuring y Latest version **1.0.0** (published 2024-03-01) · AGPLv3 license · 0 weekly downloads ## Install ```sh npm install react-accessibility-package pnpm add react-accessibility-package yarn add react-accessibility-package bun add react-accessibility-package ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2024-03-01 | | First published | 2023-10-30 | | Weekly downloads | 0 | | License | AGPLv3 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 25.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Nahid Islam | | Maintainers | nahid_shaiket | | Keywords | accessibility, react | ## Links - npm: https://www.npmjs.com/package/react-accessibility-package - npm.io page: https://npm.io/package/react-accessibility-package ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2024-03-01 - 0.0.51 — 2024-02-05 - 0.0.50 — 2024-02-05 - 0.0.49 — 2024-01-18 - 0.0.48 — 2024-01-16 - 0.0.47 — 2024-01-12 - 0.0.46 — 2024-01-12 - 0.0.45 — 2023-12-04 - 0.0.44 — 2023-11-27 - 0.0.43 — 2023-11-23 - 0.0.42 — 2023-11-22 - 0.0.41 — 2023-11-22 - 0.0.40 — 2023-11-22 - 0.0.39 — 2023-11-22 - 0.0.37 — 2023-11-22 - … 7 more at https://npm.io/package/react-accessibility-package/versions ## README # Accessibility Component The React Accessibility Enhancer is a screen overlay for react applications. This has a few features to make react web applications more accessible. Disclaimer: It will not solve all accessibility issues in the application. Only give a few extra options intended to make the experience a little bit better. For the accessibility guidelines for your applications, check out this [link](https://www.w3.org/TR/WCAG21/). ![Example Image](https://github.com/nahid1991/accessibility-component/blob/main/example.gif?raw=true) ## [Repository](https://github.com/nahid1991/accessibility-component/) ## Requirements - `"@mui/material": "^5.0.0" or "bootstrap": "^5.0.0" and "react-bootstrap": "^2.8.0"` - `"react": "^17.0.0"` ## Getting Started ### Installation - Either add `"react-accessibility-package": "^1.0.0"` in `package.json` and in terminal run `npm install` - Or in the terminal run `npm install react-accessibility-package` - Or if you are using yarn run `yarn add react-accessibility-package` ### Usage - Import the package by adding `import { Accessibility } from 'react-accessibility-package'` - Wrap the entry point component like in the example below: ```
``` ### Props - `lang`: This prop determines which language should be used in the component. We currently support setting "en" for English (default), "de" for German, and "pt" for Portuguese - `theme`: Set "bootstrap" for Bootstrap themed component and "mui" for Mui (default) based component. Unless `react-bootstrap` is being used do not set the theme as "bootstrap". - `excludedFeatures`: This is an array and any string corresponding to the features those will not be rendered in the component. Example: `excludedFeatures={['BIG_CURSOR']}`. Here the big cursor feature will be excluded from the component. The list of strings we can use to exclude desired features are given below: - 'BIG_CURSOR' - 'READING_MASK' - 'HIGHLIGHT_LINK' - 'HIDE_IMAGE' - 'INCREASE_LETTER_SPACE' - 'INCREASE_LINE_HEIGHT' - 'DARK_CONTRAST' - 'LIGHT_CONTRAST' - 'INVERT_COLOR' - 'PAGE_STRUCTURE' - 'LEFT_ALIGN' - 'RIGHT_ALIGN' - 'LOW_SATURATION' - 'HIGH_SATURATION' - 'DESATURATE', - 'MAGNIFY' - `maxFontSize`: set a number for which you want to set the max fontsize for the application after the `Magnify Text` is applied. Default `24px`. ### Other settings - `dark-contrast-border`: When the app is in `Dark Contrast`, if you want any component to have white border add this class to the classname of the component. - `light-contrast-border`: When the app is in `Light Contrast`, if you want any component to have black border add this class to the classname of the component. ## Authors and acknowledgment - [Nahid Islam](https://github.com/nahid1991) - [Adeline Silva Schäfer](https://github.com/adelinerd) ### Acknowledgment This project is inspired by the work done in https://www.unimed.coop.br/site/ ## Contact us Your feedback is very valuable to us. Please email us in one of the emails. Looking forward to hearing your concerns and new ideas. - nahidshaiket10300@gmail.com - adeline.schaefer@iese.fraunhofer.de ## Evaluation Please take a little bit time to do an evaluation [here](https://forms.gle/ZcpioePf8WTXysif6). ## License Copyright (C) 2024 Nahid Islam and Adeline Silva Schäfer This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . ## Project Status This project is currently under development and has been not released yet --- _Source: https://npm.io/package/react-accessibility-package · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._