Nice page! Here’s a fast, high-impact tune-up for Read.gov based on the HTML you shared—prioritized for accessibility, SEO, performance, and a bit of security hygiene. Everything below is drop-in safe and backwards-compatible.


Top 8 quick wins (most impact first)

  1. #a11y — Make animations optional
    Add a global prefers-reduced-motion rule so the Nivo slider (and other transitions) calm down for users who request it:
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .nivoSlider, .nivoSlider * { animation: none !important; }
}
  1. #a11y — Improve landmark/navigation semantics
  • The left column is a nav—good! Give it a label so screen readers announce it clearly:
<div id="left_nav" role="navigation" aria-label="Read.gov section navigation">
  • Wrap the top links in a <nav aria-label="Library global actions">…</nav>.
  • The breadcrumb #crumb_nav can be <nav aria-label="Breadcrumb">…</nav> with proper list semantics.
  1. #a11y — Labels for all search fields
    You have a visible label on the header search; add an explicit label for the sidebar “Search this site” box (placeholders aren’t labels):
<form ... id="site_search">
  <label for="searchtext" class="visually-hidden">Search Read.gov</label>
  <input id="searchtext" name="q" type="text" ... />
</form>
  1. #a11y — Alt text polish
  • Replace decorative stand-ins like “Read.gov Image” with alt="" (decorative) or a real description if it conveys content.
  • Keep slider image alt concise and meaningful (you’ve done this well already 👍).
  1. #perf — Modernize and defer old JS
    The page loads Modernizr 1.5 and jQuery 1.7.1 (2011-era). If you can’t remove them yet:
  • Add defer to all non-blocking scripts so they don’t hold up rendering.
  • Wrap the slider init in DOMContentLoaded (works with defer):
<script defer src="scripts/jquery-1.7.1.min.js"></script>
<script defer src="js/jquery.nivo.slider.pack.js"></script>
<script defer>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.jQuery && jQuery.fn.nivoSlider) jQuery('#slider').nivoSlider();
  });
</script>

Longer-term: drop Modernizr (not needed in evergreen browsers) and upgrade jQuery or remove it entirely by swapping the slider for a native/CSS solution.

  1. #perf — Preconnect + preload the hero image
    Browsers don’t prioritize CSS background images. Preload the first slide image to improve LCP:
<link rel="preload" as="image" href="images/banner_meg-medina.jpg" imagesrcset="images/banner_meg-medina.jpg 1x" fetchpriority="high">

(Do the same for /cdn.loc.gov images if one is your primary hero.)

  1. #SEO — Basic head fixes
    Add a modern charset/viewport and canonical:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://www.read.gov/">
  1. #security — Safer external links
    For links that open in a new tab (e.g., SurveyMonkey, iTunesU), add:
<a href="https://www.surveymonkey.com/s/BTSW2013" target="_blank" rel="noopener noreferrer">Take the survey</a>

Additional accessibility refinements

  • Skip link target
    Your “skip navigation” points to #skip_menu. Make sure the target is focusable and the first meaningful content: <a id="skip" class="visually-hidden-focusable" href="#skip_menu">Skip to main content</a> ... <main id="main_body" role="main" tabindex="-1"> <span id="skip_menu"></span> ... </main>
  • Heading order
    Avoid starting the page with <h2>/<h3> for branding; keep a single <h1> (your “Read.gov – Explore New Worlds. Read.” is perfect), and demote other headings logically.
  • Buttons vs. links
    “GO” inputs are fine, but consider aria-label for clarity:
    <input class="button" type="submit" value="GO" aria-label="Search">

Additional SEO tweaks

  • Open Graph/Twitter (this helps when shared) <meta property="og:title" content="Read.gov | The Library of Congress"> <meta property="og:description" content="Discover classic books, author webcasts, literacy resources, and more from the Library of Congress."> <meta property="og:url" content="https://www.read.gov/"> <meta property="og:image" content="https://cdn.loc.gov/images/img-head/logo-loc.png"> <meta name="twitter:card" content="summary">
  • Structured data (Organization) <script type="application/ld+json"> { "@context":"https://schema.org", "@type":"WebSite", "name":"Read.gov", "url":"https://www.read.gov/", "publisher": { "@type": "Organization", "name": "Library of Congress", "url": "https://www.loc.gov/" }, "potentialAction": { "@type": "SearchAction", "target": "https://www.loc.gov/search/?q={search_term_string}", "query-input": "required name=search_term_string" } } </script>

Additional performance suggestions

  • Use HTTPS explicitly instead of // protocol-relative URLs (prevents mixed content warnings and is more cacheable).
  • CSS order: you’re loading the print stylesheet (lightbox.css) as print; good. Consider merging old theme CSS into a single minified file to cut requests.
  • Image dimensions: where possible, set width/height on inline images (you already do this in many places) to reduce layout shift.
  • Third-party: The Adobe DTM library appears to be the older Satellite snippet. If the LOC stack supports it, consider migrating to Adobe Launch or defer it behind consent.

Small content touches

  • Replace ambiguous “Read more”/“Watch the videos” with unique, descriptive link text when repeated on the same page (many are already descriptive—keep that pattern).
  • Give the “Read.gov Image” box real content or mark it decorative.

Tiny paste-ready snippet pack

Head additions

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://www.read.gov/">
<link rel="preconnect" href="https://cdn.loc.gov" crossorigin>
<link rel="preconnect" href="https://www.loc.gov">
<link rel="preload" as="image" href="images/banner_meg-medina.jpg" fetchpriority="high">

Safer outbound link

<a href="https://www.surveymonkey.com/s/BTSW2013" target="_blank" rel="noopener noreferrer">
  Take the survey<span> (external link)</span>
</a>

Defer scripts & DOMContentLoaded init

<script defer src="scripts/jquery-1.7.1.min.js"></script>
<script defer src="js/jquery.nivo.slider.pack.js"></script>
<script defer>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.jQuery && jQuery.fn.nivoSlider) jQuery('#slider').nivoSlider();
  });
</script>

If you want, I can produce a one-file diff (head + a11y attributes + script defers) that you can drop straight into this template.