Rendered content and JavaScript / Responsive, keyboard and assistive checks
Test the assembled answer across the ways people use it.
The server response, rendered DOM and accessible interface can differ. Review the answer and its routes after assembly, then test reflow, focus and meaningful structure in the intended environment.
Define the page task and the environment you are testing.
Record URL, build or release, browser, viewport, zoom, device, authentication, consent and cache state. Name the answer and any task the page must support. A comparison page needs usable criteria and relationships; a menu needs a reachable route. A decorative defect and a missing answer should not receive the same release effect.
Keep expected result, observed result, evidence, severity, repair owner and regression case for every material check. Use representative supported browsers and user states, including loading, failure and narrow layouts. A screenshot cannot reveal every accessible name or keyboard behavior, and a static fragment cannot prove what a deployed template does.
Distinguish initial HTML, rendered DOM and accessibility output.
The initial HTML is what the server sends. Browser scripts can add, remove or change nodes to create the rendered DOM. CSS then controls presentation, while the accessibility tree exposes semantic structure to assistive technology. A sentence visible in an editor may be absent from all three public representations.
Compare the main answer, headings, links, metadata and structured data at the appropriate layers. An HTML fetch proves what that response contained, not that all scripts ran. A DOM snapshot shows one rendered state, not that a crawler indexed it. A visual image of the page does not prove heading or table relationships are announced correctly.
Worked comparison: an answer exists only after a script succeeds.
Imagine a fictional support page. The initial document contains a heading “Export notes”, a loading placeholder and a script reference, but no export instructions or support link. After the script fetches the correct versioned record, the rendered DOM contains the answer, its limitations and an anchor to the official support route.
Save both states and compare the promised content explicitly. If the script or data request fails, the initial shell still looks like a successful 200 response but cannot answer the question. The repair may be server-rendering the supported answer or providing a truthful usable fallback while the enhancement loads. The correct choice depends on the application; simply hiding the loading message does not supply the missing answer.
| Layer/state | Observed teaching case | Required acceptance evidence |
|---|---|---|
| Initial server document | Heading plus loading placeholder | Record that answer and support route are absent here |
| Successful rendered DOM | Versioned instructions and real support anchor inserted | Inspect text, links, scope and resource completion |
| Data request fails | Placeholder persists; no answer | Exercise failure; provide truthful fallback and recovery |
| Search observation | Not supplied in this example | Do not infer indexing from browser success |
Inspect resources, links and runtime errors.
Check blocked, missing or failed scripts, styles, images and data requests. Record URL, response, error and affected function. A resource can be available in a signed-in developer session but unavailable to a public visitor. Inspect console and network evidence without assuming that every console warning affects the answer.
Make navigation use real anchors with href destinations. If scripts insert links, inspect the final markup and destination. Test direct entry to the route, not just navigation from a working home page. Google documents that rendering depends on accessible resources; browser success alone does not prove identical crawler execution or immediate indexing.
Check equivalent meaning at narrow widths and zoom.
Test the content at a narrow viewport and increased text or browser zoom. Read the answer, evidence and qualifications in order, checking clipping, overlap, hidden duplication and unwanted whole-page sideways movement. WCAG reflow addresses a 320 CSS-pixel width for vertically scrolling content, with exceptions for material genuinely needing two-dimensional layout.
A comparison table may need horizontal movement to preserve column relationships. Confine that overflow to a labelled table region when appropriate; do not clip columns or remove decisive evidence on phones. Google’s mobile guidance emphasizes equivalent useful content. Different presentation can work, but hiding required information to make the screen look tidy changes the answer.
Check keyboard focus and controls without a pointer.
Use Tab and Shift+Tab to move through controls in a meaningful order. Confirm a visible focus indicator that is not entirely hidden by sticky layers, and confirm activation appropriate to each control. Test that no component traps focus without an available exit. A mouse click test cannot establish this.
Native controls are a useful starting point. A menu toggle should expose an understandable name, button role and expanded state when it truly controls a disclosure. A plain navigation link should retain link behavior. Avoid positive tabindex values that create a surprising custom route. Check focus after opening and closing content and after any error or route change.
Worked test: a narrow menu and comparison table.
This is a fictional test case, not a pass reported for this site. At 320 CSS-pixel equivalent width, a “Documentation” toggle opens a navigation list; below it, a three-column plan comparison must retain plan names, limits and conditions. Start with the toggle closed and inspect its accessible name, role and state.
Keyboard sequence: Tab reaches the toggle with visible focus; Space or Enter opens it and updates expanded state; Tab reaches each revealed link in order; Shift+Tab can return; activating a link reaches the promised resource. Closing the disclosure must not leave focus inside hidden content. For a dialog-style menu, use the separate dialog focus/close contract rather than assuming these disclosure rules are sufficient.
For the comparison table, verify caption, column and row headers, correct cell associations and all qualifications. At narrow width, enter the scrollable region by keyboard if needed and reach every column without losing the page position. Inspect it with a screen reader to confirm plan names and criteria are associated with values. A visually positioned grid of generic divs is insufficient evidence of those relationships.
| Test | Expected behavior | Failure and repair direction |
|---|---|---|
| Narrow menu | Toggle and revealed links fit; no clipped route | Repair layout rather than remove required links |
| Keyboard sequence | Visible logical focus, activation and exit | Repair hidden focus or wrong control behavior |
| Name/role/state | Documentation button and expanded state match behavior | Use correct native semantics and state updates |
| Comparison table | Headers/values/conditions preserved; local overflow usable | Restore associations and reachable columns |
| Assistive structure | Headings, landmarks and table relationships announced | Inspect real accessibility output; do not infer from screenshot |
Review target size and accessible names in context.
Check pointer target size or applicable spacing/exceptions under WCAG 2.2, rather than assuming that a tiny visible icon is usable because its symbol is familiar. The Level AA minimum target-size criterion uses 24 by 24 CSS pixels or specified exceptions; inline text links and sufficiently spaced targets have particular rules. Test the real clickable area, not just the drawn mark.
Names, roles and states must agree with behavior. Check landmark labels, heading order, lists, table headers, image alternatives and form labels wherever present. Keep visual reading order compatible with DOM and focus order. Use a screen reader to examine the information structure and task, not only to count headings.
Turn defects into owned repairs and repeatable evidence.
A finding should identify the failing component, consequence, environment, expected state, observed state and smallest repair. After changing scripts or CSS, repeat the original failing case and the relevant neighboring states. A menu repair can affect focus order; a table overflow repair can affect reading order. Inspect final title, description, canonical, directives and structured data after all emitters run.
Keep source, rendered, visual, keyboard and assistive checks distinct in the record. A local source pass is not a full accessibility certification or a public-browser pass. If a required environment cannot be inspected, mark that check as open rather than convert missing evidence into acceptance. No test here promises a ranking, search feature or visitor outcome.
Sources and related learning
Google JavaScript rendering documentation. Google mobile content documentation. WCAG 2.2.
The worked scenarios are fictional teaching records. They do not report live tests, client work or measured search outcomes.
Continue with semantic SEO learning and technical access and indexing. Visual meaning and usable pages.Check real link destinations. Check emitted markup against visible content.