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!

Joe Dolson

This plug-in helps with a variety of common accessibility problems in WordPress themes. While most accessibility issues can’t be addressed without directly changing your theme, WP Accessibility adds a number of helpful accessibility features with a minimum amount of setup or expert knowledge.
WP Accessibility is not intended to make your site compatible with any accessibility guidelines.
All features can be disabled according to your theme’s needs. For advanced users, all of the functions based on modifying stylesheets can be customized using your own custom styles by placing the appropriate stylesheet in your theme directory.
<h4>Theme Accessibility Features added by WP Accessibility</h4>
These are features that address issues caused by inaccessible themes.
<ul>
<li>Add skip links with user-defined targets. (Customizable targets and appearance.)</li>
<li>Add language and text direction attributes to your HTML attribute if missing.</li>
<li>Add an outline to the keyboard focus state for focusable elements.</li>
<li>Add a long description to images. Use the image’s “Description” field to add long descriptions.</li>
<li>Enforcement for alt attributes on images in the Classic editor.</li>
<li>Identify images without alt attributes in the Media Library</li>
<li>Add labels to standard WordPress form fields (search, comments)</li>
<li>Add post titles to “read more” links.</li>
<li>Remove tabindex from elements that are focusable. (Also fixes plugin-caused problems.)</li>
<li>Remove user-scalable=no to allow resizing.</li>
</ul>
<h4>WordPress Core Accessibility Issues fixed by WP Accessibility</h4>
These are features that address issues caused by current or past WordPress core accessibility issues. (Issues added in content, such as target or title attributes, are persistent even when WordPress is updated.)
<ul>
<li>Force a search page error when a search is made with an empty text string. (If your theme has a search.php template.)</li>
<li>Remove redundant title attributes from tag clouds.</li>
<li>Disable default enabling of full screen block editor.</li>
</ul>
Content specific fixes:
<ul>
<li>Strip title attributes from images inserted into content.</li>
<li>Remove the target attribute from links.</li>
</ul>
<h4>Accessibility Tools in WP Accessibility:</h4>
These are tools provided to help you identify issues you may need to fix.
<ul>
<li>Test the color contrast between two provided hexadecimal color values.</li>
<li>Enable diagnostic CSS to show CSS-detectable problems in visual editor or on front-end of site.</li>
<li>Search your media library on content in alt text fields.</li>
</ul>
Learn more! <a href="https://docs.joedolson.com/wp-accessibility/" rel="nofollow ugc">Read about the accessibility issues corrected</a> by WP Accessibility!
The plug-in is intended to help with deficiencies commonly found in themes and to solve some issues in WordPress core. It can’t correct every problem (by a long shot), but provides tools to fix some issues, supplement the accessibility of your site, or identify problems.
<h4>Statistics Collection</h4>
WP Accessibility includes a statistics collection feature to help you identify how WP Accessibility is used on your site. This package does not collect any personally identifying data.
<a href="https://docs.joedolson.com/wp-accessibility/2023/11/16/wp-accessibility-statistics/" rel="nofollow ugc">Learn more about WP Accessibility statistics</a>.
<h4>Contribute!</h4>
<ul>
<li><a href="https://translate.wordpress.org/projects/wp-plugins/wp-accessibility" rel="nofollow ugc">Help Translate WP Accessibility</a></li>
<li><a href="https://github.com/joedolson/wp-accessibility" rel="nofollow ugc">Contribute to WP Accessibility</a></li>
</ul>

WP Accessibility

My theme doesn't come with accessibility out of the box. WP Accessibility fixed some of those. Brilliant plugin and above all it is free.

Top Class!!

Essenziale per rispettare le regole di accessibilità.

Plugin eccellente

WP Accessibility fixes common accessibility issues in your WordPress site.

Spinnaker Dialog Lightboxes vs WP Accessibility