Live targets
52 bespoke interactive pages for accessibility, scraper, and browser-automation testing. Each one isolates a single behaviour that breaks naive tooling, a shadow boundary, a live region, a virtualised list, text that only a screenshot can read, so a failure points at one cause. Nothing here is a downloadable ExampleFile; use these like the live Forms demos. All content is SAMPLE data, and nothing is uploaded or stored.
- Accordion and disclosure
Native details elements alongside an ARIA accordion, one keeping its content in the DOM while closed and one removing it.
- ARIA landmarks
A page with banner, navigation, main, complementary, and contentinfo landmarks for a11y tooling.
- ARIA live regions
Polite, assertive and off live regions updating on a timer and on demand, plus an atomic region and a busy one.
- ARIA tabs
A tab list with manual activation, roving tabindex, and panels that only exist in the DOM once their tab has been opened.
- Bidirectional text
Arabic and Hebrew paragraphs with embedded Latin and digits, including isolated and overridden runs, for testing text order extraction.
- Blocking modal
A modal that appears after a short delay, traps focus, cannot be dismissed with Escape, and blocks every control behind it.
- Canvas-rendered text
Text painted into a canvas, invisible to the DOM and to text extraction, with an accessible fallback stated alongside it.
- Client-side pagination
Numbered pages rendered from a local array, where only the current page exists in the DOM and the URL never changes.
- Client-side stepper
A four-step form held entirely in memory, where the URL never changes and going back is a state transition rather than navigation.
- Contenteditable region
A rich-text region built on contenteditable, where typing has to be simulated with key events rather than a value assignment.
- Cookie banner
Consent banner with Accept / Reject for CMP and banner-dismissal tests.
- CSS generated content
Text that exists only in CSS pseudo-element content, counters and attribute functions, so it is visible but not in the markup.
- Custom listbox
A native select and an ARIA listbox built from div elements, side by side, with the same options and the same result.
- Deep iframe nest
Five levels of same-document iframes, each labelled with its depth, for frame-walking and frame-switching automation.
- Delayed hydration
Content that arrives in four stages after first paint, each stage announcing itself, for testing waits that are not network-bound.
- Disabled and readonly states
Every control in enabled, readonly, disabled and aria-disabled variants, so the difference between them is testable in one place.
- Drag-and-drop reorder
A sortable list using the HTML5 drag-and-drop API, with a keyboard path that produces the same result.
- Eight ways to hide text
Eight ways to hide text, each hiding it from a different audience, so no single extraction rule gets all eight right.
- File drop zone
Drag-and-drop / file-picker zone that lists filenames locally for upload-UX automation.
- Forced dark
Page that forces a dark color scheme for theme and contrast tooling tests.
- Forced light
Page that forces a light color scheme for theme and contrast tooling tests.
- Hash-fragment state
View state kept in the URL fragment, so the back button works but no navigation or request ever happens.
- Hover-only content
Text that exists only while a control is hovered or focused, so it never appears in the served HTML or in a plain screenshot.
- Icon glyphs and their labels
Icon fonts, emoji and inline SVG marks side by side, so a text scrape returns private-use characters where a person sees a picture.
- Iframe nest
Parent page with nested srcDoc iframes for frame-walking and focus tests.
- Iframe sandbox
The same frame document embedded under four different sandbox allow-lists, so a tool can see which capabilities each one grants.
- Infinite scroll
Append-only list with a sentinel for scroll and virtualization scraper tests.
- Keyboard menu
A menubar with roving tabindex, so only one item is tabbable and the arrow keys move focus between the rest.
- Lazy loading
Sections revealed by an IntersectionObserver plus natively lazy iframes, so nothing below the fold exists until it is scrolled to.
- Live validation
A form that validates as you type, moving aria-invalid and error text in and out of the DOM on every keystroke.
- Nested modals
Open a dialog that opens another, focus trap and Escape stacking for a11y tooling.
- Paste-only field
A field that accepts pasted text and rejects typed characters, so a key-by-key automation gets an empty control.
- Pointer drag on a canvas
Shapes dragged around a canvas with pointer events, where the only readable state is a text read-out rather than the DOM.
- Pointer-events overlay
Buttons under transparent overlays, one of which swallows clicks and one of which lets them through, for testing element-from-point checks.
- Print stylesheet
A page with screen-only chrome and print-only content for print CSS testing.
- Scroll lock
A panel that locks page scrolling while it is open, so scroll-into-view calls silently do nothing until it closes.
- Scroll spy
Sticky section nav driven by IntersectionObserver for scroll-spy and in-page nav tests.
- Shadow DOM
Open, nested and closed shadow roots holding text and controls, for testing selectors that have to pierce a shadow boundary.
- Shadow DOM form
Form controls living inside a shadow root, including one that participates in the outer form through the element internals API.
- Sign-in shaped form
A form laid out like a sign-in page that accepts any input, checks nothing, keeps nothing, and grants access to nothing.
- Skeleton swap
Skeleton blocks that swap for real content, where the placeholder has the same shape and size as the text that replaces it.
- Slider precision
Range inputs with coarse, fine and non-linear steps, where reaching an exact value by dragging is impractical.
- Slow load
Delayed content hydration for loading-state and timeout tooling tests.
- Sticky overlay interception
A sticky header and footer that cover parts of the page, so a click at an element's reported coordinates can land on the bar instead.
- Streaming rows
A table that grows by one row every 400 ms up to fifty rows, so a scraper reading it once gets a different answer each time.
- SVG text
Text inside SVG as tspans, along a path, and inside a nested SVG, which text extraction reaches only if it walks into the graphic.
- Table sort & filter
Interactive SAMPLE table with column sort and text/category filters for scraper and a11y table tooling.
- Text only in an accessible name
Wording that exists only in an accessible name or description, never as visible text, for testing accessibility-tree extraction.
- Toast notifications
Transient messages that appear and remove themselves after a few seconds, so a slow assertion misses them entirely.
- Typeahead suggestions
An autocomplete whose suggestions appear after a debounce, are built from a local list, and never reach a network.
- Virtualised list
A ten-thousand row list that keeps only the visible window in the DOM, so row 9,000 has to be scrolled to before it can be read.
- Web components
Custom elements with named slots, an attribute-driven re-render, and light DOM that only appears once the element upgrades.