awsm.in

<p><strong>AccessMate</strong> scans your WordPress site for WCAG 2.1 AA accessibility issues, scores each page, and provides guided fixes — all from your WordPress dashboard.</p>
<p><strong>Zero running cost for you.</strong> AccessMate is 100% free. AI features (code fixes, plain-English explanations) use your own API key from Anthropic, OpenAI, Google Gemini, or a local Ollama instance. Your key is stored encrypted in your database and never proxied through our servers.</p>
<h4>♿ Core features</h4>
<p>✔  <strong>Accessibility scanner</strong> — checks 12 WCAG 2.1 AA rules on every page of your site<br />
✔  <strong>Score & grade</strong> — A–F accessibility score with POUR (Perceivable, Operable, Understandable, Robust) breakdown<br />
✔  <strong>Issue detail panel</strong> — shows the offending HTML, WCAG criterion, and affected element count<br />
✔  <strong>Issues by page</strong> — stacked bar chart showing critical/warning/notice counts per page<br />
✔  <strong>Visitor accessibility toolbar</strong> — minimal floating widget with 10 user-controlled accessibility features<br />
✔  <strong>AI auto-fix</strong> <em>(requires API key)</em> — generates corrected HTML for fixable issues<br />
✔  <strong>AI explanations</strong> <em>(requires API key)</em> — plain-English summaries for non-technical site owners</p>
<h4>12 WCAG rules checked</h4>
<ol>
<li>Images missing alt text (WCAG 1.1.1)</li>
<li>Colour contrast heuristic (WCAG 1.4.3)</li>
<li>Data tables missing headers (WCAG 1.3.1)</li>
<li>Missing landmark elements (WCAG 1.3.6)</li>
<li>Interactive elements not keyboard accessible (WCAG 2.1.1)</li>
<li>CSS animations without reduced-motion guard (WCAG 2.3.3)</li>
<li>Links with non-descriptive text (WCAG 2.4.4)</li>
<li>Skipped or empty heading levels (WCAG 2.4.6)</li>
<li>Focus indicator removed via CSS (WCAG 2.4.7)</li>
<li>HTML lang attribute missing (WCAG 3.1.1)</li>
<li>Form inputs missing label association (WCAG 4.1.2)</li>
<li>Invalid ARIA role attributes (WCAG 4.1.2)</li>
</ol>
<h4>Visitor accessibility widget features</h4>
<p>✔ Font size<br />
✔ High contrast<br />
✔ Dyslexia font<br />
✔ Grayscale<br />
✔ Reading guide<br />
✔ Pause animations<br />
✔ Line height<br />
✔ Large cursor<br />
✔ Highlight links<br />
✔ Screen mask</p>
<h4>AI providers supported</h4>
<ul>
<li><strong>Anthropic Claude</strong> (claude-haiku-4-5, claude-sonnet-4)</li>
<li><strong>OpenAI</strong> (gpt-4o-mini, gpt-4o)</li>
<li><strong>Google Gemini</strong> (gemini-1.5-flash, gemini-1.5-pro)</li>
<li><strong>Ollama</strong> (local, no key needed — llama3.2, mistral, phi3)</li>
</ul>
<h4>Privacy</h4>
<p>AccessMate makes no external requests unless you configure an AI provider and trigger an AI action. When an AI action is triggered, your WordPress server makes a direct request to your chosen provider using your key. No data passes through AccessMate servers. The API key is encrypted at rest using AES-256-CBC with your WordPress auth salt.</p>
<h3>Third Party Libraries</h3>
<ul>
<li><a href="https://github.com/dequelabs/axe-core" rel="nofollow ugc">axe-core</a> by Deque Systems — Mozilla Public License 2.0 (MPL-2.0)</li>
<li><a href="https://fontsource.org/fonts/opendyslexic" rel="nofollow ugc">OpenDyslexic font via Fontsource</a> — Bitstream Vera Fonts License — loaded on demand from jsDelivr CDN only when the dyslexia font feature is enabled by the visitor</li>
</ul>
<h3>External Services</h3>
<p>This plugin can connect to the following external services. No external requests are made unless you explicitly configure and trigger the relevant feature.</p>
<h4>AI providers (optional)</h4>
<p>When you add an API key and click an AI action (auto-fix suggestion, alt-text generation, or accessibility report summary), your WordPress server sends a direct HTTPS request to your chosen AI provider. The request contains the page HTML snippet and accessibility issue context being analysed. No data passes through AccessMate servers. These requests are only sent when you have entered an API key in Settings and manually trigger an AI action.</p>
<p><strong>Anthropic</strong> — <code>https://api.anthropic.com/</code><br />
Used for: AI fix suggestions, alt-text generation, accessibility report summaries.<br />
Data sent: page HTML snippet, accessibility issue context, and your Anthropic API key (in the request header).<br />
<a href="https://www.anthropic.com/legal/consumer-terms" rel="nofollow ugc">Terms of Service</a> | <a href="https://www.anthropic.com/legal/privacy" rel="nofollow ugc">Privacy Policy</a></p>
<p><strong>OpenAI</strong> — <code>https://api.openai.com/</code><br />
Used for: AI fix suggestions, alt-text generation, accessibility report summaries.<br />
Data sent: page HTML snippet, accessibility issue context, and your OpenAI API key (in the request header).<br />
<a href="https://openai.com/policies/terms-of-use" rel="nofollow ugc">Terms of Service</a> | <a href="https://openai.com/policies/privacy-policy" rel="nofollow ugc">Privacy Policy</a></p>
<p><strong>Google Gemini</strong> — <code>https://generativelanguage.googleapis.com/</code><br />
Used for: AI fix suggestions, alt-text generation, accessibility report summaries.<br />
Data sent: page HTML snippet, accessibility issue context, and your Gemini API key (as a URL parameter).<br />
<a href="https://ai.google.dev/gemini-api/terms" rel="nofollow ugc">Terms of Service</a> | <a href="https://policies.google.com/privacy" rel="nofollow ugc">Privacy Policy</a></p>
<p><strong>Ollama</strong> — <code>http://localhost:11434/</code> (local only)<br />
Ollama runs entirely on the user’s own machine or local network. No data is sent to any external server.</p>
<h4>jsDelivr CDN (visitor-facing, on demand)</h4>
<p>When a site visitor enables the <strong>Dyslexia Font</strong> feature in the accessibility toolbar, their browser loads the OpenDyslexic font stylesheet from jsDelivr. This is a standard browser-initiated HTTP request that includes the visitor’s IP address and User-Agent string. The font is cached locally after the first load; no further requests are made on subsequent pages. This request is triggered only by the visitor explicitly toggling the dyslexia font feature — it is never loaded automatically.</p>
<p><strong>jsDelivr</strong> — <code>https://cdn.jsdelivr.net/</code><br />
<a href="https://www.jsdelivr.com/privacy-policy-jsdelivr-net" rel="nofollow ugc">Privacy Policy</a></p>


AccessMate – AI Accessibility Scanner & Widget

AI-powered WCAG 2.1 AA accessibility scanner with auto-fix suggestions and a visitor-facing accessibility toolbar. Free — bring your own AI key.

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.

AccessMate – AI Accessibility Scanner & Widget vs AccessiTrans – ARIA Translator for WPML & Elementor