Hamid Aminirad

A11yBridge adds a visitor-friendly accessibility toolbar to your WordPress site. Visitors can adjust the visual appearance and navigation of your content with one click.
Video demo: 
https://www.youtube.com/watch?v=DEINE_VIDEO_ID
Core features (no external backend, works offline): 
* Font size controls 
* Contrast adjustments 
* Focus mode (reduce distractions / highlight content area) 
* Color-blindness filters / color adjustments 
* Keyboard navigation support 
* Text-to-speech (TTS)
Optional AI feature: 
* AI-powered text simplification (multiple levels and languages)
Important note: 
This plugin can improve usability and accessibility, but it cannot guarantee full compliance with WCAG or any specific legal requirement. Always test your site with real assistive technologies and accessibility audits.
<h3>AI features (optional)</h3>
AI text simplification is processed on A11yBridge servers in Germany. Backend features are disabled by default and are only used after the site owner enables them (or activates a license). Any usage limits are enforced by the external service and depend on the service subscription associated with the installation. 
All non-AI accessibility tools (toolbar, contrast, focus mode, keyboard support, text-to-speech) work without any AI connection.
The plugin itself does not lock or restrict built-in/local functionality based on a license key, trial period, or local usage counters. 
If the service quota is exceeded, the service returns an error response and the plugin displays a notice.
<h3>External Services / Data Transmission</h3>
This plugin can optionally connect to A11yBridge backend services to provide AI text simplification and related service operations (e.g., quota management, license activation, abuse prevention). For WP.org compliance, it does NOT contact external servers by default. External requests happen only after explicit admin opt-in (backend enabled / AI feature enabled) or after the admin activates a license key.
Service endpoint(s):
<ul>
<li>https://a11ybridge.de/wp-json/a11ybridge/v1
<ul>
<li>/license/status (read current license/installation status)</li>
<li>/license/activate (activate/bind license to this site)</li>
<li>/license/domains/delete (remove domain binding from license)</li>
<li>/free/status (free-tier quota status, only after admin opt-in)</li>
<li>/chat/simplify (AI text simplification, only when triggered by the user)</li>
</ul>
</li>
</ul>
What data may be transmitted (depending on enabled features):
Local storage / Cookies on the site where the plugin is installed:
To remember accessibility preferences for visitors, A11yBridge stores settings in the visitor’s browser storage and (for guests) may also store a pseudonymous guest identifier.
Browser storage (localStorage) keys used by the frontend may include: 
* a11ybridge_plugin_settings (visitor accessibility preferences) 
* A11YBRIDGE_USER_LOCAL_V1 (visitor feature flags/preferences) 
* a11ybridge_colorMode (display mode) 
* a11ybridge:consent:text_simplify: (stores the visitor’s consent decision for AI text simplification prompts)
Cookie (functional): 
* a11ybridge_guest_id (random pseudonymous ID for guest settings; used to associate guest preferences stored on the same WordPress installation; expires after 30 days; SameSite=Lax; Secure on HTTPS)
This storage is used only to provide the requested accessibility features and is not used for advertising or cross-site tracking. Site owners should document this storage in their privacy/cookie documentation as required by applicable law.
<ul>
<li>Selected text submitted by the user for AI text simplification (only when the user triggers simplification)</li>
<li>Pseudonymous installation ID</li>
<li>Domain/host (only after admin opt-in or license activation)</li>
<li>License key hash (pseudonymous, if a license is used)</li>
<li>Service-side usage/quota accounting</li>
<li>Request metadata (no IP forwarding; IP may be processed in server/security logs depending on configuration)</li>
</ul>
Purposes:
<ul>
<li>Provide AI text simplification on request</li>
<li>Service-side quota enforcement and account/service management</li>
<li>Abuse prevention, security and troubleshooting</li>
</ul>
Infrastructure / Hosting:
<ul>
<li>Backend services are hosted on a Hetzner server located in Nuremberg, Germany.</li>
<li>Subscription payments (if used) are handled by Paddle (Merchant of Record). No payment card data is handled by this plugin.</li>
</ul>
Privacy & Terms:
Privacy Policy: https://a11ybridge.de/datenschutzerklaerung/ 
Terms of Use: https://a11ybridge.de/allgemeine-geschaftsbedingungen-agbagb/
User guidance:
<ul>
<li>Disable AI features in Settings to avoid any text being transmitted to external servers.</li>
<li>Avoid submitting sensitive or personal data for AI processing.</li>
<li>A11yBridge does not sell user data and does not use transmitted content for advertising or cross-site tracking.</li>
</ul>
<h3>Support</h3>
For support and security reports: 
Email: support@a11ybridge.de 
Website: https://a11ybridge.de/

A11yBridge – Accessibility Toolkit (AI optional)

Accessibility toolbar for WCAG: contrast, focus mode, keyboard nav, TTS, plus optional AI text simplification and alt-text generation.

Weston Ruter

Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice.
<ul>
<li>Uses local text-to-speech engine in user’s browser. Directly interfaces with the <code>speechSynthesis</code> browser API. Zero external requests or dependencies.</li>
<li>Words are selected/highlighted as they are being spoken to allow you to read along.</li>
<li>Skips speaking elements that should not be read, including footnote superscripts (the <code>sup</code> element).</li>
<li>Pauses of different length added are between headings versus paragraphs.</li>
<li>Controls remain in view during playback, with each the current text being spoken persistently being scrolled into view. (Requires browser support for <code>position:sticky</code>.)</li>
<li>Back/forward controls allow you to skip to the next paragraph; when not speaking, the next paragraph to read will be selected entirely.</li>
<li>Select text to read from that point; click on text during speech to immediately change position.</li>
<li>Multi-lingual support, allowing embedded text with <code>[lang]</code> attribute to be spoken by the appropriate voice (assuming the user has it installed).</li>
<li>Settings for changing the default voice (for each language), along with settings for the rate of speech and its pitch. (Not supported by all engines.) Changes can be made while speaking.</li>
<li>Hit escape to pause during playback.</li>
<li>Voice preferences are persistently stored in <code>localStorage</code>, with changes synced across windows (of a given site).</li>
<li>Ability to use JS in standalone manner (such as in bookmarklet).</li>
<li>Known to work in the latest desktop versions of Chrome, Firefox, and Safari. (Tested on OSX.) It does not work reliably in mobile/touch browsers on Android or iOS, apparently due both to the (still experimental) <code>speechSynthesis</code> API not being implemented well enough on those systems and/or programmatic range selection does not work the same way as on desktop. For these reasons, the functionality is disabled by default on mobile operating systems.</li>
</ul>
<a href="https://westonruter.github.io/spoken-word/test/example.html" rel="nofollow ugc">Try it out</a> on standalone example with some test content.
<h4>Theme Config</h4>
The settings for Spoken Word are presented in an HTML5 <code>dialog</code> element. For browsers that do not yet support this feature, the plugin bundles the <a href="https://github.com/GoogleChrome/dialog-polyfill" rel="nofollow ugc">dialog-polyfill</a>. The polyfill is only included if it is detected the browser does not support <code>dialog</code> natively. The inclusion of the polyfill can be disabled by adding the following to your theme or plugin:
<pre>
add_filter( 'spoken_word_include_dialog_polyfill', '__return_false' );
</pre>
For themes that have a sticky header (such as the nav menu in Twenty Seventeen) you may need to add some additional CSS to ensure that the sticky-positioned playback controls do not get hidden behind the sticky header. For example in Twenty Seventeen, you can add the following to the Custom CSS in the Customizer:
<pre>
@media screen and (min-width: 782px) {
 body:not(.admin-bar) .spoken-word--active {
 top: calc( 0.5em + 70px );
 }
 body.admin-bar .spoken-word--active {
 top: calc( 0.5em + 32px + 70px );
 }
}
</pre>
<h4>Internals</h4>
A bookmarklet can be used to load the Spoken Word functionality into any site, even non-WordPress sites where the plugin is not installed. The key is to use the appropriate <code>contentSelector</code>:
<pre>
( () => {
 const link = document.createElement( 'link' );
 link.rel = 'stylesheet';
 link.href = 'https://unpkg.com/spoken-word/css/style.css';
 document.head.appendChild( link );

 const script = document.createElement( 'script' );
 script.src = 'https://unpkg.com/spoken-word/dist/spoken-word.js';
 script.addEventListener( 'load', () => {
 spokenWord.initialize( {
 contentSelector: [ /* 👈 Amend as desired. */
 '.hentry',
 '.entry-content',
 '.h-entry',
 '.e-content',
 '[itemprop="articleBody"]',
 ].join( ', ' )
 } );
 } );
 document.head.appendChild( script );
} )();
</pre>
The <code>spokenWord.initialize()</code> function takes an object as its argument which can have the following properties:
<pre>
 * @param {string} contentSelector - CSS Selector to find the elements for speaking.
 * @param {Element} rootElement - Root element within which to look for content.
 * @param {Object} chunkifyOptions - Options passed into chunkify.
 * @param {boolean} useDashicons - Whether to use Dashicons.
 * @param {Object} defaultUtteranceOptions - Default utterance options when none are supplied from localStorage.
</pre>
The dialog and the controls are rendered using <a href="https://preactjs.com/" rel="nofollow ugc">Preact</a>. For a list of all the modules used by this plugin, see the <a href="https://github.com/westonruter/spoken-word/blob/master/package.json" rel="nofollow ugc">package.json</a>.
This plugin is <a href="https://github.com/westonruter/spoken-word" rel="nofollow ugc">developed on GitHub</a> where the source can be viewed. Please <a href="https://github.com/westonruter/spoken-word/issues" rel="nofollow ugc">report issues</a> there. Pull requests welcome. The <code>spoken-word</code> package is also <a href="https://www.npmjs.com/package/spoken-word" rel="nofollow ugc">published on npm</a>.

Spoken Word

Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice.

A11yBridge – Accessibility Toolkit (AI optional) vs Spoken Word