accessibility-kit

🛠️ accessibility-kit

A fully-featured, customizable React accessibility component that integrates easily into any modern web application. Built with Tailwind CSS and Ant Design, accessibility-kit empowers users to personalize their browsing experience — from adjusting font size and contrast to hiding images and highlighting links.

🚀 Features

✅ Font size, letter spacing, line height, word spacing controls
✅ Text alignment: left, center, right, justify
✅ High contrast and grayscale modes
✅ Big cursor toggle
✅ Hide images for reduced visual clutter
✅ Highlight all links
✅ One-click reset to default settings
✅ Supports className prop for full theme customization (Tailwind or CSS)

📦 Installation

Install with your preferred package manager:

# npm
npm install accessibility-kit

# or pnpm
pnpm add accessibility-kit

⚙️ Usage

Basic usage with the default settings and full customization:

⚠️ Important: For cleaner structure and reusability, this component should live in its own file — e.g., accessibility.tsx.

💡 If you're using Next.js, don't forget to include 'use client' at the top of the file.

The component accepts props to customize labels and text, which makes it easy to include translations or other customizations.

// accessibility.tsx
"use client";
import { AccessibilityProvider, AccessibilityUI } from "accessibility-kit";
import "accessibility-kit/build/styles.css";

export function Accessibility() {
  return (
    <AccessibilityProvider>
      <AccessibilityUI
        props={{
          accessibilityTitle: "Accessibility Settings",
          alignment: "Alignment",
          justify: "Justify",
          left: "Left",
          center: "Center",
          right: "Right",
          adjustments: "Adjustments",
          fontSize: "Font Size",
          letterSpacing: "Letter Spacing",
          lineHeight: "Line Height",
          wordSpacing: "Word Spacing",
          contrasts: "Contrast",
          resetContrast: "Reset",
          moreTools: "More Tools",
          hideImage: "Hide Image",
          bigCursor: "Big Cursor",
          highlightLinks: "Highlight Links",
          resetAlignments: "Reset Alignments",
          reset: "Reset All Settings",
          className: "custom-access-button",
        }}
      />
    </AccessibilityProvider>
  );
}

🎨 Custom Styling

You can customize the appearance by passing className prop:

<AccessibilityUI  className: "custom-access-button" />

.accessibility-kit-roo,
.custom-access-button button {
  background: red !important;
}

.accessibility-kit-roo,
.button-btn .active-btn {
  background: #03313e !important;
}

.accessibility-kit-roo,
.button-active .enabled-btn {
  background: #03313e !important;
}

.accessibility-kit-roo,
.sidenav {
  background: #ffb09a !important;
}

.accessibility-kit-roo,
.ant-drawer-header {
  background: #feefe3 !important;
}

💡 Note: You can further customize the component by accessing and styling its nested child elements. Feel free to explore and style them as needed!

🗃️ Folder Structure (for contributors)

accessibility-kit/
├── src/
│   ├── components/          # React components
│   ├── context/             # Context providers
│   ├── utils/               # Utility functions
│   └── styles/              # Tailwind/CSS files
├── dist/                    # Built output (excluded from source control)
├── package.json
└── rollup.config.js         # Rollup bundler config

🧱 Tech Stack

This package is built with the following tools:

• React ^19.1.0
• Next.js ^15.3.2
• Ant Design (antd) ^5.24.9
• Tailwind CSS ^3.4.17
• TypeScript ^4.9.5
• ant ^0.2.0 (icon integration)

📤 Publishing (internal)

Make sure dist/ is built before publishing to npm:

npm run build
npm publish

Your package.json should include:

"files": ["dist", "build/styles.css"]

⚠️ If you use the files field in your package.json, it takes precedence over .gitignore and .npmignore.
This means you can safely keep dist/ out of your git repo (by listing it in .gitignore), and it will still be included in your npm package if you specify it in files.

🤝 Contributing

Contributions are welcome!

• Fork the repo
• Create a new branch:

  git checkout -b feature/your-feature
  

• Commit your changes:

  git commit -m "Add: your feature"
  

• Push to GitHub:

  git push origin feature/your-feature
  

• Open a pull request 📬

❓ Questions or Issues?

Feel free to open an issue or reach out to the maintainers.