MoonshotAI Kimi K2.7 Code – News Weather Information
via Moonshot AI · Generated
- AIMAC Debt 9.34
- Cost $0.14
- Total Violations 24
- HTML Size 37 KB
- Em Dashes 6
Screenshot
View Live Page
Accessibility Issues Found
24 Serious
-
color-contrast serious 18 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#archive">Browse the Archive →</a> -
target-size serious 6 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<input type="email" placeholder="Email or phone" aria-label="Email or phone" required="">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CivicScope | Local News, Weather & Insight for Metro Region</title>
<meta name="description" content="CivicScope delivers breaking news, trusted local reporting, live weather forecasts, and thoughtful editorial coverage for informed communities.">
<style>
:root{
--primary:#0f4c81;
--accent:#e67e22;
--text:#1f2937;
--muted:#6b7280;
--bg:#f8fafc;
--card:#ffffff;
--border:#e5e7eb;
--danger:#dc2626;
--success:#16a34a;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);}
a{color:var(--primary);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{width:min(1200px,92%);margin:0 auto;}
.top-bar{background:#0b3a63;color:#fff;font-size:.85rem;padding:.4rem 0;}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
.ticker{display:flex;align-items:center;gap:.5rem;overflow:hidden;}
.ticker span{background:var(--danger);color:#fff;padding:.15rem .5rem;border-radius:3px;font-weight:700;text-transform:uppercase;font-size:.75rem;}
.ticker p{margin:0;white-space:nowrap;}
header{background:var(--card);border-bottom:1px solid var(--border);padding:1.2rem 0;}
header .container{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.8rem;}
.brand img{width:180px;height:60px;object-fit:contain;}
.brand-text h1{margin:0;font-size:1.7rem;color:var(--primary);letter-spacing:-.5px;}
.brand-text p{margin:.1rem 0 0;color:var(--muted);font-size:.95rem;}
.search{display:flex;}
.search input{border:1px solid var(--border);border-radius:4px 0 0 4px;padding:.5rem .75rem;font-size:.9rem;}
.search button{border:none;background:var(--primary);color:#fff;padding:.5rem .9rem;border-radius:0 4px 4px 0;cursor:pointer;}
nav{background:var(--primary);position:sticky;top:0;z-index:100;}
nav .container{display:flex;align-items:center;justify-content:space-between;}
.nav-links{display:flex;list-style:none;margin:0;padding:0;gap:.5rem;}
.nav-links a{color:#fff;display:block;padding:.85rem 1rem;font-weight:500;border-bottom:3px solid transparent;}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.1);border-bottom-color:var(--accent);}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;}
main{padding:2rem 0;}
section{margin-bottom:3rem;}
.section-header{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.2rem;border-bottom:2px solid var(--primary);padding-bottom:.5rem;}
.section-header h2{margin:0;font-size:1.6rem;color:var(--primary);}
.section-header a{font-size:.9rem;font-weight:600;color:var(--accent);}
.hero{position:relative;background:var(--card);border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08);}
.hero-image{position:relative;}
.hero-image img{width:100%;height:450px;object-fit:cover;}
.hero-image::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 60%);}
.hero-content{position:absolute;bottom:0;left:0;right:0;padding:2rem;color:#fff;}
.hero-label{background:var(--danger);color:#fff;display:inline-block;padding:.25rem .6rem;border-radius:3px;font-size:.75rem;font-weight:800;text-transform:uppercase;margin-bottom:.6rem;}
.hero-content h2{margin:0 0 .6rem;font-size:2.2rem;line-height:1.2;}
.hero-content p{margin:0 0 1rem;max-width:700px;font-size:1.05rem;color:#e5e7eb;}
.hero-meta{font-size:.85rem;color:#cbd5e1;margin-bottom:1rem;}
.cta-group{display:flex;gap:.8rem;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.2rem;border-radius:5px;font-weight:600;cursor:pointer;border:none;transition:transform .1s,box-shadow .1s;}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.12);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);}
.live-player{background:#0f172a;color:#fff;border-radius:8px;overflow:hidden;margin-top:2rem;}
.live-player-header{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;background:#1e293b;}
.live-dot{width:10px;height:10px;background:#22c55e;border-radius:50%;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.live-player-stage{position:relative;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;}
.live-player-stage img{width:100%;height:100%;object-fit:cover;opacity:.7;}
.play-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem;cursor:pointer;}
.play-btn{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;border:2px solid rgba(255,255,255,.6);}
.live-status{display:none;padding:1rem;background:#14532d;color:#fff;text-align:center;}
.grid{display:grid;gap:1.5rem;}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.04);transition:box-shadow .2s;display:flex;flex-direction:column;}
.card:hover{box-shadow:0 6px 16px rgba(0,0,0,.1);}
.card img{width:100%;height:200px;object-fit:cover;}
.card-body{padding:1.2rem;flex:1;display:flex;flex-direction:column;}
.card-category{color:var(--accent);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem;}
.card h3{margin:0 0 .5rem;font-size:1.15rem;line-height:1.3;}
.card p{margin:0 0 1rem;color:var(--muted);font-size:.95rem;flex:1;}
.card-footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);}
.content-split{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start;}
aside .widget{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.2rem;margin-bottom:1.5rem;}
.widget h3{margin:0 0 1rem;font-size:1.1rem;color:var(--primary);border-bottom:2px solid var(--border);padding-bottom:.4rem;}
.trend-list{list-style:none;margin:0;padding:0;}
.trend-list li{border-bottom:1px solid var(--border);padding:.6rem 0;}
.trend-list a{font-weight:500;}
.trend-list span{display:block;font-size:.75rem;color:var(--muted);margin-top:.15rem;}
.weather-mini .day{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;border-bottom:1px solid var(--border);}
.weather-mini img{width:44px;height:44px;}
.weather-mini .day-info{flex:1;}
.weather-mini .day-name{font-weight:600;}
.weather-mini .day-temp{font-size:.9rem;color:var(--muted);}
.calendar-list{list-style:none;margin:0;padding:0;}
.calendar-list li{padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.9rem;}
.newsletter-form{display:flex;flex-direction:column;gap:.5rem;}
.newsletter-form input,.newsletter-form button{padding:.6rem;border-radius:4px;border:1px solid var(--border);}
.newsletter-form button{background:var(--primary);color:#fff;border:none;cursor:pointer;font-weight:600;}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;}
.gallery img{width:100%;height:90px;object-fit:cover;border-radius:4px;}
.local-lead{font-size:1.1rem;margin-bottom:1.2rem;}
.local-feature{display:flex;gap:1.2rem;margin-bottom:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.local-feature img{width:260px;height:100%;object-fit:cover;min-height:180px;}
.local-feature div{padding:1.2rem;}
.local-feature h3{margin:0 0 .4rem;font-size:1.25rem;}
.local-feature p{margin:.5rem 0;color:var(--muted);}
.tip-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:1.2rem;margin-top:1.5rem;}
.tip-box h3{margin:0 0 .5rem;color:#1e40af;}
.tip-box p{margin:0 0 1rem;color:#374151;}
.tip-form{display:grid;gap:.7rem;}
.tip-form input,.tip-form textarea{width:100%;padding:.6rem;border:1px solid var(--border);border-radius:4px;font-family:inherit;font-size:.9rem;}
.tip-form button{justify-self:start;}
.weather-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.5rem;}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:2px solid var(--border);margin-bottom:1rem;}
.tab{padding:.6rem 1rem;background:#f1f5f9;border:none;border-radius:4px 4px 0 0;cursor:pointer;font-weight:600;color:var(--muted);}
.tab.active{background:var(--primary);color:#fff;}
.tab-content{display:none;}
.tab-content.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.forecast-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.forecast-header img{width:64px;height:64px;}
.forecast-header h3{margin:0;font-size:1.4rem;}
.forecast-header .cond{color:var(--muted);}
.forecast-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1rem 0;}
.detail-item{background:#f8fafc;border:1px solid var(--border);border-radius:6px;padding:.8rem;text-align:center;}
.detail-item strong{display:block;font-size:1.3rem;color:var(--primary);}
.detail-item span{font-size:.8rem;color:var(--muted);}
.weather-summary{margin-bottom:1rem;}
.opinion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.opinion-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.3rem;}
.opinion-card .type{color:var(--accent);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.opinion-card h3{margin:.3rem 0 .6rem;font-size:1.15rem;}
.opinion-card p{margin:0 0 1rem;color:var(--muted);font-size:.95rem;}
.author{display:flex;align-items:center;gap:.7rem;}
.author img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:.7rem;overflow:hidden;}
.faq summary{padding:1rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq summary::after{content:'+';font-size:1.2rem;color:var(--primary);}
.faq details[open] summary::after{content:'−';}
.faq .answer{padding:0 1rem 1rem;color:var(--muted);line-height:1.6;}
footer{background:#0f172a;color:#cbd5e1;padding:3rem 0 1.5rem;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:2rem;}
footer h4{color:#fff;margin:0 0 1rem;font-size:1.05rem;}
footer p,footer li{font-size:.9rem;line-height:1.7;}
footer ul{list-style:none;margin:0;padding:0;}
footer a{color:#94a3b8;}
footer a:hover{color:#fff;}
.social{display:flex;gap:.8rem;margin-top:.8rem;}
.social a{display:inline-block;background:#1e293b;padding:.4rem .7rem;border-radius:4px;font-size:.8rem;}
.footer-bottom{border-top:1px solid #1e293b;padding-top:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;}
@media(max-width:980px){.content-split{grid-template-columns:1fr;}}
@media(max-width:768px){
.menu-toggle{display:block;}
.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--primary);padding:1rem;}
.nav-links.open{display:flex;}
.hero-content h2{font-size:1.6rem;}
.hero-image img{height:320px;}
.brand-text h1{font-size:1.4rem;}
.local-feature{flex-direction:column;}
.local-feature img{width:100%;height:200px;}
}
</style>
</head>
<body>
<a href="#main" class="skip-link" style="position:absolute;left:-9999px;">Skip to content</a>
<div class="top-bar">
<div class="container">
<span id="current-date"></span>
<div class="ticker">
<span>Breaking</span>
<p>Coastal storm watch in effect for Metro Bay through Thursday • Regional council greenlights historic infrastructure bond • Downtown transit hub expansion opens two weeks early • CivicScope app now sends hyperlocal weather alerts •</p>
</div>
</div>
</div>
<header>
<div class="container">
<div class="brand">
<img src="https://placehold.co/180x60/0f4c81/ffffff?text=CivicScope&font=raleway" alt="CivicScope logo">
<div class="brand-text">
<h1>CivicScope</h1>
<p>Local clarity. Global context. Decisions start here.</p>
</div>
</div>
<form class="search" role="search" action="#" aria-label="Search CivicScope">
<input type="search" placeholder="Search news, weather, topics..." aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</header>
<nav aria-label="Primary navigation">
<div class="container">
<button class="menu-toggle" aria-label="Open menu" aria-expanded="false">☰</button>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#local">Local</a></li>
<li><a href="#world">World</a></li>
<li><a href="#weather">Weather</a></li>
<li><a href="#business">Business</a></li>
<li><a href="#opinion">Opinion</a></li>
<li><a href="#archive">Archive</a></li>
</ul>
</div>
</nav>
<main id="main">
<section class="hero" aria-label="Breaking news">
<div class="hero-image">
<img src="https://picsum.photos/seed/stormwatch/1200/600" alt="Storm clouds over Metro Bay waterfront">
<div class="hero-content">
<span class="hero-label">Breaking News</span>
<h2>Coastal Storm Watch Issued for Metro Bay Through Thursday</h2>
<p>The National Weather Service has placed the entire Metro Bay region under a coastal storm watch, with forecasters warning of heavy rainfall, gusty winds, and localized flooding during the Wednesday evening commute. Emergency managers are urging residents to secure outdoor items, review evacuation routes, and sign up for hyperlocal alerts as the system intensifies over the Gulf Stream.</p>
<div class="hero-meta">By the CivicScope Weather Desk • Updated 18 minutes ago</div>
<div class="cta-group">
<a href="#" class="btn btn-primary">Read Full Story</a>
<a href="#live" class="btn btn-accent">Watch Live Stream</a>
<a href="#weather" class="btn btn-outline">View Forecast</a>
</div>
</div>
</div>
<div class="live-player" id="live">
<div class="live-player-header">
<span class="live-dot" aria-hidden="true"></span>
<strong>LIVE</strong>
<span>Metro Bay Weather Cam & Briefing</span>
</div>
<div class="live-player-stage" id="liveStage">
<img src="https://placehold.co/1200x675/1e293b/ffffff?text=LIVE+STREAM&font=open+sans" alt="Live stream placeholder">
<div class="play-overlay" id="playOverlay" role="button" tabindex="0" aria-label="Play live stream">
<div class="play-btn">▶</div>
<p>Click to connect to the live briefing</p>
</div>
</div>
<div class="live-status" id="liveStatus" role="status" aria-live="polite">Connecting to the live feed…</div>
</div>
</section>
<section id="featured" aria-labelledby="featured-heading">
<div class="section-header">
<h2 id="featured-heading">Featured Stories</h2>
<a href="#archive">Browse the Archive →</a>
</div>
<div class="grid grid-3">
<article class="card">
<img src="https://picsum.photos/seed/council/600/340" alt="Regional council meeting">
<div class="card-body">
<span class="card-category">Local</span>
<h3>Regional Council Greenlights Historic Infrastructure Bond</h3>
<p>After months of debate, the Metro Regional Council voted 11–4 to place a $2.4 billion green infrastructure bond on the November ballot. The package would fund storm-water upgrades, expanded transit lines, and resilient power grids across the county.</p>
<div class="card-footer">
<span>8 min read</span>
<a href="#">Continue Reading →</a>
</div>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/seed/markets/600/340" alt="Global trading floor">
<div class="card-body">
<span class="card-category">World</span>
<h3>Global Markets React to New Climate Tariffs</h3>
<p>Major indices seesawed Monday as the European Union and several Asian trading partners announced retaliatory measures in response to new North American climate-related tariffs. Analysts say the dispute could reshape supply chains for clean-energy components.</p>
<div class="card-footer">
<span>6 min read</span>
<a href="#">Continue Reading →</a>
</div>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/seed/startup/600/340" alt="Clean water sensor prototype">
<div class="card-body">
<span class="card-category">Business</span>
<h3>Local Startup Wins Federal Grant for Clean Water Sensors</h3>
<p>AquaSense Labs, founded by two Metro State engineering graduates, secured a $4.2 million grant to deploy real-time water-quality sensors in the bay watershed. The devices promise earlier detection of contaminants following storm surges.</p>
<div class="card-footer">
<span>5 min read</span>
<a href="#">Continue Reading →</a>
</div>
</div>
</article>
</div>
</section>
<div class="container content-split">
<section id="local" aria-labelledby="local-heading">
<div class="section-header">
<h2 id="local-heading">Local Coverage</h2>
<a href="#">More Local News →</a>
</div>
<p class="local-lead">CivicScope’s local desk is embedded in the neighborhoods, school boards, and city halls that shape daily life in Metro Bay. Our reporters attend every council meeting, read every agenda, and verify every claim so you can stay informed without the noise.</p>
<article class="local-feature">
<img src="https://picsum.photos/seed/schoolbus/600/400" alt="School buses at Metro High School">
<div>
<span class="card-category">Education</span>
<h3>School Board Approves Later Start Times for Secondary Students</h3>
<p>Starting next fall, Metro high schools will begin at 8:45 a.m. and middle schools at 8:15 a.m., a shift district leaders say is backed by sleep-science research and years of parent advocacy. The board also approved expanded before-school care to help working families adjust to the new schedule.</p>
<p>Opponents raised concerns about after-school sports and part-time jobs, but a district-commissioned study estimated only minor schedule tweaks for athletics. Transportation officials are now redesigning bus routes to keep costs neutral.</p>
<a href="#" class="btn btn-primary">Read the Full Report</a>
</div>
</article>
<article class="local-feature">
<img src="https://picsum.photos/seed/transit/600/400" alt="New downtown transit hub">
<div>
<span class="card-category">Transportation</span>
<h3>Downtown Transit Hub Expansion Opens Two Weeks Early</h3>
<p>The $190 million renovation of the Metro Central Transit Hub is now open, adding four new bus bays, secure bike storage, and a weather-protected pedestrian bridge to the rail platform. Officials credited a mild winter and streamlined permitting for finishing ahead of the original Labor Day deadline.</p>
<p>Ridership on the first weekday exceeded projections by 18 percent, with commuters praising the real-time display boards and improved accessibility ramps. The hub is expected to anchor a broader mixed-use development scheduled to break ground next spring.</p>
<a href="#" class="btn btn-primary">See the Photo Tour</a>
</div>
</article>
<div class="tip-box">
<h3>Have a news tip?</h3>
<p>Our newsroom relies on readers like you. Share documents, photos, or eyewitness accounts securely. A CivicScope editor may follow up for verification.</p>
<form class="tip-form" onsubmit="event.preventDefault(); alert('Thank you — your tip has been sent to the CivicScope newsroom.');">
<input type="text" placeholder="Your name (optional)" aria-label="Your name">
<input type="email" placeholder="Email or phone" aria-label="Email or phone" required>
<textarea rows="4" placeholder="What should we know?" aria-label="Tip details" required></textarea>
<button type="submit" class="btn btn-accent">Submit Tip</button>
</form>
</div>
</section>
<aside aria-label="Sidebar">
<div class="widget">
<h3>Trending Now</h3>
<ul class="trend-list">
<li><a href="#">Coastal storm watch: what to expect</a><span>Weather • 22k views</span></li>
<li><a href="#">Council bond FAQ: how your taxes could change</a><span>Local • 18k views</span></li>
<li><a href="#">Op-ed: Why Metro Bay needs the new transit hub</a><span>Opinion • 14k views</span></li>
<li><a href="#">Five ways to prepare your home for flooding</a><span>Information • 11k views</span></li>
<li><a href="#">Market outlook after climate tariff news</a><span>Business • 9k views</span></li>
</ul>
</div>
<div class="widget weather-mini">
<h3>Weather Outlook</h3>
<div class="day">
<img src="https://placehold.co/44x44/0f4c81/ffffff?text=Rain&font=open+sans" alt="Rain icon">
<div class="day-info">
<div class="day-name">Today</div>
<div class="day-temp">72° / 64° • Rain, windy</div>
</div>
</div>
<div class="day">
<img src="https://placehold.co/44x44/e67e22/ffffff?text=Cloud&font=open+sans" alt="Clouds icon">
<div class="day-info">
<div class="day-name">Tomorrow</div>
<div class="day-temp">76° / 66° • Cloudy, showers</div>
</div>
</div>
<div class="day">
<img src="https://placehold.co/44x44/16a34a/ffffff?text=Sun&font=open+sans" alt="Sun icon">
<div class="day-info">
<div class="day-name">Wednesday</div>
<div class="day-temp">80° / 68° • Partly sunny</div>
</div>
</div>
</div>
<div class="widget">
<h3>Community Calendar</h3>
<ul class="calendar-list">
<li><strong>Aug 12</strong> — Bay Cleanup Volunteer Day, 9 a.m.</li>
<li><strong>Aug 14</strong> — School Board Town Hall, 6 p.m.</li>
<li><strong>Aug 17</strong> — Downtown Farmers Market Festival</li>
<li><strong>Aug 20</strong> — Transit Hub Ribbon Cutting</li>
</ul>
</div>
<div class="widget">
<h3>Newsletter</h3>
<p style="font-size:.9rem;color:var(--muted);margin-top:0;">Get the morning briefing in your inbox.</p>
<form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing to the CivicScope Morning Briefing.');">
<input type="email" placeholder="Enter your email" aria-label="Email for newsletter" required>
<button type="submit">Sign Up</button>
</form>
</div>
<div class="widget">
<h3>Photo Gallery</h3>
<div class="gallery">
<img src="https://picsum.photos/seed/gallery1/220/160" alt="Community event">
<img src="https://picsum.photos/seed/gallery2/220/160" alt="City skyline">
<img src="https://picsum.photos/seed/gallery3/220/160" alt="Beach cleanup">
<img src="https://picsum.photos/seed/gallery4/220/160" alt="Local market">
</div>
</div>
</aside>
</div>
<section id="weather" aria-labelledby="weather-heading">
<div class="section-header">
<h2 id="weather-heading">Weather Center</h2>
<a href="#">Interactive Radar →</a>
</div>
<p class="local-lead">Planning your week starts with reliable weather data. CivicScope meteorologists combine National Weather Service models with local sensor networks to bring you neighborhood-level forecasts, severe-weather alerts, and expert video briefings when conditions turn dangerous.</p>
<div class="weather-card">
<div class="tabs" role="tablist" aria-label="Five day forecast">
<button class="tab active" role="tab" aria-selected="true" data-target="day0">Today</button>
<button class="tab" role="tab" aria-selected="false" data-target="day1">Tue</button>
<button class="tab" role="tab" aria-selected="false" data-target="day2">Wed</button>
<button class="tab" role="tab" aria-selected="false" data-target="day3">Thu</button>
<button class="tab" role="tab" aria-selected="false" data-target="day4">Fri</button>
</div>
<div id="day0" class="tab-content active" role="tabpanel">
<div class="forecast-header">
<img src="https://placehold.co/64x64/0f4c81/ffffff?text=Rain&font=open+sans" alt="Rain">
<div>
<h3>Today</h3>
<div class="cond">Rain, breezy • High 72° / Low 64°</div>
</div>
</div>
<p class="weather-summary">A coastal low will bring periods of rain through the afternoon, with southeast winds gusting to 30 mph near the shore. Minor street flooding is possible in low-lying areas during the evening commute.</p>
<div class="forecast-detail">
<div class="detail-item"><strong>85%</strong><span>Rain chance</span></div>
<div class="detail-item"><strong>30 mph</strong><span>Wind gusts</span></div>
<div class="detail-item"><strong>78%</strong><span>Humidity</span></div>
<div class="detail-item"><strong>UV 2</strong><span>Index</span></div>
</div>
</div>
<div id="day1" class="tab-content" role="tabpanel">
<div class="forecast-header">
<img src="https://placehold.co/64x64/e67e22/ffffff?text=Cloud&font=open+sans" alt="Clouds">
<div>
<h3>Tuesday</h3>
<div class="cond">Cloudy, scattered showers • High 76° / Low 66°</div>
</div>
</div>
<p class="weather-summary">The heaviest rain shifts offshore by dawn, but lingering moisture will keep skies gray and trigger a few passing showers. It will feel muggy, with dew points climbing into the upper 60s.</p>
<div class="forecast-detail">
<div class="detail-item"><strong>55%</strong><span>Rain chance</span></div>
<div class="detail-item"><strong>18 mph</strong><span>Wind gusts</span></div>
<div class="detail-item"><strong>82%</strong><span>Humidity</span></div>
<div class="detail-item"><strong>UV 3</strong><span>Index</span></div>
</div>
</div>
<div id="day2" class="tab-content" role="tabpanel">
<div class="forecast-header">
<img src="https://placehold.co/64x64/16a34a/ffffff?text=Sun&font=open+sans" alt="Partly sunny">
<div>
<h3>Wednesday</h3>
<div class="cond">Partly sunny, warm • High 80° / Low 68°</div>
</div>
</div>
<p class="weather-summary">High pressure builds in from the west, allowing for partial sunshine and seasonably warm temperatures. A few isolated storms may pop up inland during the late afternoon.</p>
<div class="forecast-detail">
<div class="detail-item"><strong>25%</strong><span>Rain chance</span></div>
<div class="detail-item"><strong>10 mph</strong><span>Wind gusts</span></div>
<div class="detail-item"><strong>70%</strong><span>Humidity</span></div>
<div class="detail-item"><strong>UV 7</strong><span>Index</span></div>
</div>
</div>
<div id="day3" class="tab-content" role="tabpanel">
<div class="forecast-header">
<img src="https://placehold.co/64x64/dc2626/ffffff?text=Storm&font=open+sans" alt="Storms">
<div>
<h3>Thursday</h3>
<div class="cond">Strong storms likely • High 78° / Low 67°</div>
</div>
</div>
<p class="weather-summary">A vigorous cold front approaches from the Great Lakes, bringing the risk of severe thunderstorms Thursday afternoon and evening. Damaging winds and heavy downpours are the primary threats.</p>
<div class="forecast-detail">
<div class="detail-item"><strong>90%</strong><span>Rain chance</span></div>
<div class="detail-item"><strong>45 mph</strong><span>Wind gusts</span></div>
<div class="detail-item"><strong>85%</strong><span>Humidity</span></div>
<div class="detail-item"><strong>UV 4</strong><span>Index</span></div>
</div>
</div>
<div id="day4" class="tab-content" role="tabpanel">
<div class="forecast-header">
<img src="https://placehold.co/64x64/0f4c81/ffffff?text=Clear&font=open+sans" alt="Clear skies">
<div>
<h3>Friday</h3>
<div class="cond">Mostly sunny, less humid • High 77° / Low 62°</div>
</div>
</div>
<p class="weather-summary">Behind the front, drier air filters into Metro Bay, delivering comfortable humidity levels and plentiful sunshine. It will be an ideal end to the workweek for outdoor plans.</p>
<div class="forecast-detail">
<div class="detail-item"><strong>5%</strong><span>Rain chance</span></div>
<div class="detail-item"><strong>12 mph</strong><span>Wind gusts</span></div>
<div class="detail-item"><strong>55%</strong><span>Humidity</span></div>
<div class="detail-item"><strong>UV 8</strong><span>Index</span></div>
</div>
</div>
<div class="cta-group" style="margin-top:1.2rem;">
<a href="#live" class="btn btn-primary">Watch Weather</a>
<a href="#" class="btn btn-accent">Download App</a>
</div>
</div>
</section>
<section id="opinion" aria-labelledby="opinion-heading">
<div class="section-header">
<h2 id="opinion-heading">Opinion & Editorials</h2>
<a href="#">All Opinion →</a>
</div>
<div class="opinion-grid">
<article class="opinion-card">
<span class="type">Editorial</span>
<h3>Why the Storm Bond Is a Down Payment on Resilience</h3>
<p>Delaying infrastructure upgrades will only make the next storm more expensive. The council’s bond proposal is not perfect, but it is the most serious investment in regional resilience in a generation and deserves voter support.</p>
<div class="author">
<img src="https://i.pravatar.cc/64?u=civicscope-editorial" alt="CivicScope Editorial Board">
<div><strong>CivicScope Editorial Board</strong><br><span style="font-size:.8rem;color:var(--muted);">Aug 10, 2025</span></div>
</div>
</article>
<article class="opinion-card">
<span class="type">Op-Ed</span>
<h3>Commuter Rail Can’t Wait Another Decade</h3>
<p>As someone who has ridden the corridor for fifteen years, I have watched trains grow slower and more crowded. The new transit hub is a start, but true regional mobility requires dedicated track and frequent, all-day service.</p>
<div class="author">
<img src="https://i.pravatar.cc/64?u=op-ed-marcus" alt="Marcus Chen">
<div><strong>Marcus Chen</strong><br><span style="font-size:.8rem;color:var(--muted);">Contributing columnist</span></div>
</div>
</article>
<article class="opinion-card">
<span class="type">Guest Essay</span>
<h3>Building Heat Resilience, One Block at a Time</h3>
<p>Tree canopy and cool roofs are not amenities; they are public health infrastructure. Neighborhoods with the least shade suffer the highest emergency-room visits on hot days, and city policy must close that gap.</p>
<div class="author">
<img src="https://i.pravatar.cc/64?u=guest-amelia" alt="Dr. Amelia Ortiz">
<div><strong>Dr. Amelia Ortiz</strong><br><span style="font-size:.8rem;color:var(--muted);">Urban epidemiologist</span></div>
</div>
</article>
</div>
</section>
<section class="faq" aria-labelledby="faq-heading">
<div class="section-header">
<h2 id="faq-heading">Frequently Asked Questions</h2>
</div>
<details>
<summary>How do I receive severe weather alerts from CivicScope?</summary>
<div class="answer">You can sign up for email and SMS alerts through our weather center, or download the CivicScope app for push notifications tailored to your ZIP code. We issue alerts for tornadoes, flash floods, coastal storms, and winter weather based on National Weather Service warnings.</div>
</details>
<details>
<summary>Can I submit a news tip anonymously?</summary>
<div class="answer">Yes. The tip form above accepts anonymous submissions, and we also support encrypted email and Signal for sensitive sources. Our newsroom verifies all tips before publication and will protect your identity to the fullest extent allowed by law.</div>
</details>
<details>
<summary>What is the difference between an editorial and an op-ed?</div>
<div class="answer">Editorials represent the official position of the CivicScope Editorial Board and are unsigned. Op-eds are opinion pieces written by outside contributors, community leaders, or subject-matter experts and reflect the author’s own views. Guest essays are longer-form op-eds invited by our opinion editors.</div>
</details>
<details>
<summary>How can my business advertise on CivicScope?</summary>
<div class="answer">We offer display, newsletter, and podcast sponsorship packages designed for local businesses, nonprofits, and regional brands. Visit our advertising page or contact our partnerships team for a media kit and rate card customized to your goals.</div>
</details>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div>
<h4>About CivicScope</h4>
<p>CivicScope is an independent news, weather, and information service serving Metro Bay and surrounding counties. Our mission is to deliver accurate, timely, and useful coverage that helps communities make better decisions.</p>
<div class="social">
<a href="#">Twitter</a>
<a href="#">Facebook</a>
<a href="#">Instagram</a>
<a href="#">LinkedIn</a>
</div>
</div>
<div>
<h4>Sections</h4>
<ul>
<li><a href="#">Local</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Opinion</a></li>
<li><a href="#">Archive</a></li>
</ul>
</div>
<div>
<h4>Contact Us</h4>
<ul>
<li>123 Harbor Drive, Suite 400</li>
<li>Metro Bay, MB 55501</li>
<li>Phone: (555) 234-8900</li>
<li>Email: <a href="mailto:news@civicscope.news">news@civicscope.news</a></li>
</ul>
</div>
<div>
<h4>Information</h4>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Ethics Policy</a></li>
<li><a href="#">Submit a Correction</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="year"></span> CivicScope Media Group. All rights reserved.</p>
<p>Designed for informed communities.</p>
</div>
</div>
</footer>
<script>
const dateEl=document.getElementById('current-date');
const now=new Date();
dateEl.textContent=now.toLocaleDateString('en-US',{weekday:'long',year:'numeric',month:'long',day:'numeric'});
document.getElementById('year').textContent=now.getFullYear();
const menuToggle=document.querySelector('.menu-toggle');
const navLinks=document.querySelector('.nav-links');
menuToggle.addEventListener('click',()=>{
const open=navLinks.classList.toggle('open');
menuToggle.setAttribute('aria-expanded',open);
});
const tabs=document.querySelectorAll('.tab');
tabs.forEach(tab=>{
tab.addEventListener('click',()=>{
tabs.forEach(t=>{t.classList.remove('active');t.setAttribute('aria-selected','false');});
tab.classList.add('active');
tab.setAttribute('aria-selected','true');
document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active'));
document.getElementById(tab.dataset.target).classList.add('active');
});
});
const overlay=document.getElementById('playOverlay');
const status=document.getElementById('liveStatus');
overlay.addEventListener('click',()=>{
overlay.style.display='none';
status.style.display='block';
status.textContent='Connecting to the live feed…';
setTimeout(()=>{status.textContent='Streaming live — Metro Bay Weather Cam & Briefing';},1200);
});
overlay.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' ')overlay.click();});
</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:43:56.342Z",
"url": "https://benchmark.aimac.invalid/5e41d61b7c43b792453a0d7f67787d1f1a8888687e44cfa6f081923a18ea0ba6.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-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-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"play-overlay\" id=\"playOverlay\" role=\"button\" tabindex=\"0\" aria-label=\"Play live stream\">\n <div class=\"play-btn\">\u25b6</div>\n <p>Click to connect to the live briefing</p>\n </div>",
"target": [
"#playOverlay"
]
}
]
},
{
"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": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": "<span class=\"live-dot\" aria-hidden=\"true\"></span>",
"target": [
".live-dot"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"tabs\" role=\"tablist\" aria-label=\"Five day forecast\">",
"target": [
".tabs"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"tab active\" role=\"tab\" aria-selected=\"true\" data-target=\"day0\">Today</button>",
"target": [
"button[data-target=\"day0\"]"
]
}
]
},
{
"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": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": "<form class=\"search\" role=\"search\" action=\"#\" aria-label=\"Search CivicScope\">\n <input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">\n <button type=\"submit\">Search</button>\n </form>",
"target": [
".search"
]
}
]
},
{
"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": "<p style=\"font-size:.9rem;color:var(--muted);margin-top:0;\">Get the morning briefing in your inbox.</p>",
"target": [
".widget:nth-child(4) > p"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\">Search</button>",
"target": [
".search > button[type=\"submit\"]"
]
}
]
},
{
"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>CivicScope</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Coastal Storm Watch Issued for Metro Bay Through Thursday</h2>",
"target": [
".hero-content > h2"
]
},
{
"html": "<h2 id=\"featured-heading\">Featured Stories</h2>",
"target": [
"#featured-heading"
]
},
{
"html": "<h3>Regional Council Greenlights Historic Infrastructure Bond</h3>",
"target": [
".card:nth-child(1) > .card-body > h3"
]
},
{
"html": "<h3>Global Markets React to New Climate Tariffs</h3>",
"target": [
".card:nth-child(2) > .card-body > h3"
]
},
{
"html": "<h3>Local Startup Wins Federal Grant for Clean Water Sensors</h3>",
"target": [
".card:nth-child(3) > .card-body > h3"
]
},
{
"html": "<h2 id=\"local-heading\">Local Coverage</h2>",
"target": [
"#local-heading"
]
},
{
"html": "<h3>School Board Approves Later Start Times for Secondary Students</h3>",
"target": [
".local-feature:nth-child(3) > div > h3"
]
},
{
"html": "<h3>Downtown Transit Hub Expansion Opens Two Weeks Early</h3>",
"target": [
".local-feature:nth-child(4) > div > h3"
]
},
{
"html": "<h3>Have a news tip?</h3>",
"target": [
".tip-box > h3"
]
},
{
"html": "<h3>Trending Now</h3>",
"target": [
".widget:nth-child(1) > h3"
]
},
{
"html": "<h3>Weather Outlook</h3>",
"target": [
".weather-mini > h3"
]
},
{
"html": "<h3>Community Calendar</h3>",
"target": [
".widget:nth-child(3) > h3"
]
},
{
"html": "<h3>Newsletter</h3>",
"target": [
".widget:nth-child(4) > h3"
]
},
{
"html": "<h3>Photo Gallery</h3>",
"target": [
".widget:nth-child(5) > h3"
]
},
{
"html": "<h2 id=\"weather-heading\">Weather Center</h2>",
"target": [
"#weather-heading"
]
},
{
"html": "<h3>Today</h3>",
"target": [
"#day0 > .forecast-header > div > h3"
]
},
{
"html": "<h2 id=\"opinion-heading\">Opinion & Editorials</h2>",
"target": [
"#opinion-heading"
]
},
{
"html": "<h3>Why the Storm Bond Is a Down Payment on Resilience</h3>",
"target": [
".opinion-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Commuter Rail Can\u2019t Wait Another Decade</h3>",
"target": [
".opinion-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Building Heat Resilience, One Block at a Time</h3>",
"target": [
".opinion-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"faq-heading\">Frequently Asked Questions</h2>",
"target": [
"#faq-heading"
]
},
{
"html": "<h4>About CivicScope</h4>",
"target": [
"div:nth-child(1) > h4"
]
},
{
"html": "<h4>Sections</h4>",
"target": [
"div:nth-child(2) > h4"
]
},
{
"html": "<h4>Contact Us</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4>Information</h4>",
"target": [
"div:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main 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": "#ffffff",
"bgColor": "#0b3a63",
"contrastRatio": 11.66,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.66"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span id=\"current-date\">Thursday, November 12, 2026</span>",
"target": [
"#current-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": "featured-heading",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<h2 id=\"featured-heading\">Featured Stories</h2>",
"target": [
"#featured-heading"
]
}
]
},
{
"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": "<input type=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">",
"target": [
"input[type=\"search\"]"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/180x60/0f4c81/ffffff?text=CivicScope&font=raleway\" alt=\"CivicScope logo\">",
"target": [
"img[alt=\"CivicScope logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"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=\"search\" placeholder=\"Search news, weather, topics...\" aria-label=\"Search\">",
"target": [
"input[type=\"search\"]"
]
}
]
},
{
"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>",
"target": [
".local-feature:nth-child(3) > div"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"btn btn-primary\">Read the Full Report</a>",
"target": [
".local-feature:nth-child(3) > div > .btn-primary.btn[href=\"#\"]"
]
}
]
},
{
"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 href=\"#main\" class=\"skip-link\" style=\"position:absolute;left:-9999px;\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"nav-links\">",
"target": [
".nav-links"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#\" class=\"active\">Home</a></li>",
"target": [
".nav-links > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/180x60/0f4c81/ffffff?text=CivicScope&font=raleway\" alt=\"CivicScope logo\">",
"target": [
"img[alt=\"CivicScope logo\"]"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>How do I receive severe weather alerts from CivicScope?</summary>",
"target": [
"details:nth-child(2) > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 109.8,
"height": 25.6
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (109.8px by 25.6px, 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 href=\"#main\" class=\"skip-link\" style=\"position:absolute;left:-9999px;\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": "pseudoContent",
"expectedContrastRatio": "4.5:1"
},
"relatedNodes": [
{
"html": "<div class=\"hero-image\">",
"target": [
".hero-image"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"hero-label\">Breaking News</span>",
"target": [
".hero-label"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"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": "#e67e22",
"bgColor": "#f8fafc",
"contrastRatio": 2.72,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#archive\">Browse the Archive \u2192</a>",
"target": [
".section-header > a[href$=\"#archive\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"card-category\">Local</span>",
"target": [
".card:nth-child(1) > .card-body > .card-category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"card-category\">World</span>",
"target": [
".card:nth-child(2) > .card-body > .card-category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"card-category\">Business</span>",
"target": [
".card:nth-child(3) > .card-body > .card-category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#f8fafc",
"contrastRatio": 2.72,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">More Local News \u2192</a>",
"target": [
"#local > .section-header > a[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"local-feature\">",
"target": [
".local-feature:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"card-category\">Education</span>",
"target": [
".local-feature:nth-child(3) > div > .card-category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"local-feature\">",
"target": [
".local-feature:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"card-category\">Transportation</span>",
"target": [
".local-feature:nth-child(4) > div > .card-category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e67e22",
"contrastRatio": 2.84,
"fontSize": "10.0pt (13.3333px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"btn btn-accent\">Submit Tip</button>",
"target": [
".btn-accent.btn[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #e67e22, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"btn btn-accent\">Submit Tip</button>",
"target": [
".btn-accent.btn[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #e67e22, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#f8fafc",
"contrastRatio": 2.72,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Interactive Radar \u2192</a>",
"target": [
"#weather > .section-header > a[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#f1f5f9",
"contrastRatio": 4.41,
"fontSize": "10.0pt (13.3333px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day1\">Tue</button>",
"target": [
"button[data-target=\"day1\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day1\">Tue</button>",
"target": [
"button[data-target=\"day1\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#f1f5f9",
"contrastRatio": 4.41,
"fontSize": "10.0pt (13.3333px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day2\">Wed</button>",
"target": [
"button[data-target=\"day2\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day2\">Wed</button>",
"target": [
"button[data-target=\"day2\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#f1f5f9",
"contrastRatio": 4.41,
"fontSize": "10.0pt (13.3333px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day3\">Thu</button>",
"target": [
"button[data-target=\"day3\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day3\">Thu</button>",
"target": [
"button[data-target=\"day3\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#f1f5f9",
"contrastRatio": 4.41,
"fontSize": "10.0pt (13.3333px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day4\">Fri</button>",
"target": [
"button[data-target=\"day4\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day4\">Fri</button>",
"target": [
"button[data-target=\"day4\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #6b7280, background color: #f1f5f9, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e67e22",
"contrastRatio": 2.84,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-accent\">Download App</a>",
"target": [
".btn-accent.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #e67e22, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-accent\">Download App</a>",
"target": [
".btn-accent.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #e67e22, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#f8fafc",
"contrastRatio": 2.72,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">All Opinion \u2192</a>",
"target": [
"#opinion > .section-header > a[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #e67e22, background color: #f8fafc, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"opinion-card\">",
"target": [
".opinion-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"type\">Editorial</span>",
"target": [
".opinion-card:nth-child(1) > .type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"opinion-card\">",
"target": [
".opinion-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"type\">Op-Ed</span>",
"target": [
".opinion-card:nth-child(2) > .type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e67e22",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"opinion-card\">",
"target": [
".opinion-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"type\">Guest Essay</span>",
"target": [
".opinion-card:nth-child(3) > .type"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #e67e22, background color: #ffffff, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "target-size",
"impact": "serious",
"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": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 765.2,
"height": 7.5
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
},
{
"html": "<a href=\"#local\">Local</a>",
"target": [
"a[href$=\"#local\"]"
]
},
{
"html": "<a href=\"#world\">World</a>",
"target": [
"a[href$=\"#world\"]"
]
},
{
"html": "<a href=\"#weather\">Weather</a>",
"target": [
"li:nth-child(4) > a[href$=\"#weather\"]"
]
},
{
"html": "<a href=\"#business\">Business</a>",
"target": [
"a[href$=\"#business\"]"
]
},
{
"html": "<a href=\"#opinion\">Opinion</a>",
"target": [
"a[href$=\"#opinion\"]"
]
},
{
"html": "<a href=\"#archive\">Archive</a>",
"target": [
"li:nth-child(7) > a[href$=\"#archive\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 765.2px by 7.5px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 7.6,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#business\">Business</a>",
"target": [
"a[href$=\"#business\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 7.6px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input type=\"email\" placeholder=\"Email or phone\" aria-label=\"Email or phone\" required=\"\">",
"target": [
"input[placeholder=\"Email or phone\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 765.2px by 7.5px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 7.6px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 70.3,
"height": 14.3
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 70.3px by 14.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 14.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab active\" role=\"tab\" aria-selected=\"true\" data-target=\"day0\">Today</button>",
"target": [
"button[data-target=\"day0\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 70.3px by 14.3px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 54.7,
"height": 14.3
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
},
{
"html": "<a href=\"#local\">Local</a>",
"target": [
"a[href$=\"#local\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 54.7px by 14.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 14.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
},
{
"html": "<a href=\"#local\">Local</a>",
"target": [
"a[href$=\"#local\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day1\">Tue</button>",
"target": [
"button[data-target=\"day1\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 54.7px by 14.3px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 59.9,
"height": 14.3
},
"relatedNodes": [
{
"html": "<a href=\"#local\">Local</a>",
"target": [
"a[href$=\"#local\"]"
]
},
{
"html": "<a href=\"#world\">World</a>",
"target": [
"a[href$=\"#world\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 59.9px by 14.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 14.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#local\">Local</a>",
"target": [
"a[href$=\"#local\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day2\">Wed</button>",
"target": [
"button[data-target=\"day2\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 59.9px by 14.3px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 56.4,
"height": 14.3
},
"relatedNodes": [
{
"html": "<a href=\"#world\">World</a>",
"target": [
"a[href$=\"#world\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 56.4px by 14.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 14.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#world\">World</a>",
"target": [
"a[href$=\"#world\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day3\">Thu</button>",
"target": [
"button[data-target=\"day3\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 56.4px by 14.3px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"messageKey": "partiallyObscured",
"minSize": 24,
"width": 49,
"height": 14.3
},
"relatedNodes": [
{
"html": "<a href=\"#world\">World</a>",
"target": [
"a[href$=\"#world\"]"
]
},
{
"html": "<a href=\"#weather\">Weather</a>",
"target": [
"li:nth-child(4) > a[href$=\"#weather\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient size because it is partially obscured (smallest space is 49px by 14.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 14.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#weather\">Weather</a>",
"target": [
"li:nth-child(4) > a[href$=\"#weather\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"tab\" role=\"tab\" aria-selected=\"false\" data-target=\"day4\">Fri</button>",
"target": [
"button[data-target=\"day4\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size because it is partially obscured (smallest space is 49px by 14.3px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14.4px instead of at least 24px."
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5812
},
{
"y": 576,
"height": 5812
},
{
"y": 1152,
"height": 5812
},
{
"y": 1728,
"height": 5812
},
{
"y": 2304,
"height": 5812
},
{
"y": 2880,
"height": 5812
},
{
"y": 3456,
"height": 5812
},
{
"y": 4032,
"height": 5812
},
{
"y": 4608,
"height": 5812
},
{
"y": 5092,
"height": 5812
}
],
"scans": 11,
"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: "Archive", "Local", "World".
- **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: "Feature Articles", "Local Coverage", "Weather Forecasts".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "op-ed", "breaking news", "editorial".
- **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 Weather", "Download App", "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: "live stream player".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "community news", "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.