OpenAI GPT 6.1 Sol Pro – News Weather Information

via OpenAI · Generated

  • AIMAC Debt 4.19
  • Cost $0.37
  • Total Violations 10
  • HTML Size 61 KB
  • Em Dashes 5

Screenshot

View OpenAI GPT 6.1 Sol Pro News Weather Information page View Live Page

Accessibility Issues Found

10 Serious

  • color-contrast serious 10 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <div class="weather-desc" id="weather-desc">Partly sunny · H 72° / L 58°</div>

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">
<meta name="theme-color" content="#193b36">
<meta name="description" content="The Meridian brings clarity to your day with independent reporting, local perspectives, weather, and data-driven journalism.">
<title>The Meridian — A clearer view of your world.</title>
<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=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Text:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--paper:#f7f6f0;--white:#fff;--ink:#202c2a;--muted:#65716b;--green:#193b36;--lime:#dcecaa;--line:#d8dcd2;--red:#a33e2b;--serif:"Libre Caslon Text",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a2b95e;outline-offset:4px}img{max-width:100%;display:block;object-fit:cover}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.2}h1,h2,h3.editorial{font-family:var(--serif)}.wrap{width:min(1240px,calc(100% - 64px));margin:auto}.skip{position:fixed;top:-80px;left:16px;background:var(--green);color:white;padding:12px 20px;z-index:100}.skip:focus{top:12px}.utility{background:var(--green);color:#f7f6f0;font-size:11px;letter-spacing:.03em}.utility .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px}.utility-links{display:flex;gap:24px}.masthead{display:flex;justify-content:space-between;align-items:center;padding:29px 0 26px;gap:20px}.brand{display:flex;gap:13px;align-items:center}.brand img{width:47px;height:47px}.wordmark{font-family:var(--serif);font-weight:700;font-size:39px;letter-spacing:-1.8px;line-height:1}.tagline{font-size:11px;letter-spacing:1.55px;text-transform:uppercase;margin-top:9px}.header-actions{display:flex;align-items:center;gap:19px}.icon-button{background:transparent;border:0;display:flex;align-items:center;gap:7px;padding:8px;font-size:13px}.icon-button svg{width:19px;height:19px}.button{border:1px solid var(--green);background:var(--green);color:white;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:11px 19px;font-size:12px;font-weight:700;letter-spacing:.03em;text-decoration:none!important;transition:background .2s,transform .2s}.button:hover{background:#2d5149;transform:translateY(-1px)}.button.light{background:var(--lime);color:var(--green);border-color:var(--lime)}.button.outline{background:transparent;color:var(--green)}.button.outline:hover{background:#e9ece2}.nav-row{border-top:1px solid var(--line);border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;min-height:48px}.navigation{display:flex;align-items:center;gap:30px}.navigation a{font-size:13px;font-weight:600;padding:14px 0;position:relative}.navigation a.active:after{content:"";height:3px;background:var(--green);position:absolute;bottom:0;left:0;right:0}.live-link{font-size:12px;font-weight:700;display:flex;gap:8px;align-items:center;background:none;border:0;padding:10px 0}.dot{height:7px;width:7px;display:inline-block;background:var(--red);border-radius:50%}.menu-toggle{display:none}.ticker{display:flex;align-items:center;gap:17px;border-bottom:1px solid var(--line);padding:13px 0;font-size:12px}.ticker-label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--red);white-space:nowrap}.ticker a{flex:1}.ticker time{font-size:10px;color:var(--muted);white-space:nowrap}.edition{display:flex;align-items:end;justify-content:space-between;margin:34px 0 22px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--green);display:block;margin-bottom:10px}.edition h1{font-size:32px;letter-spacing:-1px}.edition p{font-size:12px;color:var(--muted)}.hero-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:30px}.lead-image{height:390px;position:relative;overflow:hidden;background:var(--green)}.lead-image img{width:100%;height:100%;filter:brightness(.82);transition:transform .6s}.lead-story:hover .lead-image img{transform:scale(1.025)}.image-badge{position:absolute;top:20px;left:20px;background:var(--paper);padding:5px 10px;font-size:9px;letter-spacing:1.2px;font-weight:700}.image-credit{position:absolute;bottom:13px;right:14px;color:#fff;font-size:9px;letter-spacing:.3px}.lead-copy{padding:21px 0 0}.lead-copy h2{font-family:var(--serif);font-size:34px;line-height:1.22;letter-spacing:-.65px;max-width:680px}.lead-copy p{color:var(--muted);font-size:14px;margin-top:15px;max-width:650px}.meta{display:flex;align-items:center;gap:11px;font-size:10px;color:var(--muted);margin-top:17px;flex-wrap:wrap}.meta strong{font-weight:600;color:var(--ink)}.meta .divider{width:3px;height:3px;background:#849087;border-radius:50%}.text-link{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--green)}.rail{padding-left:28px;border-left:1px solid var(--line)}.rail-title{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:11px;align-items:center}.rail-title h2{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-family:var(--sans)}.rail-title span{font-size:10px;color:var(--muted)}.brief{display:grid;grid-template-columns:1fr 84px;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}.brief .eyebrow{font-size:9px;margin-bottom:7px}.brief h3{font-family:var(--serif);font-size:17px;line-height:1.4}.brief img{width:84px;height:84px}.brief .meta{margin-top:8px;font-size:9px}.weather-card{margin-top:23px;background:#e9ede3;padding:20px 22px}.weather-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.weather-head h2{font-family:var(--sans);font-size:11px;letter-spacing:1.2px;text-transform:uppercase}.weather-head select{border:none;border-bottom:1px solid #bdc8b9;background:transparent;font-size:11px;padding:3px;max-width:135px}.weather-now{display:flex;align-items:center;justify-content:space-between;padding:18px 0}.temperature{font-size:45px;font-weight:500;letter-spacing:-2px;line-height:1}.weather-desc{font-size:11px;color:var(--muted);margin-top:7px}.sun{width:62px;height:62px;color:#798c41}.weather-tabs{display:flex;gap:4px;border-bottom:1px solid #cbd3c2;padding-bottom:10px}.weather-tabs button{flex:1;border:0;padding:6px 3px;font-size:10px;background:transparent}.weather-tabs button[aria-pressed="true"]{background:var(--green);color:white}.weather-details{display:flex;justify-content:space-between;font-size:10px;margin-top:12px}.weather-note{font-size:10px;color:var(--muted);margin-top:11px}.section{margin-top:50px}.section-heading{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--ink);padding-top:18px;margin-bottom:24px;gap:20px}.section-heading h2{font-size:25px;letter-spacing:-.5px}.section-heading .text-link{margin:0}.section-intro{color:var(--muted);font-size:13px;max-width:730px;margin:-8px 0 24px}.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}.story-card img{width:100%;height:210px;margin-bottom:19px}.story-card .eyebrow{font-size:9px}.story-card h3{font-family:var(--serif);font-size:21px;line-height:1.3;letter-spacing:-.2px}.story-card p{font-size:13px;color:var(--muted);margin-top:12px}.story-card .meta{margin-top:14px}.data-section{margin-top:52px;background:var(--green);color:var(--paper);padding:37px 40px}.data-heading{display:flex;justify-content:space-between;border-bottom:1px solid #49655c;padding-bottom:19px;align-items:center}.data-heading h2{font-family:var(--sans);font-size:11px;letter-spacing:1.8px;text-transform:uppercase}.data-heading span{font-size:10px;color:#bccbc1}.data-content{display:grid;grid-template-columns:1fr 1.1fr;gap:55px;padding-top:29px;align-items:center}.data-copy .eyebrow{color:var(--lime)}.data-copy h3{font-family:var(--serif);font-size:31px;letter-spacing:-.5px;line-height:1.3}.data-copy p{font-size:13px;color:#cbd6cc;margin-top:17px}.data-copy .text-link{color:var(--lime);margin-top:23px}.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:11px}.chart-head strong{font-size:13px}.chart-head span{color:#b7c8bf;font-size:10px}.chart{display:block;width:100%;margin-top:15px}.chart text{font-family:var(--sans);font-size:11px;fill:#c1d0c6}.chart-tabs{display:flex;gap:7px;margin-top:13px}.chart-tabs button{border:1px solid #5e7669;background:transparent;color:#d6e0d6;font-size:10px;padding:6px 12px}.chart-tabs button[aria-pressed=true]{background:var(--lime);color:var(--green);border-color:var(--lime)}.chart-foot{font-size:9px;color:#b2c4b8;margin-top:13px}.investigation{display:grid;grid-template-columns:1.05fr 1fr;background:#eceee5}.investigation-image{position:relative;min-height:390px}.investigation-image img{width:100%;height:100%;position:absolute;inset:0}.investigation-copy{padding:36px 36px 32px}.investigation-copy h3{font-family:var(--serif);font-size:29px;line-height:1.3;letter-spacing:-.4px}.investigation-copy p{font-size:13px;color:var(--muted);margin-top:16px}.investigation-copy .button{margin-top:22px}.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:28px}.community-card{border:1px solid var(--line);padding:23px 25px;display:flex;align-items:flex-start;gap:18px}.community-icon{width:37px;height:37px;flex-shrink:0;display:grid;place-items:center;background:#e6eadd;color:var(--green);font-size:19px}.community-card h3{font-family:var(--serif);font-size:18px}.community-card p{font-size:12px;color:var(--muted);margin-top:8px}.community-card .text-link{font-size:11px;margin-top:11px}.newsletter{margin:52px 0 43px;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;background:#e7ebdd;padding:36px 40px}.newsletter h2{font-size:29px;letter-spacing:-.7px}.newsletter p{font-size:13px;color:var(--muted);margin-top:13px;max-width:460px}.subscribe-fields{display:flex;gap:8px}.subscribe-fields input{width:100%;min-width:0;border:1px solid #bfc8b4;background:var(--paper);padding:12px 15px;border-radius:0;font-size:12px}.subscribe-fields .button{white-space:nowrap}.form-note{font-size:10px!important;margin-top:10px!important}.form-status{font-size:12px!important;color:var(--green)!important;font-weight:600;min-height:18px}.faq{max-width:840px;margin:0 auto 50px}.faq h2{font-size:22px;margin-bottom:18px}.faq details{border-top:1px solid var(--line);padding:14px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{font-size:13px;font-weight:600;cursor:pointer}.faq details p{font-size:12px;color:var(--muted);padding-top:12px;max-width:730px}footer{background:var(--green);color:var(--paper);padding:42px 0 23px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:35px}.footer-brand .wordmark{font-size:29px;letter-spacing:-1px}.footer-brand .tagline{font-size:9px;letter-spacing:1.2px}.footer-brand p{font-size:11px;color:#bacbc1;margin-top:20px;max-width:280px}.footer-column h2{font-family:var(--sans);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;color:var(--lime)}.footer-column a,.footer-column p{display:block;font-size:11px;color:#d0dbd3;margin:7px 0}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #4b6257;margin-top:34px;padding-top:19px;font-size:9px;color:#b7c9bd}.footer-bottom div{display:flex;gap:20px}.demo-disclosure{font-size:9px;color:#b7c9bd;margin-top:16px;max-width:930px}dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);width:min(690px,calc(100% - 32px));max-height:85vh;padding:35px;box-shadow:0 20px 100px #10271b55}dialog::backdrop{background:#132920a8;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-top .eyebrow{margin:0}.dialog-close{border:1px solid var(--line);background:transparent;width:32px;height:32px;font-size:21px;line-height:1}dialog h2{font-size:29px;line-height:1.3;margin-bottom:17px}dialog p{font-size:14px;color:var(--muted);margin-top:15px}dialog .article-byline{font-size:11px;margin-bottom:24px}.search-field{display:flex;gap:10px;margin:20px 0}.search-field input{flex:1;min-width:0;padding:12px;border:1px solid var(--line);background:white}.search-result{display:block;border-top:1px solid var(--line);padding:16px 0}.search-result span{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.search-result strong{font-family:var(--serif);font-size:17px}.search-count{font-size:12px!important}.live-placeholder{background:var(--green);padding:35px;text-align:center;color:white;margin-bottom:20px}.live-placeholder p{color:#d3dfd4}.live-placeholder .play-symbol{font-size:35px;color:var(--lime)}.hidden{display:none!important}
@media(min-width:1440px){.wrap{width:min(1320px,calc(100% - 100px))}.lead-image{height:420px}.story-card img{height:230px}}
@media(max-width:1000px){.wrap{width:calc(100% - 40px)}.navigation{gap:20px}.hero-grid{grid-template-columns:1.45fr 1fr;gap:23px}.rail{padding-left:20px}.lead-image{height:320px}.lead-copy h2{font-size:29px}.brief{grid-template-columns:1fr 65px;gap:12px}.brief img{width:65px;height:75px}.brief h3{font-size:15px}.weather-card{padding:17px}.story-card img{height:165px}.data-content{gap:30px}.data-section{padding:30px}.data-copy h3{font-size:27px}.investigation-copy{padding:28px}.newsletter{gap:25px;padding:30px}.footer-grid{gap:25px}}
@media(max-width:720px){.wrap{width:calc(100% - 32px)}.utility .wrap{min-height:31px;font-size:10px}.utility-links a:first-child{display:none}.utility-links{gap:12px}.masthead{padding:22px 0}.wordmark{font-size:28px;letter-spacing:-1.1px}.brand{gap:9px}.brand img{width:36px;height:36px}.tagline{font-size:8px;letter-spacing:.9px;margin-top:7px}.header-actions{gap:2px}.header-actions .button{display:none}.search-label{display:none}.menu-toggle{display:flex}.nav-row{min-height:44px;position:relative}.navigation{gap:21px;overflow-x:auto;white-space:nowrap;max-width:calc(100% - 90px)}.navigation a{font-size:11px;padding:13px 0}.navigation a:nth-child(n+4){display:none}.nav-row.expanded .navigation{position:absolute;top:43px;left:0;right:0;max-width:none;display:flex;flex-wrap:wrap;padding:14px;background:var(--paper);border:1px solid var(--line);z-index:10;gap:8px 24px}.nav-row.expanded .navigation a{display:block;padding:8px 0}.live-link{font-size:10px}.ticker{gap:10px;font-size:11px;align-items:flex-start}.ticker-label{font-size:9px;margin-top:2px}.ticker time{display:none}.edition{margin:26px 0 20px;align-items:start}.edition h1{font-size:27px}.edition p{font-size:10px;max-width:90px;text-align:right}.hero-grid{grid-template-columns:1fr;gap:29px}.lead-image{height:300px}.lead-copy h2{font-size:29px}.rail{padding-left:0;border-left:0}.brief{grid-template-columns:1fr 86px;gap:18px}.brief h3{font-size:19px}.brief img{width:86px;height:78px}.weather-card{padding:22px}.weather-now{padding:20px 0}.weather-tabs button{font-size:12px}.weather-details{font-size:11px}.section{margin-top:36px}.section-heading h2{font-size:22px}.section-heading .text-link{font-size:10px}.stories-grid{grid-template-columns:1fr;gap:25px}.story-card{padding-bottom:25px;border-bottom:1px solid var(--line)}.story-card img{height:225px}.story-card h3{font-size:24px}.data-section{margin-top:35px;padding:25px 22px}.data-heading span{font-size:9px}.data-content{grid-template-columns:1fr;gap:27px}.data-copy h3{font-size:28px}.chart{margin-top:13px}.investigation{grid-template-columns:1fr}.investigation-image{min-height:260px}.investigation-copy{padding:26px}.investigation-copy h3{font-size:27px}.community-grid{grid-template-columns:1fr;gap:15px}.newsletter{margin:35px 0;grid-template-columns:1fr;gap:24px;padding:26px 22px}.newsletter h2{font-size:26px}.subscribe-fields{gap:6px}.subscribe-fields .button{padding:11px 13px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px 25px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:13px}.footer-bottom div{gap:18px}.faq{margin-bottom:35px}dialog{padding:24px}dialog h2{font-size:24px}.search-field .button{padding:10px}.section-intro{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<div class="utility">
  <div class="wrap">
    <span id="edition-date">The daily edition</span>
    <div class="utility-links"><a href="#standards">Independent by design</a><a href="#newsletter">Get the daily briefing ↗</a></div>
  </div>
</div>
<header class="wrap">
  <div class="masthead">
    <a class="brand" href="#" aria-label="The Meridian home">
      <img src="https://placehold.co/94x94/193b36/f7f6f0?text=M&font=lora" alt="" width="47" height="47">
      <div><div class="wordmark">The Meridian</div><div class="tagline">A clearer view of your world.</div></div>
    </a>
    <div class="header-actions">
      <button class="icon-button" id="search-open" aria-label="Search The Meridian"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg><span class="search-label">Search</span></button>
      <a class="button" href="#newsletter">Stay informed <span aria-hidden="true">↗</span></a>
      <button class="icon-button menu-toggle" id="menu-toggle" aria-expanded="false" aria-controls="primary-navigation" aria-label="Toggle navigation"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
    </div>
  </div>
  <div class="nav-row" id="nav-row">
    <nav class="navigation" id="primary-navigation" aria-label="Primary navigation">
      <a class="active" href="#main" aria-current="page">Top Stories</a>
      <a href="#local">Local</a>
      <a href="#world">World</a>
      <a href="#national">National</a>
      <a href="#weather">Weather</a>
      <a href="#data">Data & Insights</a>
      <a href="#investigations">Investigations</a>
    </nav>
    <button class="live-link" id="live-open"><span class="dot" aria-hidden="true"></span>Watch Live</button>
  </div>
  <div class="ticker">
    <span class="ticker-label">DEVELOPING</span>
    <a href="#local" data-article="transit">City approves expanded evening transit service after months of public consultation <span aria-hidden="true">→</span></a>
    <time>Newsroom briefing</time>
  </div>
</header>

<main class="wrap" id="main">
  <div class="edition">
    <div><span class="eyebrow">The stories that move us forward</span><h1>Your world, in focus.</h1></div>
    <p>Independent reporting.<br>Essential perspective.</p>
  </div>

  <section class="hero-grid" aria-label="Today's top stories">
    <article class="lead-story" id="local">
      <a class="lead-image" href="#local" data-article="waterfront" style="display:block" aria-label="Read: A new chapter for the waterfront">
        <img src="https://picsum.photos/id/1011/1000/600" alt="A wide river running between green hills, with a boat on the water" width="1000" height="600" fetchpriority="high">
        <span class="image-badge">THE BIG PICTURE</span>
        <span class="image-credit">Illustrative photograph · Meridian collection</span>
      </a>
      <div class="lead-copy">
        <span class="eyebrow">Local / Environment</span>
        <h2><a href="#local" data-article="waterfront">A new chapter for the waterfront — and the communities that call it home</a></h2>
        <p>Harbor City’s river restoration plan promises cleaner water, connected green spaces, and a more resilient shoreline. For residents, the question is whether progress will reach every neighborhood.</p>
        <div class="meta"><strong>By Elena Vasquez</strong><span class="divider"></span><span>8 min read</span><span class="divider"></span><span>With the environment desk</span></div>
        <a class="text-link" href="#local" data-article="waterfront">Read the full story <span aria-hidden="true">↗</span></a>
      </div>
    </article>

    <aside class="rail" aria-label="Latest news and weather">
      <div class="rail-title"><h2>The latest</h2><span>From our newsroom</span></div>
      <article class="brief">
        <div><span class="eyebrow">National / Policy</span><h3><a href="#national" data-article="housing">What a new housing framework could mean for first-time buyers</a></h3><div class="meta">Policy explained · 5 min read</div></div>
        <img src="https://picsum.photos/id/164/180/180" alt="Urban architecture beside a tree-lined street" width="180" height="180">
      </article>
      <article class="brief">
        <div><span class="eyebrow">World / Climate</span><h3><a href="#world" data-article="climate">Coastal cities are sharing a blueprint for a warmer future</a></h3><div class="meta">Global dispatch · 6 min read</div></div>
        <img src="https://picsum.photos/id/1015/180/180" alt="A river winding through a broad mountain valley" width="180" height="180">
      </article>
      <article class="brief">
        <div><span class="eyebrow">Local / Transport</span><h3><a href="#local" data-article="transit">Later buses, shorter waits: inside the city's transit reset</a></h3><div class="meta">Community update · 4 min read</div></div>
        <img src="https://picsum.photos/id/122/180/180" alt="An urban streetscape with buildings and traffic" width="180" height="180">
      </article>

      <section class="weather-card" id="weather" aria-labelledby="weather-title">
        <div class="weather-head">
          <h2 id="weather-title">Your forecast</h2>
          <label class="hidden" for="weather-location">Forecast location</label>
          <select id="weather-location" aria-label="Forecast location"><option value="harbor">Harbor City</option><option value="north">North Valley</option><option value="coast">West Coast</option></select>
        </div>
        <div class="weather-now" aria-live="polite">
          <div><div class="temperature" id="temperature">68°<span style="font-size:16px;letter-spacing:0">F</span></div><div class="weather-desc" id="weather-desc">Partly sunny · H 72° / L 58°</div></div>
          <svg class="sun" viewBox="0 0 70 70" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="35" cy="35" r="14"/><path d="M35 3v9m0 46v9M3 35h9m46 0h9M12 12l7 7m32 32 7 7M12 58l7-7m32-32 7-7"/></svg>
        </div>
        <div class="weather-tabs" role="group" aria-label="Choose forecast day"><button type="button" data-day="0" aria-pressed="true">Today</button><button type="button" data-day="1" aria-pressed="false">Tomorrow</button><button type="button" data-day="2" aria-pressed="false" id="third-day">Day 3</button></div>
        <div class="weather-details"><span id="rain-chance">Rain <strong>10%</strong></span><span id="wind-speed">Wind <strong>SW 8 mph</strong></span><span id="air-quality">AQI <strong>Good</strong></span></div>
        <p class="weather-note" id="weather-note">A mild afternoon before cooler weather patterns arrive overnight.</p>
        <p class="weather-note">Illustrative forecast · not live weather data.</p>
      </section>
    </aside>
  </section>

  <section class="section" id="current-events" aria-labelledby="around-title">
    <div class="section-heading"><h2 id="around-title">Beyond the headlines</h2><a href="#search" class="text-link" id="browse-stories">Explore all stories <span aria-hidden="true">↗</span></a></div>
    <p class="section-intro">The context behind current events. Our correspondents go beyond breaking news to examine the decisions, ideas, and people shaping what comes next.</p>
    <div class="stories-grid">
      <article class="story-card" id="national">
        <a href="#national" data-article="energy" aria-label="Read the national energy story"><img src="https://picsum.photos/id/1040/640/400" alt="A historic building surrounded by green landscape" width="640" height="400" loading="lazy"></a>
        <span class="eyebrow">National / The energy transition</span>
        <h3><a href="#national" data-article="energy">The clean-energy transition is getting local. Here’s why that matters.</a></h3>
        <p>Community-owned power projects are changing who benefits from new investment. We visit the towns balancing lower energy bills with questions about land use, grid access, and long-term ownership.</p>
        <div class="meta"><strong>Marcus Reed</strong><span class="divider"></span><span>7 min read</span></div>
        <a class="text-link" href="#national" data-article="energy">Read the analysis <span aria-hidden="true">↗</span></a>
      </article>
      <article class="story-card" id="world">
        <a href="#world" data-article="climate" aria-label="Read the coastal cities report"><img src="https://picsum.photos/id/1016/640/400" alt="A wide view across rugged hills and a green valley" width="640" height="400" loading="lazy"></a>
        <span class="eyebrow">World / Correspondent’s notebook</span>
        <h3><a href="#world" data-article="climate">Different coastlines. One shared challenge.</a></h3>
        <p>From restored wetlands to heat-resilient streets, coastal cities are testing ways to adapt. Our climate correspondent explores what works, what costs the most, and which lessons can travel across borders.</p>
        <div class="meta"><strong>Amara Okafor</strong><span class="divider"></span><span>6 min read</span></div>
        <a class="text-link" href="#world" data-article="climate">Read the dispatch <span aria-hidden="true">↗</span></a>
      </article>
      <article class="story-card">
        <a href="#current-events" data-article="library" aria-label="Read the community library story"><img src="https://picsum.photos/id/24/640/400" alt="An open book, a symbol of learning and shared knowledge" width="640" height="400" loading="lazy"></a>
        <span class="eyebrow">Local / Everyday life</span>
        <h3><a href="#current-events" data-article="library">More than books: the library’s quiet reinvention</a></h3>
        <p>After-school meals, digital skills workshops, and a place to cool down: neighborhood libraries are becoming essential civic infrastructure. Meet the staff making room for a new generation of needs.</p>
        <div class="meta"><strong>Sophie Chen</strong><span class="divider"></span><span>5 min read</span></div>
        <a class="text-link" href="#current-events" data-article="library">Meet the community <span aria-hidden="true">↗</span></a>
      </article>
    </div>
  </section>

  <section class="data-section" id="data" aria-labelledby="data-title">
    <div class="data-heading"><h2 id="data-title">The numbers behind the news</h2><span>Meridian Data Desk / 01</span></div>
    <div class="data-content">
      <div class="data-copy">
        <span class="eyebrow">Data journalism / Cost of living</span>
        <h3>A growing city. A widening affordability gap.</h3>
        <p>Average wages have risen, but housing costs have moved faster. Our data desk compares five years of household earnings and advertised rents to show where the pressure is building.</p>
        <p>A citywide average can hide very different experiences. Explore the measures, then read how household size, neighborhood, and tenancy status change the picture.</p>
        <a class="text-link" href="#data" data-article="affordability">Explore the analysis & methodology <span aria-hidden="true">↗</span></a>
      </div>
      <div>
        <div class="chart-head"><strong id="chart-title">Rent outpaces earnings</strong><span>Index · 2020 = 100</span></div>
        <svg class="chart" viewBox="0 0 460 230" role="img" aria-labelledby="chart-access-title chart-access-desc">
          <title id="chart-access-title">Illustrative rent and earnings index, 2020–2024</title>
          <desc id="chart-access-desc">Rents increase from 100 to 138 while earnings increase from 100 to 118. Both series are fictional demonstration data.</desc>
          <g stroke="#49665b" stroke-width="1"><path d="M40 25h395M40 75h395M40 125h395M40 175h395"/></g>
          <g><text x="5" y="29">140</text><text x="5" y="79">130</text><text x="5" y="129">120</text><text x="5" y="179">110</text><text x="40" y="220">2020</text><text x="133" y="220">2021</text><text x="229" y="220">2022</text><text x="324" y="220">2023</text><text x="409" y="220">2024</text></g>
          <path id="rent-area" d="M45 200 140 165 235 105 330 60 430 35V200H45Z" fill="#dcecaa" opacity=".08"/>
          <path id="rent-line" d="M45 200 140 165 235 105 330 60 430 35" fill="none" stroke="#dcecaa" stroke-width="3"/>
          <path id="income-line" d="M45 200 140 190 235 169 330 143 430 125" fill="none" stroke="#9bbbb4" stroke-width="2.5" stroke-dasharray="6 5"/>
          <circle id="rent-dot" cx="430" cy="35" r="4" fill="#dcecaa"/>
          <circle id="income-dot" cx="430" cy="125" r="4" fill="#9bbbb4"/>
        </svg>
        <div style="display:flex;gap:22px;font-size:10px"><span><span style="color:var(--lime)">━</span> Advertised rent</span><span><span style="color:#9bbbb4">┄</span> Household earnings</span></div>
        <div class="chart-tabs" role="group" aria-label="Choose area for affordability chart"><button type="button" data-area="city" aria-pressed="true">Citywide</button><button type="button" data-area="center" aria-pressed="false">City center</button><button type="button" data-area="outer" aria-pressed="false">Outer districts</button></div>
        <p class="chart-foot" id="chart-summary">Illustrative dataset: rent +38%; earnings +18% over five years. Not official statistics.</p>
      </div>
    </div>
  </section>

  <section class="section" id="investigations" aria-labelledby="investigation-title">
    <div class="section-heading"><h2 id="investigation-title">Accountability, in depth.</h2><span class="eyebrow" style="margin:0">The investigative desk</span></div>
    <div class="investigation">
      <div class="investigation-image">
        <img src="https://picsum.photos/id/1076/760/620" alt="Architectural detail on a large civic-style building" width="760" height="620" loading="lazy">
        <span class="image-badge">MERIDIAN INVESTIGATES</span>
      </div>
      <article class="investigation-copy">
        <span class="eyebrow">Public money / Public interest</span>
        <h3>When the contract is signed, who checks the promises?</h3>
        <p>Infrastructure spending is easy to announce and harder to follow. Our investigative team examines how contract changes, delayed inspections, and incomplete public records can obscure the true cost of civic projects.</p>
        <p>This reporting guide follows the paper trail from the first tender to the final payment — and explains the questions residents can ask before the next groundbreaking.</p>
        <div class="meta"><strong>Daniel Brooks & Elena Vasquez</strong><span class="divider"></span><span>12 min read</span></div>
        <a class="button" href="#investigations" data-article="contracts">Read the investigation <span aria-hidden="true">↗</span></a>
      </article>
    </div>
    <div class="community-grid">
      <div class="community-card">
        <div class="community-icon" aria-hidden="true">↗</div>
        <div><h3>A story we should be telling?</h3><p>Local knowledge makes better journalism. Share a lead, suggest a question, or tell us what is being overlooked in your community. Please do not send sensitive documents by ordinary email.</p><a class="text-link" href="#tip" data-info="tip">Submit Tip <span aria-hidden="true">→</span></a></div>
      </div>
      <div class="community-card" id="standards">
        <div class="community-icon" aria-hidden="true">✓</div>
        <div><h3>Trust is earned, every day.</h3><p>We separate reporting from opinion, identify our sources wherever possible, and explain how our stories are checked. When we get something wrong, we correct the record openly.</p><a class="text-link" href="#standards" data-info="standards">Our editorial standards <span aria-hidden="true">→</span></a></div>
      </div>
    </div>
  </section>

  <section class="newsletter" id="newsletter" aria-labelledby="newsletter-title">
    <div><span class="eyebrow">The morning meridian</span><h2>Start informed. Stay curious.</h2><p>The stories worth your time, the context you need, and the day’s weather outlook. A thoughtful briefing for a busy world, delivered each weekday morning.</p></div>
    <form id="newsletter-form">
      <label for="email" style="font-size:11px;font-weight:600;display:block;margin-bottom:8px">Your email address</label>
      <div class="subscribe-fields"><input type="email" id="email" name="email" placeholder="you@example.com" autocomplete="email" required maxlength="254"><button class="button" type="submit">Sign Up <span aria-hidden="true">↗</span></button></div>
      <p class="form-note">Free to read. Easy to leave. <a href="#privacy" data-info="privacy" style="text-decoration:underline">Your privacy matters.</a></p>
      <p class="form-note">Preview mode: signup is saved on this device only; no emails are sent.</p>
      <p class="form-status" id="signup-status" role="status"></p>
    </form>
  </section>

  <section class="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">A few things worth knowing</h2>
    <details><summary>What makes The Meridian different?</summary><p>Our editorial mission is to connect daily developments with the bigger picture. Local reporting sits alongside international dispatches, practical weather information, and transparent data journalism, so readers can understand not just what happened, but why it matters.</p></details>
    <details><summary>How do you handle corrections and reader feedback?</summary><p>Every correction should identify what changed and why. Contact the editorial desk with a story title, the passage in question, and any supporting source. Our editors review factual concerns separately from disagreements with an article’s conclusions.</p></details>
    <details><summary>Are the stories and forecasts on this page live?</summary><p>No. This is a fully interactive concept edition for a fictional publication. Stories, reporting credits, locations, forecasts, and chart values are illustrative. Photographs are placeholders, not documentary evidence of the events described. The forecast should not be used for travel or safety decisions.</p></details>
  </section>
</main>

<footer>
  <div class="wrap">
    <div class="footer-grid">
      <div class="footer-brand"><a href="#" class="wordmark">The Meridian</a><div class="tagline">A clearer view of your world.</div><p>Independent in spirit. Grounded in community. Journalism that helps you make sense of a changing world.</p></div>
      <div class="footer-column"><h2>Explore</h2><a href="#local">Local reporting</a><a href="#world">World affairs</a><a href="#national">National news</a><a href="#weather">Weather outlook</a><a href="#data">Data & insights</a></div>
      <div class="footer-column"><h2>The newsroom</h2><a href="#standards" data-info="about">About us</a><a href="#standards" data-info="standards">Editorial standards</a><a href="#tip" data-info="tip">Submit a tip</a><a href="#contact" data-info="contact">Contact & corrections</a><a href="#newsletter">Newsletters</a></div>
      <div class="footer-column"><h2>Stay connected</h2><a href="mailto:hello@themeridian.example">hello@themeridian.example</a><p>+1 (202) 555-0146<br>140 Press Avenue, Suite 200<br>Harbor City, HC 10001</p><div style="display:flex;gap:17px;margin-top:15px"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Instagram (opens in a new tab)">Instagram ↗</a><a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn (opens in a new tab)">LinkedIn ↗</a></div></div>
    </div>
    <div class="footer-bottom"><span>© <span id="copyright-year">2026</span> The Meridian. All rights reserved.</span><div><a href="#privacy" data-info="privacy">Privacy</a><a href="#terms" data-info="terms">Terms of use</a><a href="#accessibility" data-info="accessibility">Accessibility</a></div></div>
    <p class="demo-disclosure">Concept edition: The Meridian is fictional. News, contact details, and data are illustrative; .example addresses do not receive mail. Social links open the platforms, not publication accounts. This page uses no analytics or live news services.</p>
  </div>
</footer>

<dialog id="content-dialog" aria-labelledby="dialog-title">
  <div class="dialog-top"><span class="eyebrow" id="dialog-category">The Meridian</span><button class="dialog-close" aria-label="Close article" data-close="content-dialog">×</button></div>
  <h2 id="dialog-title"></h2>
  <div id="dialog-body"></div>
</dialog>
<dialog id="search-dialog" aria-labelledby="search-title">
  <div class="dialog-top"><span class="eyebrow">Find your perspective</span><button class="dialog-close" aria-label="Close search" data-close="search-dialog">×</button></div>
  <h2 id="search-title">Search the edition</h2>
  <form id="search-form" class="search-field"><label for="search-query" class="hidden">Search stories</label><input type="search" id="search-query" placeholder="Try climate, housing, or local…" autocomplete="off"><button class="button" type="submit">Search</button></form>
  <p class="search-count" id="search-count" role="status"></p>
  <div id="search-results"></div>
</dialog>

<script>
(() => {
  'use strict';
  const now = new Date();
  document.getElementById('edition-date').textContent = now.toLocaleDateString('en-US', {weekday:'long',month:'long',day:'numeric',year:'numeric'});
  document.getElementById('copyright-year').textContent = now.getFullYear();
  const third = new Date(now); third.setDate(third.getDate()+2);
  document.getElementById('third-day').textContent = third.toLocaleDateString('en-US',{weekday:'short'});

  const menu = document.getElementById('menu-toggle');
  menu.addEventListener('click', () => {
    const expanded = menu.getAttribute('aria-expanded') !== 'true';
    menu.setAttribute('aria-expanded',String(expanded));
    document.getElementById('nav-row').classList.toggle('expanded',expanded);
  });
  document.querySelectorAll('.navigation a').forEach(link => link.addEventListener('click', () => {
    menu.setAttribute('aria-expanded','false');
    document.getElementById('nav-row').classList.remove('expanded');
  }));

  const articles = {
    waterfront: {
      title:'A new chapter for the waterfront — and the communities that call it home',
      category:'Local / Environment', byline:'Elena Vasquez · 8 min read',
      paragraphs:[
        'A river can be a city’s meeting place, its working engine, and its dividing line. Harbor City’s proposed waterfront restoration asks residents to imagine all three roles differently: flood protection that doubles as public space, cleaner water alongside active industry, and walking routes that connect neighborhoods rather than bypass them.',
        'The central idea is to give the shoreline room to absorb heavy rainfall. Planted banks, permeable paths, and restored wetland pockets would slow runoff before it reaches the river. Engineers caution that these measures complement drainage improvements; they do not replace the pipes, pumps, and maintenance crews that keep a city functioning.',
        'Access is the other test. A new promenade means little to a family separated from it by a dangerous road crossing. Community groups are asking that construction schedules include safe routes, accessible entrances, and clear commitments to preserve affordable commercial space nearby.',
        'The questions to follow are practical: which neighborhoods receive the first investment, who pays for long-term upkeep, and how will water quality be measured? A credible plan should publish those answers before construction begins — and keep publishing them after the ribbon is cut.'
      ]
    },
    housing: {
      title:'What a new housing framework could mean for first-time buyers',
      category:'National / Policy',byline:'Marcus Reed · 5 min read',
      paragraphs:[
        'Housing frameworks often combine several different tools: permission to build more homes, financial support for buyers, and rules intended to protect existing tenants. The effect of each tool depends on the market around it. More purchasing power does not automatically translate into more affordable homes.',
        'For first-time buyers, the most important distinction is between reducing an upfront deposit and reducing the total cost of ownership. A lower deposit may open the door, but interest, insurance, maintenance, and local taxes still determine whether a household can stay comfortably inside.',
        'Our policy desk recommends looking past the headline funding figure. Ask how many homes can actually be delivered, whether transport and schools can support them, and what happens when a temporary subsidy ends. Implementation details are where ambitious housing promises become real choices for households.'
      ]
    },
    transit: {
      title:'Later buses, shorter waits: inside the city’s transit reset',
      category:'Local / Transport',byline:'Sophie Chen · 4 min read',
      paragraphs:[
        'Harbor City’s concept transit plan extends evening service on key routes and simplifies several transfers. For shift workers, students, and caregivers, the greatest benefit may be a dependable trip home rather than a faster morning commute.',
        'Service frequency is only one part of reliability. Bus lanes, safe stops, clear timetables, and enough trained drivers all affect whether a promised departure arrives on time. Riders asked during public consultation for fewer long gaps, particularly where missed connections can add an hour to a journey.',
        'The rollout should be judged route by route. Useful measures include canceled departures, average waiting time, step-free access, and service after ten in the evening. Publishing those figures would let residents compare the plan’s promises with the experience at their own stop.'
      ]
    },
    energy: {
      title:'The clean-energy transition is getting local. Here’s why that matters.',
      category:'National / Energy',byline:'Marcus Reed · 7 min read',
      paragraphs:[
        'Community energy projects give residents a stake in the infrastructure around them. Rather than simply hosting a development, a town may share ownership, receive a portion of revenue, or direct proceeds into a local fund. Those arrangements can change the conversation from opposition versus approval to how benefits are distributed.',
        'The difficult work often begins before a panel or turbine is installed. Grid connections can take time, financing can be complex, and volunteer groups need specialist advice. Projects that look viable on paper may still face constraints on the amount of electricity the network can accept.',
        'Ownership is not a guarantee of fairness. Renters, low-income households, and people unable to invest upfront need routes to participate. The most useful models make their financial assumptions public and explain both the rewards and the risks.',
        'The wider lesson is that the energy transition is also an institutional transition. Who owns the assets, who makes decisions, and who receives the savings can matter as much to a community as the technology itself.'
      ]
    },
    climate: {
      title:'Different coastlines. One shared challenge.',
      category:'World / Climate',byline:'Amara Okafor · 6 min read',
      paragraphs:[
        'Coastal communities face different tides, budgets, and weather patterns, but many are asking the same question: how do we prepare for extremes without making everyday life more difficult? Adaptation projects increasingly combine flood protection with parks, shaded streets, and improved public transport.',
        'Our correspondent’s notebook focuses on the ideas that travel well. Restoring a wetland can reduce wave energy while supporting wildlife. A shaded walking route can make a neighborhood more comfortable while helping people reach cooling centers during a heat wave.',
        'What travels less easily is the financing. A solution suited to a wealthy port may be impossible for a smaller municipality with limited borrowing capacity. Comparing projects fairly requires looking at maintenance costs and local institutions, not only dramatic before-and-after photographs.',
        'Residents should have a voice in choosing what to protect and how. A resilient shoreline is not simply an engineering achievement; it is a long-term agreement about land, livelihoods, and the responsibilities shared by a community.'
      ]
    },
    library: {
      title:'More than books: the library’s quiet reinvention',
      category:'Local / Community',byline:'Sophie Chen · 5 min read',
      paragraphs:[
        'The neighborhood library remains a place to find a book, but its public role has grown. Staff now help visitors navigate online forms, search for work, learn basic digital skills, and find reliable information. In a city where so much requires a login, an open door matters.',
        'That expanded mission requires resources. Running a workshop takes preparation; keeping a building comfortable during extreme weather takes maintenance; supporting visitors with complex needs takes training and partnerships. Librarians warn against treating goodwill as a substitute for a sustainable budget.',
        'The strongest programs start by listening. An evening language group, a quiet study space, or a weekly technology clinic may do more for a neighborhood than an expensive new initiative designed elsewhere. Civic infrastructure works best when it fits the people who use it.'
      ]
    },
    affordability: {
      title:'A growing city. A widening affordability gap.',
      category:'Data journalism / Methodology',byline:'The Meridian Data Desk · 6 min read',
      paragraphs:[
        'This interactive chart illustrates a common analytical approach: indexing two measures to the same starting value so their rates of change can be compared. In the citywide example, advertised rents increase by 38 percent between 2020 and 2024 while household earnings increase by 18 percent.',
        'Methodology: each series starts at 100 in 2020. An index value of 138 means the measure is 38 percent above its starting level. The city-center and outer-district controls display separate fictional series, not a weighted breakdown of the citywide series.',
        'Important limitations: advertised rent is not the same as rent paid by existing tenants. Household earnings may also change because the mix of households changes. This chart does not measure individual rent burden or establish why housing costs rose.',
        'All values in this concept edition are invented for demonstration. A published investigation would link to the source tables, document geographic boundaries and missing values, explain whether figures are inflation-adjusted, and make the underlying data available for scrutiny.'
      ]
    },
    contracts: {
      title:'When the contract is signed, who checks the promises?',
      category:'Investigations / Public interest',byline:'Daniel Brooks & Elena Vasquez · 12 min read',
      paragraphs:[
        'The announced price of a public project is rarely the end of the story. Scope changes, material costs, schedule extensions, and additional consulting work can alter the final bill. Those changes may be justified, but residents need enough information to tell the difference between necessary adjustment and avoidable waste.',
        'A meaningful paper trail begins with the tender documents and the basis for selecting a supplier. It continues through amendments, progress reports, inspection records, and final payments. Missing links make it harder to compare what was purchased with what was delivered.',
        'Our reporting approach is to reconcile documents, request explanations from the parties involved, and give organizations a fair opportunity to respond. A delayed project is not, by itself, evidence of misconduct. Claims require verification, context, and a clear account of what the records do and do not establish.',
        'Residents can ask three useful questions: is there a current public budget, are contract changes published in a consistent place, and has an independent inspection confirmed the completed work? This concept report demonstrates an accountability framework rather than alleging wrongdoing by any real organization.'
      ]
    }
  };
  const information = {
    about:['A newsroom with a wider lens.',['The Meridian is a fictional independent news brand built around a straightforward mission: make important information understandable without making it simplistic. Its editorial focus connects local life with national decisions, international developments, and the evidence behind them.','This concept edition demonstrates the publication’s digital experience. It is not an operating newsroom, and the reporters and contact details shown here are invented.']],
    standards:['Our editorial standards',['Accuracy comes first. A published story should distinguish verified facts, analysis, and opinion; describe the basis for significant claims; and seek responses from people or organizations subject to criticism.','Sources should be identified whenever possible. Anonymity requires a clear public-interest reason, editorial approval, and independent corroboration where available. Placeholder photographs must never be presented as evidence of an event.','Corrections should be timely, specific, and visible. Sponsorship and commercial relationships should be disclosed, and advertisers should have no role in editorial decisions.']],
    tip:['Help us ask better questions.',['A useful tip tells us what happened, where, when, and how you know. Include links to public records if available, and explain how the issue affects the community. Do not send passwords, financial account details, or confidential documents by ordinary email.','This is a demonstration website, so tips are not collected or sent. The fictional editorial address is tips@themeridian.example. A live newsroom would provide a verified secure submission channel before accepting sensitive material.']],
    contact:['Contact & corrections',['For a correction, identify the headline, the specific statement you believe is inaccurate, and a reliable supporting source. For a general inquiry, let us know the subject and the best way to respond.','Illustrative editorial contact: editor@themeridian.example · +1 (202) 555-0146. These are fictional contact details and are not monitored.']],
    privacy:['Your privacy, explained',['This standalone concept page does not send signup information to a server, use advertising cookies, or load analytics. If you submit the newsletter form, the email address is saved in this browser’s local storage only. No subscription is created and no email is sent.','You can remove that saved address using the button below or clear this site’s browser data. Fonts and placeholder images are loaded from third-party providers; those requests may disclose your IP address and browser information to those services.']],
    terms:['Terms of this concept edition',['This page is an illustrative design for a fictional publication. Its stories, data, weather forecasts, reporting credits, and contact information are not real-world news or professional advice. Do not rely on the forecast for safety-critical decisions.','External links take you to third-party websites with their own terms. Photographs are placeholders and should not be interpreted as depicting the people, places, or events in a story.']],
    accessibility:['Designed for more readers.',['The page provides keyboard-accessible controls, visible focus indicators, semantic headings, a skip-to-content link, descriptive image alternatives, and reduced-motion support. Forecast and chart controls expose their selected state to assistive technology.','If a feature does not work with your setup, the stories remain available in searchable article previews and the chart’s key values are provided as text. This concept is not a formal accessibility certification.']]
  };
  const dialog = document.getElementById('content-dialog');
  const body = document.getElementById('dialog-body');
  function showContent(title,category,paragraphs,byline) {
    document.getElementById('dialog-title').textContent=title;
    document.getElementById('dialog-category').textContent=category;
    body.replaceChildren();
    if (byline) { const p=document.createElement('p');p.className='article-byline';p.textContent=byline+' · Illustrative concept reporting';body.append(p); }
    paragraphs.forEach(text => {const p=document.createElement('p');p.textContent=text;body.append(p);});
    if (!dialog.open) dialog.showModal();
    dialog.scrollTop=0;
  }
  function openArticle(key) {
    const article=articles[key];if(!article)return;
    const search=document.getElementById('search-dialog');if(search.open)search.close();
    showContent(article.title,article.category,article.paragraphs,article.byline);
  }
  document.addEventListener('click',e=>{
    const article=e.target.closest('[data-article]');
    if(article){e.preventDefault();openArticle(article.dataset.article);}
    const info=e.target.closest('[data-info]');
    if(info){
      e.preventDefault();const key=info.dataset.info;const content=information[key];
      showContent(content[0],'The Meridian / '+key,content[1]);
      if(key==='privacy'){
        const clear=document.createElement('button');clear.className='button outline';clear.style.marginTop='20px';clear.textContent='Remove saved signup';
        clear.addEventListener('click',()=>{
          try{localStorage.removeItem('meridian-preview-email');clear.textContent='Saved signup removed';document.getElementById('signup-status').textContent='';}catch{clear.textContent='Browser storage is unavailable';}
        });body.append(clear);
      }
    }
    const close=e.target.closest('[data-close]');if(close)document.getElementById(close.dataset.close).close();
  });
  document.querySelectorAll('dialog').forEach(d=>d.addEventListener('click',e=>{
    if(e.target===d){const r=d.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)d.close();}
  }));
  document.getElementById('live-open').addEventListener('click',()=>{
    showContent('The Meridian Live','Newsroom / Video',['Our live desk would bring you verified breaking news, correspondent updates, and expert context as events unfold.','This concept edition has no live video feed. Explore the daily briefing below while the studio is offline.']);
    const screen=document.createElement('div');screen.className='live-placeholder';
    screen.innerHTML='<div class="play-symbol" aria-hidden="true">▷</div><strong>Studio preview · Offline</strong><p>No live broadcast is currently available.</p>';
    body.prepend(screen);
    const link=document.createElement('a');link.href='#current-events';link.className='button';link.style.marginTop='20px';link.textContent='Explore the daily briefing';link.addEventListener('click',()=>dialog.close());body.append(link);
  });

  const searchDialog=document.getElementById('search-dialog');
  function searchStories() {
    const query=document.getElementById('search-query').value.trim().toLowerCase();
    const matches=Object.entries(articles).filter(([,a])=>(a.title+' '+a.category+' '+a.paragraphs.join(' ')).toLowerCase().includes(query));
    const results=document.getElementById('search-results');results.replaceChildren();
    document.getElementById('search-count').textContent=matches.length ? `${matches.length} ${matches.length===1?'story':'stories'} in this edition` : 'No stories found. Try “local”, “climate”, or “housing”.';
    matches.forEach(([key,a])=>{
      const link=document.createElement('a');link.className='search-result';link.href='#current-events';link.dataset.article=key;
      const category=document.createElement('span');category.textContent=a.category;
      const title=document.createElement('strong');title.textContent=a.title;link.append(category,title);results.append(link);
    });
  }
  function openSearch(e){if(e)e.preventDefault();searchDialog.showModal();searchStories();document.getElementById('search-query').focus();}
  document.getElementById('search-open').addEventListener('click',openSearch);
  document.getElementById('browse-stories').addEventListener('click',openSearch);
  document.getElementById('search-form').addEventListener('submit',e=>{e.preventDefault();searchStories();});
  document.getElementById('search-query').addEventListener('input',searchStories);

  const forecasts={
    harbor:[
      [68,72,58,'Partly sunny',10,'SW 8 mph','Good','A mild afternoon before cooler weather patterns arrive overnight.'],
      [63,65,54,'Light showers',65,'W 12 mph','Good','Carry a light raincoat. Scattered showers are most likely in the afternoon.'],
      [66,69,55,'Mostly sunny',15,'NW 6 mph','Good','Drier air returns, with comfortable temperatures and a cool evening.']
    ],
    north:[
      [61,64,46,'Clear skies',5,'N 5 mph','Good','A crisp start gives way to a clear afternoon. Expect cooler valley temperatures after sunset.'],
      [58,60,44,'Cloudy',35,'W 9 mph','Good','Cloud cover builds, with a chance of a brief shower near the hills.'],
      [62,65,47,'Partly sunny',10,'NW 7 mph','Good','Brighter conditions return. Early morning fog may linger in low-lying areas.']
    ],
    coast:[
      [64,66,56,'Coastal clouds',20,'SW 14 mph','Good','A steady sea breeze keeps the shoreline cool. Cloud cover may break later.'],
      [60,63,53,'Rain likely',75,'W 18 mph','Good','Wet and breezy conditions are expected in this illustrative coastal outlook.'],
      [63,66,54,'Partly sunny',25,'NW 12 mph','Good','Showers ease, with brighter intervals and a persistent afternoon breeze.']
    ]
  };
  let day=0;
  function updateWeather(){
    const f=forecasts[document.getElementById('weather-location').value][day];
    document.getElementById('temperature').innerHTML=f[0]+'°<span style="font-size:16px;letter-spacing:0">F</span>';
    document.getElementById('weather-desc').textContent=`${f[3]} · H ${f[1]}° / L ${f[2]}°`;
    document.getElementById('rain-chance').innerHTML=`Rain <strong>${f[4]}%</strong>`;
    document.getElementById('wind-speed').innerHTML=`Wind <strong>${f[5]}</strong>`;
    document.getElementById('air-quality').innerHTML=`AQI <strong>${f[6]}</strong>`;
    document.getElementById('weather-note').textContent=f[7];
    document.querySelectorAll('[data-day]').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset.day)===day)));
  }
  document.getElementById('weather-location').addEventListener('change',updateWeather);
  document.querySelectorAll('[data-day]').forEach(b=>b.addEventListener('click',()=>{day=Number(b.dataset.day);updateWeather();}));

  const chartData={
    city:{rent:[200,165,105,60,35],income:[200,190,169,143,125],r:38,i:18,name:'Citywide'},
    center:{rent:[200,158,98,45,15],income:[200,183,163,140,117],r:43,i:20,name:'City center'},
    outer:{rent:[200,178,145,100,75],income:[200,192,176,156,140],r:29,i:14,name:'Outer districts'}
  };
  document.querySelectorAll('[data-area]').forEach(b=>b.addEventListener('click',()=>{
    const a=chartData[b.dataset.area],x=[45,140,235,330,430];
    const path=ys=>ys.map((y,i)=>(i?'L':'M')+x[i]+' '+y).join(' ');
    document.getElementById('rent-line').setAttribute('d',path(a.rent));
    document.getElementById('income-line').setAttribute('d',path(a.income));
    document.getElementById('rent-area').setAttribute('d',path(a.rent)+'V200H45Z');
    document.getElementById('rent-dot').setAttribute('cy',a.rent[4]);
    document.getElementById('income-dot').setAttribute('cy',a.income[4]);
    document.getElementById('chart-title').textContent=a.name+' · rent outpaces earnings';
    document.getElementById('chart-access-desc').textContent=`Illustrative ${a.name.toLowerCase()} data: rents rise ${a.r} percent and earnings rise ${a.i} percent between 2020 and 2024. These are fictional demonstration values.`;
    document.getElementById('chart-summary').textContent=`Illustrative ${a.name.toLowerCase()} dataset: rent +${a.r}%; earnings +${a.i}% over five years. Not official statistics.`;
    document.querySelectorAll('[data-area]').forEach(el=>el.setAttribute('aria-pressed',String(el===b)));
  }));

  document.getElementById('newsletter-form').addEventListener('submit',e=>{
    e.preventDefault();
    const input=document.getElementById('email'),status=document.getElementById('signup-status');
    if(!input.checkValidity()){input.reportValidity();return;}
    try {
      localStorage.setItem('meridian-preview-email',input.value.trim());
      status.textContent='Your preview signup is saved on this device. No emails will be sent.';
      input.value='';
    } catch {
      status.textContent='Your browser could not save the preview signup. No information was sent.';
    }
  });
})();
</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-12T09:58:41.361Z",
  "url": "https://benchmark.aimac.invalid/883c7fc84fda2cf02fd4311d080b141f48059cc0d4cdd33be781467cd6f940a9.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-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-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-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": "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": "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": []
    },
    {
      "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": []
    },
    {
      "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": "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": "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": []
    },
    {
      "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": []
    },
    {
      "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": "<a class=\"brand\" href=\"#\" aria-label=\"The Meridian home\">\n      <img src=\"https://placehold.co/94x94/193b36/f7f6f0?text=M&amp;font=lora\" alt=\"\" width=\"47\" height=\"47\">\n      <div><div class=\"wordmark\">The Meridian</div><div class=\"tagline\">A clearer view of your world.</div></div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": "<a class=\"brand\" href=\"#\" aria-label=\"The Meridian home\">\n      <img src=\"https://placehold.co/94x94/193b36/f7f6f0?text=M&amp;font=lora\" alt=\"\" width=\"47\" height=\"47\">\n      <div><div class=\"wordmark\">The Meridian</div><div class=\"tagline\">A clearer view of your world.</div></div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"weather-tabs\" role=\"group\" aria-label=\"Choose forecast day\">",
          "target": [
            ".weather-tabs"
          ]
        }
      ]
    },
    {
      "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-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": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"></circle><path d=\"m16 16 5 5\"></path></svg>",
          "target": [
            "#search-open > svg[viewBox=\"0 0 24 24\"][stroke-width=\"1.6\"][stroke=\"currentColor\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "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": "<a class=\"brand\" href=\"#\" aria-label=\"The Meridian home\">\n      <img src=\"https://placehold.co/94x94/193b36/f7f6f0?text=M&amp;font=lora\" alt=\"\" width=\"47\" height=\"47\">\n      <div><div class=\"wordmark\">The Meridian</div><div class=\"tagline\">A clearer view of your world.</div></div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"weather-tabs\" role=\"group\" aria-label=\"Choose forecast day\">",
          "target": [
            ".weather-tabs"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"weather-tabs\" role=\"group\" aria-label=\"Choose forecast day\">",
          "target": [
            ".weather-tabs"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": "critical",
      "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": "<a class=\"brand\" href=\"#\" aria-label=\"The Meridian home\">\n      <img src=\"https://placehold.co/94x94/193b36/f7f6f0?text=M&amp;font=lora\" alt=\"\" width=\"47\" height=\"47\">\n      <div><div class=\"wordmark\">The Meridian</div><div class=\"tagline\">A clearer view of your world.</div></div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": "<a class=\"brand\" href=\"#\" aria-label=\"The Meridian home\">\n      <img src=\"https://placehold.co/94x94/193b36/f7f6f0?text=M&amp;font=lora\" alt=\"\" width=\"47\" height=\"47\">\n      <div><div class=\"wordmark\">The Meridian</div><div class=\"tagline\">A clearer view of your world.</div></div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" required=\"\" maxlength=\"254\">",
          "target": [
            "#email"
          ]
        }
      ]
    },
    {
      "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": "<a class=\"lead-image\" href=\"#local\" data-article=\"waterfront\" style=\"display:block\" aria-label=\"Read: A new chapter for the waterfront\">",
          "target": [
            ".lead-image"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"icon-button\" id=\"search-open\" aria-label=\"Search The Meridian\">",
          "target": [
            "#search-open"
          ]
        }
      ]
    },
    {
      "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>Your world, in focus.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2><a href=\"#local\" data-article=\"waterfront\">A new chapter for the waterfront \u2014 and the communities that call it home</a></h2>",
                  "target": [
                    ".lead-copy > h2"
                  ]
                },
                {
                  "html": "<h2>The latest</h2>",
                  "target": [
                    ".rail-title > h2"
                  ]
                },
                {
                  "html": "<h3><a href=\"#national\" data-article=\"housing\">What a new housing framework could mean for first-time buyers</a></h3>",
                  "target": [
                    ".brief:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3><a href=\"#world\" data-article=\"climate\">Coastal cities are sharing a blueprint for a warmer future</a></h3>",
                  "target": [
                    ".brief:nth-child(3) > div > h3"
                  ]
                },
                {
                  "html": "<h3><a href=\"#local\" data-article=\"transit\">Later buses, shorter waits: inside the city's transit reset</a></h3>",
                  "target": [
                    ".brief:nth-child(4) > div > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"weather-title\">Your forecast</h2>",
                  "target": [
                    "#weather-title"
                  ]
                },
                {
                  "html": "<h2 id=\"around-title\">Beyond the headlines</h2>",
                  "target": [
                    "#around-title"
                  ]
                },
                {
                  "html": "<h3><a href=\"#national\" data-article=\"energy\">The clean-energy transition is getting local. Here\u2019s why that matters.</a></h3>",
                  "target": [
                    "#national > h3"
                  ]
                },
                {
                  "html": "<h3><a href=\"#world\" data-article=\"climate\">Different coastlines. One shared challenge.</a></h3>",
                  "target": [
                    "#world > h3"
                  ]
                },
                {
                  "html": "<h3><a href=\"#current-events\" data-article=\"library\">More than books: the library\u2019s quiet reinvention</a></h3>",
                  "target": [
                    ".story-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"data-title\">The numbers behind the news</h2>",
                  "target": [
                    "#data-title"
                  ]
                },
                {
                  "html": "<h3>A growing city. A widening affordability gap.</h3>",
                  "target": [
                    ".data-copy > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"investigation-title\">Accountability, in depth.</h2>",
                  "target": [
                    "#investigation-title"
                  ]
                },
                {
                  "html": "<h3>When the contract is signed, who checks the promises?</h3>",
                  "target": [
                    ".investigation-copy > h3"
                  ]
                },
                {
                  "html": "<h3>A story we should be telling?</h3>",
                  "target": [
                    ".community-card:nth-child(1) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Trust is earned, every day.</h3>",
                  "target": [
                    "#standards > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h2>Start informed. Stay curious.</h2>",
                  "target": [
                    "#newsletter > div > h2"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">A few things worth knowing</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h2>Explore</h2>",
                  "target": [
                    ".footer-column:nth-child(2) > h2"
                  ]
                },
                {
                  "html": "<h2>The newsroom</h2>",
                  "target": [
                    ".footer-column:nth-child(3) > h2"
                  ]
                },
                {
                  "html": "<h2>Stay connected</h2>",
                  "target": [
                    ".footer-column:nth-child(4) > h2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main class=\"wrap\" id=\"main\">",
                  "target": [
                    "#main"
                  ]
                }
              ],
              "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": "#f7f6f0",
                "bgColor": "#193b36",
                "contrastRatio": 11.27,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 11.27"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span id=\"edition-date\">Thursday, November 12, 2026</span>",
          "target": [
            "#edition-date"
          ]
        }
      ]
    },
    {
      "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": "primary-navigation",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"navigation\" id=\"primary-navigation\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-navigation"
          ]
        }
      ]
    },
    {
      "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": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"weather-location\" aria-label=\"Forecast location\"><option value=\"harbor\">Harbor City</option><option value=\"north\">North Valley</option><option value=\"coast\">West Coast</option></select>",
          "target": [
            "#weather-location"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "presentational-role",
              "data": {
                "role": "presentation"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were overridden with role=\"presentation\""
            }
          ],
          "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/94x94/193b36/f7f6f0?text=M&amp;font=lora\" alt=\"\" width=\"47\" height=\"47\">",
          "target": [
            "img[alt=\"\"]"
          ]
        }
      ]
    },
    {
      "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": {
                "explicitLabel": "Your email address"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"email\" style=\"font-size:11px;font-weight:600;display:block;margin-bottom:8px\">Your email address</label>",
                  "target": [
                    "label[for=\"email\"]"
                  ]
                }
              ],
              "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 type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" required=\"\" maxlength=\"254\">",
          "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-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"lead-copy\">",
                  "target": [
                    ".lead-copy"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"text-link\" href=\"#local\" data-article=\"waterfront\">Read the full story <span aria-hidden=\"true\">\u2197</span></a>",
          "target": [
            ".text-link[data-article=\"waterfront\"][href$=\"#local\"]"
          ]
        }
      ]
    },
    {
      "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=\"skip\" href=\"#main\">Skip to content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    },
    {
      "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": "<button class=\"icon-button\" id=\"search-open\" aria-label=\"Search The Meridian\">",
          "target": [
            "#search-open"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label class=\"hidden\" for=\"weather-location\">Forecast location</label>",
                  "target": [
                    "label[for=\"weather-location\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"weather-location\" aria-label=\"Forecast location\"><option value=\"harbor\">Harbor City</option><option value=\"north\">North Valley</option><option value=\"coast\">West Coast</option></select>",
          "target": [
            "#weather-location"
          ]
        }
      ]
    },
    {
      "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>What makes The Meridian different?</summary>",
          "target": [
            "details:nth-child(2) > summary"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "svg-non-empty-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has a child that is a title"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute exists and references elements that are visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<svg class=\"chart\" viewBox=\"0 0 460 230\" role=\"img\" aria-labelledby=\"chart-access-title chart-access-desc\">",
          "target": [
            ".chart"
          ]
        }
      ]
    },
    {
      "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": 146.6,
                "height": 48.8
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (146.6px by 48.8px, 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=\"skip\" href=\"#main\">Skip to content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "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": {
                "role": null,
                "nodeName": "section",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-labelledby"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute is not well supported on a section with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
          "target": [
            "#newsletter"
          ],
          "failureSummary": "Fix all of the following:\n  aria-labelledby attribute is not well supported on a section with no valid role attribute."
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": "critical",
      "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": {
                "messageKey": "noId",
                "needsReview": "aria-labelledby=\"newsletter-title\""
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"newsletter-title\""
            }
          ],
          "none": [],
          "impact": "critical",
          "html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
          "target": [
            "#newsletter"
          ],
          "failureSummary": "Fix all of the following:\n  ARIA attribute element ID does not exist on the page: aria-labelledby=\"newsletter-title\""
        }
      ]
    },
    {
      "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": {
                "messageKey": "nonBmp"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element content contains only non-text characters"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span aria-hidden=\"true\">\u2192</span>",
          "target": [
            "a[data-article=\"transit\"][href$=\"#local\"] > span[aria-hidden=\"true\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element content contains only non-text characters"
        }
      ]
    }
  ],
  "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": "#65716b",
                "bgColor": "#e9ede3",
                "contrastRatio": 4.28,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"weather-card\" id=\"weather\" aria-labelledby=\"weather-title\">",
                  "target": [
                    "#weather"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.28 (foreground color: #65716b, background color: #e9ede3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"weather-desc\" id=\"weather-desc\">Partly sunny \u00b7 H 72\u00b0 / L 58\u00b0</div>",
          "target": [
            "#weather-desc"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.28 (foreground color: #65716b, background color: #e9ede3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#e9ede3",
                "contrastRatio": 4.28,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"weather-card\" id=\"weather\" aria-labelledby=\"weather-title\">",
                  "target": [
                    "#weather"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.28 (foreground color: #65716b, background color: #e9ede3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"weather-note\" id=\"weather-note\">A mild afternoon before cooler weather patterns arrive overnight.</p>",
          "target": [
            "#weather-note"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.28 (foreground color: #65716b, background color: #e9ede3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#e9ede3",
                "contrastRatio": 4.28,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"weather-card\" id=\"weather\" aria-labelledby=\"weather-title\">",
                  "target": [
                    "#weather"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.28 (foreground color: #65716b, background color: #e9ede3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"weather-note\">Illustrative forecast \u00b7 not live weather data.</p>",
          "target": [
            ".weather-note:nth-child(6)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.28 (foreground color: #65716b, background color: #e9ede3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#eceee5",
                "contrastRatio": 4.34,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"investigation\">",
                  "target": [
                    ".investigation"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.34 (foreground color: #65716b, background color: #eceee5, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Infrastructure spending is easy to announce and harder to follow. Our investigative team examines how contract changes, delayed inspections, and incomplete public records can obscure the true cost of civic projects.</p>",
          "target": [
            ".investigation-copy > p:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.34 (foreground color: #65716b, background color: #eceee5, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#eceee5",
                "contrastRatio": 4.34,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"investigation\">",
                  "target": [
                    ".investigation"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.34 (foreground color: #65716b, background color: #eceee5, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>This reporting guide follows the paper trail from the first tender to the final payment \u2014 and explains the questions residents can ask before the next groundbreaking.</p>",
          "target": [
            ".investigation-copy > p:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.34 (foreground color: #65716b, background color: #eceee5, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#eceee5",
                "contrastRatio": 4.34,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"investigation\">",
                  "target": [
                    ".investigation"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.34 (foreground color: #65716b, background color: #eceee5, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>12 min read</span>",
          "target": [
            ".investigation-copy > .meta > span:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.34 (foreground color: #65716b, background color: #eceee5, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#e7ebdd",
                "contrastRatio": 4.19,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>The stories worth your time, the context you need, and the day\u2019s weather outlook. A thoughtful briefing for a busy world, delivered each weekday morning.</p>",
          "target": [
            "#newsletter > div > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#e7ebdd",
                "contrastRatio": 4.19,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"form-note\">Free to read. Easy to leave. <a href=\"#privacy\" data-info=\"privacy\" style=\"text-decoration:underline\">Your privacy matters.</a></p>",
          "target": [
            ".form-note:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#e7ebdd",
                "contrastRatio": 4.19,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#privacy\" data-info=\"privacy\" style=\"text-decoration:underline\">Your privacy matters.</a>",
          "target": [
            ".form-note:nth-child(3) > a[href$=\"#privacy\"][data-info=\"privacy\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#65716b",
                "bgColor": "#e7ebdd",
                "contrastRatio": 4.19,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
                  "target": [
                    "#newsletter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"form-note\">Preview mode: signup is saved on this device only; no emails are sent.</p>",
          "target": [
            ".form-note:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #65716b, background color: #e7ebdd, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 4033
      },
      {
        "y": 576,
        "height": 4033
      },
      {
        "y": 1152,
        "height": 4033
      },
      {
        "y": 1728,
        "height": 4033
      },
      {
        "y": 2304,
        "height": 4033
      },
      {
        "y": 2880,
        "height": 4033
      },
      {
        "y": 3313,
        "height": 4033
      }
    ],
    "scans": 8,
    "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", "World", "National".
-   **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: "Current Events", "Data Journalism", "Investigative Reports".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "weather patterns", "breaking news", "correspondent".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Watch Live", "Sign Up", "Submit Tip".
-   **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: "top headlines", "photo galleries", "weather outlook".
-   **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.