Frontend QA Checklist

A practical pass over markup, interaction, responsiveness, and performance before you call a frontend change done.

01 — Purpose

QA before release — not after regret

This checklist catches the frontend issues that slip past code review: broken forms, mystery overflow, and markup that only works with a mouse.

Run it on meaningful changes — new flows, refactors, and anything touching forms, navigation, or layout. Pair it with the Accessibility QA checklist; overlap is intentional where both matter.

02 — Markup

HTML and semantics

If the structure is wrong, CSS and JavaScript will fight you all the way to production.

  • headings follow a logical order — one h1, no level skips for styling
  • buttons are buttons, links are links — no div click handlers for navigation
  • images have appropriate alt text; decorative images are marked accordingly
  • tables used for tabular data only — not layout grids in disguise
  • landmarks present — header, main, nav, footer where expected

03 — Forms

Forms and interaction

Forms are where frontend quality wins or loses in a single session.

  • every control has a visible label — placeholder is not a label
  • errors are specific, linked to fields, and recoverable
  • submit buttons show in-flight state; double submit is prevented
  • success and failure feedback is visible — not only a toast off-screen
  • keyboard tab order is logical through the whole flow

04 — Responsive

Responsive and mobile

Desktop-only QA ships mobile bugs to your largest anxious audience.

  • layouts tested at narrow widths — no horizontal scroll on common breakpoints
  • touch targets large enough; controls are not packed edge-to-edge
  • text remains readable at 200% zoom without loss of content
  • mobile navigation opens, closes, and traps focus appropriately
  • sticky headers or CTAs do not hide primary content or focused fields

05 — Performance

Performance smoke checks

You do not need a full audit every time — but catch the obvious regressions.

  • images sized and compressed appropriately; lazy loading where it helps
  • no new heavy scripts without justification — see Third-Party Embeds
  • loading and empty states present — not flashing wrong content
  • obvious layout shift during load investigated

06 — Sign-off

Before you sign off

QA should happen before release — not in production with users as testers.

  • critical user journeys exercised manually on at least one real browser
  • console free of errors on paths you changed
  • accessibility QA checklist completed for user-facing changes
  • release readiness checklist considered if this ships to production