Accessible interactive blocks for Gutenberg, built for real editorial work.
Lumen ARIA Blocks helps teams publish interactive content that stays usable for keyboard and assistive technology users. It combines server-rendered markup with progressive enhancement and is designed to work across WordPress themes without requiring a coupled theme implementation.
- 7 public blocks
- SSR-first output
- Progressive enhancement
- Keyboard-first interaction
- Theme-agnostic integration
- No telemetry or tracking scripts
Interactive content breaks easily when structure comes last
Accordions, tabs, dialogs, popups, and similar patterns are often added late, with accessibility treated as cleanup. The result may look finished while keyboard behavior, focus flow, semantic relationships, and content continuity remain fragile.
Lumen ARIA Blocks is designed to reduce that fragility. It gives Gutenberg teams a curated set of interactive blocks built around accessible semantics, predictable behavior, and a more disciplined runtime model.
Why Lumen ARIA Blocks feels different
Accessibility-first by default
Roles, states, keyboard behavior, focus handling, and relationship patterns are treated as part of the component, not as optional polish.
Server-rendered first
Content starts in the markup. Front-end behavior enhances the experience, but structure does not depend on visual effects or heavy client-side assumptions.
Progressive enhancement, block by block
Scripts are loaded only when the related block is rendered, keeping the model easier to understand and easier to integrate.
Privacy and packaging discipline
Runtime assets are served from your own WordPress site. No telemetry or tracking scripts are included, and no third-party runtime libraries are bundled in this release.
Seven public blocks, one coherent interaction model
The current public release includes seven blocks chosen for common editorial interaction patterns that frequently become accessibility problems when built ad hoc.
Accordion
For FAQs, policies, and expandable details.
Tabs
For comparisons, segmented content, and parallel categories.
Carousel
For secondary featured content and controlled sequential browsing.
Button
For actions, links, and accessible toggle behavior.
Dialog
For focused overlays, confirmations, and short tasks.
Popup
For contextual secondary content and lightweight disclosure.
Tooltip
For brief explanations and micro-guidance.
Designed for editorial use, not just UI display
These blocks are most useful when they support real communication needs: clarifying a term, comparing options, revealing secondary details, confirming an action, or structuring dense information in a way that remains easier to navigate.
They are not meant to turn WordPress into a front-end app framework. They are meant to make interactive editorial content more robust and more understandable.
Live demos
The examples below are meant to show how each block behaves in plausible editorial scenarios, not just isolated interface fragments.
Publishing FAQs (accordion demo)
A practical example of structured disclosure for questions that support the main page without interrupting it.
Yes. Lumen ARIA Blocks starts from server-rendered output, so the underlying content remains structurally present in the page markup before front-end behavior is applied.
No. The plugin is designed to work across WordPress themes and does not depend on a dedicated companion theme in order to function.
Yes, where interactive behavior requires it. The goal is not to pretend every component is fully equivalent without JavaScript, but to preserve content continuity and improve interaction quality when enhancement is available.
Because small interaction details often fail silently. Keyboard behavior, focus flow, semantic relationships, and state changes are easier to trust when they are handled through a more disciplined component model.
Choose the information most relevant to you (tabs demo)
Use tabs when visitors need one clear path at a time, not when all content must stay visible at once.
Services and updates for residents
Find service updates, waste and transport notices, and local support information collected in one place for day-to-day use.
Guidance for local businesses
Review permits, reporting requirements, and practical updates that affect opening, operations, and customer-facing services.
Key information for visitors
Check travel, access, and venue information before you arrive so the essentials are easy to review without extra navigation.
Featured resources (carousel demo)
Use a carousel for secondary highlights visitors may want to browse, not for the page’s essential hierarchy.
Featured Slides
Editorial Action (button demo)
This example shows the Button block as an accessible action surface for editorial interfaces.
This pattern works well when a user needs to trigger an action or toggle a simple state with clear feedback.
Use a button when the element performs an action or toggles a state. If the user is meant to navigate to another page or resource, a plain link is usually the clearer choice.
Focused Review (dialog demo)
A dialog is best for short, self-contained interactions that deserve stronger attention than inline content.
Before you publish
Run through a quick accessibility check before the page goes live:
- Make sure headings follow a clear structure.
- Check that links are descriptive out of context.
- Confirm that any interactive pattern still works with keyboard navigation.
- Avoid hiding essential information inside overlays or tooltips.
Contextual Detail (popup demo)
A popup is useful when supporting information should stay nearby without creating the stronger boundary of a modal dialog.
When a popup is the better choice
Use a popup for brief secondary information that helps users interpret the main content in context. It works well for short notes, status details, and supporting explanations that do not require full modal isolation.
Micro-clarification (tooltip demo)
A tooltip should clarify, not carry essential content.
These examples represent the current public block set in Lumen ARIA Blocks: a focused collection of patterns designed to improve interactive editorial content without overreaching into a generic front-end framework.
Built for reliability, not front-end theater
Lumen ARIA Blocks uses server-rendered markup, block-scoped front-end behavior, and progressive enhancement. Runtime assets are served from your own WordPress site, and this release does not bundle third-party runtime libraries.
This is not a promise of perfection or full no-JavaScript feature parity for every interaction. It is a more disciplined baseline for accessible interactive content in Gutenberg, with content continuity and implementation clarity treated as part of the product.
Start with the current public release
If your team needs interactive Gutenberg blocks with stronger accessibility defaults, a clearer runtime model, and a more trustworthy editorial baseline, start here.