Here’s a fast, copy-paste–ready a11y/semantics/perf pass for the GSA OIG homepage. I focused on fixes that are high-impact, low-risk, and easy to slot into Drupal templates.

1) Navigation semantics (replace ARIA menu pattern)

Your primary and quicklinks navs use role="menu" / role="menuitem" with <span class="nolink"> triggers. That pattern is for application menus, not site navigation, and harms keyboard/AT behavior.

Do this instead:

  • Remove role="menu"/role="menuitem" everywhere in site nav.
  • Make parent triggers real links or real buttons.
<!-- BEFORE (simplified) -->
<ul class="menu sf-menu" role="menu" aria-label="Menu">
  <li role="none">
    <span class="menuparent nolink" role="menuitem" aria-haspopup="true" aria-expanded="false">Hotline</span>
    <ul role="menu">…</ul>
  </li>
</ul>

<!-- AFTER -->
<nav aria-label="Primary">
  <ul class="menu sf-menu">
    <li>
      <button class="menuparent"
              aria-haspopup="true" aria-expanded="false"
              aria-controls="nav-hotline-sub">
        Hotline
      </button>
      <ul id="nav-hotline-sub">…</ul>
    </li>
  </ul>
</nav>

If you prefer pure links, make “Hotline” a link to /hotline and keep the submenu for deep links; no ARIA menu roles needed.

2) Search forms need an explicit (sr-only) label

The front-page simple search uses only a placeholder.

<!-- BEFORE -->
<input placeholder="Search" class="form-control" id="edit-fulltext" name="fulltext">

<!-- AFTER -->
<label class="sr-only" for="edit-fulltext">Search the site</label>
<input placeholder="Search" class="form-control" id="edit-fulltext" name="fulltext">

(You already have proper labels on some other search boxes—mirror that here.)

3) Decorative vs informative images

Several images are decorative but have non-empty alt text (“Decorative”) or meaningful text plus conflicting signals.

  • For decorative images: alt="" aria-hidden="true".
  • For informative images: keep meaningful alt and do not add aria-hidden.
<!-- Carousel decorative tile -->
<img loading="lazy" src="/sites/.../Scam1_0.png"
     width="1080" height="1080" alt="" aria-hidden="true">

<!-- Logo: informative (keep) -->
<img class="logo-lockup" src="/themes/.../logoLockup-1.png"
     width="417" alt="GSA Office of Inspector General">

If you render two logo variants back-to-back, hide the redundant one from AT:

<img class="logo-lockup" src="/themes/.../logoLockup-1.png" alt="GSA Office of Inspector General">
<img class="logo-lockup" src="/themes/.../logoLockup-2.png" alt="" aria-hidden="true">

Inline SVG icons used purely as bullets/buttons should be aria-hidden="true" and have no empty <title> elements:

<svg class="icon icon-radio-checked" aria-hidden="true" focusable="false">…</svg>

4) Phone numbers should be clickable (and labeled)

Turn the hotline numbers into tel: links and add accessible names.

<p class="lato20">
  <svg class="icon icon-phone" aria-hidden="true" focusable="false">…</svg>
  <a href="tel:+12025011780" aria-label="Call the hotline at 202-501-1780">202-501-1780</a>
</p>
<p class="lato20">
  <svg class="icon icon-phone" aria-hidden="true" focusable="false">…</svg>
  <a href="tel:+18004245210" aria-label="Call the hotline at 800-424-5210">800-424-5210</a>
</p>

5) External links that open new tabs

For links with target="_blank", add rel="noopener noreferrer" for security/perf, and consider aria-label that announces “opens in a new tab”.

<a href="https://twitter.com/gsa_oig" target="_blank" rel="noopener noreferrer"
   aria-label="GSA OIG on X (opens in a new tab)">
  …
</a>

6) Use HTTPS for protocol-relative scripts/CDNs

Change //stackpath…, //cdnjs…, //platform.twitter.com… to https://… to avoid mixed-content issues.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script async src="https://platform.twitter.com/widgets.js"></script>

7) Preconnect hints for faster third-party loads

Small but safe perf wins:

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>

(You already async-load gtag.)

8) Social/OG metadata (improves sharing)

Add minimal Open Graph/Twitter tags:

<meta property="og:site_name" content="GSA Office of Inspector General">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.gsaig.gov/">
<meta property="og:title" content="GSA Office of Inspector General">
<meta property="og:description" content="Promoting economy, efficiency, and effectiveness in GSA programs and operations.">
<meta property="og:image" content="https://www.gsaig.gov/themes/custom/oig_bootstrap/assets/images/homepage/logoLockup-1.png">
<meta property="og:image:alt" content="GSA Office of Inspector General logo">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="GSA Office of Inspector General">
<meta name="twitter:description" content="Promoting economy, efficiency, and effectiveness in GSA programs and operations.">
<meta name="twitter:image" content="https://www.gsaig.gov/themes/custom/oig_bootstrap/assets/images/homepage/logoLockup-1.png">
<meta name="twitter:image:alt" content="GSA Office of Inspector General logo">

9) Headline semantics in slider

Carousel item titles are rendered inside <span>s. For AT and outline, use real headings (<h2>/<h3>) inside each slide.

<!-- BEFORE -->
<span class="field field--name-title …">Scam Alert: …</span>

<!-- AFTER -->
<h2 class="slide-title">Scam Alert: Beware of Fake Websites …</h2>

10) Prefer reduced motion for carousel

Respect user preference to reduce motion:

@media (prefers-reduced-motion: reduce) {
  .owl-carousel, .owl-stage, .owl-item {
    animation: none !important;
    transition: none !important;
  }
}

11) Title formatting

<title>GSA Office of Inspector General |</title> has a trailing bar. Either drop it or complete it:

<title>GSA Office of Inspector General</title>
<!-- or -->
<title>GSA Office of Inspector General | Home</title>

12) Minor HTML hygiene

  • Keep the skip link target once (you already have <a id="main-content">—good).
  • Ensure all images have width/height (you already do on most; keep doing that to reduce CLS).
  • Keep the Cloudflare email obfuscation, but consider adding aria-label="Email GSA OIG general contact" on the anchor for clarity.

Quick summary

  • ✅ Replace ARIA “application menu” roles in nav with native nav semantics.
  • ✅ Add sr-only label to the simple search.
  • ✅ Fix alt text: alt="" aria-hidden="true" for decorative; keep meaningful alts for informative.
  • ✅ Make hotline numbers tel: links.
  • ✅ Add rel="noopener noreferrer" to target="_blank" links.
  • ✅ Force HTTPS on protocol-relative assets.
  • ✅ Add preconnect hints for fonts/gtm.
  • ✅ Add OG/Twitter meta.
  • ✅ Use headings inside slides; add reduced-motion CSS.
  • ✅ Tidy the page <title>.

If you want, I can package these into a tiny Drupal theme patch (Twig snippets + library updates) targeting just the header/nav, search, carousel, and sidebar.