marioalmonte

<p>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.</p>
<h4>Key Features</h4>
<ul>
<li>Automatically detects and makes ARIA attributes available for translation</li>
<li>Fully integrated with WPML String Translation</li>
<li>Compatible with all Elementor elements and templates</li>
<li>Multiple capture methods to ensure comprehensive detection</li>
<li>Translation retry mechanism for failed translations</li>
<li>Force refresh function to clear all caches</li>
<li>Debug mode for troubleshooting</li>
<li>Performance optimization settings</li>
<li>Translation cache system for improved performance</li>
<li>Internationalization support</li>
</ul>
<h4>Compatible ARIA attributes</h4>
<p>The plugin allows you to translate the following attributes:</p>
<ul>
<li><code>aria-label</code>: To provide an accessible name for an element</li>
<li><code>aria-description</code>: To provide an accessible description</li>
<li><code>aria-roledescription</code>: To customize the role description of an element</li>
<li><code>aria-placeholder</code>: For placeholder text in input fields</li>
<li><code>aria-valuetext</code>: To provide textual representation of numeric values</li>
</ul>
<h4>Capture Methods</h4>
<p>The plugin offers several capture methods to ensure that all ARIA attributes are detected:</p>
<ol>
<li><strong>Full HTML Capture</strong>: Captures all HTML of the page (highly effective but may affect performance)</li>
<li><strong>Elementor Content Filter</strong>: Processes content generated by Elementor</li>
<li><strong>Elementor Template Processing</strong>: Processes Elementor template data</li>
<li><strong>Individual Element Processing</strong>: Processes each Elementor widget individually</li>
</ol>
<h4>Advanced Settings</h4>
<ul>
<li><strong>Retry Failed Translations</strong>: Automatically retries translations that failed on first attempt</li>
<li><strong>Debug Mode</strong>: Enables detailed event logging</li>
<li><strong>Admin-Only Capture</strong>: Limits resource-intensive capture methods to admin users</li>
<li><strong>Capture in Primary Language Only</strong>: Only captures strings when browsing in the default language</li>
</ul>
<h4>Compatibility</h4>
<p>Works with all types of Elementor content:</p>
<ul>
<li>Regular pages</li>
<li>Templates</li>
<li>Global sections</li>
<li>Headers and footers</li>
<li>Popups and other dynamic elements</li>
</ul>
<p><strong>Tested with:</strong><br />
* WordPress 6.8<br />
* Elementor 3.28.4<br />
* WPML Multilingual CMS 4.7.4<br />
* WPML String Translation 3.3.3</p>
<h4>Why this plugin matters for accessibility</h4>
<p>In multilingual websites, accessibility information should be available in all languages. ARIA attributes provide essential accessibility information that helps assistive technologies understand and navigate your website. By making these attributes translatable, you ensure that all users, regardless of language or ability, can access your content effectively.</p>
<h3>Usage Instructions</h3>
<h4>How to add ARIA attributes in Elementor</h4>
<ol>
<li>Edit any element in Elementor</li>
<li>Go to the “Advanced” tab</li>
<li>Find the “Custom Attributes” section</li>
<li>Add the ARIA attributes you want to translate</li>
</ol>
<h4>Compatible formats</h4>
<p>Elementor indicates: “Set custom attributes for the wrapper element. Each attribute in a separate line. Separate attribute key from the value using <code>|</code> character.”</p>
<p>You can add ARIA attributes in two ways:</p>
<p><strong>Basic format (one attribute per line):</strong><br />
    <code>aria-label|Text to translate</code></p>
<p><strong>Multiline format (multiple attributes):</strong><br />
    <code>aria-label|Text to translate<br />
aria-description|Another description</code></p>
<p>This will generate the corresponding HTML attributes in the frontend:<br />
    aria-label=”Text to translate” aria-description=”Another description”</p>
<h4>How to translate the attributes</h4>
<ol>
<li>Once you’ve added the attributes, save the page or template</li>
<li>Go to WPML <span aria-hidden="true" class="wp-exclude-emoji">→</span> String Translation</li>
<li>Filter by the “AccessiTrans ARIA Attributes” context</li>
<li>Translate the strings as you would with any other text in WPML</li>
</ol>
<h4>Best practices for optimal performance</h4>
<p>For the best experience and website performance, follow these recommendations:</p>
<ol>
<li>
<p><strong>Browse your site in the primary language only</strong> while generating strings for translation. This prevents registering duplicate strings.</p>
</li>
<li>
<p><strong>Use the Force Refresh function</strong> when translations aren’t appearing as expected.</p>
</li>
<li>
<p><strong>Disable capture methods after initial setup</strong>:</p>
<ul>
<li>Once you’ve captured all ARIA attributes for translation, we recommend disabling all capture methods</li>
<li>This improves site performance and prevents additional strings from being registered in WPML</li>
<li>Re-enable the capture methods temporarily when you make changes to your site that include new ARIA attributes</li>
</ul>
</li>
</ol>
<h4>Practical examples</h4>
<p><strong>For a menu button:</strong><br />
* Attribute: <code>aria-label|Open menu</code></p>
<p><strong>For a phone link:</strong><br />
* Attribute: <code>aria-label|Call customer service phone</code></p>
<p><strong>For an icon without text:</strong><br />
* Attribute: <code>aria-label|Send an email</code></p>
<p><strong>For a slider:</strong><br />
* Attribute: <code>aria-label|Image gallery</code><br />
* Attribute: <code>aria-description|Navigate through product images</code></p>
<h3>Author</h3>
<p>Developed by Mario Germán Almonte Moreno:</p>
<ul>
<li>Member of IAAP (International Association of Accessibility Professionals)</li>
<li>CPWA Certified (CPACC and WAS)</li>
<li>Professor in the Digital Accessibility Specialization Course (University of Lleida)</li>
<li>20 years of experience in digital and educational fields</li>
</ul>


AccessiTrans – ARIA Translator for WPML & Elementor

Translate ARIA attributes in Elementor using WPML, improving the accessibility of your multilingual website.

LewisCowles

daronspence

<p>This short, handy plugin will add playback buttons to your audio, video & playlist elements added via the built-in WordPress shortcodes for media using mediaelement.js.</p>
<p>Each set of buttons is configured for it’s corresponding element on the page, so you can adjust the speed of multiple files independently.</p>
<p>There is currently no persistence implemented in this plugin. It just scratches an itch to be able to broadly adjust media playback speeds using the HTML api.</p>
<p>NOTE: This uses the HTML5 media Element API. Any browser not supporting these or using the Flash Player fallback will miss out on this functionality.</p>
<h4>Developers</h4>
<p>Two hooks are provided within this plugin.</p>
<ul>
<li>
<p><code>media-playback-speed-generate-controls</code> provides a single argument which is a boolean. If you return this as false, this will stop buttons being added to a media player. This is intended for advanced setups where markup for controls might be placed manually elsewhere on the page such as a sticky footer. So long as controls follow the built-in markup (being within the body tag and have a playback-rate-button class (no default styling, used for enabling DOM access only).</p>
</li>
<li>
<p>‘media-playback-speed-data’ provides the default array containing arrays as items with <code>rate</code>, <code>title</code> and <code>label</code> entries, which set the playback rate, the title and aria-title for the buttons as well as adjust the button text.</p>
</li>
</ul>
<h4>Theme & Front-end</h4>
<p>The <code>.playback-rate-button.mejs-active</code> and/or <code>.playback-rate-button.active-playback-rate</code> CSS-selectors allow you to style the active speed (per-player).</p>
<p>Initially mejs-active class was added in order to create media-playback-js compatible / familiar class names.</p>
<p>Now that Gutenberg does not add these, it makes sense to for-now add two sets of classes.</p>
<p>The <code>.playback-rate-button.mejs-active</code> selector will be deprecated in version 2.</p>
<h4>Troubleshooting</h4>
<p>This works with the traditional <code>audio</code>, <code>video</code> and <code>playlist</code> shortcodes so long as WordPress uses the JavaScript player.</p>
<p>With the latest 1.1.1 release this also works for HTML5 audio and video too, however you will need to implement your own controls which have the <code>playback-rate-button</code> class and follow the patterns of this.</p>
<p>HTML5 raw controls do not have a playlist the author is aware of, and they use global state, so playback rate is per-page.</p>
<p>There is currently no history as part of this plugin, however a sister plugin could be authored and hooks added to it to store playback rate.</p>
<p>Please ensure that you have no broken javascript, or wrap all functions in <code>(function() { // do things })()</code> blocks to ensure nothing interferes with this plugin. This plugin does this so that it should not interfere with your site, even in browsers and pages which do not support this plugin.</p>
<h4>Feedback</h4>
<p>Please feel free to <a href="https://github.com/CODESIGN2/media-playback-speed/issues" rel="nofollow ugc">suggest</a> improvements, report conflicts, and/or make suggestions for integration hooks etc.</p>


Media Playback Speed

Add speed controls to audio and video hosted from your WordPress blog.

AccessiTrans – ARIA Translator for WPML & Elementor vs Media Playback Speed