Here’s a tight QA pass for this Digital.gov resource page. I’ve called out concrete, high-impact fixes first, then quick wins. All snippets are drop-in safe.

🔴 Must-fix (validity / a11y)

  1. Invalid HTML: nested <body> tags inside the page content

Multiple <body> tags appear within the article (e.g., around the “OMB M-16-21” ring and the accordion sections). This breaks document structure, can confuse assistive tech and JS, and may cause styling/JS bugs.

Fix: replace those stray <body> wrappers with semantic containers and remove the stray </body> closes.

<!-- BAD (current) -->
<body><article class="dg-ring" aria-labelledby="rh-omb-m-16-21">…</article></body>
…
<body><div class="usa-accordion accordion card-policy">…</div></body>

<!-- GOOD -->
<section class="dg-ring" aria-labelledby="rh-omb-m-16-21">…</section>
…
<section class="usa-accordion accordion card-policy">…</section>
  1. Mobile menu “close” button accessible name

The close button relies on an <img alt="close">. Better to label the button and hide the decorative image.

<button class="usa-nav__close" aria-label="Close menu">
  <img src="/themes/custom/digital_gov/static/uswds/img/usa-icons/close.svg" alt="" aria-hidden="true">
</button>
  1. Search input’s programmatic label is unclear

for="query" label text is “Search small”. Give users a meaningful name.

<label class="usa-sr-only" for="query">Search Digital.gov</label>

🟡 Accessibility & UX polish

  1. Reduce duplicate skip links (optional)

You currently render two “Skip to main content” links (one global and one USWDS). It’s valid, but you can keep one for simplicity—both target #main-content, which is great.

  1. Decorative images should be silent, and informative images should have alt

You already use alt="" aria-hidden="true" correctly on many icons. Keep that pattern consistent. Also, these meta fields have empty alt text—fill them with a short description (used by some platforms/readers):

<meta property="og:image:alt" content="Digital.gov social card">
<meta name="twitter:image:alt" content="Digital.gov social card">
  1. Remove redundant role="img" on <img>

Plain <img> already exposes role=img; keeping alt="" aria-hidden="true" is enough.

<!-- Prefer -->
<img class="usa-banner__icon usa-media-block__img" src="…/icon-dot-gov.svg" alt="" aria-hidden="true">

⚡ Performance / stability

  1. Prevent ID/fragment collision & keep icons consistent

You mix href and xlink:href for <use> references. Modern SVG uses href. Align on one form across the page to avoid odd browser differences (especially if the sprite is optimized later).

  1. Preconnect for on-site search

Small but measurable improvement for first query:

<link rel="preconnect" href="https://find.digitalgov.gov" crossorigin>
  1. Keep CLS low

You’ve set width/height for several assets (nice). Continue doing this for any additional inline images you add to this template to prevent layout shift.

🧭 Content / semantics

  1. Breadcrumb/title case consistency

Breadcrumb shows “Requirements For …” while the H1 uses sentence case (“for”). Not a blocker; consider aligning style.

  1. External link targets

If you later set target="_blank" on outbound links (e.g., social or GSA/USA.gov), be sure to include rel="noopener noreferrer".

Quick checklist

  • Replace nested <body> tags with <section>/<div> and remove stray </body>
  • Add aria-label="Close menu" to the close button; make the image decorative
  • Update search label to “Search Digital.gov”
  • Fill og:image:alt/twitter:image:alt text
  • Consistent <use href="…"> across SVG sprites
  • Add <link rel="preconnect" href="https://find.digitalgov.gov" crossorigin>
  • Ensure any future target="_blank" links use rel="noopener noreferrer"

If you want, I can provide a minimal unified diff touching only the offending <body> blocks and the two small accessibility tweaks.