Performance & SEO4 min read

Own your accessibility layer

We built our accessibility widget in-house: 7 one-click profiles, 23 adjustments, contrast that remaps design tokens, shipped as code the client owns.

There is a whole industry that rents accessibility. You paste a vendor's script tag into your site, an overlay appears in the corner, and you pay a subscription forever. Stop paying, and the accessibility disappears.

We built ours in-house instead, and we ship it as first-party code the client owns. Roughly 1,100 to 1,600 lines per site, no third-party script, no monthly fee, and nothing about a visitor's session leaving the page.

What it actually does

The widget is a launcher button that opens a focus-trapped settings panel. The panel header carries the site's logo, and the footer holds a reset control and a link to the site's accessibility statement. Inside are 7 one-click profiles, each tuned to a real need: Seizure Safe, Vision Impaired, ADHD Friendly, Cognitive Disability, Keyboard Navigation, Blind Users, and Older Adults. Turning a profile off reverts exactly its own settings, and profiles can stack.

Behind the profiles sit 23 individual adjustments:

  • Content: bigger text, line height, letter spacing, a readable font, link and title highlighting, a cursor-following text magnifier, and text alignment.
  • Color: dark, light, and high-contrast modes, saturation control, monochrome, and custom recoloring for text, titles, and backgrounds.
  • Orientation: mute sounds, hide images, a distraction-free read mode, a reading guide and reading mask, stop animations, big cursors, and a keyboard guide.

The keyboard guide is the piece we are proudest of: a focus ring that glides between focused elements as you Tab through the page, staying glued to its target through scroll and resize, with a fixed legend explaining the keys. Keyboard navigation stops being invisible.

The launcher wears a small badge counting how many settings are active, and the panel opens out of it with a genie animation built from CSS keyframes, no motion library. Small details, but they are the difference between a tool that feels native to the site and a bolted-on iframe.

Contrast that remaps tokens, not filters

The shortcut every overlay takes is a CSS filter: invert the whole page and call it dark mode. Filters break fixed headers, wreck photographs, and make logos vanish. We refuse the shortcut.

Because our sites are built on a design-token system, our contrast modes remap the tokens themselves. Dark contrast swaps values at the variable layer, forces light text where it is needed, and handles each site's hardcoded white surfaces with a per-site list generated during install. Sticky headers get their own darkened treatment so nothing floats illegibly over the page.

Text scaling gets the same engineering. On sites authored in pixels, changing the root font size does nothing, so Bigger Text zooms the content root instead: everything reflows without clipping, and the widget itself mounts outside that root so it never distorts its own controls.

The widget holds itself to its own standard

An accessibility tool that is itself inaccessible would be a bad joke. The panel is a proper ARIA dialog: focus is trapped while it is open, Escape closes it, and focus returns to the launcher. Toggles are announced as switches, and reduced-motion preferences disable both the open animation and the focus-ring glide.

Settings persist per site in the browser, so a returning visitor's setup is waiting for them. Hiding the widget lasts for the current session only, deliberately, so nobody can lose it for good. And every install ships with a public accessibility statement page documenting the WCAG 2.1 AA commitment.

Every install ends with the same audit

We do not call the widget installed because the code compiled. Installation ends with a browser audit, the same one every time, run against a production build rather than a dev server: Bigger Text has to visibly enlarge the rendered page, dark contrast has to leave zero text elements below roughly a 3:1 contrast ratio, and the keyboard guide has to track real Tab presses across the real page.

Consistency across sites comes from that audit, not from assuming every site is identical. When a check fails, the install is not done, no matter how finished it looks.

Owned beats rented

The widget runs live across our portfolio, including AAS, America Premier, Belzona Baton Rouge, Creative Maintenance Solutions, IMS, Kwaan Bear Technology, Polymer Nation, Salyers Construction, and our own site. Per site, only two things change: the brand color and the logo. Everything else is identical by design, because consistency is what makes it trustworthy.

One honest caveat: a widget is a layer, not a substitute. Our sites are built accessible underneath it, with skip links, real ARIA patterns, contrast engineered into the design tokens, and reduced motion honored throughout. The widget extends an accessible site. It cannot rescue an inaccessible one, and nobody should sell you one on those terms.

That is the difference between a feature and a subscription. A rented overlay disappears the day the invoice stops. Code you own keeps working, because it is simply part of your site.

accessibilitywidgetswcagownership

Let's talk

Got something worth building?

Whether it's a brand-new site, a rebuild, or a product you can't find off the shelf — let's make it.

Or email hello@spiderdigitalgroup.com · reply within one business day · no pushy sales

Trusted by teams who ship

Belzona Baton RougeAmerica PremierAdvanced Applications SpecialistsPrime CoatSalyers ConstructionPolymer Nation