Welcome to the Inclusive Components in React project! This project aims to demonstrate the implementation of inclusive components using React, Next.js, Storybook, and Tailwind CSS. Inclusive components are accessible and usable UI elements that ensure everyone, regardless of their abilities or disabilities, can interact with your application.
For inspiration and deeper insights into inclusive design, consider visiting the Inclusive Components blog, where you can find a wealth of valuable information and examples.
Please note that this project is currently a work in progress and is intended for learning purposes only. It is not recommended for production use. For production applications, consider using more robust and battle-tested solutions like React Aria or Radix UI.
To get started with the project, follow these steps:
- Clone the repository:
git clone https://github.com/Mohamed-Abbas/inclusive-components.git - Change into the project directory:
cd inclusive-components-react - Install the dependencies:
yarn install
Once you have installed the project, you can run it locally using the following command: yarn dev.
This will start the development server, and you can view the project in your browser at http://localhost:3000.
The project includes a variety of inclusive components built with React. Each component is designed with accessibility in mind and is thoroughly tested for usability. Some of the included components are:
- Accessible Toggle: A toggle switch that can be easily operated with keyboard and screen readers.
We are continuously adding more components and enhancing existing ones to create a comprehensive collection of inclusive components.
Inclusive design is a priority in this project. Each component is crafted to meet Web Content Accessibility Guidelines (WCAG) 2.0 and WCAG 2.1 standards, ensuring a delightful user experience for everyone. When contributing to the project, please consider accessibility guidelines and test your changes across different assistive technologies.
If you encounter any issues or have suggestions for improvement, please let us know by creating a new issue in the repository. We value your feedback and are committed to making this project more inclusive and user-friendly.