Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Produce a polished, production-ready HTML page (a landing page or documentation page) that scores well on structure, accessibility, SEO, and performance — HTML-first (CSS/JS only as needed, and loaded correctly). Requirements: (1) fully SEMANTIC, valid markup with a correct outline and ARIA used ONLY where a native element won't do (respect the first rule of ARIA); (2) complete SEO/metadata — unique title + meta description, Open Graph/Twitter cards, <link rel=canonical>, and schema.org structured data via JSON-LD; (3) PERFORMANCE — scripts with defer/async as appropriate, resource hints (preload/preconnect) where useful, lazy-loaded off-screen images, and width/height set to avoid layout shift (CLS); (4) accessibility — keyboard operability, proper labels/landmarks, sufficient alt text. Document the choices and run it through the W3C validator + an accessibility/Lighthouse check.
Valid, fully semantic markup + correct outline; ARIA only where needed (first rule of ARIA); keyboard-operable; labels/landmarks/alt correct.
Unique title + meta description, Open Graph/Twitter cards, canonical, and schema.org JSON-LD structured data.
defer/async correct, resource hints where useful, lazy-loaded images, width/height set (no CLS); validated + a Lighthouse/a11y check run.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# A production-quality HTML document ## Goal Produce a polished, production-ready HTML page (a landing page or documentation page) that scores well on structure, accessibility, SEO, and performance — HTML-first (CSS/JS only as needed, and loaded correctly). Requirements: (1) fully SEMANTIC, valid markup with a correct outline and ARIA used ONLY where a native element won't do (respect the first rule of ARIA); (2) complete SEO/metadata — unique title + meta description, Open Graph/Twitter cards, <link rel=canonical>, and schema.org structured data via JSON-LD; (3) PERFORMANCE — scripts with defer/async as appropriate, resource hints (preload/preconnect) where useful, lazy-loaded off-screen images, and width/height set to avoid layout shift (CLS); (4) accessibility — keyboard operability, proper labels/landmarks, sufficient alt text. Document the choices and run it through the W3C validator + an accessibility/Lighthouse check. ## Acceptance criteria - [ ] Semantics & accessibility: Valid, fully semantic markup + correct outline; ARIA only where needed (first rule of ARIA); keyboard-operable; labels/landmarks/alt correct. - [ ] SEO & metadata: Unique title + meta description, Open Graph/Twitter cards, canonical, and schema.org JSON-LD structured data. - [ ] Performance: defer/async correct, resource hints where useful, lazy-loaded images, width/height set (no CLS); validated + a Lighthouse/a11y check run. ## Verification - [ ] Document installation and run commands. - [ ] Record automated checks and their exact commands. - [ ] Add representative output, screenshots, or a short demo where useful. - [ ] Confirm failure paths and known constraints. ## Decision log ### Decision title - Context: - Choice: - Alternatives considered: - Tradeoffs: ## Evidence - Link each rubric criterion to the file, test, or artifact that demonstrates it. ## Known limitations - List what is intentionally out of scope and what should be improved next.