Theme

// a free, open-source WordPress plugin

Daveden Builder Enhancements

Accessibility, keyboard support and quiet visual polish for the Builderius builder — each improvement behind its own toggle.

  • Free
  • GPL-2.0
  • v1.9.0
  • For Builderius
Download latest release View on GitHub

It patches only the builder chrome — no dependencies, no tracking, and nothing about your live site changes.

~40
enhancements
WCAG 2.2
AA baseline
Every
feature a toggle
Zero
front-end changes
A stylised view of the Builderius editor with the enhancements applied: a top toolbar whose breakpoint switcher is a keyboard radio group with a visible focus ring, a Navigator listing elements with their HTML tags, a selected element on the canvas showing a focus ring and an accessible tooltip, and a keyboard-operable bottom toolbar.

Builderius is one of the most capable, standards-minded page builders for WordPress. But like any tool you spend all day inside, the builder interface itself has rough edges: icon-only buttons with no labels, a handful of controls that keyboard and screen-reader users cannot reach, a Navigator that could scan more easily, and no light theme if that is how you prefer to work.

Daveden Builder Enhancements smooths those edges. It is a collection of small, optional improvements to the Builderius builder — the editing chrome, not the sites you build with it. Everything is a toggle: turn on only what you want and leave the rest off.

Built the Daveden way

A few principles run through every feature.

  • WCAG 2.2 AA is the floor

    Contrast, visible focus, target sizes and screen-reader semantics are treated as requirements, not nice-to-haves.

  • Keyboard first

    If you can do something with a mouse, you should be able to do it with a keyboard — using the arrow-key patterns you would expect.

  • Native semantics before ARIA

    Real roles and real names, following the ARIA Authoring Practices Guide only where a custom widget genuinely needs it.

  • No lock-in

    It patches the builder from the outside, so you can switch any feature off at any time and nothing about your templates changes.

  • Comfortable to work in

    Light or dark, comfortable or compact — the builder can follow your operating system or be pinned exactly the way you like it.

Accessibility is the point

A builder should be usable by everyone who works in it

These features are not an afterthought bolted onto a theming plugin; they are the reason it was written. Every one is purely additive — the builder’s own behaviour is untouched.

  • Tooltips & accessible names

    Around 25 icon-only buttons ship with neither a hover tooltip nor a proper name. This gives each one both, so a screen reader announces what it does.

  • Focus visibility

    A clear focus ring on every interactive control, as WCAG 2.4.7 requires.

  • Top-bar keyboard groups

    Turns the breakpoint switcher into a real radio group — it announces which breakpoint is current, and arrow keys move and select it from a single Tab stop — and labels the canvas width and zoom fields.

  • Bottom-bar keyboard toolbar

    Makes the row of editor tools (Custom CSS, JavaScript, Dynamic Data, Sense AI and so on) a proper keyboard toolbar: one Tab stop, arrow-key navigation, each tool announcing whether its panel is open, and locked Pro tools announced as locked rather than sitting there as silent, dead buttons.

  • Accessible select comboboxes

    Gives the builder’s custom dropdowns proper combobox / listbox / option roles, a single Tab stop, and arrow keys with Enter to choose.

  • Accessible AI session tabs

    Wires the Sense AI terminal’s session tabs as a real tab list — each announcing which session is active, arrow keys to move and switch, the terminal exposed as their panel — and turns the “new session” button and its agent picker into a proper, keyboard-operable menu.

  • Preview overlay contrast fix

    Corrects the hover and selection overlay labels so you can tell the two apart and both meet AA contrast.

See the difference

The problem, and the fix

A few of the accessibility fixes as they appear in the builder — the rough edge on the left, the enhancement on the right. Watch the walkthrough, then scan the details.

  • Tooltips & accessible names

    Around 25 icon-only buttons ship with no label — a screen reader just announces “button”.

    Before A row of icon-only builder buttons with no tooltips or labels.
    After The same buttons, each showing a tooltip and carrying an accessible name.

  • Focus visibility

    Tab through the builder and you lose track of which control is currently active.

    Before A builder control with no visible focus indicator when focused.
    After The same control with a clear, high-contrast focus ring.

  • Top-bar keyboard groups

    The breakpoint switcher can’t be reached or changed with the keyboard.

    Before The top-bar breakpoint switcher with no keyboard focus or current-state indication.
    After The breakpoint switcher as a radio group with a focus ring and the current breakpoint marked.

  • Bottom-bar keyboard toolbar

    Editor tools are a maze of Tab stops, and locked Pro tools sit there as silent, dead buttons.

    Before The bottom toolbar where every tool is a separate Tab stop and locked tools look identical.
    After The bottom toolbar as a single keyboard toolbar with a locked Pro tool clearly announced as locked.

  • Accessible comboboxes

    The builder’s custom dropdowns don’t announce their role or respond to arrow keys.

    Before A custom builder dropdown with no combobox role or keyboard support.
    After The dropdown as a proper combobox with listbox roles and arrow-key selection.

  • Preview overlay contrast

    Hover and selection labels look alike and fail AA contrast against the canvas.

    Before Low-contrast hover and selection labels that are hard to tell apart on the canvas.
    After Distinct, AA-contrast hover and selection labels on the canvas.

Everything else, by area

Around forty small improvements across appearance, the Navigator, editing and the Styles panel. Turn on only the handful that make your day easier.

Make it yours: appearance

Theme switcher (light / dark / auto)
A top-bar button to switch the builder between light and dark, or follow your operating system.
Density toggle
A top-bar button to switch panel and Navigator spacing between comfortable and compact.
Typography & design tokens
One consistent typeface across the builder, with tidied field labels, group headings and panel shadows.
Tab styling
A clear accent underline on every tab (panel tabs, document tabs, scope switchers, settings tabs).
Controls styling
Buttons, inputs, dropdowns, segmented radios and the inserter restyled to meet AA contrast.
Selection contrast
Selected text in the builder’s fields now meets AA contrast in every theme, so highlighted values stay readable.
Focus visibility
A visible focus ring on every interactive control.
Navigator row styling
Larger, easier-to-scan rows with clear hover and selected states.
Search field icons
A magnifying-glass icon on the search fields that lack one, so each reads as a search box at a glance.
Resizable side panels
A drag handle on each side panel to set its width; the settings panel and Navigator share one remembered width.

A calmer Navigator

HTML tag badges
Shows each element’s HTML tag (such as <section>) next to its label, in place of its first CSS class.
Tidier Navigator icons
Hides the repeated element-type icons, keeping only the ones that carry meaning (Collections and Templates).
Collapse & expand buttons
Two header buttons: one expands every row, the other collapses the tree to its top-level sections.
Navigator search
A filter box that dims any row whose label or tag does not match what you type.
Rearrange favourites
Reorder the favourites bar by drag or arrow keys; the order is remembered in your browser.
Follow selection in the tree
Clicking an element in the preview opens the branches down to it and scrolls it into view.
Detachable Navigator Experimental
Float the Navigator over the canvas, drag and resize it, and dock it again.

Faster editing

Right-click menu enhancements
One flat, logically grouped Navigator menu with full keyboard support, plus copy/remove on the Styles editor’s class chips.
Wrap in… / Unwrap
Wrap an element in a div, template or collection — and Unwrap to move the children up a level and drop the empty wrapper.
Move & navigate elements
Move up, Move down and Select parent, straight from the right-click menu.
Inline rename
Rename an element on its Navigator row, or reset its label to its HTML tag.
Double-click to rename
Double-click a Navigator row to rename it in place.
Undo / redo add & delete
Cmd/Ctrl+Z undoes adding or deleting an element; add Shift to redo.
Rearrange component properties
Reorder a component’s properties by drag or arrow keys; the order is saved with the component.
HTML attribute helpers
A ready-to-type blank row when an element has no attributes yet, with suggestions such as id, role, aria-* and data-*.

A better Styles panel

CSS code editor by default Requires Pro
Opens the Styles tab straight into the CSS code editor, keeping the Content and Styles tabs visible.
CSS scope bar Requires Pro
Shows where your CSS will be saved — local, global or template — with an instant Global/Template switch, and shows only the active scope’s rules so they never look merged.
Auto-BEM
Suggests block and element class names (such as hero, hero__title, hero__image) for an element and everything inside it; edit any, then apply them all at once.
Hide the code minimap
Removes the code-overview strip and reclaims the width Monaco reserves for it.
Tidy selector hint
Replaces the two-line %local% / %selector% notice with a compact, dismissable hint and a clearer explanation in a dialog.

Little conveniences

Keyboard shortcuts overlay
Press ? to see every shortcut, native and added.
Unsaved-changes marker
An “Unsaved” marker next to Save whenever the template has changes that would be lost on reload.
Second-tab warning
An “Edit template” link in the front-end admin bar, and a warning before the builder opens in a second tab.
Preview resize handles Experimental
Drag handles on both edges of the preview to resize it around the centre — handy for container-query work.

Install & updates

  1. Download the latest release .zip from GitHub.
  2. In WordPress go to Plugins → Add New → Upload Plugin, choose the zip and install it (or unzip it into wp-content/plugins/).
  3. Activate “Daveden Builder Enhancements”, then open Builderius — the enhancements appear in the builder chrome.
One thing to watch

The plugin folder name must contain builderius — keep it as daveden-builderius-enhancements. Rename it and the builder features silently do nothing.

Updates arrive the normal way: new releases show up on your WordPress Plugins screen, ready to update in one click.

Feature requests welcome

Help shape the roadmap

Daveden Builder Enhancements is built in the open and released under GPL-2.0. Missing something, or hit a rough edge? Open an issue on GitHub — feature requests and bug reports both go straight onto the roadmap, and the next release is shaped by the people who use it.

Request a feature Download latest release