seamonsterdeneb

<p>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.</p>
<p>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.</p>
<p><strong>Image Lightbox Features:</strong></p>
<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>
<p><strong>PDF Lightbox Features:</strong></p>
<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>
<p>To make an image open in a lightbox, add the class <code>image-lightbox-trigger</code> to the <code><img></code> tag itself.</p>
<p><strong>For Gutenberg Block Editor:</strong><br />
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.</p>
<p><strong>For Page Builders (like DIVI):</strong><br />
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.</p>
<p><strong>Optional Attributes (add to the <code><img></code> tag):</strong></p>
<ul>
<li><code>data-description="…"</code>: A longer description for screen readers. <em>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.</em></li>
<li><code>data-credit="…"</code>: The text for the credit placard. <em>Requires HTML editing mode in Gutenberg.</em></li>
<li><code>data-credit-link="…"</code>: A URL to make the entire credit placard a link. <em>Requires HTML editing mode in Gutenberg.</em></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). <em>Requires HTML editing mode in Gutenberg.</em></li>
</ul>
<p><strong>Localization:</strong><br />
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>).</p>
<ul>
<li><strong>Supported languages:</strong> 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>
<p><strong>Example HTML:</strong></p>
<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>
<p>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.</p>
<p><strong>For Page Builders (like DIVI):</strong><br />
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.</p>
<p><strong>Localization:</strong><br />
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>).</p>
<ul>
<li><strong>Supported languages:</strong> 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>
<p><strong>Example HTML:</strong></p>
<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!

Steve Jones

Amber Hinds

Road Warrior Creative

philwebs

Equalize Digital

<h3>Make Your Website Accessible with Accessibility Checker</h3>
<p>Equalize Digital Accessibility Checker helps you find and fix accessibility issues in WordPress. Scan posts and pages as you edit, review WCAG-based issues inside WordPress, apply automated fixes for common barriers, and generate an accessibility statement to support your compliance efforts.</p>
<p>Whether you’re improving compliance with accessibility laws, working toward Web Content Accessibility Guidelines (WCAG) conformance, or making your website easier for everyone to use, Accessibility Checker gives your team a practical workflow for ongoing accessibility testing and remediation.</p>
<p><a href="https://equalizedigital.com/accessibility-checker/" rel="nofollow ugc">Plugin Website</a> | <a href="https://equalizedigital.com/demo/" rel="nofollow ugc">Live Demo</a> | <a href="https://equalizedigital.com/accessibility-checker/documentation/" rel="nofollow ugc">Documentation</a> | <a href="https://equalizedigital.com/accessibility-checker/features/#comparison" rel="nofollow ugc">Compare Free to Pro</a> | <a href="https://equalizedigital.com/accessibility-checker/pricing/" rel="nofollow ugc">Get Pro</a> | <a href="https://equalizedigital.com/wordpress-accessibility-meetup/" rel="nofollow ugc">WP Accessibility Meetup</a> | <a href="https://www.facebook.com/groups/wordpress.accessibility" rel="nofollow ugc">WP Accessibility Facebook Group</a></p>
<h3>Why Make Your Website Accessible</h3>
<p>Laws around the world, such as the European Accessibility Act (EAA), Americans with Disabilities Act (ADA), and Section 508, among others, require websites to be accessible and usable by people with disabilities. Accessibility may be required for your website to be legally compliant.</p>
<p>Accessibility fixes on websites often translate to better overall usability on the site and can improve search engine ranking and conversions.</p>
<p>Including Accessibility Checker on your website and fixing identified problems can help you to:</p>
<ul>
<li>Reduce legal risk.</li>
<li>Improve SEO and increase reach.</li>
<li>Increase sales and conversions.</li>
<li>Reduce operational costs by allowing more people to self-serve on your website.</li>
<li>Live your organizational values.</li>
</ul>
<h3>Real-Time WordPress Accessibility Scanning</h3>
<p>Accessibility Checker scans your content each time you save or publish and shows accessibility problems directly in the WordPress editor. You can review issues without leaving the edit screen, or switch to a front-end view to see exactly which elements need attention.</p>
<p>Accessibility Checker runs over 40 automated checks based on Web Content Accessibility Guidelines (WCAG) 2.2 and provides documentation for every issue so content creators, site owners, and developers can fix problems faster.</p>
<h3>Automated Accessibility Fixes</h3>
<p>Need help resolving accessibility issues on your website? Accessibility Checker includes one-click fixes for common accessibility barriers in themes and plugins.</p>
<ul>
<li>Add skip links</li>
<li>Add focus outlines</li>
<li>Block links from opening new windows</li>
<li>Force links to be underlined</li>
<li>Label comment fields</li>
<li>Label search fields</li>
<li>Add missing <code>lang</code> & <code>dir</code> attributes</li>
<li>Make the viewport scalable</li>
<li>Remove positive tab index to fix incorrect focus order</li>
<li>Remove title attributes from elements with preferred accessible names</li>
<li>Add warnings to links that open in new tabs</li>
<li>Show error message for empty search submissions</li>
<li>Add file size & type to links [Pro]</li>
<li>Add missing page titles [Pro]</li>
<li>Block PDF uploads [Pro]</li>
<li>Label form fields [Pro]</li>
</ul>
<h3>Supports Accessibility Compliance Efforts</h3>
<p>Laws and policies around the world require websites to be accessible. Accessibility Checker helps teams identify issues early, document progress, and support conformance work related to ADA, Section 508, AODA, EAA, WCAG, and more.</p>
<ul>
<li>Find problems faster.</li>
<li>Learn accessibility as you go.</li>
<li>Apply automated fixes for common barriers.</li>
<li>Track changes over time. [Pro]</li>
<li>Get personalized support and custom plans for more complex remediation needs. [Pro]</li>
</ul>
<p>Accessibility Checker scans run on your server. This means there are <strong>no</strong> URL-based scanning limits or API-usage fees. Get unlimited scanning of posts and pages without worrying about costs each time you scan.</p>
<h3>Why Accessibility Checker</h3>
<p>Accessibility Checker is designed to support both day-to-day publishing and broader accessibility initiatives.</p>
<ul>
<li><strong>No limits on pages scanned.</strong> Scan as many posts and pages as your site contains.</li>
<li><strong>Built by accessibility professionals.</strong> Equalize Digital team members include certified accessibility professionals and experienced WordPress accessibility practitioners.</li>
<li><strong>WCAG 2.2 A, AA, and AAA guidance.</strong> Review issues against current WCAG success criteria.</li>
<li><strong>Readability analysis and simplified summary support.</strong> Check Flesch-Kincaid grade level and add a simplified summary for WCAG Success Criterion 3.1.5 Reading Level.</li>
<li><strong>Remove issues from reports.</strong> Dismiss items that have been manually reviewed and found not relevant or remediated, with notes, usernames, and timestamps.</li>
<li><strong>Accessibility statement generator.</strong> Draft an accessibility statement that you can customize and publish on your website.</li>
<li><strong>Footer accessibility statement.</strong> Insert an accessibility statement into your footer with one click.</li>
<li><strong>Detailed documentation.</strong> Use help articles and instructions for every issue to guide remediation.</li>
<li><strong>[Pro] Bulk scanning.</strong> Scan all posts and pages in bulk for a site-wide overview.</li>
<li><strong>[Pro] Scan additional post types.</strong> Extend in-editor accessibility checks to more content types.</li>
<li><strong>[Pro] Admin columns.</strong> View accessibility status at a glance in content lists.</li>
<li><strong>[Pro] Full-site reports.</strong> See existing issues in one place for faster remediation.</li>
<li><strong>[Pro] Dismissed Log.</strong> Review dismissed issues, who dismissed them, and when.</li>
<li><strong>[Pro] User restrictions on Dismiss.</strong> Limit which roles can dismiss issues.</li>
</ul>
<p>Additional paid add-ons include:</p>
<ul>
<li><strong>Audit History add-on:</strong> track and report on changes over time.</li>
<li><strong>CSV Export add-on:</strong> export issues to CSV for management in a spreadsheet or project management tool.</li>
<li><strong>Multisite add-on:</strong> see accessibility status and manage settings for all sites in your network.</li>
</ul>
<h3>How It Works</h3>
<p>To get started with Accessibility Checker or learn more about how it works, see our <a href="https://equalizedigital.com/accessibility-checker/getting-started-quick-guide/" rel="nofollow ugc">Getting Started Quick Guide</a> or watch this video demonstration. Please note that the video includes some features available only in the paid version.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/ncAfP06dPpU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>Support</h3>
<p>The Equalize Digital team provides regular support for Accessibility Checker on the WordPress.org forums. If you have a question about the plugin or its use, please post in the support forum and the team will do its best to respond quickly. Support hours are Monday through Friday, 9:00 AM to 5:00 PM U.S. Central.</p>
<p>If you need one-on-one email support, please consider purchasing <a href="https://equalizedigital.com/accessibility-checker/pricing/" rel="nofollow ugc">Accessibility Checker Pro</a>. Pro customers receive unlimited personal support on plugin usage and features.</p>
<p>Join our <a href="https://www.facebook.com/groups/wordpress.accessibility" rel="nofollow ugc">WordPress Accessibility Facebook Group</a> for community support and to connect with other developers, designers, and content creators working to make websites more accessible.</p>
<p>For paid Accessibility Checker customers on a small business plan or above, we provide two accessibility <a href="https://equalizedigital.com/learn/office-hours/" rel="nofollow ugc">office hours</a> calls each month to answer remediation questions.</p>
<h3>Compatibility</h3>
<p>Accessibility Checker supports multiple WordPress editing and site-building workflows and has been tested with:</p>
<ul>
<li>Gutenberg Block Editor</li>
<li>The Classic Editor</li>
<li>Advanced Custom Fields</li>
<li>Avada</li>
<li>Beaver Builder</li>
<li>Divi</li>
<li>Elementor</li>
<li>Oxygen</li>
<li>WP Bakery</li>
<li><strong>[Pro]</strong> WooCommerce</li>
</ul>
<h3>Learn Accessibility</h3>
<p>Want to learn more about accessibility and stay on-top of accessibility best practices? Attend an official WordPress Accessibility Meetup!</p>
<p>These free virtual meetups are held twice per month via Zoom and are live captioned. <a href="https://equalizedigital.com/wordpress-accessibility-meetup/" rel="nofollow ugc">Learn more about WP Accessibility Meetup</a></p>
<h3>About Us</h3>
<p><a href="https://equalizedigital.com" rel="nofollow ugc">Equalize Digital</a> is a mission-driven organization striving to create a world where all people have equal access to products and tools on web, regardless of ability. Our team has been building custom WordPress websites, themes, and plugins since 2010. We’re the trusted accessibility auditing team for WordPress plugin developers and organizations worldwide, including government, higher education, nonprofit, and enterprise businesses.</p>


Equalize Digital Accessibility Checker – WCAG, ADA, EAA and Section 508 compliance

If you care about the people visiting your site, you should install this plugin.

If you care about the sites you develop for clients, you should install this plugin.

If you want a quick and easy way to take your best efforts at creating a site, and turn them into great sites, you should install this plugin.

Want to spot all the ways your "premium" theme is actually not all that great? You got it: install this plugin. Warning: this plugin will make you want to get a refund from your theme shop, and to go to a theme shop that actually cares about *their* product.

There are very few plugins in WordPress that make literally every site they touch better. This is one. 

An absolute must-have.

... this plugin is for you.

This plugin isn't a band-aid overlay that clutters the site, doesn't improve accessibility, and affects performance. 

Rather, Accessibility Checker works in the WP Admin by scanning the site and providing a straightforward, prioritized list of actionable advice on improving accessibility. This is backed by great documentation, support, and community involvement from Equalize Digital.

Our company upgraded to the paid version for CPT support and the other premium features – I can't recommend it highly enough.



If you care about accessibility . . .


This plugin is an absolute LIFESAVER that serves as a second pair of eyes as I build out pages and posts on my website. If you are looking to improve the accessibility of your websites, this plugin is *the* answer. It will not only point out any potential issues, but it does a great job of leading you to resources on how to fix thing in case you get stuck. Not to mention the team behind it... Equalize Digital is the go-to for website accessibility! Thanks for the awesome plugin! 


Livesaver!


I love this plugin. It's been really easy to train my clients to use when they are working with their content. And they have great support!


Love this plugin!


One of the things I love about this plugin is that it doesn't fix things for me. It shows me what needs to be fixed, and directs me to information on how to do that. Learning about web accessibility to make me a better web citizen is paramount to being able to create accessible sites for all.






Making my site more accessible by teaching me how to do it

Another good plugin on WordPress.org


Works well, but double check with a screen reader. Then, use the Ignore feature to clear each page. 


Yes!

Find and fix accessibility issues with confidence. Real-time reports, automated fixes, and guidance. Reduce compliance risk and reach more users.

Spinnaker Dialog Lightboxes vs Equalize Digital Accessibility Checker – WCAG, ADA, EAA and Section 508 compliance