Angelo De Lorenzo

<p>Lumen ARIA Blocks helps you publish interactive content that stays usable for keyboard and assistive technology users, while remaining practical for editorial teams in Gutenberg.</p>
<p>Why teams use Lumen ARIA Blocks:</p>
<ul>
<li>Better accessibility defaults out of the box (roles, states, keyboard behavior, focus handling).</li>
<li>SSR-first output for robust rendering and content continuity.</li>
<li>Theme-agnostic integration (works with any WordPress theme).</li>
<li>Privacy-friendly runtime (no telemetry, no tracking scripts).</li>
</ul>
<p>How it works:</p>
<ul>
<li>SSR-first dynamic blocks (content remains server-rendered).</li>
<li>Progressive enhancement with block-specific frontend scripts, enqueued only when the related block is rendered.</li>
<li>Runtime assets are served from your own WordPress site.</li>
<li>No third-party runtime libraries are bundled in this release.</li>
</ul>
<p>Available blocks in this release:</p>
<ul>
<li>Accordion</li>
<li>Button (action/link/toggle)</li>
<li>Carousel</li>
<li>Dialog</li>
<li>Popup</li>
<li>Tabs</li>
<li>Tooltip</li>
</ul>
<p>This plugin is designed to work across themes and does not require coupling to a specific theme implementation.</p>
<p>Demo page: https://lumen.angelodelorenzo.it/lumen-aria-blocks</p>
<h3>Accessibility Contract</h3>
<p>Lumen ARIA Blocks targets WCAG 2.2 AA intent with:</p>
<ul>
<li>keyboard-first interactions</li>
<li>ARIA roles/state mapping per component</li>
<li>focus-visible support</li>
<li>reduced-motion baseline (<code>prefers-reduced-motion</code>)</li>
<li>no-JS SSR fallback behavior for content continuity</li>
</ul>
<p>ARIA contracts and QA checks are maintained in the release workflow and are not bundled in the plugin package.</p>
<h3>Privacy</h3>
<ul>
<li>No analytics or telemetry are included.</li>
<li>No third-party tracking requests are sent by the plugin.</li>
<li>Runtime assets are loaded from your own WordPress site.</li>
</ul>
<h3>Third-Party Libraries</h3>
<ul>
<li>No third-party runtime libraries are bundled in this plugin release.</li>
<li><code>THIRD_PARTY_NOTICES.txt</code> remains included as distribution metadata.</li>
</ul>


Lumen ARIA Blocks

Keyboard-first, accessibility-focused Gutenberg blocks with SSR output and progressive enhancement.

LewisCowles

daronspence

<p>This short, handy plugin will add playback buttons to your audio, video & playlist elements added via the built-in WordPress shortcodes for media using mediaelement.js.</p>
<p>Each set of buttons is configured for it’s corresponding element on the page, so you can adjust the speed of multiple files independently.</p>
<p>There is currently no persistence implemented in this plugin. It just scratches an itch to be able to broadly adjust media playback speeds using the HTML api.</p>
<p>NOTE: This uses the HTML5 media Element API. Any browser not supporting these or using the Flash Player fallback will miss out on this functionality.</p>
<h4>Developers</h4>
<p>Two hooks are provided within this plugin.</p>
<ul>
<li>
<p><code>media-playback-speed-generate-controls</code> provides a single argument which is a boolean. If you return this as false, this will stop buttons being added to a media player. This is intended for advanced setups where markup for controls might be placed manually elsewhere on the page such as a sticky footer. So long as controls follow the built-in markup (being within the body tag and have a playback-rate-button class (no default styling, used for enabling DOM access only).</p>
</li>
<li>
<p>‘media-playback-speed-data’ provides the default array containing arrays as items with <code>rate</code>, <code>title</code> and <code>label</code> entries, which set the playback rate, the title and aria-title for the buttons as well as adjust the button text.</p>
</li>
</ul>
<h4>Theme & Front-end</h4>
<p>The <code>.playback-rate-button.mejs-active</code> and/or <code>.playback-rate-button.active-playback-rate</code> CSS-selectors allow you to style the active speed (per-player).</p>
<p>Initially mejs-active class was added in order to create media-playback-js compatible / familiar class names.</p>
<p>Now that Gutenberg does not add these, it makes sense to for-now add two sets of classes.</p>
<p>The <code>.playback-rate-button.mejs-active</code> selector will be deprecated in version 2.</p>
<h4>Troubleshooting</h4>
<p>This works with the traditional <code>audio</code>, <code>video</code> and <code>playlist</code> shortcodes so long as WordPress uses the JavaScript player.</p>
<p>With the latest 1.1.1 release this also works for HTML5 audio and video too, however you will need to implement your own controls which have the <code>playback-rate-button</code> class and follow the patterns of this.</p>
<p>HTML5 raw controls do not have a playlist the author is aware of, and they use global state, so playback rate is per-page.</p>
<p>There is currently no history as part of this plugin, however a sister plugin could be authored and hooks added to it to store playback rate.</p>
<p>Please ensure that you have no broken javascript, or wrap all functions in <code>(function() { // do things })()</code> blocks to ensure nothing interferes with this plugin. This plugin does this so that it should not interfere with your site, even in browsers and pages which do not support this plugin.</p>
<h4>Feedback</h4>
<p>Please feel free to <a href="https://github.com/CODESIGN2/media-playback-speed/issues" rel="nofollow ugc">suggest</a> improvements, report conflicts, and/or make suggestions for integration hooks etc.</p>


Media Playback Speed

Add speed controls to audio and video hosted from your WordPress blog.

Lumen ARIA Blocks vs Media Playback Speed