Elementor ARIA Accessibility Manager

A WordPress plugin that adds ARIA controls and accessibility roles to the Elementor Free editor. Improves website accessibility for people with visual and motor disabilities.

🎯 Key Features

🦾 ARIA Controls in Editor

• ARIA Role: 50+ semantic roles (landmarks, widgets, structure)
• ARIA Labels: aria-label, aria-describedby, aria-labelledby
• ARIA States: aria-hidden, aria-current, aria-expanded, aria-pressed
• Native Integration: Dedicated section in Elementor's Advanced tab

🔧 Full Compatibility

• ✅ Elementor Free 3.0+
• ✅ Elementor Pro (compatible)
• ✅ WPML (ARIA label translation)
• ✅ WordPress 6.0+
• ✅ PHP 7.4+

🛠️ Advanced Features

• Automatic WPML Fix: Corrects incorrect roles in language switchers
• Real-time Validation: Prevents common accessibility errors
• Contextual Suggestions: Recommends roles based on element type
• Debug Panel: For administrators (optional)
• Translations: Ready for internationalization

📦 Installation

Method 1: From WordPress

1. Download the plugin as ZIP file
2. Go to Plugins → Add New → Upload Plugin
3. Select the ZIP file and click Install Now
4. Activate the plugin

Method 2: Manually

1. Download or clone this repository
2. Upload the ARIA-Tab-for-elementor.git folder to /wp-content/plugins/
3. Activate the plugin from WordPress dashboard

Method 3: From GitHub

cd wp-content/plugins
git clone https://github.com/lucasnbet/ARIA-Tab-for-elementor.git

🚀 Usage

Basic Setup

1. Activate the plugin in WordPress
2. Open any page with Elementor
3. Select any element (section, column, widget)
4. Go to Advanced tab → ARIA Attributes
5. Configure attributes as needed

Usage Examples

1. Site Header

role="banner"
aria-label="Main site header"

2. Navigation Menu

role="navigation"
aria-label="Main navigation menu"

3. Main Content

role="main"
aria-label="Main page content"

4. Language Switcher (WPML)

role="navigation"
aria-label="Site language selector"

🎨 Customization

Available ARIA Roles

The plugin includes all valid roles according to WAI-ARIA 1.2 specification:

• Landmarks: banner, navigation, main, complementary, etc.
• Document Structure: article, aside, heading, list, table, etc.
• Widgets: button, checkbox, dialog, link, progressbar, etc.
• Live Regions: alert, log, marquee, timer, etc.
• Application: application

Custom CSS Styles

You can override editor styles in your theme:

/* In your theme's functions.php */
add_action('wp_enqueue_scripts', function() {
    wp_dequeue_style('elementor-aria-editor');
});

🔧 Advanced Configuration

Plugin Options

Add this to your wp-config.php for debugging:

define('ELEMENTOR_ARIA_DEBUG', true);

Available Hooks and Filters

Filters

// Filter available roles
add_filter('elementor_aria_available_roles', function($roles) {
    // Add or remove roles
    unset($roles['application']);
    return $roles;
});

// Filter ARIA values before rendering
add_filter('elementor_aria_attribute_value', function($value, $attribute, $element) {
    // Modify values dynamically
    if ($attribute === 'aria-label') {
        return $value . ' - ' . get_bloginfo('name');
    }
    return $value;
}, 10, 3);

Actions

// Run code after applying ARIA attributes
add_action('elementor_aria_attributes_applied', function($element, $settings) {
    // Your code here
}, 10, 2);

🐛 Troubleshooting

Common Issues

1. Controls don't appear

• Verify Elementor is active and version 3.0+
• Verify you're in Elementor edit mode
• Check JavaScript console for errors

2. Attributes not applied in frontend

• Clear cache of WordPress and browser
• Verify plugin is active
• Check WordPress error logs

3. Conflicts with other plugins

• Deactivate other plugins temporarily
• Test in a clean environment
• Report the conflict in GitHub Issues

Debugging

Enable debug mode in wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Then check wp-content/debug.log for errors.

📚 Technical Documentation

Plugin Structure

elementor-aria-manager/
├── elementor-aria-accessibility.php    # Main file
├── includes/
│   ├── class-aria-controls.php        # Editor controls
│   ├── class-aria-frontend.php        # Frontend application
│   └── class-aria-wpml.php            # WPML integration
├── assets/
│   ├── css/admin.css                  # Editor styles
│   └── js/admin.js                    # Editor scripts
├── languages/                         # Translations
└── README.md                          # This file

System Requirements

• PHP: 7.4 or higher
• WordPress: 6.0 or higher
• Elementor: 3.0 or higher
• Database: MySQL 5.6+ or MariaDB 10.1+
• PHP Memory: 128MB minimum (256MB recommended)

Security

• ✅ All inputs sanitized
• ✅ ARIA role validation
• ✅ Nonce verification in AJAX
• ✅ Output escaping
• ✅ XSS prevention

🤝 Contributing

How to Contribute

1. Fork the repository
2. Create a branch (git checkout -b feature/new-feature)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/new-feature)
5. Open a Pull Request

Code Style Guide

• PHP: Follow WordPress Coding Standards
• JavaScript: Follow Airbnb JavaScript Style Guide
• CSS: Follow BEM methodology
• Commits: Use Conventional Commits

Testing

Before submitting a PR:

# Run PHP tests
composer test

# Check code standards
composer check-cs

# Security check
composer security-check

📄 License

This plugin is licensed under GPL v2 or later.

Elementor ARIA Accessibility Manager
Copyright (C) 2024 Lucas Bettera

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.

👨‍💻 Author

Lucas Bettera - lucasnbet

• GitHub: @lucasnbet
• Email: lucasnbet@gmail.com

🙏 Acknowledgments

• Elementor Team for creating an amazing builder
• WordPress Community for continuous support
• W3C WAI for ARIA specifications
• All contributors who make this plugin better

⭐ Like this plugin?

If this plugin has been useful to you, please:

1. Give it a star on GitHub ⭐
2. Share it with other developers
3. Consider donating to support development

---

Note: This plugin is not affiliated with, endorsed by, or maintained by Elementor Ltd. Elementor is a registered trademark of Elementor Ltd.