Top 8 quick wins (most impact first)
- #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; }
}
- #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_navcan be<nav aria-label="Breadcrumb">…</nav>with proper list semantics.
- #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>
- #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
altconcise and meaningful (you’ve done this well already 👍).
- #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
deferto 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.
- #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.)
- #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/">
- #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 consideraria-labelfor 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/heighton 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.