seamonsterdeneb

A spinnaker is a special type of sail that is flown in front of the main sails. It’s packed away when not in use, but when the wind is right, it can be unfurled to provide a powerful boost. This plugin is named Spinnaker because it allows you to keep your images and PDFs neatly tucked away, ready to be “unfurled” into a beautiful, accessible lightbox when your users need them.
Spinnaker is a lightweight, modern, and highly accessible plugin that turns any image or PDF link into a fully-featured dialog lightbox. It’s built with accessibility as a priority, ensuring a seamless experience for users with keyboards and screen readers.
Image Lightbox Features:
<ul>
<li>Converts any <code><img></code> tag into a clickable lightbox trigger.</li>
<li>Displays a large, scrollable version of your image that fills the viewport without forcing double-scrollbars.</li>
<li>Adds scroll-arrow buttons for easy navigation of oversized images.</li>
<li>Supports custom initial image positioning (e.g., center, top, bottom, left, right).</li>
<li>Displays image credits as a “placard,” with support for links.</li>
<li>Provides a “Download” button for the full-size image.</li>
<li>Fully localizable UI text in Spanish, Russian, Vietnamese, Simplified Chinese, Arabic, Korean, and Somali.</li>
</ul>
PDF Lightbox Features:
<ul>
<li>Converts any <code><a></code> tag pointing to a PDF into a lightbox trigger.</li>
<li>Displays the PDF in an embedded viewer right on your site.</li>
<li>Includes a “Download” button.</li>
<li>Supports page builder modules (like DIVI) where you can only add a class to the container.</li>
<li>Tracks PDF views and downloads, with stats available in the WordPress admin.</li>
<li>Fully localizable UI text in Spanish, Russian, Vietnamese, Simplified Chinese, Arabic, Korean, and Somali.</li>
</ul>
<h3>Usage</h3>
<h3>Image Lightbox</h3>
To make an image open in a lightbox, add the class <code>image-lightbox-trigger</code> to the <code><img></code> tag itself.
For Gutenberg Block Editor: 
Gutenberg wraps images in a <code><figure></code> element. Add the class <code>image-lightbox-trigger-container</code> to the figure wrapper: Select the image block, open the “Advanced” panel in the block settings, and add <code>image-lightbox-trigger-container</code> to the “Additional CSS class(es)” field. For screen reader descriptions, you can use the image’s “Title” field (available in the image block settings). For advanced features like credits and positioning, switch to HTML editing mode.
For Page Builders (like DIVI): 
If you can only add a class to the container/module holding the image, add the class <code>image-lightbox-trigger-container</code> to the container. The plugin will find the first image inside it and turn it into a lightbox.
Optional Attributes (add to the <code><img></code> tag):
<ul>
<li><code>data-description="…"</code>: A longer description for screen readers. Note: Users of Gutenberg and other page builders that don’t allow custom attributes to be added can use the image’s “Title” field. The plugin will automatically use the title text for the screen reader description and remove the title attribute from the image to prevent duplicate announcements.</li>
<li><code>data-credit="…"</code>: The text for the credit placard. Requires HTML editing mode in Gutenberg.</li>
<li><code>data-credit-link="…"</code>: A URL to make the entire credit placard a link. Requires HTML editing mode in Gutenberg.</li>
<li><code>data-position="…"</code>: Set the initial scroll position. Options: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, or <code>center</code> (default). Requires HTML editing mode in Gutenberg.</li>
</ul>
Localization: 
To translate the UI text, add a language-specific class like <code>-es</code> (for Spanish) to the trigger class (e.g., <code>image-lightbox-trigger-es</code>).
<ul>
<li>Supported languages: Spanish (<code>-es</code>), Russian (<code>-ru</code>), Vietnamese (<code>-vi</code>), Simplified Chinese (<code>-zh</code>), Arabic (<code>-ar</code>), Korean (<code>-ko</code>), and Somali (<code>-so</code>).</li>
</ul>
Example HTML:
<pre><code><img class="image-lightbox-trigger-es" src="…" alt="…" 
 data-description="Una descripción detallada de la imagen." 
 data-credit="Foto por Jane Doe" 
 data-credit-link="[https://example.com](https://example.com)"
 data-position="right">
</code></pre>
<h3>PDF Lightbox</h3>
To make a link to a PDF open in a lightbox, add the class <code>pdf-lightbox-trigger</code> to the <code><a></code> tag itself.
For Page Builders (like DIVI): 
If you can only add a class to the container/module holding the link, add the class <code>pdf-lightbox-trigger-container</code> to the container. The plugin will find the correct PDF link inside it.
Localization: 
To translate the UI text, add a language-specific class like <code>-es</code> (for Spanish) to the trigger class (e.g., <code>pdf-lightbox-trigger-es</code>).
<ul>
<li>Supported languages: Spanish (<code>-es</code>), Russian (<code>-ru</code>), Vietnamese (<code>-vi</code>), Simplified Chinese (<code>-zh</code>), Arabic (<code>-ar</code>), Korean (<code>-ko</code>), and Somali (<code>-so</code>).</li>
</ul>
Example HTML:
<pre><code><a href="/path/to/file.pdf" class="pdf-lightbox-trigger-es">Directorio</a>
</code></pre>

Spinnaker Dialog Lightboxes

Accessible lightboxes for images and PDFs using the HTML dialog element. Add classes to create instant lightboxes!

cartcoders

Cart Coders

Get started with Accessibility Assistant at no cost. 
The free plan includes essential accessibility features, simple widget control, supports 100+ languages and standard email support — perfect for instantly enhancing your website’s accessibility.
Ensure ADA, WCAG, and EAA compliance with Accessibility Assistant. Improve accessibility with features like Accessibility Profiles, keyboard navigation, text-to-speech, contrast settings, and font scaling. The fully customizable widget supports multiple languages to match your store’s branding for EAA, ADA, WCAG and AODA. Create an inclusive experience, reduce legal risks, and comply with global accessibility standards, no coding needed. You can just simply add the widget and it will be done.
1. Ease of Access for Visually Impaired Users 
Accessibility Assistant enhances the browsing experience for users with varying levels of visual impairment by allowing them to adjust contrast, text size, cursor visibility, and reading modes — supporting greater independence and digital inclusion.
2. Ease of Access for Elderly Users 
The plugin helps older adults overcome age-related vision or motor limitations by offering easy-to-use tools such as font resizing, high-contrast modes, large cursor, and keyboard navigation — making websites more readable and easier to interact with.
3. Ease of Access for Mobility-Impaired Users 
For users who experience difficulty using a mouse or trackpad, Accessibility Assistant provides full keyboard navigation and interaction support, allowing them to browse, fill forms, and navigate menus without relying on a pointing device.
4. Ease of Access for Users with Temporary or Situational Disabilities 
Whether due to temporary conditions like eye fatigue, injury, or environmental limitations, users can benefit from on-demand accessibility adjustments such as text-to-speech, spacing controls, and navigation enhancements — all without needing system-level changes.
5. Ease of Access for Blind and Screen Reader Users 
Accessibility Assistant offers assistive tools like text-to-speech, image alt text tooltips, and improved keyboard focus support, helping blind or severely visually impaired users better access, navigate, and interact with digital content independently.
6. Ease of Access for Users with Cognitive or Learning Disabilities 
Accessibility Assistant supports users with conditions such as dyslexia, ADHD, and other cognitive challenges by offering features like dyslexia-friendly fonts, reading masks, line-by-line reading guides, and simplified visual modes — helping them stay focused, reduce cognitive overload, and better comprehend website content.
Key Features – Designed for ADA, WCAG, EAA and AODA Accessibility Compliance
Accessibility Assistant for WordPress 
offers a full suite of accessibility tools that empower users to personalize their browsing experience while helping site owners move toward compliance with global accessibility laws and guidelines.
Multi-language Support (100+ languages) 
Ensures accessibility across global audiences by auto-detecting or manually setting the widget language, including support for EAA regions.
Text-to-Speech (TTS) 
Allows users with visual impairments or reading challenges to listen to on-page content, enhancing compliance with WCAG and ADA standards.
Font Resizing and Content Spacing Controls 
Helps users with low vision or cognitive needs adjust font size, line height, letter spacing, and word spacing for optimal readability.
Color Contrast and Brightness Adjustment 
Provides high-contrast modes and brightness controls to meet WCAG 2.1 minimum contrast ratios, supporting users with visual impairments.
Dark Mode, Light Mode, Grayscale, and High-Contrast Modes 
Enables quick visual theme toggles for users sensitive to light or color, aiding compliance with visual accessibility requirements under ADA and EAA.
Keyboard Navigation and Focus Indicators 
Enhances accessibility for users who rely on keyboard-only navigation, helping meet AODA and WCAG 2.1 guidelines.
Skip to Content and Quick Navigation Tools 
Improves user experience for screen reader and keyboard users by offering direct access to main content areas without unnecessary tabbing.
Link and Heading Highlights 
Visually highlights links and headings to assist users with cognitive disabilities or vision difficulties in navigating structured content.
Image ALT Tooltip Display 
Displays existing ALT text on image hover, helping users understand visual content and supporting WCAG-compliant media handling.
Pause Animations and Stop Motion Effects 
Allows users to disable motion-based content to avoid distractions or seizures, in accordance with WCAG success criteria for animations.
Reading Mask and Reading Guide 
Helps focus attention by highlighting one line or area at a time, improving accessibility for users with dyslexia or attention deficits.
Large Cursor Mode 
Provides an enlarged mouse pointer for better visibility and control, assisting users with vision or motor challenges.
Content Scaling and Layout Adjustment 
Offers global scaling of on-page content elements to make text, buttons, and layouts more accessible without zooming the browser.
Dyslexia-Friendly Fonts 
Replaces fonts with clean, readable alternatives to reduce letter confusion and improve comprehension for users with dyslexia.
Color-Blind Mode Profiles 
Enables preset profiles for common types of color blindness (e.g., red-green, blue-yellow), improving visual accessibility in EAA and WCAG contexts.
Responsive Widget for Mobile and Desktop 
Ensures the accessibility tools work seamlessly across screen sizes and devices, maintaining compliance across all platforms.
Customizable Widget Layout and Position 
Allows you to configure the placement, appearance, and branding of the accessibility widget to match your site’s UI/UX needs.
Supported Languages 
English (en), Svenska (sv), Suomi (fi), Deutsch (de), Español (es), Português (pt), Türkçe (tr), Français (fr), 日本語 (ja), 한국어 (ko), עברית (he), Latviešu (lv), Polski (pl), Ελληνικά (el), Dansk (da), Italiano (it), Română (ro), Български (bg), Hrvatski (hr), Čeština (cs), Nederlands (nl), Eesti (et), Magyar (hu), Gaeilge (ga), Lietuvių (lt), Malti (mt), Slovenčina (sk), Slovenščina (sl)
Compatible with Popular WordPress Themes & Page Builders
Accessibility Assistant works seamlessly with a wide range of WordPress themes and page builders. Below is the list of currently supported environments:
Supported Themes:
<ul>
<li>Astra</li>
<li>OceanWP</li>
<li>Flatsome</li>
<li>GeneratePress</li>
<li>Hello Elementor</li>
<li>Neve</li>
<li>Kadence</li>
<li>Sydney</li>
<li>Hestia</li>
<li>Blocksy</li>
<li>Zakra</li>
<li>Storefront (official WooCommerce theme)</li>
<li>WoodMart</li>
<li>Porto</li>
<li>Divi</li>
<li>Avada</li>
<li>TheGem</li>
<li>Salient</li>
<li>Enfold</li>
<li>X Theme</li>
<li>Bridge</li>
<li>Betheme</li>
<li>Shopkeeper</li>
<li>Rey</li>
<li>Electro</li>
</ul>
Supported Page Builders:
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder</li>
<li>Bricks</li>
<li>Beaver Builder</li>
<li>Gutenberg (Block Editor)</li>
<li>Divi Builder</li>
<li>Brizy</li>
<li>SiteOrigin Page Builder</li>
<li>Thrive Architect</li>
<li>Visual Composer</li>
<li>Cornerstone</li>
<li>Oxygen Builder</li>
<li>Themify Builder</li>
<li>Fusion Builder</li>
<li>Muffin Builder</li>
<li>Avia Layout Builder</li>
<li>UX Builder</li>
</ul>
If you’re using a theme or page builder that is not listed above, feel free to contact us. Our team will be happy to assist you with setup and ensure full compatibility.
Visit Our Shopify App Page: 
<a href="https://apps.shopify.com/accessibility-assistant" rel="nofollow ugc">Accessibility Assistant on Shopify</a>
Visit Our Wix App Page: 
<a href="https://www.wix.com/app-market/web-solution/accessibility-by-cartcoders" rel="nofollow ugc">Accessibility Assistant on Wix</a>
Explore Our Website for More Details: 
<a href="https://accessibilityassistant.com/" rel="nofollow ugc">Accessibility Assistant Details</a>
Widget Demo 
<a href="https://adalive.myshopify.com/?_bt=BAh7BkkiC19yYWlscwY6BkVUewhJIglkYXRhBjsAVEkiGmFkYWxpdmUubXlzaG9waWZ5LmNvbQY7AEZJIghleHAGOwBUSSIdMjAyNS0wNi0yN1QxNTowOTozNS40NTZaBjsAVEkiCHB1cgY7AFRJIh5wZXJtYW5lbnRfcGFzc3dvcmRfYnlwYXNzBjsARg%3D%3D--2062c8001168c01e27be17a19fedd7c2cd1a6a46" rel="nofollow ugc">Widget Demo URL</a>
For assistance, contact us via: 
– In-App Chat Support from the plugin itself 
– Email Support: <a href="mailto:support@cartcoders.com" rel="nofollow ugc">support@cartcoders.com</a> 
– Phone Support: <a href="tel:+918469607787" rel="nofollow ugc">+91 84696 07787</a> 
– WhatsApp Support: <a href="https://wa.me/918469607787" rel="nofollow ugc">Chat on WhatsApp</a>

Accessibility Assistant – EAA ADA WCAG AODA

Enhance store inclusivity with Easy Web Accessibility Widget for EAA, ADA, WCAG & AODA compliance

Spinnaker Dialog Lightboxes vs Accessibility Assistant – EAA ADA WCAG AODA