Here’s a fast, dev-focused QA for the WhiteHouse.gov markup you shared. I’m calling out concrete bugs + highest-value fixes first, then perf/AX/SEO polish. All examples are drop-in safe.

🔴 Real bugs / correctness

  1. Duplicate attributes
    • First hero slide image has fetchpriority="high" twice. Remove one.
  2. Duplicate IDs used for ARIA
    • You reuse id="h-news" for multiple blocks (e.g., News and Videos tiles use aria-labelledby="h-news"). IDs must be unique or assistive tech gets confused.
    • Fix: make them unique (e.g., h-news, h-videos) and update aria-labelledby accordingly.
  3. Newsletter forms submit via GET
    • Two Mailchimp forms use method="get". That leaks emails in URLs/history/logs and can be cached.
    • Fix: use POST: <form action="https://wdg.us10.list-manage.com/subscribe/post?u=255057cc391ca0facb169b81c&id=004f59aa22&f_id=00b5c6e5f0" method="post" …>
    • Add <input type="hidden" name="u" …> etc. if your JS isn’t already packing it.
  4. JSON-LD caption typo
    • Rose Gardent in the ImageObject caption – fix spelling to “Rose Garden”.
  5. Redundant attributes
    • Many img have loading="lazy" twice. Clean to one.

🟠 Performance (LCP/CLS/JS)

  1. LCP image + priority
    • Good that the first slide image has fetchpriority="high". Also add decoding="async" and ensure it’s the actual above-the-fold image.
    • Consider an AVIF/WebP <picture> for the hero: <picture> <source type="image/avif" srcset="/wp-content/uploads/2025/04/liberation-day-potus.avif"> <source type="image/webp" srcset="/wp-content/uploads/2025/04/liberation-day-potus.webp"> <img src="/wp-content/uploads/2025/04/liberation-day-potus.jpg" width="3000" height="2000" fetchpriority="high" decoding="async" alt="…"> </picture>
  2. Contain-intrinsic-size ratio
    • You globally set: img:is([sizes="auto" i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px;} That’s a 2:1 box, but many images are 3:2 (3000×2000). Mismatched placeholders can cause subtle CLS.
    • Safer: use a more representative ratio (e.g., 3000px 2000px) or rely on per-image width/height/aspect-ratio where you have it.
  3. Font preloads
    • You preload many weights/styles. Keep only those used in above-the-fold (e.g., regular + display) to reduce connection pressure; defer the rest to font-display: swap (you already have swap 👍).
  4. Speculation Rules
    • Nice touch. Ensure you keep excluding subscription endpoints and any URLs with PII (switching newsletter to POST helps here).

🟡 Accessibility

  1. Autoplaying carousel
  • Swiper is configured with autoplay and pauseOnHover:false. Offer a visible Pause/Play control and honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce){ .swiper { --swiper-autoplay: 0 !important; } } Or disable autoplay when window.matchMedia('(prefers-reduced-motion: reduce)') matches.
  1. Live regions for form feedback
  • Add polite announcements so SR users hear success/error: <div class="wp-block-whitehouse-newsletter__form--responses" aria-live="polite" aria-atomic="true"> … </div>
  1. Link purpose
  • Several cover tiles use an empty anchor with aria-labelledby pointing to an <h2>—good pattern. Just ensure (see #2) those IDs are unique everywhere.

🔷 Security & privacy

  1. Content Security Policy (Report-Only)
  • With GTM, Mailchimp, Swiper, etc., add CSP-RO and iterate down: Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://chimpstatic.com; connect-src 'self' https://www.google-analytics.com https://wdg.us10.list-manage.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; font-src 'self' https:; frame-src https://www.googletagmanager.com; report-uri https://your-endpoint.example/csp;
  1. Preconnect for third-parties
  • You preconnect GTM/Analytics; also preconnect Mailchimp origins to reduce TTFB on first subscribe: <link rel="preconnect" href="https://chimpstatic.com" crossorigin> <link rel="preconnect" href="https://wdg.us10.list-manage.com" crossorigin>

🧼 Small polish

  1. Avoid duplicated loading and other attributes across images (clean output).
  2. Consistent decoding="async" on non-critical images (many already have it).
  3. Pause/loop semantics for motion
    If you keep autoplay carousels, expose Pause/Play button with aria-pressed for WCAG 2.2.2 compliance.
  4. Social cards
    OG/Twitter are solid. Consider also og:image:alt: <meta property="og:image:alt" content="The White House emblem with text The White House">

✅ What’s already great

  • Solid JSON-LD (WebSite, Organization).
  • Fonts self-hosted with font-display: swap.
  • prefetch speculation rules.
  • Skip-link script injected.
  • Many images include explicit width/height and modern sizes.

If you’d like, I can hand you a tiny patch set (one CSS file + two small template diffs) that: (a) fixes duplicate IDs, (b) flips newsletter method to POST with ARIA live regions, (c) tunes the intrinsic-size ratio and prefers-reduced-motion, and (d) cleans duplicate attributes—all without touching the visual design.