SpaceXAI Grok 4.7 – News Weather Information

via xAI · Generated

  • AIMAC Debt 3.85
  • Cost $0.07
  • Total Violations 7
  • HTML Size 34 KB
  • Em Dashes 4

Screenshot

View SpaceXAI Grok 4.7 News Weather Information page View Live Page

Accessibility Issues Found

7 Serious

  • color-contrast serious 7 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <p class="kicker">Investigative · Port Meridian</p>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meridian Wire — Clear reporting. Precise forecasts.</title>
<meta name="description" content="Meridian Wire is an independent newsroom covering local investigations, national correspondents, sports, and live weather patterns for the Pacific corridor.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,520;9..144,680&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --ink: #122033;
  --ink-soft: #3d4c61;
  --paper: #f6f1e8;
  --paper-2: #fffdf9;
  --rule: #d9d0c2;
  --copper: #c2512a;
  --copper-dark: #9a3d1c;
  --tide: #1b6d6a;
  --tide-deep: #0f4543;
  --gold: #e4b15a;
  --shadow: 0 18px 40px rgba(18, 32, 51, 0.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  font-size: 17.5px;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.utility {
  background: var(--ink);
  color: #efe7da;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.utility .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; flex-wrap: wrap; }
.utility strong { color: var(--gold); font-weight: 700; }
header.mast {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 8px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { width: 58px; height: 58px; border-radius: 8px; }
.brand h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: 32px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.03em;
}
.brand p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.header-cta { display: flex; gap: 10px; align-items: center; }
button, .btn {
  font-family: inherit;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-solid { background: var(--copper); color: white; }
.btn-solid:hover { background: var(--copper-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-tide { background: var(--tide); color: white; }
.btn-tide:hover { background: var(--tide-deep); }
nav.primary { border-top: 1px solid var(--rule); }
nav.primary ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
nav.primary a {
  display: block;
  text-decoration: none;
  padding: 12px 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
}
nav.primary a:hover, nav.primary a.active { border-bottom-color: var(--copper); color: var(--copper-dark); }
.menu-toggle { display: none; }
.hero {
  display: grid;
  grid-template-columns: 1.55fr 0.9fr;
  gap: 28px;
  padding: 28px 0 10px;
}
.kicker {
  color: var(--copper);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 8px;
}
h2, h3 { font-family: Fraunces, Georgia, serif; letter-spacing: -0.03em; line-height: 1.15; }
.lead h2 { font-size: clamp(34px, 4vw, 52px); margin: 0 0 12px; }
.meta { color: var(--ink-soft); font-size: 14px; }
.hero-photo { border-radius: 16px; width: 100%; height: 420px; object-fit: cover; margin: 14px 0; }
.weather-card, .card, .story, .faq, aside .panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.weather-card { padding: 18px; }
.temp { font-family: Fraunces, Georgia, serif; font-size: 64px; line-height: 0.9; margin: 6px 0; }
.city-row, .action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  border: 1px solid var(--rule);
  background: #f3eee6;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
}
.chip.on { background: var(--ink); color: white; border-color: var(--ink); }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; padding-bottom: 48px; }
section { margin-top: 34px; }
section h2 { font-size: 34px; margin-bottom: 8px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 14px; }
.grid-3, .grid-2 { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1.2fr 0.8fr; }
.story { overflow: hidden; }
.story img { width: 100%; height: 180px; object-fit: cover; }
.story .pad, .card .pad { padding: 16px 16px 18px; }
.story h3 { margin: 0 0 8px; font-size: 22px; }
.story p, .prose p { margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
aside .panel { padding: 16px; margin-bottom: 16px; }
.most-read { list-style: none; padding: 0; margin: 0; }
.most-read li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.num { font-family: Fraunces, Georgia, serif; color: var(--copper); font-size: 22px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery img { height: 92px; width: 100%; object-fit: cover; border-radius: 8px; }
.radar-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center; }
canvas#radar { width: 100%; height: auto; background: #0c2a33; border-radius: 16px; }
.forecast-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.forecast-table th, .forecast-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.feature { background: #122033; color: #f6f1e8; border-radius: 16px; padding: 18px; min-height: 180px; }
.feature span { color: var(--gold); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quote { background: white; border-left: 4px solid var(--tide); padding: 16px; border-radius: 12px; }
.quote img { width: 52px; height: 52px; border-radius: 50%; }
.person { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.band {
  background: linear-gradient(120deg, #122033, #1b6d6a);
  color: white;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin: 28px 0;
}
.toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: var(--ink);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  display: none;
  z-index: 40;
}
footer {
  background: #0d1828;
  color: #e7dfd2;
  padding: 36px 0 18px;
  margin-top: 20px;
}
footer a { color: #e7dfd2; text-decoration: none; }
footer a:hover { color: var(--gold); }
.footgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 20px; }
footer h3 { margin-top: 0; }
.fine { border-top: 1px solid #2a3a50; margin-top: 22px; padding-top: 12px; font-size: 13px; color: #b7ad9f; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.followed { background: var(--tide) !important; color: white !important; border-color: var(--tide) !important; }
@media (max-width: 900px) {
  .hero, .layout, .grid-3, .grid-2, .radar-wrap, .feature-grid, .quotes, .footgrid, .band { grid-template-columns: 1fr; display: grid; }
  .band { display: grid; }
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  nav.primary { display: none; }
  nav.primary.open { display: block; }
  nav.primary ul { flex-direction: column; }
  .hero-photo { height: 240px; }
}
</style>
</head>
<body>
<div class="utility">
  <div class="wrap">
    <span id="edition">Morning edition</span>
    <span>Alert desk: <strong>River watch lifted for the lower Willamette</strong></span>
  </div>
</div>
<header class="mast">
  <div class="wrap brandrow">
    <a class="brand" href="#top">
      <img src="https://placehold.co/116x116/122033/e4b15a?text=MW&font=playfair+display" alt="Meridian Wire logo">
      <div>
        <h1>Meridian Wire</h1>
        <p>Clear reporting. Precise forecasts. The brief that starts the corridor.</p>
      </div>
    </a>
    <div class="header-cta">
      <a class="btn btn-ghost" href="#app">Download App</a>
      <a class="btn btn-solid" href="#newsletter">Follow Topic</a>
    </div>
    <button class="btn btn-ghost menu-toggle" id="menuBtn" type="button">Menu</button>
  </div>
  <nav class="primary" id="nav">
    <div class="wrap">
      <ul>
        <li><a class="active" href="#top">Home</a></li>
        <li><a href="#local">Local</a></li>
        <li><a href="#national">National</a></li>
        <li><a href="#sports">Sports</a></li>
        <li><a href="#weather">Weather</a></li>
        <li><a href="#business">Business</a></li>
        <li><a href="#opinion">Opinion</a></li>
      </ul>
    </div>
  </nav>
</header>
<main id="top">
  <div class="wrap hero">
    <article class="lead">
      <p class="kicker">Investigative · Port Meridian</p>
      <h2>Harbor commission quietly rewrote flood maps while the city sold waterfront lots.</h2>
      <p class="meta">By Lena Okonkwo, senior correspondent · Updated this morning · 8 min read</p>
      <img class="hero-photo" src="https://picsum.photos/1200/700?random=21" alt="Waterfront cranes and low clouds over Port Meridian">
      <div class="prose">
        <p>Documents obtained by Meridian Wire show the harbor commission revised elevation assumptions three times in eighteen months, each revision lowering the modeled storm surge just enough to keep a cluster of new parcels outside the highest-risk band. Engineers who reviewed the drafts for this newsroom say the changes tracked political calendars more closely than observed weather patterns along the estuary.</p>
        <p>The investigation, built from permit files, contractor emails, and interviews with two former mapping analysts, does not allege a single dramatic leak. It describes a slower failure: a public agency treating flood science as a negotiable appendix to a development prospectus. Residents on Pier Street, who watched king tides climb their garage doors last winter, were never told the official line had moved.</p>
        <div class="action-row">
          <button class="btn btn-solid" type="button" id="shareLead">Share Story</button>
          <button class="btn btn-ghost follow" type="button" data-topic="Harbor maps">Follow Topic</button>
        </div>
      </div>
    </article>
    <aside class="weather-card" id="weather-hero">
      <p class="kicker">Live desk</p>
      <h3 style="margin:0;">Corridor forecast</h3>
      <p class="meta" id="wxPlace">Port Meridian · marine layer holding</p>
      <div class="temp" id="wxTemp">54°</div>
      <p id="wxBlurb">Onshore flow keeps highs in the mid-50s. A weak front arrives after dusk with light rain, not a washout. Wind 8–12 mph from the southwest.</p>
      <div class="city-row" id="cityRow">
        <button class="chip on" type="button" data-city="port">Port Meridian</button>
        <button class="chip" type="button" data-city="ridge">Cedar Ridge</button>
        <button class="chip" type="button" data-city="bay">Silt Bay</button>
      </div>
      <a class="btn btn-tide" href="#weather" style="margin-top:14px;">Open weather radar</a>
    </aside>
  </div>
  <div class="wrap layout">
    <div>
      <section id="local">
        <div class="section-head">
          <div>
            <p class="kicker">Local coverage</p>
            <h2>The city, reported at street level.</h2>
          </div>
          <button class="btn btn-ghost follow" type="button" data-topic="Local">Follow Topic</button>
        </div>
        <div class="prose" style="margin-bottom:16px;">
          <p>Our local desk is built for patience. Correspondents stay on beats long enough to notice when a budget line migrates, when a school board phrase changes between drafts, and when a neighborhood’s weather patterns stop matching the official average. We publish the daily brief, then we stay with the story after the headline cools.</p>
          <p>This week’s file mixes civic process with lived weather: a transit pilot on the east bank, a library levy heading to a special election, and a public-health note on mold in rentals after two wet winters. None of it is spectacle. All of it decides how the week actually feels.</p>
        </div>
        <div class="grid-3">
          <article class="story">
            <img src="https://picsum.photos/640/420?random=31" alt="East bank streetcar platform at dusk">
            <div class="pad">
              <p class="kicker">Transit</p>
              <h3>East bank streetcar pilot keeps its Saturday schedule.</h3>
              <p>Ridership beat the city’s cautious model by eleven percent, mostly from hospital shifts. Planners will decide in June whether evening headways survive the summer budget.</p>
            </div>
          </article>
          <article class="story">
            <img src="https://picsum.photos/640/420?random=32" alt="Children leaving a brick library branch">
            <div class="pad">
              <p class="kicker">Civic</p>
              <h3>Library levy language is shorter, and more expensive.</h3>
              <p>The revised ballot title drops a branch renovation and adds Sunday hours at three neighborhood locations. Trustees say the trade was deliberate. Voters get the text Friday.</p>
            </div>
          </article>
          <article class="story">
            <img src="https://picsum.photos/640/420?random=33" alt="Wet apartment stairwell after rain">
            <div class="pad">
              <p class="kicker">Housing</p>
              <h3>Health bureau logs a second wet-winter spike in rental complaints.</h3>
              <p>Inspectors are prioritizing buildings below the new flood contour. Advocates want the complaint map published weekly, not buried in a quarterly PDF.</p>
            </div>
          </article>
        </div>
      </section>
      <section id="national">
        <div class="section-head">
          <div>
            <p class="kicker">National news</p>
            <h2>What the corridor needs from the capital.</h2>
          </div>
        </div>
        <div class="grid-2">
          <article class="card">
            <img src="https://picsum.photos/900/520?random=41" alt="Capitol dome under a pale sky" style="height:260px;width:100%;object-fit:cover;border-radius:16px 16px 0 0;">
            <div class="pad prose">
              <p class="kicker">Washington desk</p>
              <h3>Infrastructure negotiators revive a coastal resilience clause the House stripped in March.</h3>
              <p>Correspondent Maya Chen reports that Senate staff have reinserted language tying port grants to updated surge models. The clause is narrow—it covers publicly owned terminals, not private marinas—but it would force applicants to show how recent weather patterns changed their design storm.</p>
              <p>Meridian Wire’s national desk is small on purpose. We do not pretend to replace a wire service. We translate bills, hearings, and agency guidance into consequences for school roofs, ferry schedules, and the insurance market our readers actually use. When a correspondent files from the Capitol, the local desk edits for relevance before the piece moves.</p>
              <button class="btn btn-solid" type="button" id="shareNational">Share Story</button>
            </div>
          </article>
          <div>
            <article class="card" style="margin-bottom:16px;">
              <div class="pad">
                <p class="kicker">Courts</p>
                <h3 style="margin-top:0;">Appeals panel hears challenge to emergency broadcast rules.</h3>
                <p>Stations argue the new redundancy standard is sound policy and an unfunded mandate. A ruling is expected before hurricane season guidance is finalized.</p>
              </div>
            </article>
            <article class="card">
              <div class="pad">
                <p class="kicker">Science</p>
                <h3 style="margin-top:0;">Agencies align on a shared definition of “atmospheric river.”</h3>
                <p>The glossary change sounds clerical. Forecasters say it will finally let local warnings and national products describe the same storm with the same words.</p>
              </div>
            </article>
          </div>
        </div>
      </section>
      <section id="weather">
        <div class="section-head">
          <div>
            <p class="kicker">Weather forecasts</p>
            <h2>Radar, patterns, and a plan for the next 36 hours.</h2>
          </div>
        </div>
        <div class="card" style="padding:18px;">
          <div class="radar-wrap">
            <div>
              <canvas id="radar" width="520" height="520" aria-label="Stylized weather radar for the selected city"></canvas>
            </div>
            <div>
              <p>The radar view is a newsroom visualization, not a certified aviation product. It shows where our forecast desk expects echoes to organize over the next few hours, based on the morning model run and observed coastal flow. Select a city to retarget the sweep and refresh the narrative.</p>
              <p id="radarNote"><strong>Port Meridian:</strong> light stratiform rain developing offshore, drifting inland after 7 p.m. No thunderstorms indicated. River gauges remain below action stage.</p>
              <div class="city-row">
                <button class="chip on radar-city" type="button" data-city="port">Port Meridian</button>
                <button class="chip radar-city" type="button" data-city="ridge">Cedar Ridge</button>
                <button class="chip radar-city" type="button" data-city="bay">Silt Bay</button>
              </div>
              <table class="forecast-table" aria-label="Short range forecast">
                <thead><tr><th>Period</th><th>Sky</th><th>Temp</th><th>Wind</th></tr></thead>
                <tbody id="forecastBody"></tbody>
              </table>
              <div class="action-row">
                <button class="btn btn-tide follow" type="button" data-topic="Weather patterns">Follow Topic</button>
                <a class="btn btn-ghost" href="#app">Download App</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section id="sports">
        <div class="section-head">
          <div>
            <p class="kicker">Sports</p>
            <h2>Scores with context, not just noise.</h2>
          </div>
        </div>
        <div class="prose">
          <p>The sports desk covers the Harbor Gulls, university programs, and the high-school circuits that still fill Friday bleachers. We pair results with the reporting that explains them: training loads in a wet spring, a collective-bargaining footnote that changes roster math, and the transit delay that left half a visiting section on the platform.</p>
        </div>
        <div class="grid-3" style="margin-top:14px;">
          <article class="story">
            <img src="https://picsum.photos/640/420?random=51" alt="Soccer pitch under stadium lights">
            <div class="pad">
              <h3>Gulls hold a 1–1 draw after a late equalizer.</h3>
              <p>Midfielder Priya Santos scored in the 86th minute. Coach Ellis credited the press, not a set piece, and declined to discuss the rumored loan.</p>
            </div>
          </article>
          <article class="story">
            <img src="https://picsum.photos/640/420?random=52" alt="High school track in morning fog">
            <div class="pad">
              <h3>League meet moves indoors if wind holds above 20.</h3>
              <p>Officials will decide at noon using the same anemometer the weather desk publishes. Athletes were told to pack both spike bags.</p>
            </div>
          </article>
          <article class="story">
            <img src="https://picsum.photos/640/420?random=53" alt="Rowing shells on a calm river">
            <div class="pad">
              <h3>University crew shifts practice upriver during the tide window.</h3>
              <p>Coaches are treating debris after last week’s rain as a safety issue, not a scheduling inconvenience. The regatta remains on.</p>
            </div>
          </article>
        </div>
      </section>
      <section id="business">
        <p class="kicker">Desks</p>
        <h2>How the newsroom is organized.</h2>
        <div class="feature-grid">
          <div class="feature"><span>01</span><h3>Investigative</h3><p>Records, data, and the slow stories that do not fit a daily slot.</p></div>
          <div class="feature"><span>02</span><h3>Correspondents</h3><p>A Washington pair and a regional roamer who files from county seats.</p></div>
          <div class="feature"><span>03</span><h3>Weather</h3><p>Forecasts written by people who also read the river gauges.</p></div>
          <div class="feature"><span>04</span><h3>Audience</h3><p>Briefings, alerts, and an app that does not bury the lede.</p></div>
        </div>
      </section>
      <section>
        <p class="kicker">From the reading public</p>
        <h2>Why people keep the brief.</h2>
        <div class="quotes">
          <article class="quote">
            <p>“I stopped refreshing three apps. Meridian Wire tells me if the bridge is open and whether the storm is actually ours.”</p>
            <div class="person">
              <img src="https://i.pravatar.cc/80?u=reader-adel" alt="">
              <div><strong>Adel Rahman</strong><br><span class="meta">Ferry dispatcher</span></div>
            </div>
          </article>
          <article class="quote">
            <p>“The harbor map story named the documents. That is the standard I want from a local correspondent.”</p>
            <div class="person">
              <img src="https://i.pravatar.cc/80?u=reader-june" alt="">
              <div><strong>June Pell</strong><br><span class="meta">Pier Street resident</span></div>
            </div>
          </article>
          <article class="quote">
            <p>“Weather patterns explained without panic. My clinic uses the morning note to staff the walk-in shift.”</p>
            <div class="person">
              <img src="https://i.pravatar.cc/80?u=reader-omar" alt="">
              <div><strong>Omar Velasquez</strong><br><span class="meta">Clinic administrator</span></div>
            </div>
          </article>
        </div>
      </section>
      <section id="opinion" class="faq card" style="padding:8px 18px 12px;">
        <p class="kicker">Reader desk</p>
        <h2>Questions we hear every week</h2>
        <details open>
          <summary>How do you separate news from opinion?</summary>
          <p>Reported pieces live on the local, national, sports, and weather desks. Opinion is labeled, written by named contributors, and never mixed into a correspondent’s byline. Corrections run at the top of the story, not in a footer nobody sees.</p>
        </details>
        <details>
          <summary>Where do forecasts come from?</summary>
          <p>Our meteorologist starts with public model guidance and nearby observations, then adjusts for terrain the national grids still smooth over—especially the Cedar Ridge gap and the Silt Bay marine layer. We say when confidence is low.</p>
        </details>
        <details>
          <summary>Can I follow a single topic?</summary>
          <p>Yes. Follow Topic buttons on this page mirror the app. You can track harbor investigations, prep sports, or weather patterns without inheriting every alert the newsroom sends.</p>
        </details>
        <details>
          <summary>How do I share a story with a newsroom tip?</summary>
          <p>Use Share Story for readers, or write the investigations desk directly. We do not require tips to be exclusive, and we do not publish documents we cannot authenticate.</p>
        </details>
      </section>
      <section class="band" id="app">
        <div>
          <p class="kicker" style="color:#e4b15a;">Meridian Wire app</p>
          <h2 style="margin:0 0 8px;">The morning brief, the radar, and the story you meant to finish.</h2>
          <p>Offline reading for the ferry, push alerts you can actually tune, and a weather desk that respects quiet hours. No account is required to read the homepage.</p>
        </div>
        <a class="btn btn-solid" href="#newsletter">Download App</a>
      </section>
      <section id="newsletter" class="card" style="padding:18px;">
        <h2>Get the 6 a.m. brief</h2>
        <p>One email. The lead, the weather patterns that matter today, and a sports line if something actually changed overnight. Unsubscribe in one click.</p>
        <form id="briefForm" style="display:flex;gap:8px;flex-wrap:wrap;">
          <label for="email" class="meta" style="position:absolute;left:-999px;">Email</label>
          <input id="email" type="email" required placeholder="you@example.com" style="flex:1;min-width:220px;padding:12px 14px;border-radius:999px;border:1px solid var(--rule);font:inherit;">
          <button class="btn btn-solid" type="submit">Follow Topic</button>
        </form>
      </section>
    </div>
    <aside>
      <div class="panel">
        <h3>Most read</h3>
        <ol class="most-read">
          <li><span class="num">1</span><span>Harbor maps rewritten before the lot sale</span></li>
          <li><span class="num">2</span><span>Why the marine layer stalled three mornings running</span></li>
          <li><span class="num">3</span><span>Gulls draw, and the loan rumor that will not die</span></li>
          <li><span class="num">4</span><span>Library levy: what Sunday hours actually cost</span></li>
          <li><span class="num">5</span><span>A shared definition for atmospheric rivers</span></li>
        </ol>
      </div>
      <div class="panel">
        <h3>Photo galleries</h3>
        <div class="gallery">
          <img src="https://picsum.photos/300/200?random=61" alt="Fog over docks">
          <img src="https://picsum.photos/300/200?random=62" alt="Newsroom editing bay">
          <img src="https://picsum.photos/300/200?random=63" alt="High school stands">
          <img src="https://picsum.photos/300/200?random=64" alt="Rain on a bus window">
        </div>
        <p class="meta">From the weekend package: tide, town, and the long lens.</p>
      </div>
      <div class="panel">
        <h3>Upcoming events</h3>
        <p><strong>Thu · Flood map hearing</strong><br>City hall, 6 p.m. Our correspondent will live-update the brief.</p>
        <p><strong>Sat · Cedar Ridge forecast walk</strong><br>Meteorologist Amina Shah explains gap winds from the overlook. Free, first come.</p>
        <p><strong>Sun · Gulls vs. Northline</strong><br>Preview publishes at 9 a.m. with injury notes and the weather window.</p>
        <button class="btn btn-ghost follow" type="button" data-topic="Events">Follow Topic</button>
      </div>
      <div class="panel">
        <h3>On the desk today</h3>
        <div class="person">
          <img src="https://i.pravatar.cc/80?u=lena-okonkwo" alt="">
          <div><strong>Lena Okonkwo</strong><br><span class="meta">Investigative correspondent</span></div>
        </div>
        <p>Lena has covered ports and public records for nine years. She edits nothing she reports, and she publishes her document list with every investigation.</p>
      </div>
    </aside>
  </div>
</main>
<footer>
  <div class="wrap footgrid">
    <div>
      <h3>Meridian Wire</h3>
      <p>Independent news, weather, and information for the Pacific corridor. We practice accountable reporting and say so when we are wrong.</p>
      <p>418 Harbor Street, Suite 1200<br>Port Meridian, OR 97201<br>(503) 555-0148<br>newsroom@meridianwire.example</p>
    </div>
    <div>
      <h3>Coverage</h3>
      <p><a href="#local">Local</a><br><a href="#national">National</a><br><a href="#sports">Sports</a><br><a href="#weather">Weather</a><br><a href="#business">Business</a></p>
    </div>
    <div>
      <h3>Standards</h3>
      <p><a href="#opinion">Privacy</a><br><a href="#opinion">Terms</a><br><a href="#opinion">Corrections</a><br><a href="#opinion">Ethics</a></p>
    </div>
    <div>
      <h3>Social</h3>
      <p><a href="#top">Wire Brief</a><br><a href="#top">Photo desk</a><br><a href="#top">Video notes</a><br><a href="#newsletter">Newsletters</a></p>
    </div>
  </div>
  <div class="wrap fine">
    <span>© <span id="year">2026</span> Meridian Wire Media. All rights reserved.</span>
    <span>Printed spirit, digital deadline. Port Meridian.</span>
  </div>
</footer>
<div class="toast" id="toast" role="status"></div>
<script>
const cities = {
  port: {
    name: "Port Meridian",
    temp: "54°",
    blurb: "Onshore flow keeps highs in the mid-50s. A weak front arrives after dusk with light rain, not a washout. Wind 8–12 mph from the southwest.",
    note: "light stratiform rain developing offshore, drifting inland after 7 p.m. No thunderstorms indicated. River gauges remain below action stage.",
    rows: [["This afternoon","Cloudy","54°","SW 10"],["Tonight","Light rain","47°","S 12"],["Thursday","Showers early","56°","W 9"]],
    hue: 185
  },
  ridge: {
    name: "Cedar Ridge",
    temp: "49°",
    blurb: "Gap winds pick up after 3 p.m. Skies stay broken, with a colder pocket in the draws. Weather patterns here run two hours ahead of the harbor.",
    note: "echoes stay scattered along the ridge spine. Gusts may touch 25 mph on exposed saddles. No freezing level concern below 3,000 feet.",
    rows: [["This afternoon","Partly cloudy","49°","W 18"],["Tonight","Clearing","38°","NW 14"],["Thursday","Sunny breaks","52°","W 12"]],
    hue: 200
  },
  bay: {
    name: "Silt Bay",
    temp: "57°",
    blurb: "Marine layer burns back by late morning, then rebuilds near the bar. A correspondent on the jetty reports visibility over two miles and a steady chop.",
    note: "a compact rain band sits west of the bar and may clip the outer bay near midnight. Inner harbor stays mostly dry until then.",
    rows: [["This afternoon","Sun breaks","57°","W 11"],["Tonight","Increasing clouds","50°","SW 13"],["Thursday","Chance showers","55°","S 15"]],
    hue: 168
  }
};
let active = "port";
let angle = 0;
const canvas = document.getElementById("radar");
const ctx = canvas.getContext("2d");
function paintRadar() {
  const { hue } = cities[active];
  const w = canvas.width, h = canvas.height, cx = w / 2, cy = h / 2;
  ctx.clearRect(0, 0, w, h);
  const g = ctx.createRadialGradient(cx, cy, 40, cx, cy, 250);
  g.addColorStop(0, `hsl(${hue} 40% 18%)`);
  g.addColorStop(1, "#071820");
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = "rgba(228,177,90,0.35)";
  ctx.lineWidth = 1;
  for (let r = 60; r <= 230; r += 50) {
    ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
  }
  ctx.beginPath(); ctx.moveTo(cx, 20); ctx.lineTo(cx, h - 20); ctx.moveTo(20, cy); ctx.lineTo(w - 20, cy); ctx.stroke();
  const blobs = active === "ridge" ? [[0.2, -0.35, 46],[0.05, 0.15, 28]] : active === "bay" ? [[-0.45, 0.05, 54],[-0.2, 0.22, 30]] : [[-0.15, -0.4, 60],[0.25, -0.1, 36]];
  blobs.forEach(([x, y, s], i) => {
    ctx.fillStyle = `hsla(${hue} 70% ${58 + i * 8}% / 0.55)`;
    ctx.beginPath();
    ctx.ellipse(cx + x * 220, cy + y * 220, s, s * 0.72, angle / 8, 0, Math.PI * 2);
    ctx.fill();
  });
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(angle);
  const sweep = ctx.createLinearGradient(0, 0, 220, 0);
  sweep.addColorStop(0, "rgba(228,177,90,0)");
  sweep.addColorStop(1, "rgba(228,177,90,0.55)");
  ctx.fillStyle = sweep;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.arc(0, 0, 230, -0.35, 0.05);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
  angle += 0.03;
  requestAnimationFrame(paintRadar);
}
function renderCity(key, source) {
  active = key;
  const c = cities[key];
  document.getElementById("wxPlace").textContent = c.name + " · desk update";
  document.getElementById("wxTemp").textContent = c.temp;
  document.getElementById("wxBlurb").textContent = c.blurb;
  document.getElementById("radarNote").innerHTML = "<strong>" + c.name + ":</strong> " + c.note;
  document.getElementById("forecastBody").innerHTML = c.rows.map(r => "<tr><td>" + r[0] + "</td><td>" + r[1] + "</td><td>" + r[2] + "</td><td>" + r[3] + "</td></tr>").join("");
  document.querySelectorAll(source).forEach(btn => btn.classList.toggle("on", btn.dataset.city === key));
}
document.getElementById("cityRow").addEventListener("click", e => {
  if (e.target.dataset.city) {
    renderCity(e.target.dataset.city, "#cityRow .chip");
    document.querySelectorAll(".radar-city").forEach(b => b.classList.toggle("on", b.dataset.city === e.target.dataset.city));
  }
});
document.querySelectorAll(".radar-city").forEach(btn => btn.addEventListener("click", () => {
  renderCity(btn.dataset.city, ".radar-city");
  document.querySelectorAll("#cityRow .chip").forEach(b => b.classList.toggle("on", b.dataset.city === btn.dataset.city));
}));
function toast(msg) {
  const t = document.getElementById("toast");
  t.textContent = msg;
  t.style.display = "block";
  clearTimeout(toast._t);
  toast._t = setTimeout(() => { t.style.display = "none"; }, 2200);
}
document.getElementById("shareLead").addEventListener("click", () => toast("Story link copied to your clipboard note."));
document.getElementById("shareNational").addEventListener("click", () => toast("National desk story ready to share."));
document.querySelectorAll(".follow").forEach(btn => btn.addEventListener("click", () => {
  btn.classList.toggle("followed");
  const on = btn.classList.contains("followed");
  toast((on ? "Following " : "Unfollowed ") + btn.dataset.topic);
}));
document.getElementById("briefForm").addEventListener("submit", e => {
  e.preventDefault();
  toast("You are on the 6 a.m. brief.");
  e.target.reset();
});
document.getElementById("menuBtn").addEventListener("click", () => document.getElementById("nav").classList.toggle("open"));
const now = new Date();
document.getElementById("year").textContent = now.getFullYear();
document.getElementById("edition").textContent = now.toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" }) + " · Morning edition";
renderCity("port", "#cityRow .chip");
paintRadar();
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:04:19.611Z",
  "url": "https://benchmark.aimac.invalid/1d7c7238c04512f741a4b6928935389867cf13ec6bff86563957dcabc78dae0f.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<canvas id=\"radar\" width=\"520\" height=\"520\" aria-label=\"Stylized weather radar for the selected city\"></canvas>",
          "target": [
            "#radar"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<canvas id=\"radar\" width=\"520\" height=\"520\" aria-label=\"Stylized weather radar for the selected city\"></canvas>",
          "target": [
            "#radar"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<canvas id=\"radar\" width=\"520\" height=\"520\" aria-label=\"Stylized weather radar for the selected city\"></canvas>",
          "target": [
            "#radar"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<canvas id=\"radar\" width=\"520\" height=\"520\" aria-label=\"Stylized weather radar for the selected city\"></canvas>",
          "target": [
            "#radar"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<canvas id=\"radar\" width=\"520\" height=\"520\" aria-label=\"Stylized weather radar for the selected city\"></canvas>",
          "target": [
            "#radar"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<h3 style=\"margin:0;\">Corridor forecast</h3>",
          "target": [
            "#weather-hero > h3"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-solid\" type=\"button\" id=\"shareLead\">Share Story</button>",
          "target": [
            "#shareLead"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Meridian Wire</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Harbor commission quietly rewrote flood maps while the city sold waterfront lots.</h2>",
                  "target": [
                    ".lead > h2"
                  ]
                },
                {
                  "html": "<h3 style=\"margin:0;\">Corridor forecast</h3>",
                  "target": [
                    "#weather-hero > h3"
                  ]
                },
                {
                  "html": "<h2>The city, reported at street level.</h2>",
                  "target": [
                    "#local > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>East bank streetcar pilot keeps its Saturday schedule.</h3>",
                  "target": [
                    "#local > .grid-3 > .story:nth-child(1) > .pad > h3"
                  ]
                },
                {
                  "html": "<h3>Library levy language is shorter, and more expensive.</h3>",
                  "target": [
                    "#local > .grid-3 > .story:nth-child(2) > .pad > h3"
                  ]
                },
                {
                  "html": "<h3>Health bureau logs a second wet-winter spike in rental complaints.</h3>",
                  "target": [
                    "#local > .grid-3 > .story:nth-child(3) > .pad > h3"
                  ]
                },
                {
                  "html": "<h2>What the corridor needs from the capital.</h2>",
                  "target": [
                    "#national > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>Infrastructure negotiators revive a coastal resilience clause the House stripped in March.</h3>",
                  "target": [
                    ".prose.pad > h3"
                  ]
                },
                {
                  "html": "<h3 style=\"margin-top:0;\">Appeals panel hears challenge to emergency broadcast rules.</h3>",
                  "target": [
                    ".grid-2 > div > .card:nth-child(1) > .pad > h3"
                  ]
                },
                {
                  "html": "<h3 style=\"margin-top:0;\">Agencies align on a shared definition of \u201catmospheric river.\u201d</h3>",
                  "target": [
                    ".card:nth-child(2) > .pad > h3"
                  ]
                },
                {
                  "html": "<h2>Radar, patterns, and a plan for the next 36 hours.</h2>",
                  "target": [
                    "#weather > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h2>Scores with context, not just noise.</h2>",
                  "target": [
                    "#sports > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>Gulls hold a 1\u20131 draw after a late equalizer.</h3>",
                  "target": [
                    "#sports > .grid-3 > .story:nth-child(1) > .pad > h3"
                  ]
                },
                {
                  "html": "<h3>League meet moves indoors if wind holds above 20.</h3>",
                  "target": [
                    "#sports > .grid-3 > .story:nth-child(2) > .pad > h3"
                  ]
                },
                {
                  "html": "<h3>University crew shifts practice upriver during the tide window.</h3>",
                  "target": [
                    "#sports > .grid-3 > .story:nth-child(3) > .pad > h3"
                  ]
                },
                {
                  "html": "<h2>How the newsroom is organized.</h2>",
                  "target": [
                    "#business > h2"
                  ]
                },
                {
                  "html": "<h3>Investigative</h3>",
                  "target": [
                    ".feature:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Correspondents</h3>",
                  "target": [
                    ".feature:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Weather</h3>",
                  "target": [
                    ".feature:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Audience</h3>",
                  "target": [
                    ".feature:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2>Why people keep the brief.</h2>",
                  "target": [
                    "section:nth-child(6) > h2"
                  ]
                },
                {
                  "html": "<h2>Questions we hear every week</h2>",
                  "target": [
                    "#opinion > h2"
                  ]
                },
                {
                  "html": "<h2 style=\"margin:0 0 8px;\">The morning brief, the radar, and the story you meant to finish.</h2>",
                  "target": [
                    "#app > div > h2"
                  ]
                },
                {
                  "html": "<h2>Get the 6 a.m. brief</h2>",
                  "target": [
                    "#newsletter > h2"
                  ]
                },
                {
                  "html": "<h3>Most read</h3>",
                  "target": [
                    ".panel:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Photo galleries</h3>",
                  "target": [
                    ".panel:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Upcoming events</h3>",
                  "target": [
                    ".panel:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>On the desk today</h3>",
                  "target": [
                    ".panel:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Meridian Wire</h3>",
                  "target": [
                    ".footgrid > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Coverage</h3>",
                  "target": [
                    ".footgrid > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Standards</h3>",
                  "target": [
                    ".footgrid > div:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Social</h3>",
                  "target": [
                    ".footgrid > div:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#efe7da",
                "bgColor": "#122033",
                "contrastRatio": 13.36,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 13.36"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span id=\"edition\">Thursday, November 12 \u00b7 Morning edition</span>",
          "target": [
            "#edition"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "email",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<input id=\"email\" type=\"email\" required=\"\" placeholder=\"you@example.com\" style=\"flex:1;min-width:220px;padding:12px 14px;border-radius:999px;border:1px solid var(--rule);font:inherit;\">",
          "target": [
            "#email"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"email\" class=\"meta\" style=\"position:absolute;left:-999px;\">Email</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"email\" type=\"email\" required=\"\" placeholder=\"you@example.com\" style=\"flex:1;min-width:220px;padding:12px 14px;border-radius:999px;border:1px solid var(--rule);font:inherit;\">",
          "target": [
            "#email"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/116x116/122033/e4b15a?text=MW&amp;font=playfair+display\" alt=\"Meridian Wire logo\">",
          "target": [
            "img[alt=\"Meridian Wire logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"email\" class=\"meta\" style=\"position:absolute;left:-999px;\">Email</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"email\" type=\"email\" required=\"\" placeholder=\"you@example.com\" style=\"flex:1;min-width:220px;padding:12px 14px;border-radius:999px;border:1px solid var(--rule);font:inherit;\">",
          "target": [
            "#email"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<aside class=\"weather-card\" id=\"weather-hero\">",
                  "target": [
                    "#weather-hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<aside class=\"weather-card\" id=\"weather-hero\">",
                  "target": [
                    "#weather-hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"btn btn-tide\" href=\"#weather\" style=\"margin-top:14px;\">Open weather radar</a>",
          "target": [
            ".btn-tide.btn[href$=\"#weather\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            "ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a class=\"active\" href=\"#top\">Home</a></li>",
          "target": [
            "ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/116x116/122033/e4b15a?text=MW&amp;font=playfair+display\" alt=\"Meridian Wire logo\">",
          "target": [
            "img[alt=\"Meridian Wire logo\"]"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>How do you separate news from opinion?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 458.5,
                "height": 59.1
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (458.5px by 59.1px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "td-headers-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The headers attribute is exclusively used to refer to other cells in the table"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<table class=\"forecast-table\" aria-label=\"Short range forecast\">",
          "target": [
            "table"
          ]
        }
      ]
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "th-has-data-cells",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "All table header cells refer to data cells"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<table class=\"forecast-table\" aria-label=\"Short range forecast\">",
          "target": [
            "table"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"band\" id=\"app\">",
                  "target": [
                    "#app"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\" style=\"color:#e4b15a;\">Meridian Wire app</p>",
          "target": [
            "#app > div > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">Investigative \u00b7 Port Meridian</p>",
          "target": [
            ".lead > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">Local coverage</p>",
          "target": [
            "#local > .section-head > div > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">National news</p>",
          "target": [
            "#national > .section-head > div > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">Weather forecasts</p>",
          "target": [
            "#weather > .section-head > div > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">Sports</p>",
          "target": [
            "#sports > .section-head > div > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">Desks</p>",
          "target": [
            "#business > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c2512a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 4.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"kicker\">From the reading public</p>",
          "target": [
            "section:nth-child(6) > .kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #c2512a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 6838
      },
      {
        "y": 576,
        "height": 6838
      },
      {
        "y": 1152,
        "height": 6838
      },
      {
        "y": 1728,
        "height": 6838
      },
      {
        "y": 2304,
        "height": 6838
      },
      {
        "y": 2880,
        "height": 6838
      },
      {
        "y": 3456,
        "height": 6838
      },
      {
        "y": 4032,
        "height": 6838
      },
      {
        "y": 4608,
        "height": 6838
      },
      {
        "y": 5184,
        "height": 6838
      },
      {
        "y": 5760,
        "height": 6838
      },
      {
        "y": 6118,
        "height": 6838
      }
    ],
    "scans": 13,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "News/Weather/Information" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "News/Weather/Information"
- Description: News outlets, weather forecasts, breaking news, and general information resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "News/Weather/Information" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Local", "National", "Sports".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "News/Weather/Information" category. Consider themes similar to: "Local Coverage", "Weather Forecasts", "National News".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "investigative", "correspondent", "weather patterns".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Follow Topic", "Download App", "Share Story".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "News/Weather/Information" sector. Ideas similar but not limited to: "weather radar".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "photo galleries", "most read", "upcoming events".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.