# **Tone Accessibility Widget**

A vanilla JavaScript Accessibility Widget designed to be compliant with ADA and WCAG 2.2 standards. Enhance your website's accessibility with a lightweight, easy-to-integrate solution.

## **Features**

Tone provides a suite of tools to help users tailor their browsing experience.

* **Appearance Changer**: Switch between Light, Dark, and High Contrast modes.
* **Font Size Changer**: Increase or decrease the text size on the page.
* **Line Height Adjuster**: Modify the spacing between lines of text.
* **Text Spacing**: Adjust the spacing between letters and words.
* **Image Hider**: Hide all images on the page for a text-only view.
* **Highlight Links**: Make all links more prominent.
* **Cursor Adjuster**: Enlarge the cursor for better visibility.

## **Installation**

You can add Tone to your project either by using a CDN or by installing it from npm.

### **1\. CDN**

For the quickest setup, add the following to your HTML file.

\<\!-- Load the stylesheet in the \<head\> \--\>
\<link rel="stylesheet" href="\[<https://cdn.jsdelivr.net/npm/@reaktly-js/tone-accessibility/dist/tone.css\>](<https://cdn.jsdelivr.net/npm/@reaktly-js/tone-accessibility/dist/tone.css)"\>>

\<\!-- Load the script before the closing \</body\> tag.
     The data-auto-init attribute will automatically start the widget. \--\>
\<script src="\[<https://cdn.jsdelivr.net/npm/@reaktly-js/tone-accessibility/dist/tone.js\>](<https://cdn.jsdelivr.net/npm/@reaktly-js/tone-accessibility/dist/tone.js>)" data-auto-init\>\</script\>

### **2\. npm**

Install the package using npm or yarn:

npm install @reaktly-js/tone-accessibility

Then, import it into your project's main JavaScript file:

import Tone from '@reaktly-js/tone-accessibility';
import '@reaktly-js/tone-accessibility/dist/tone.css';

// Initialize the widget
new Tone();

## **Usage**

To initialize the widget, create a new instance of the Tone class. If you don't pass any options, the widget will initialize with all features enabled.

const toneWidget \= new Tone({
  // You can disable default features here
  imageHider: false,       // Disable the image hider feature
  highlightLinks: true,  // Ensure the highlight links feature is on
});

### **Configuration Options**

You can customize which accessibility tools are available by passing a configuration object to the constructor.

| Option | Type | Default | Description |
| :---- | :---- | :---- | :---- |
| appearanceChanger | boolean | true | Enables light/dark/contrast mode switching. |
| fontSizeChanger | boolean | true | Enables text resizing controls. |
| lineHeightAdjuster | boolean | true | Enables line height controls. |
| textSpacing | boolean | true | Enables text spacing controls. |
| imageHider | boolean | true | Enables the tool to hide images. |
| highlightLinks | boolean | true | Enables the tool to highlight links. |
| cursorAdjuster | boolean | true | Enables the cursor adjustment tools. |

## **Development**

Interested in contributing? Follow these steps to set up a local development environment.

**1\. Clone the repository:**

git clone \[<https://github.com/your-username/tone-accessibility.git\>](<https://github.com/your-username/tone-accessibility.git>)
cd tone-accessibility

**2\. Install dependencies:**

npm install

**3\. Run the development server:**

npm run dev

This will start a Vite dev server and open a browser window to <http://localhost:5173>.

4\. Build the project:
To create the final distribution files in the /dist folder, run:
npm run build

This command bundles the code and gets it ready for production.

## **License**

This project is licensed under the MIT License.