🔴 Must-fix
- Duplicate ID breaks skip link
You have two id="main-content" elements (the <main> and an inner <div>). IDs must be unique; the duplicate can break skip-to-content and in-page anchors.
<!-- keep this -->
<main id="main-content" class="default-layout">
<!-- change the inner one to a class or different id -->
<div class="wide-layout"> <!-- was id="main-content" -->
- Empty script tag (build artifact)
This creates a useless request and may confuse CSP preload scanners.
<!-- remove this -->
<script async src=" "></script>
- Banner images have
alt="undefined"
Provide meaningful alt (or empty with aria-hidden="true" if decorative).
<img src="/img/tCQFuGROrC-16.png" class="usa-banner__header-flag" alt="U.S. flag">
<img src="/img/ZOTjv0I5H_-64.svg" class="usa-banner__icon" alt="“.gov” icon">
<img src="/img/7jkBW0JTZO-64.svg" class="usa-banner__icon" alt="HTTPS lock icon">
- External links with
target="_blank"needrel
Prevents tab-nabbing and drops window.opener.
<a href="https://join.tts.gsa.gov/" class="usa-link--external" target="_blank" rel="noopener noreferrer">Join our team</a>
<!-- do this for all target="_blank" links (status page, GSA, USA.gov, etc.) -->
- “Home” skip/landmark clarity
Add aria-current="page" to the current entry (logo link works fine here).
<a href="/" title="Home" aria-label="Home" aria-current="page">
<img src="/img/SAJKr93fDF-233.svg" alt="cloud.gov">
</a>
🟠 Accessibility polish (WCAG/508)
- Mobile menu close button should announce purpose
The button only shows an image with alt="close". Prefer an explicit label on the button and hide the decorative img.
<button class="usa-nav__close" aria-label="Close menu">
<img src="/img/xPu02brD0d-24.svg" alt="" aria-hidden="true">
</button>
- Use
idinstead ofnamefor in-page links
<a name="Product"> is obsolete; switch to id.
<h2 id="Product">Why cloud.gov?</h2>
- Ensure all icon-only elements are silent
For purely decorative SVG/icon images, add alt="" aria-hidden="true" (you already do this in many places—finish the set).
⚡ Performance / UX
- Add explicit width/height to images to reduce CLS
Particularly for logos and hero imagery.
<img src="/img/LyEqftKWaW-320.svg" alt="EPA Logo" width="160" height="160" loading="lazy">
- Sprite duplication = extra bytes + potential ID collisions
There are two big inline <svg><symbol>…</symbol></svg> blocks with overlapping IDs. Consolidate into a single sprite (or load once as an external file) to prevent duplicate ID definitions and trim HTML weight.
- Preconnect for search autocomplete
You already use USA Search; add preconnect to speed first request.
<link rel="preconnect" href="https://search.usa.gov" crossorigin>
- Favicon type mismatch
You point to cg-favicon.ico with type="image/png". Use the correct type.
<link rel="icon" href="/img/favicon/cg-favicon.ico" type="image/x-icon">
🔐 Analytics / Privacy
- (If applicable) Anonymize IP in analytics
If you later add GA or similar, set IP anonymization and preconnect. (You don’t load GA here—this is just a reminder.)
✅ Minor content/semantics
- Improve search form label text
Current label is “Search small”. Make it user-meaningful and programmatically associated.
<label class="usa-sr-only" for="extended-search-field-small">Search cloud.gov</label>
- Button vs link for CTAs
Where navigation is the only action (e.g., “Try cloud.gov for free”), links with button styling are ideal—looks like you already do this correctly (<a class="usa-button …">).
Quick checklist you can run through
- Unique IDs (resolved the duplicate
main-content) - Remove empty
<script>tag - Banner image alts fixed (no “undefined”)
- All
target="_blank"links haverel="noopener noreferrer" - One SVG sprite reference (no duplicates)
- Width/height on imgs to prevent CLS
- Search label says “Search cloud.gov”
- Close button has
aria-label
If you want, I can provide a minimal patch (diff) touching only these lines to keep churn low.