WordPress plugin that allows translation of ARIA attributes in Elementor sites with WPML, improving accessibility in multilingual environments.

The AccessiTrans - ARIA Translator for WPML & Elementor plugin facilitates the translation of ARIA attributes in sites developed with Elementor and WPML, ensuring that accessibility information is available in all languages of your website.

The plugin allows you to translate the following attributes:

• aria-label: To provide an accessible name for an element
• aria-description: To provide an accessible description
• aria-roledescription: To customize the role description of an element
• aria-placeholder: For placeholder text in input fields
• aria-valuetext: To provide textual representation of numeric values

The plugin offers several capture methods to ensure that all ARIA attributes are detected and made available for translation:

1. Full HTML Capture: Captures all HTML of the page to find ARIA attributes (highly effective but may affect performance)
2. Elementor Content Filter: Processes content generated by Elementor
3. Elementor Template Processing: Processes Elementor template data
4. Individual Element Processing: Processes each Elementor widget and element individually

These methods can be enabled or disabled from the plugin's settings page according to your site's needs.

The plugin registers strings for translation using the format aria-attribute_value for maximum robustness and compatibility with WPML's string translation system.

• Translation Retry Mechanism: Automatically retries failed translations to improve success rate
• Force Refresh Function: Button to clear all caches and force update translations
• Debug Mode: Detailed logging for troubleshooting
• Translation Cache System: Persistent cache system that improves performance by storing found translations

Works with all types of Elementor content:

• Regular pages
• Templates
• Global sections
• Headers and footers
• Popups and other dynamic elements

Tested with:

• WordPress 6.8
• Elementor 3.28.4
• WPML Multilingual CMS 4.7.4
• WPML String Translation 3.3.3

1. Download the accessitrans-aria.zip file from the GitHub releases page
2. Upload the files to the /wp-content/plugins/accessitrans-aria/ directory of your WordPress installation or install directly through WordPress by uploading the ZIP file
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Go to Settings → AccessiTrans to configure the plugin options
5. Configure ARIA attributes in Elementor (see usage instructions)

1. Edit any element in Elementor
2. Go to the "Advanced" tab
3. Find the "Custom Attributes" section
4. Add the ARIA attributes you want to translate

Elementor indicates: "Set custom attributes for the wrapper element. Each attribute in a separate line. Separate attribute key from the value using | character."

You can add ARIA attributes in two ways:

Basic format (one attribute per line):

aria-label|Text to translate

Multiline format (multiple attributes):

aria-label|Text to translate
aria-description|Another description

This will generate the corresponding HTML attributes in the frontend: aria-label="Text to translate" aria-description="Another description"

1. Once you've added the attributes, save the page or template
2. Go to WPML → String Translation
3. Filter by the "AccessiTrans ARIA Attributes" context
4. Translate the strings as you would with any other text in WPML

Note: Each text might appear multiple times with different identifiers. This is normal and part of the mechanism that ensures translations work in all content types and capture methods.

For optimal performance and efficiency, follow these recommended practices:

1. Browse the site in the primary language only while generating strings for translation. This prevents the plugin from registering strings that may have already been translated through other systems.

2. Use the "Force Refresh" function when needed:

   • If a translation doesn't appear as expected
   • After making significant changes to your site
   • When adding new ARIA attributes to existing elements

3. Disable capture methods after initial setup:

   • Once you've captured all ARIA attributes for translation, consider disabling all capture methods
   • This will improve site performance and prevent additional strings from being registered in WPML
   • Re-enable the capture methods temporarily when you make changes to your site that include new ARIA attributes

For a menu button:

aria-label|Open menu

For a phone link:

aria-label|Call customer service

For an icon without text:

aria-label|Send email

For a slider:

aria-label|Image gallery
aria-description|Navigate through product images

The plugin comes with a settings page that allows you to configure the capture methods and other options:

• Full HTML Capture: Captures all HTML (most thorough but might affect performance)
• Elementor Content Filter: Processes content generated by Elementor
• Process Elementor Templates: Processes Elementor template data
• Process Individual Elements: Processes each Elementor widget individually

• Retry Failed Translations: Attempts to reapply translations that failed on first try
• Translation Priority: Priority of translation filters (higher values execute later)
• Debug Mode: Enables detailed event logging (stored in uploads/accessitrans-logs)
• Capture for Admins Only: Only processes full capture when an admin is logged in
• Capture in Main Language Only: Only captures strings when browsing in the default language

The plugin includes internationalization support, making it ready for translation into multiple languages. The translation files should be placed in the /languages directory.

• Internationalization improvements: Updated all plugin strings to English to comply with WordPress.org guidelines
• Made plugin fully compatible with WordPress.org translation system
• Improved translation workflow for better language support
• Minor code refinements for better maintainability

• Security fix: Implemented sanitize_callback in register_setting()
• Improved sanitization structure to follow WordPress best practices

• Security improvement: Implemented proper input sanitization
• Optimized logging system for production environments
• Tested with WPML 4.7.4 and String Translations 3.3.3
• Fixed register_setting() usage for better security
• Implemented proper JavaScript and CSS enqueuing:
  • Removed inline scripts and styles from PHP code
  • Created assets/css and assets/js folder structure
  • Extracted styles to admin-styles.css and scripts to admin-scripts.js
  • Implemented wp_enqueue_style() and wp_enqueue_script()
  • Used wp_localize_script() to pass variables to JavaScript
• Fixed file/directory location:
  • Replaced direct use of WP_CONTENT_DIR for log files
  • Implemented wp_upload_dir() to determine correct location
  • Created specific 'accessitrans-logs' directory in uploads
• Removed load_plugin_textdomain():
  • Removed unnecessary function since WordPress 4.6+
  • Maintained /languages folder structure for translations
• Updated documentation

• First public release
• Corrected and updated translation files
• Ready for WordPress.org repository

• Added main toggle to enable/disable scanning for new strings
• Improved the entire admin interface with accessible semantic structure
• Implemented screen reader announcements for interactive processes
• Redesigned the interface using fieldset/legend replacing tables
• Enhanced visual styles and activation/deactivation of dependent fields
• Optimized performance when scanning is disabled

• Improved language verification system for string capture
• Implemented robust system to prevent duplicates in WPML
• Optimized cache system with enhanced persistence and size control
• Fixed issue with duplicate entries in the diagnostics tool
• Improved overall performance by reducing database queries

• Added persistent translation cache system to improve performance
• Enhanced translation lookup algorithm with multiple fallback methods
• Improved accessibility of admin interface for screen readers
• Added diagnostics tool to troubleshoot translation issues
• Fixed issues with attribute detection in complex templates

• Added detection of aria-valuetext attribute
• Improved support for Elementor templates and global widgets
• Enhanced compatibility with latest versions of WPML and Elementor

• Fixed issues with string registration in specific contexts
• Improved error handling and debug logging
• Minor UI improvements in settings page

• Added translation retry mechanism for failed translations
• Added force refresh button to clear all caches
• Enhanced debugging information with detailed logging
• Improved compatibility with WordPress 6.8

• Improved accessibility of the configuration page
• Enhanced semantic structure with proper ARIA landmarks
• Improved page title for better identification
• Added proper section elements with semantic headings

• Initial release with core functionality
• Support for translating aria-label, aria-description, aria-roledescription and aria-placeholder
• Multiple capture methods for comprehensive detection
• Integration with WPML String Translation
• Admin settings page for configuration
• Debug mode for troubleshooting
• Compatibility with all Elementor content types

Contributions are welcome. If you want to improve this plugin:

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

Distributed under the GPL v2 or later license. See LICENSE for more information.

Developed by Mario Germán Almonte Moreno:

• Member of IAAP (International Association of Accessibility Professionals)
• CPWA Certified (CPACC and WAS)
• Professor in the Digital Accessibility Specialization Course (University of Lleida)
• 20 years of experience in digital and educational fields

Professional services:

• Web accessibility audits according to EN 301 549 (WCAG 2.2, ATAG 2.0)
• Training and consulting in Web Accessibility and eLearning
• Advice on implementing eLearning technologies

Contact:

• LinkedIn: https://www.linkedin.com/in/marioalmonte/
• Website & Blog: https://aprendizajeenred.es

Documentación en español