This page exists only to exercise every feature of the Krispy Widget: the accessibility panel and the cookie consent manager. Nothing here is a real business.
Brand inheritance and contrast guard test: this page sets --brand: #f2e34a (a pale yellow) at :root, and the widget script tag below has no data-accent of its own. Expect: the widget should pick up that pale yellow automatically, then, because pale yellow text on a white or near white panel fails the 4.5:1 minimum, the panel text and focus outline should show a corrected, darker variant of the same hue instead of the raw color. Buttons and the floating trigger should still use the raw pale yellow as a fill, with a readable near black label on top of it. Open the panel to check, then reload with ?kwdebug=1 added to the URL and check the console for the exact adjustment that was made.
Services
A card on a light section. Try High contrast and Grayscale here first, this card should flip to a dark background with white text, not just the page body.
Get a quoteAnother card, same test. See the gallery to check underline and highlight links.
Grayscale should remove color from this whole section, but never from the floating accessibility button or panel.
This block uses px font-sizes instead of rem, the way a lot of older client sites do. It is here to test the text-size fallback: the stepper should still visibly enlarge the page text, even though this particular paragraph and heading were hard-coded in px.
Turn the text size stepper up to 150% and compare this block to the rem-based headline above.
Gallery
High contrast should still apply cleanly here even though the section already has a dark background. Links in this section are a lighter blue by default: back to services.
Reviews
"This is placeholder review copy for a fictional demo business, used only to test the widget."
A. Visitor
Location
Contact
A plain form, to prove the widget does not interfere with normal input focus, tabbing, or the labels themselves.
Audit fixtures
Everything in this section is broken on purpose, for window.KrispyWidget.audit() (or this page loaded with ?kwaudit=1) to catch. Do not "fix" these, that would defeat the point of the fixture. Each one is labeled below in the visible text and again in an HTML comment in the source.
Image with no alt attribute (1.1.1)
Input with no label, aria-label, or aria-labelledby (3.3.2, 4.1.2)
Icon only button with no accessible name (4.1.2, 2.4.4)
Heading level skip (1.3.1, 2.4.6)
Low contrast text (1.4.3)
This pale gray paragraph on a white background fails the contrast minimum on purpose.
New window link with no warning (3.2.5)
Example dot comTouch targets under 24 by 24 CSS pixels, crammed together (2.5.8)
Iframe with no title attribute (4.1.2)
Test checklist
Accessibility panel (bottom right button):
Escape. The panel should close and focus should return to the trigger button.Cookie consent (bottom banner, on first visit):
Brand inheritance (see the note in the hero above):
--brand, not the raw color used as text.?kwdebug=1 in the URL and check the browser console for a logged explanation of the adjustment.demo/brand-dark.html, a dark themed page with its own --brand, to confirm both the accent and the light/dark scheme detection follow the page.WCAG audit mode (developer tool, not part of the visitor facing widget):
window.KrispyWidget.audit(), or reload this page with ?kwaudit=1 in the URL.window.__krispyAudit in the console for the machine readable result.