A comprehensive WordPress plugin that enhances website accessibility and ensures WCAG compliance with customizable accessibility toolbars, preset conditions, and user profiles.
One Accessibility is a modern, flexible WordPress plugin that helps your website meet WCAG, ADA, and other accessibility standards effortlessly. Create multiple accessibility presets and assign them conditionally to different areas of your site—Entire Site, Singular (posts/pages), or Archives (categories, tags).
The plugin includes a built-in mini editor to customize the accessibility toolbar layout and controls, giving users an intuitive experience tailored to different needs. It works independently of any page builder like Gutenberg or Elementor, ensuring compatibility with all WordPress themes.
- Multiple Accessibility Presets - Create unlimited presets with conditional assignment (Entire Site, Singular, Archives)
- Built-in Mini Editor - Customize toolbar layout using an intuitive drag-and-drop interface
- User-Specific Profiles - Create and manage accessibility profiles for different needs (vision impairment, ADHD, dyslexia, etc.)
- Theme Independent - Compatible with all WordPress themes and page builders
- Comprehensive Tools - Screen reader, contrast tools, animation controls, dictionary tooltips, Google Translate integration
- Lightweight & Fast - Optimized performance with minimal impact on site speed
- WordPress: 6.1 or higher
- PHP: 7.4 or higher
- MySQL: 5.6 or higher
- Node.js: 18.x or higher
- npm: 9.x or higher
- Composer: 2.x or higher
- PHP: 7.4 or higher (with extensions: json, mysqli, curl)
- Upload the plugin to
/wp-content/plugins/website-accessibilityor install via WordPress plugin directory - Activate the plugin through the 'Plugins' screen in WordPress
- Configure accessibility presets and profiles from the plugin settings
- Assign presets conditionally to Entire Site, Singular, or Archive pages
- Use the mini editor to customize the toolbar layout
Ensure you have the following installed on your development machine:
- Node.js (v18+ recommended)
- Composer
- WordPress Development Environment (Local by Flywheel, XAMPP, WAMP, etc.)
-
Clone the repository
git clone [your-repo-url] website-accessibility cd website-accessibility -
Install PHP dependencies
composer install
-
Install Node.js dependencies
npm install
-
Start development server
npm run start
-
Build for production
npm run build
| Command | Description |
|---|---|
npm run start |
Start development server with hot reload |
npm run build |
Build production assets |
npm run packages-update |
Update WordPress packages |
npm run make-pot |
Generate translation files |
npm run plugin-zip |
Create distributable plugin zip |
npm run publish |
Build, generate translations, and create zip |
-
Start the development server:
npm run start
This will watch for file changes and automatically rebuild assets.
-
Make your changes in the appropriate directories:
- PHP backend code:
includes/ - React components:
src/ - Styles:
src/*/styles/
- PHP backend code:
-
Test your changes in your WordPress development environment
-
Build for production when ready:
npm run build
website-accessibility/
├── assets/ # Static assets (fonts, images)
├── includes/ # PHP backend code
│ ├── Admin/ # WordPress admin functionality
│ ├── Core/ # Core plugin classes
│ ├── Traits/ # PHP traits
│ └── View/ # Frontend rendering
├── src/ # Frontend JavaScript/React code
│ ├── admin/ # Admin dashboard components
│ ├── components/ # Reusable React components
│ ├── frontend/ # Frontend accessibility features
│ └── assets/ # Frontend assets
├── languages/ # Translation files
├── vendor/ # Composer dependencies
├── build/ # Built assets (auto-generated)
├── composer.json # PHP dependencies
├── package.json # Node.js dependencies
└── website-accessibility.php # Main plugin file
includes/- Contains all PHP backend code with PSR-4 autoloadingsrc/admin/- React-based admin interface componentssrc/components/- Reusable frontend accessibility componentssrc/frontend/- Frontend functionality and context providers
- Namespace:
Websac\(PSR-4 fromincludes/), all global symbols prefixedwebsac/WEBSAC_ - Pattern: Singleton pattern for main classes
- Autoloading: PSR-4 via Composer
- Post Types:
websac_presetcustom post type for toolbar presets (custom profiles are provided by the separate Pro plugin)
- Build Tool: WordPress Scripts (Webpack-based)
- UI Framework: Ant Design (antd)
- State Management: React Context API
- Styling: SCSS with component-based architecture
- Activate the plugin in your WordPress development environment
- Create accessibility presets via the admin interface
- Test conditional assignment (Entire Site, Singular, Archives)
- Verify frontend accessibility toolbar functionality
- Test with different themes and page builders
- PHP: Follow WordPress Coding Standards
- JavaScript: ESLint configuration included via @wordpress/scripts
- Styles: SCSS linting and formatting
The plugin is translation-ready. To generate translation files:
npm run make-potTranslation files are stored in the languages/ directory.
To create a distribution-ready plugin:
npm run publishThis will:
- Build optimized production assets
- Generate translation files
- Create a plugin zip file
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow WordPress PHP Coding Standards
- Use meaningful commit messages
- Ensure all code is properly documented
- Test thoroughly before submitting PRs
This plugin is licensed under the GPL-2.0-or-later license. See the LICENSE file for details.
- Documentation: WordPress.org Plugin Page
- Issues: WordPress.org Support Forum
- Email: support@bdthemes.com
One Accessibility is developed by BDThemes, a leading WordPress theme and plugin development company.
Made with ❤️ for a more accessible web