Live demo
This page is deliberately rough. Fix it live.
The real WebAble widget is loaded here from the same one-tag embed we hand customers. Open the launcher in the bottom-right corner, then try reader mode, dark mode, high contrast, bigger text, the reading mask, or read-aloud. Everything below reacts in real time. The panel itself lives in a shadow root, so the page styles it is fixing never leak into it.
Embed used on this page: <script src="/widget.js" async></script>
The quiet craft of accessible interfaces
Good accessibility is mostly invisible. It shows up as a page that simply works: links you can find, text you can resize, motion you can stop. This page is deliberately rough so you can watch each WebAble tool repair it.
Reading comfort
Try the reading tools: scale the text, switch to a readable or dyslexia-friendly font, loosen spacing, or turn on the reading mask. This sentence is set in a deliberately low-contrast gray so the contrast, dark mode, and custom-color tools have an obvious target.
A skipped heading level
This h4 follows an h2 with no h3 in between, on purpose, so the highlight-headings tool and the analyzer both have a structural issue to surface.
Color and motion
Invert the page, push contrast, drop to grayscale, or apply a color-blindness filter. None of it touches this widget's own panel, which renders in a shadow root.
Forms
This input has no visible label, which the labels tool and the analyzer both flag.