How can a widget deliver accessibility?
A straightforward technical breakdown of our approach: how JavaScript can turn a non-compliant website into a fully compliant one — without changing a single line of code in your original site.
Two approaches to web accessibility
There are two main ways to make a website accessible. Each approach has its own tradeoffs.
Approach 1: Source-code remediation
A developer dives into your site's source code and fixes every issue manually: adding alt tags to images, fixing heading structure, adding form labels, and improving color contrast.
Approach 2: JavaScript widget (post-load)
A script that loads after the page, scans every element, and dynamically adds the missing accessibility attributes. It works as a layer on top of your existing site.
How the widget actually works
What happens behind the scenes
The UA widget loads after the browser finishes rendering the page (DOMContentLoaded). Once active, it scans the DOM — the page's element tree — and performs a series of fixes:
- Adds ARIA attributes (role, aria-label, aria-describedby) to elements that are missing them
- Establishes proper semantic structure — headings, lists, and landmarks
- Handles keyboard navigation — tab order, visible focus, and keyboard shortcuts
- Shows an accessibility menu with personalized tools for each visitor
Zero performance hit
The widget loads asynchronously and weighs less than 50KB (gzipped). It doesn't block initial page render and doesn't hurt your Core Web Vitals. The script runs only after the page is ready — so visitors never feel any delay.
Updates alongside your site
Unlike source-code fixes, the widget rescans the page on every load. If you've added new content, swapped an image, or tweaked a form — the widget detects the change and makes it accessible automatically.
Our approach: smart hybrid
At UA we don't rely on automation alone. Our widget is hand-written and hand-maintained for every site — custom code that understands your site's specific structure, paired with an automated engine that handles dynamic content.
Want to see the technology in action?
Run a free scan on your site and get a detailed report on its accessibility status.