Accessibility Enhancer

The Accessibility Enhancer is a WordPress plugin designed to improve website accessibility. It provides features such as a dynamic toolbar for text adjustments and contrast changes, automated accessibility reports for site admins, and front-end tools to identify and address accessibility issues. This plugin is built to adhere to WCAG standards, ensuring your website meets global accessibility guidelines.

---

Features

• Dynamic Toolbar: Front-end accessibility toolbar with text resizing and contrast adjustment options.
• Automated Reports: Generates accessibility reports for pages and posts.
• WCAG Compliance: Includes tools to check for WCAG violations such as missing alt tags, improper heading structures, and insufficient contrast.
• REST API Integration: Custom REST API endpoints for fetching and saving accessibility data.
• React Integration: Modern front-end components built with React.js.

---

Technology Stack

• WordPress: Backend framework.
• PHP: Core language for WordPress development (version 8.3 recommended).
• React.js: Front-end library for the accessibility toolbar and admin dashboard.
• Webpack: Module bundler for managing assets.
• Composer: Dependency management for PHP.
• Babel: JavaScript compiler for ES6+ features.
• DDEV: Local development environment for WordPress.

---

Requirements

• Docker and DDEV installed on your system.
• PHP version 8.3 or higher.
• Node.js (version 16 recommended) and npm/yarn for JavaScript dependencies.
• Composer for PHP dependency management.

---

Installation

1. Clone the Repository

   git clone https://github.com/shayanabbas/accessibility-enhancer.git
   cd accessibility-enhancer

2. Start DDEV

   ddev start

3. Download and Install WordPress Run the provided setup.sh script to download and configure WordPress.

   ./setup.sh

4. Install Composer Dependencies

   cd public/plugins/accessibility-enhancer
   composer install

5. Install Node.js Dependencies Navigate to the plugin directory and install JavaScript dependencies.

   cd public/plugins/accessibility-enhancer
   npm install

6. Build Assets Use Webpack to build the plugin's JavaScript and CSS files.

   npm run build

---

Running the Project

1. Access WordPress Visit your local DDEV environment: http://accessibility-enhancer.ddev.site

2. Activate the Plugin

   • Log in to the WordPress admin panel.
   • Navigate to Plugins > Installed Plugins.
   • Activate the "Accessibility Enhancer" plugin.

---

Development

1. Frontend Development

   • Run the Webpack development server for hot-reloading.

     npm start

   • Access the React components in src/components/.

2. Backend Development

   • Add or modify PHP classes in the includes/ directory.

3. REST API Development

   • API endpoints are located in class-rest-api.php.
   • Test endpoints using tools like Postman or directly through the WordPress REST API console.

---

Testing

• PHP Testing Run PHP CodeSniffer:

  composer phpcs
  composer phpcbf # For auto fix

• JavaScript Testing Lint JavaScript files:

  npm run lint
  npm run lint:fix # For auto fix

---

Release

• Build Release Run the provided release.sh file that will build a release in ./build folder.

  ./release.sh
  # use `--no-zip` for not creating a zip file
  ./release.sh --no-zip

---

Contribution

• Fork the repository.
• Create a feature branch:

  git checkout -b feature/<feature-name>

• Submit a pull request with detailed descriptions of the changes.

---

License

This project is licensed under the GPL-3.0 license.

---

For any issues or feature requests, please open an issue.