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.

quicksnail

WCAG for WP

<p>The <strong>Web Accessibility Toolkit</strong> helps your WordPress site meet <strong>ADA compliance</strong> and <strong>WCAG compliance</strong> standards with powerful accessibility checking and fixing tools.</p>
<p>This plugin is not an ‘overlay’ or a ‘widget’ – it provides real code fixes to assist with WCAG & ADA compliance for WordPress.</p>
<p>Scan your site with the built-in Accessibility Checker to identify issues such as missing <strong>ARIA labels</strong>, <strong>low contrast text</strong>, missing <strong>alt tags</strong>, incorrect heading structure & plenty more.</p>
<p>Apply one-click fixes for many common accessibility issues to improve usability and help meet requirements for laws and standards like WCAG, ADA, EAA, Section 508, EN 301 549, and AODA.</p>
<p><a href="https://wcagforwp.com/docs/" rel="nofollow ugc">Documentation</a> | <a href="https://wcagforwp.com/accessibility-checker-demo/" rel="nofollow ugc">Accessibility Checker Demo</a> | <a href="https://wcagforwp.com/downloads/pro-plugin/" rel="nofollow ugc">PRO Plugin</a></p>
<h3>Accessibility Checker</h3>
<p>The built-in Accessibility Checker scans your WordPress site in real time to identify common accessibility issues that could affect WCAG compliance and ADA compliance. With a single click, you can run an accessibility check on any page and get clear, actionable details.</p>
<p>The checker highlights issues directly on the page, including:</p>
<ul>
<li>Missing or empty ARIA labels</li>
<li>Low color contrast between text and background</li>
<li>Missing alt text on images</li>
<li>Skipped heading levels (e.g., jumping from H2 to H4)</li>
<li>Broken ARIA references</li>
<li>Interactive elements without keyboard focus</li>
<li>Improper tab order</li>
<li>Missing page titles</li>
<li>Duplicate link text with different destinations</li>
<li>Duplicate IDs in the DOM</li>
<li>Form fields without labels or ARIA labels</li>
<li>Use of user-scalable=no in viewport meta tags</li>
<li>Non-focusable interactive elements</li>
</ul>
<p>Each issue includes details on what it means, why it matters for accessibility and how to fix it. Many problems can be resolved instantly using the plugin’s one-click fixes, while others provide guidance so you can address them in your theme or content.</p>
<h3>Accessibility Fixes for WCAG & ADA Compliance</h3>
<ul>
<li>
<h4>ARIA Attributes</h4>
<p>Add ARIA attributes such as <code>aria-label</code>, <code>aria-hidden</code>, <code>aria-expanded</code>, <code>aria-live</code>, <code>aria-level</code>, and more to any element.</p>
</li>
<li>
<h4>ARIA Roles</h4>
<p>Assign semantic roles like <code>banner</code>, <code>navigation</code>, <code>main</code>, <code>complementary</code>, and <code>contentinfo</code> to improve screen reader navigation.</p>
</li>
<li>
<h4>Image Alt Tags</h4>
<p>Shows a list of all images that are missing alt tags, and allows you to easily update them all from the one spot.</p>
</li>
<li>
<h4>Contrast Adjustments</h4>
<p>Override text and background colors for low-contrast elements using accessible HEX values.</p>
</li>
<li>
<h4>Skip Link Target</h4>
<p>Add a keyboard/screen-reader-visible “Skip to content” link by defining a main content selector.</p>
</li>
<li>
<h4>Language Override</h4>
<p>Set or override the HTML <code>lang</code> attribute for improved screen reader compatibility.</p>
</li>
<li>
<h4>Focus Outline Enhancements</h4>
<p>Ensure visible focus styles are enforced for better keyboard navigation.</p>
</li>
<li>
<h4>Fix Tab Order</h4>
<p>Remove tabindex values greater than 0 to maintain a logical focus order.</p>
</li>
<li>
<h4>Make Viewport Scalable</h4>
<p>Remove user-scalable=no from the viewport meta tag to allow pinch-zooming.</p>
</li>
<li>
<h4>CSS Selector-Based Targeting</h4>
<p>Use any valid CSS selector to apply changes without modifying theme or template files.</p>
</li>
</ul>
<h3>Why Use Web Accessibility Toolkit?</h3>
<p>Most WordPress themes don’t include full accessibility support. Web Accessibility Toolkit lets you patch those gaps quickly, keeping your site more inclusive and compliant with ADA & WCAG guidelines.</p>
<p>Whether you’re a developer working on a client site or a business owner aiming for better usability, this plugin makes accessibility updates faster and easier.</p>
<p>The Web Accessibility Toolkit is NOT an overlay widget, which can often do more harm than good for accessibility. This plugin fixes underlying code issues.</p>
<h3>Compatibility</h3>
<ul>
<li>Compatible with all WordPress themes  </li>
<li>Compatible with all WordPress plugins  </li>
<li>Works alongside popular page builders  </li>
<li>Designed with WCAG 2.1 AA standards and ADA compliance in mind</li>
</ul>


Web Accessibility Toolkit – ARIA Labels & Roles for WCAG & ADA Compliance

Add ARIA labels, roles, alt tags, contrast & form accessibility fixes. Accessibility checker scans your site for WCAG & ADA compliance & fixes issues.

AccessiTrans – ARIA Translator for WPML & Elementor vs Web Accessibility Toolkit – ARIA Labels & Roles for WCAG & ADA Compliance