Anthropic Claude Opus 5.5 – Government

via Azure · Generated

  • AIMAC Debt 8.22
  • Cost $0.49
  • Total Violations 19
  • HTML Size 55 KB
  • Em Dashes 7

Screenshot

View Anthropic Claude Opus 5.5 Government page View Live Page

Accessibility Issues Found

19 Serious

  • color-contrast serious 16 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="status ok">Operational</span>
  • target-size serious 3 instances

    All touch targets must be 24px large, or leave sufficient space

    Example HTML <a href="#" class="btn btn-primary">Sign Up for BrightAlert</a>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brightwater County | Official Government Portal</title>
<meta name="description" content="The official website of Brightwater County. Access public services, meeting calendars, budget documents, public records, jobs, and news.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Merriweather:wght@700;900&display=swap" rel="stylesheet">
<style>
:root{
  --navy:#0f2a47;
  --navy-2:#173a61;
  --navy-3:#e8eef5;
  --gold:#d4a72c;
  --gold-2:#f3e2b0;
  --red:#b42318;
  --green:#1f7a4d;
  --ink:#1c2430;
  --muted:#5a6676;
  --line:#dde3ea;
  --bg:#f6f8fb;
  --white:#fff;
  --radius:10px;
  --shadow:0 6px 24px rgba(15,42,71,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Public Sans",system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--navy-2)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:"Merriweather",Georgia,serif;color:var(--navy);line-height:1.25}
h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:.6rem}
h3{font-size:1.15rem}
p+p{margin-top:.9rem}
.container{width:min(1200px,92%);margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy);padding:.6rem 1rem;z-index:999;font-weight:700}
.skip:focus{left:1rem}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.section{padding:80px 0}
.section.alt{background:var(--bg)}
.section-head{max-width:760px;margin-bottom:2.5rem}
.section-head p{color:var(--muted);font-size:1.05rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:8px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:.95rem;transition:.2s;font-family:inherit}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#e3b843}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Official banner */
.gov-banner{background:#0a1d33;color:#c9d4e2;font-size:.8rem}
.gov-banner .container{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;gap:1rem;flex-wrap:wrap}
.gov-banner span strong{color:#fff}
.gov-banner .utils{display:flex;gap:1.2rem}
.gov-banner a{color:#c9d4e2;text-decoration:none}
.gov-banner a:hover{color:#fff;text-decoration:underline}

/* Alert */
.alert{background:var(--red);color:#fff}
.alert .container{display:flex;align-items:center;gap:1rem;padding:.75rem 0}
.alert .tag{background:#fff;color:var(--red);font-weight:800;font-size:.72rem;padding:.2rem .55rem;border-radius:4px;letter-spacing:.06em;white-space:nowrap}
.alert p{flex:1;font-size:.92rem}
.alert a{color:#fff;font-weight:700}
.alert button{background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1}

/* Header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.brand img{width:62px;height:62px;border-radius:50%;border:3px solid var(--gold)}
.brand .name{font-family:"Merriweather",serif;font-weight:900;font-size:1.35rem;color:var(--navy);display:block;line-height:1.1}
.brand .tagline{font-size:.82rem;color:var(--muted);font-weight:500}
.header-actions{display:flex;gap:.6rem;align-items:center}
.menu-toggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:.6rem .9rem;font-weight:700;cursor:pointer;font-family:inherit}
nav.primary{background:var(--navy)}
nav.primary ul{list-style:none;display:flex;flex-wrap:wrap}
nav.primary a{display:block;color:#fff;text-decoration:none;padding:.9rem 1.05rem;font-weight:600;font-size:.94rem;border-bottom:3px solid transparent}
nav.primary a:hover,nav.primary a.active{background:var(--navy-2);border-bottom-color:var(--gold)}

/* Hero */
.hero{position:relative;color:#fff;background:linear-gradient(100deg,rgba(10,29,51,.94) 0%,rgba(15,42,71,.82) 45%,rgba(15,42,71,.35) 100%),url("https://picsum.photos/1800/800?random=11") center/cover}
.hero .container{padding:90px 0 110px;display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}
.hero h1{color:#fff;font-size:clamp(2rem,4vw,3.1rem);margin-bottom:1rem}
.hero p.lead{font-size:1.12rem;color:#dbe4ef;max-width:620px}
.search{margin-top:1.8rem;display:flex;background:#fff;border-radius:10px;overflow:hidden;max-width:620px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.search input{flex:1;border:0;padding:1rem 1.2rem;font-size:1rem;font-family:inherit;color:var(--ink)}
.search button{border:0;background:var(--gold);color:var(--navy);font-weight:800;padding:0 1.5rem;cursor:pointer;font-family:inherit;font-size:1rem}
.popular{margin-top:1rem;font-size:.88rem;color:#c9d4e2}
.popular a{color:#fff;margin-right:.7rem}
.hero-card{background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:1.6rem}
.hero-card h3{color:#fff;font-size:1.05rem;margin-bottom:1rem}
.hero-card ul{list-style:none}
.hero-card li{display:flex;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:.93rem}
.hero-card li:last-child{border:0}
.hero-card .status{font-weight:700;font-size:.8rem;padding:.15rem .55rem;border-radius:20px}
.ok{background:#d1f0df;color:var(--green)}
.warn{background:#fdecc8;color:#8a5a00}

/* Quick services */
.quick{margin-top:-60px;position:relative;z-index:2}
.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.quick a{background:#fff;border-radius:var(--radius);padding:1.4rem 1rem;text-align:center;text-decoration:none;color:var(--navy);box-shadow:var(--shadow);border-top:4px solid var(--gold);transition:.2s;font-weight:700;font-size:.93rem}
.quick a:hover{transform:translateY(-4px);border-top-color:var(--navy)}
.quick .ico{font-size:1.9rem;display:block;margin-bottom:.5rem}

/* Layout w/ sidebar */
.with-sidebar{display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:start}
aside.sidebar{position:sticky;top:150px;display:grid;gap:1.4rem}
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.widget h3{font-size:1rem;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:2px solid var(--gold)}
.widget ul{list-style:none}
.widget li{padding:.65rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.widget li:last-child{border:0}
.widget li strong{display:block;color:var(--navy)}
.widget small{color:var(--muted)}
.widget.emergency{background:#fff5f4;border-color:#f3c6c1}
.widget.emergency h3{color:var(--red);border-color:var(--red)}
.widget .more{display:inline-block;margin-top:.6rem;font-weight:700;font-size:.88rem}

/* Feature grid */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.feature img{height:170px;object-fit:cover;width:100%}
.feature .body{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.feature p{color:var(--muted);font-size:.94rem;margin:.5rem 0 1rem;flex:1}
.feature a.link{font-weight:700;text-decoration:none}
.feature a.link:hover{text-decoration:underline}

.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.split img{border-radius:14px;box-shadow:var(--shadow)}
.checklist{list-style:none;margin:1.2rem 0}
.checklist li{padding-left:1.8rem;position:relative;margin:.5rem 0}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;width:1.25rem;height:1.25rem;background:var(--navy);color:var(--gold);border-radius:50%;font-size:.75rem;display:grid;place-items:center;font-weight:800}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
.stat{background:var(--navy-3);border-radius:var(--radius);padding:1rem;text-align:center}
.stat b{display:block;font-size:1.6rem;color:var(--navy);font-family:"Merriweather",serif}
.stat span{font-size:.82rem;color:var(--muted)}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}

/* Officials */
.officials{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.official{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1rem;text-align:center;transition:.2s}
.official:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.official img{width:110px;height:110px;border-radius:50%;margin:0 auto .9rem;border:4px solid var(--navy-3)}
.official h3{font-size:1rem}
.official .role{color:var(--gold);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:.25rem 0 .5rem;display:block;filter:brightness(.8)}
.official p{font-size:.85rem;color:var(--muted)}
.official a{font-size:.85rem;font-weight:700;display:inline-block;margin-top:.6rem}

/* Budget */
.budget{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem}
.bars{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem;box-shadow:var(--shadow)}
.bars h3{margin-bottom:.3rem}
.bars .sub{font-size:.86rem;color:var(--muted);margin-bottom:1.2rem}
.bar{margin:.9rem 0}
.bar .lbl{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;margin-bottom:.3rem}
.bar .track{height:12px;background:var(--navy-3);border-radius:10px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--navy-2));border-radius:10px;width:0;transition:width 1.2s ease}
.bar:nth-child(odd) .fill{background:linear-gradient(90deg,#b88a14,var(--gold))}
.doc-list{list-style:none;margin-top:1.2rem}
.doc-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:8px;margin-bottom:.6rem;background:#fff}
.doc-list .meta{font-size:.8rem;color:var(--muted)}
.doc-list a{font-weight:700;font-size:.86rem;white-space:nowrap}

/* Calendar */
.cal-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:start}
.calendar{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.cal-head{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:1rem 1.2rem}
.cal-head h3{color:#fff;font-size:1.1rem}
.cal-head button{background:rgba(255,255,255,.12);border:0;color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:1.1rem}
.cal-head button:hover{background:rgba(255,255,255,.25)}
.cal-filters{display:flex;gap:.4rem;flex-wrap:wrap;padding:.8rem 1.2rem;border-bottom:1px solid var(--line)}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:.3rem .8rem;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.grid-days{display:grid;grid-template-columns:repeat(7,1fr);padding:.8rem}
.grid-days .dow{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;padding:.4rem 0}
.day{aspect-ratio:1/1;border:0;background:none;border-radius:8px;font-family:inherit;font-size:.92rem;cursor:pointer;position:relative;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column}
.day:hover{background:var(--navy-3)}
.day.empty{cursor:default}
.day.empty:hover{background:none}
.day.today{font-weight:800;color:var(--navy);box-shadow:inset 0 0 0 2px var(--gold)}
.day.selected{background:var(--navy);color:#fff}
.dots{display:flex;gap:3px;margin-top:3px;height:6px}
.dots i{width:6px;height:6px;border-radius:50%;display:block}
.c-council{background:var(--navy-2)}
.c-hearing{background:var(--red)}
.c-board{background:var(--green)}
.c-community{background:var(--gold)}
.day.selected .c-council{background:#fff}
.legend{display:flex;gap:1rem;flex-wrap:wrap;padding:0 1.2rem 1rem;font-size:.78rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:.35rem}
.legend i{width:9px;height:9px;border-radius:50%;display:block}
.event-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem;box-shadow:var(--shadow);min-height:100%}
.event-panel h3{margin-bottom:1rem}
.event{border-left:4px solid var(--navy-2);padding:.8rem 1rem;background:var(--bg);border-radius:0 8px 8px 0;margin-bottom:.8rem}
.event.hearing{border-color:var(--red)}
.event.board{border-color:var(--green)}
.event.community{border-color:var(--gold)}
.event .type{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.event h4{color:var(--navy);margin:.2rem 0;font-size:1rem}
.event p{font-size:.86rem;color:var(--muted)}
.event .ev-links{margin-top:.5rem;display:flex;gap:.9rem;font-size:.83rem;font-weight:700}
.empty-msg{color:var(--muted);font-size:.92rem}

/* News */
.news-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem}
.news-main{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.news-main img{height:300px;object-fit:cover;width:100%}
.news-main .body{padding:1.5rem}
.news-side{display:grid;gap:1rem}
.news-item{display:grid;grid-template-columns:120px 1fr;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.news-item img{height:100%;object-fit:cover}
.news-item .body{padding:.9rem .9rem .9rem 0}
.news-item h4{color:var(--navy);font-size:.97rem;line-height:1.35}
.date{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.news-main h3{font-size:1.35rem;margin:.4rem 0 .7rem}
.news-main p{color:var(--muted)}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tcard{background:#fff;border-radius:14px;padding:1.6rem;border:1px solid var(--line);position:relative}
.tcard::before{content:"“";font-family:Merriweather,serif;font-size:4rem;color:var(--gold-2);position:absolute;top:.2rem;right:1.2rem;line-height:1}
.tcard p{font-size:.95rem;color:var(--ink)}
.tcard .who{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem}
.tcard .who img{width:48px;height:48px;border-radius:50%}
.tcard .who b{display:block;color:var(--navy);font-size:.93rem}
.tcard .who small{color:var(--muted)}
.stars{color:var(--gold);letter-spacing:2px;margin-bottom:.6rem}

/* Records CTA */
.records{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;border-radius:18px;padding:3rem;display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
.records h2{color:#fff}
.records p{color:#d3deea}
.records ol{margin:1rem 0 0 1.2rem;color:#d3deea;font-size:.93rem}
.records img{border-radius:12px}

/* FAQ */
.faq{max-width:880px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.8rem;background:#fff;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:1.1rem 1.3rem;font-size:1rem;font-weight:700;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:inherit}
.faq-q .pm{font-size:1.4rem;color:var(--gold);transition:transform .25s;flex-shrink:0}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a .inner{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.95rem}

/* Footer */
footer{background:#0a1d33;color:#b9c6d6;padding:60px 0 0;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
footer h4{color:#fff;font-size:1rem;margin-bottom:1rem;font-family:"Public Sans",sans-serif}
footer ul{list-style:none}
footer li{margin:.45rem 0}
footer a{color:#b9c6d6;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.foot-brand{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.foot-brand img{width:52px;height:52px;border-radius:50%;border:2px solid var(--gold)}
.foot-brand b{color:#fff;font-family:Merriweather,serif;font-size:1.1rem}
.social{display:flex;gap:.5rem;margin-top:1rem}
.social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff}
.social a:hover{background:var(--gold);color:var(--navy);text-decoration:none}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:3rem;padding:1.3rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.84rem}
.foot-bottom nav a{margin-left:1.2rem}
.newsletter{display:flex;margin-top:.8rem}
.newsletter input{flex:1;padding:.7rem;border:0;border-radius:6px 0 0 6px;font-family:inherit;min-width:0}
.newsletter button{border:0;background:var(--gold);color:var(--navy);font-weight:800;padding:0 1rem;border-radius:0 6px 6px 0;cursor:pointer;font-family:inherit}

@media (max-width:1100px){
  .quick-grid{grid-template-columns:repeat(3,1fr)}
  .officials{grid-template-columns:repeat(3,1fr)}
  .with-sidebar{grid-template-columns:1fr}
  aside.sidebar{position:static;grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero .container,.split,.budget,.cal-wrap,.news-grid,.records,.foot-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .menu-toggle{display:block}
  nav.primary{display:none}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column}
  .header-actions .btn{display:none}
  aside.sidebar{grid-template-columns:1fr}
  .records{padding:2rem}
}
@media (max-width:560px){
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .officials{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:1fr}
  .news-item{grid-template-columns:90px 1fr}
  .gov-banner .utils{display:none}
}
</style>
</head>
<body>
<a href="#main" class="skip">Skip to main content</a>

<div class="gov-banner">
  <div class="container">
    <span>🏛️ <strong>An official website of Brightwater County.</strong> Here's how you know: official sites use <strong>.gov</strong></span>
    <div class="utils">
      <a href="#">Español</a><a href="#">中文</a><a href="#">Tiếng Việt</a><a href="#">Accessibility</a><a href="#">Text Size A+</a>
    </div>
  </div>
</div>

<div class="alert" id="alert" role="alert">
  <div class="container">
    <span class="tag">ADVISORY</span>
    <p><strong>Winter Storm Watch</strong> in effect Thursday 6 PM – Saturday 8 AM. Warming centers open at all county libraries. <a href="#safety">View preparedness resources →</a></p>
    <button aria-label="Dismiss alert" onclick="document.getElementById('alert').remove()">×</button>
  </div>
</div>

<header class="site">
  <div class="container header-top">
    <a href="#" class="brand" aria-label="Brightwater County home">
      <img src="https://placehold.co/124x124/0f2a47/d4a72c?text=BC&font=playfair+display" alt="Brightwater County seal">
      <span>
        <span class="name">Brightwater County</span>
        <span class="tagline">Open Government. Stronger Communities.</span>
      </span>
    </a>
    <div class="header-actions">
      <a href="#records" class="btn btn-outline">Access Records</a>
      <a href="#services" class="btn btn-primary">Pay a Bill</a>
      <button class="menu-toggle" aria-expanded="false" aria-controls="primary-nav" id="menuToggle">☰ Menu</button>
    </div>
  </div>
  <nav class="primary" id="primary-nav" aria-label="Primary">
    <div class="container">
      <ul>
        <li><a href="#services" class="active">Services</a></li>
        <li><a href="#safety">Public Safety</a></li>
        <li><a href="#officials">Elected Officials</a></li>
        <li><a href="#budget">Budget &amp; Finance</a></li>
        <li><a href="#meetings">Meetings</a></li>
        <li><a href="#jobs">Jobs</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#faqs">FAQs</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

<main id="main">
  <section class="hero">
    <div class="container">
      <div>
        <span class="eyebrow">Serving 412,000 Residents Across 14 Municipalities</span>
        <h1>Your county government, open and working for you.</h1>
        <p class="lead">From property tax payments and building permits to public hearings and voter registration, Brightwater County puts essential services, public records, and decision-making within reach — online, in person, and around the clock.</p>
        <form class="search" role="search" onsubmit="event.preventDefault();alert('Search is a demonstration on this page.');">
          <label for="q" class="skip">Search county services</label>
          <input id="q" type="search" placeholder="How can we help? Try “building permit” or “property tax”">
          <button type="submit">Search</button>
        </form>
        <p class="popular">Popular: <a href="#">Trash schedule</a><a href="#">Marriage license</a><a href="#">Report a pothole</a><a href="#">Dog license</a></p>
      </div>
      <div class="hero-card">
        <h3>Service Status — Today</h3>
        <ul>
          <li>Online Tax Portal <span class="status ok">Operational</span></li>
          <li>Permit Center (Main St.) <span class="status ok">Open 8–5</span></li>
          <li>Recycling Collection <span class="status warn">1-Day Delay</span></li>
          <li>Transit Route 12 <span class="status warn">Detour</span></li>
          <li>311 Call Center <span class="status ok">~2 min wait</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="quick" id="services" aria-label="Quick services">
    <div class="container quick-grid">
      <a href="#"><span class="ico">💳</span>Pay Property Tax</a>
      <a href="#"><span class="ico">🏗️</span>Apply for Permit</a>
      <a href="#"><span class="ico">🗳️</span>Register to Vote</a>
      <a href="#"><span class="ico">📄</span>Request Records</a>
      <a href="#"><span class="ico">📞</span>Report an Issue (311)</a>
      <a href="#jobs"><span class="ico">💼</span>Find a Job</a>
    </div>
  </section>

  <section class="section">
    <div class="container with-sidebar">
      <div>
        <!-- Services -->
        <div class="section-head">
          <span class="eyebrow">Resident Services</span>
          <h2>Everything you need, in one place</h2>
          <p>We have redesigned our service catalog around the moments that matter most to residents and businesses. Most transactions can now be completed entirely online, with clear timelines, fee schedules, and real-time status tracking.</p>
          <p>Prefer to speak with someone? Our Customer Service Centers in Brightwater, Marlow Falls, and Eastport are staffed by bilingual specialists Monday through Saturday.</p>
        </div>
        <div class="features">
          <article class="feature">
            <img src="https://picsum.photos/640/340?random=21" alt="Construction site with permit board">
            <div class="body">
              <h3>Permits &amp; Inspections</h3>
              <p>Apply for residential and commercial building, electrical, plumbing, and zoning permits. Schedule inspections online and track plan review with our transparent 10-day average turnaround.</p>
              <a class="link" href="#">Apply for Permit →</a>
            </div>
          </article>
          <article class="feature">
            <img src="https://picsum.photos/640/340?random=22" alt="Residential neighborhood homes">
            <div class="body">
              <h3>Property &amp; Taxes</h3>
              <p>Look up assessments, pay property taxes, file a homestead exemption, or appeal your valuation before the Board of Equalization. Installment plans are available for qualifying households.</p>
              <a class="link" href="#">Look Up My Property →</a>
            </div>
          </article>
          <article class="feature">
            <img src="https://picsum.photos/640/340?random=23" alt="Community health clinic">
            <div class="body">
              <h3>Health &amp; Human Services</h3>
              <p>Find vaccination clinics, apply for food and rental assistance, access senior services, and connect with behavioral health support through a single, confidential intake form.</p>
              <a class="link" href="#">Check Eligibility →</a>
            </div>
          </article>
          <article class="feature">
            <img src="https://picsum.photos/640/340?random=24" alt="County park with trees">
            <div class="body">
              <h3>Parks, Libraries &amp; Recreation</h3>
              <p>Reserve picnic pavilions, register for youth sports, renew your library card, and explore 38 county parks and 11 library branches offering free Wi-Fi, makerspaces, and tax-prep help.</p>
              <a class="link" href="#">Reserve a Facility →</a>
            </div>
          </article>
        </div>

        <!-- Public safety -->
        <div id="safety" style="margin-top:80px" class="split">
          <div>
            <span class="eyebrow">Public Safety</span>
            <h2>Prepared, responsive, and accountable</h2>
            <p>The Brightwater County Sheriff's Office, Fire &amp; Rescue, and Office of Emergency Management work together to keep every neighborhood safe. Our coordinated Emergency Operations Center monitors weather, traffic, and public health conditions 24 hours a day.</p>
            <p>We publish response-time data, use-of-force reports, and community policing outcomes quarterly as part of our commitment to transparency. Sign up for BrightAlert to receive emergency notifications by text, email, or voice call in your preferred language.</p>
            <div class="stat-row">
              <div class="stat"><b>6:12</b><span>Avg. fire/EMS response (min)</span></div>
              <div class="stat"><b>18%</b><span>Decline in property crime YoY</span></div>
              <div class="stat"><b>96k</b><span>BrightAlert subscribers</span></div>
            </div>
            <ul class="checklist">
              <li>Build a 72-hour emergency kit and family communication plan</li>
              <li>Find your evacuation zone and nearest shelter location</li>
              <li>Request a free home smoke-alarm installation</li>
            </ul>
            <div class="btn-row">
              <a href="#" class="btn btn-primary">Sign Up for BrightAlert</a>
              <a href="#" class="btn btn-outline">View Safety Dashboard</a>
            </div>
          </div>
          <img src="https://picsum.photos/700/760?random=31" alt="Emergency responders at the county operations center">
        </div>
      </div>

      <aside class="sidebar" aria-label="Announcements and alerts">
        <div class="widget emergency">
          <h3>⚠️ Emergency Alerts</h3>
          <ul>
            <li><strong>Winter Storm Watch</strong><small>Thu 6 PM – Sat 8 AM · Issued by OEM</small></li>
            <li><strong>Boil Water Notice Lifted</strong><small>Eastport District · Updated 9:40 AM</small></li>
          </ul>
          <a class="more" href="#">All alerts →</a>
        </div>
        <div class="widget" id="jobs">
          <h3>💼 Current Job Openings</h3>
          <ul>
            <li><strong>Civil Engineer II</strong><small>Public Works · $82,400–$104,900 · Closes Feb 14</small></li>
            <li><strong>Firefighter / EMT Recruit</strong><small>Fire &amp; Rescue · $61,200 + benefits · Open until filled</small></li>
            <li><strong>Library Associate (Part-Time)</strong><small>Libraries · $21.40/hr · Closes Feb 9</small></li>
            <li><strong>Budget Analyst</strong><small>Finance · $74,000–$92,500 · Closes Feb 21</small></li>
          </ul>
          <a class="more" href="#">View all 63 openings →</a>
        </div>
        <div class="widget">
          <h3>📢 Public Announcements</h3>
          <ul>
            <li><strong>Notice of Public Hearing: Zoning Text Amendment ZTA-24-07</strong><small>Comments accepted through Feb 18</small></li>
            <li><strong>Request for Proposals: Fleet Electrification</strong><small>RFP #2025-031 · Due Mar 3</small></li>
            <li><strong>Free Tax Preparation Sites Now Open</strong><small>Households earning under $67,000</small></li>
          </ul>
        </div>
        <div class="widget">
          <h3>📞 Quick Contacts</h3>
          <ul>
            <li><strong>Emergency</strong><small>Dial 911</small></li>
            <li><strong>Non-Emergency / 311</strong><small>(555) 311-4000</small></li>
            <li><strong>Clerk of the Board</strong><small>(555) 214-7700</small></li>
          </ul>
        </div>
      </aside>
    </div>
  </section>

  <!-- Officials -->
  <section class="section alt" id="officials">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">Elected Officials</span>
        <h2>Meet your Board of Commissioners</h2>
        <p>Brightwater County is governed by a five-member Board of Commissioners elected by district to staggered four-year terms. The Board adopts the annual budget, enacts county ordinances, and sets policy for all county departments, which are administered by an appointed County Manager.</p>
        <p>Not sure who represents you? Enter your address in our district lookup tool, or contact any commissioner's office directly to share feedback, request a meeting, or ask for constituent assistance.</p>
      </div>
      <div class="officials">
        <div class="official">
          <img src="https://i.pravatar.cc/220?u=chair-ramirez" alt="Commissioner Elena Ramirez">
          <h3>Elena Ramirez</h3><span class="role">Chair · District 3</span>
          <p>Focused on housing affordability and transit-oriented development.</p>
          <a href="#">Contact Office</a>
        </div>
        <div class="official">
          <img src="https://i.pravatar.cc/220?u=vice-okafor" alt="Commissioner Daniel Okafor">
          <h3>Daniel Okafor</h3><span class="role">Vice Chair · District 1</span>
          <p>Leads the Public Safety &amp; Justice Committee.</p>
          <a href="#">Contact Office</a>
        </div>
        <div class="official">
          <img src="https://i.pravatar.cc/220?u=comm-lindqvist" alt="Commissioner Margaret Lindqvist">
          <h3>Margaret Lindqvist</h3><span class="role">District 2</span>
          <p>Chairs the Finance &amp; Audit Committee.</p>
          <a href="#">Contact Office</a>
        </div>
        <div class="official">
          <img src="https://i.pravatar.cc/220?u=comm-chen" alt="Commissioner Robert Chen">
          <h3>Robert Chen</h3><span class="role">District 4</span>
          <p>Champions watershed protection and rural broadband.</p>
          <a href="#">Contact Office</a>
        </div>
        <div class="official">
          <img src="https://i.pravatar.cc/220?u=comm-whitfield" alt="Commissioner Tanya Whitfield">
          <h3>Tanya Whitfield</h3><span class="role">District 5</span>
          <p>Leads workforce development and youth initiatives.</p>
          <a href="#">Contact Office</a>
        </div>
      </div>
      <div class="btn-row" style="justify-content:center;margin-top:2rem">
        <a href="#" class="btn btn-primary">Find My District</a>
        <a href="#" class="btn btn-outline">View Voting Records</a>
      </div>
    </div>
  </section>

  <!-- Budget -->
  <section class="section" id="budget">
    <div class="container budget">
      <div>
        <span class="eyebrow">Budget &amp; Finance</span>
        <h2>Fiscal Year 2025 Adopted Budget: $1.48 Billion</h2>
        <p>Every dollar Brightwater County spends belongs to the public, and you deserve to see exactly where it goes. The FY2025 budget was adopted following four public hearings and more than 2,300 resident comments submitted through our participatory budgeting portal.</p>
        <p>This year's plan holds the property tax rate flat at $0.842 per $100 of assessed value while expanding mental health crisis response, accelerating road resurfacing, and maintaining our AAA bond rating from all three major rating agencies. Our Open Checkbook tool lets you search every vendor payment over $500 in near-real time.</p>
        <ul class="doc-list">
          <li><div><strong>FY2025 Adopted Budget Book</strong><div class="meta">PDF · 14.2 MB · Updated July 1</div></div><a href="#">Download Form ↓</a></li>
          <li><div><strong>Annual Comprehensive Financial Report (ACFR)</strong><div class="meta">PDF · 8.6 MB · Fiscal Year 2024</div></div><a href="#">Download ↓</a></li>
          <li><div><strong>Capital Improvement Program 2025–2030</strong><div class="meta">PDF · 5.1 MB · 142 projects</div></div><a href="#">Download ↓</a></li>
        </ul>
        <div class="btn-row">
          <a href="#" class="btn btn-primary">Explore Open Checkbook</a>
          <a href="#" class="btn btn-outline">Submit Budget Feedback</a>
        </div>
      </div>
      <div class="bars" id="bars">
        <h3>Where Your Dollars Go</h3>
        <p class="sub">General Fund expenditures by service area, FY2025 adopted</p>
        <div class="bar"><div class="lbl"><span>Education (School Transfer)</span><span>$512M · 34.6%</span></div><div class="track"><div class="fill" data-w="34.6"></div></div></div>
        <div class="bar"><div class="lbl"><span>Public Safety</span><span>$318M · 21.5%</span></div><div class="track"><div class="fill" data-w="21.5"></div></div></div>
        <div class="bar"><div class="lbl"><span>Health &amp; Human Services</span><span>$221M · 14.9%</span></div><div class="track"><div class="fill" data-w="14.9"></div></div></div>
        <div class="bar"><div class="lbl"><span>Transportation &amp; Public Works</span><span>$164M · 11.1%</span></div><div class="track"><div class="fill" data-w="11.1"></div></div></div>
        <div class="bar"><div class="lbl"><span>Parks, Libraries &amp; Culture</span><span>$97M · 6.6%</span></div><div class="track"><div class="fill" data-w="6.6"></div></div></div>
        <div class="bar"><div class="lbl"><span>Debt Service</span><span>$89M · 6.0%</span></div><div class="track"><div class="fill" data-w="6.0"></div></div></div>
        <div class="bar"><div class="lbl"><span>General Government &amp; Admin</span><span>$79M · 5.3%</span></div><div class="track"><div class="fill" data-w="5.3"></div></div></div>
      </div>
    </div>
  </section>

  <!-- Calendar -->
  <section class="section alt" id="meetings">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">Public Meetings</span>
        <h2>Meeting &amp; Public Hearing Calendar</h2>
        <p>All Board of Commissioners meetings, public hearings, and advisory board sessions are open to the public in accordance with the state Open Meetings Act. Agendas are posted at least 72 hours in advance, and meetings are livestreamed with closed captioning on BCTV and our YouTube channel.</p>
        <p>Select a date to view scheduled meetings, download agenda packets, or sign up to give public comment in person or virtually.</p>
      </div>
      <div class="cal-wrap">
        <div class="calendar">
          <div class="cal-head">
            <button id="prevMonth" aria-label="Previous month">‹</button>
            <h3 id="calTitle">Month</h3>
            <button id="nextMonth" aria-label="Next month">›</button>
          </div>
          <div class="cal-filters" role="group" aria-label="Filter meetings">
            <button class="chip on" data-f="all">All</button>
            <button class="chip" data-f="council">Board Meetings</button>
            <button class="chip" data-f="hearing">Public Hearings</button>
            <button class="chip" data-f="board">Advisory Boards</button>
            <button class="chip" data-f="community">Community</button>
          </div>
          <div class="grid-days" id="calGrid"></div>
          <div class="legend">
            <span><i class="c-council"></i>Board Meeting</span>
            <span><i class="c-hearing"></i>Public Hearing</span>
            <span><i class="c-board"></i>Advisory Board</span>
            <span><i class="c-community"></i>Community Event</span>
          </div>
        </div>
        <div class="event-panel" aria-live="polite">
          <h3 id="panelTitle">Upcoming Meetings</h3>
          <div id="panelBody"></div>
          <a href="#" class="btn btn-outline" style="margin-top:.6rem">Subscribe to Calendar (iCal)</a>
        </div>
      </div>
    </div>
  </section>

  <!-- News -->
  <section class="section" id="news">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">News &amp; Press Releases</span>
        <h2>What's happening in Brightwater County</h2>
        <p>Official updates from county departments, the Board of Commissioners, and the Office of Communications. Members of the media may contact our Public Information Officer at press@brightwatercounty.gov.</p>
      </div>
      <div class="news-grid">
        <article class="news-main">
          <img src="https://picsum.photos/900/500?random=41" alt="Groundbreaking for the new Marlow Falls Community Center">
          <div class="body">
            <span class="date">Press Release · January 28</span>
            <h3>County breaks ground on $46M Marlow Falls Community Center and Library</h3>
            <p>Commissioners joined residents and local students Tuesday to break ground on a 62,000-square-foot facility that will house a full-service library branch, a senior center, a teaching kitchen, and the county's first net-zero-energy gymnasium. The project was funded through the voter-approved 2022 Community Facilities Bond and is expected to open in spring 2027.</p>
            <p>"This center was designed by the people who will use it," said Chair Elena Ramirez, noting that more than 1,100 residents participated in design workshops.</p>
            <a href="#" class="btn btn-primary" style="margin-top:1rem">Read Full Story</a>
          </div>
        </article>
        <div class="news-side">
          <article class="news-item">
            <img src="https://picsum.photos/240/240?random=42" alt="">
            <div class="body"><span class="date">Jan 24</span><h4>Board adopts updated Climate Resilience Plan after six-month public comment period</h4></div>
          </article>
          <article class="news-item">
            <img src="https://picsum.photos/240/240?random=43" alt="">
            <div class="body"><span class="date">Jan 19</span><h4>New online portal cuts average FOIA request response time to 6 business days</h4></div>
          </article>
          <article class="news-item">
            <img src="https://picsum.photos/240/240?random=44" alt="">
            <div class="body"><span class="date">Jan 15</span><h4>Route 9 resurfacing project ahead of schedule; overnight lane closures end Feb 2</h4></div>
          </article>
          <article class="news-item">
            <img src="https://picsum.photos/240/240?random=45" alt="">
            <div class="body"><span class="date">Jan 10</span><h4>Applications open for 2025 Citizens' Academy — learn how your county works</h4></div>
          </article>
          <a href="#" class="btn btn-outline">View All News</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="section alt">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">Resident Feedback</span>
        <h2>Hear from the people we serve</h2>
        <p>We survey residents after every service interaction. In 2024, 91% of respondents rated their experience as satisfactory or better — and every comment helps us improve.</p>
      </div>
      <div class="testimonials">
        <div class="tcard">
          <div class="stars">★★★★★</div>
          <p>I opened a bakery last spring and was dreading the permitting process. The Small Business Navigator walked me through every step, and my certificate of occupancy came through two weeks earlier than I expected.</p>
          <div class="who"><img src="https://i.pravatar.cc/96?u=resident-amara" alt=""><div><b>Amara Nwosu</b><small>Business owner, Eastport</small></div></div>
        </div>
        <div class="tcard">
          <div class="stars">★★★★★</div>
          <p>I spoke at the public hearing on the Riverside rezoning, and the Board actually amended the proposal to add a pedestrian bridge. It was the first time I felt my voice made a real difference in local government.</p>
          <div class="who"><img src="https://i.pravatar.cc/96?u=resident-george" alt=""><div><b>George Halvorsen</b><small>Resident, District 4</small></div></div>
        </div>
        <div class="tcard">
          <div class="stars">★★★★☆</div>
          <p>As a reporter, I file a lot of records requests. The new FOIA portal lets me track every request and download responsive documents directly. Brightwater is setting the standard for transparency in our region.</p>
          <div class="who"><img src="https://i.pravatar.cc/96?u=resident-priya" alt=""><div><b>Priya Raman</b><small>Journalist, Brightwater Ledger</small></div></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Records -->
  <section class="section" id="records">
    <div class="container">
      <div class="records">
        <div>
          <span class="eyebrow">Transparency &amp; Public Records</span>
          <h2>Your right to know, made simple</h2>
          <p>Under the state Freedom of Information Act, any person may request access to public records held by Brightwater County. Many documents — including meeting minutes, contracts, ordinances, and inspection reports — are already available instantly in our online Records Library.</p>
          <ol>
            <li>Search the Records Library to see if the document is already published.</li>
            <li>Submit a FOIA request online describing the records you need.</li>
            <li>Track your request status and receive documents electronically.</li>
          </ol>
          <div class="btn-row">
            <a href="#" class="btn btn-gold">Submit FOIA Request</a>
            <a href="#" class="btn btn-ghost">Access Records Library</a>
          </div>
        </div>
        <img src="https://picsum.photos/520/420?random=51" alt="County archives and records room">
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="section alt" id="faqs">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">FAQs</span>
        <h2>Frequently Asked Questions</h2>
        <p>Answers to the questions our 311 Call Center hears most often. Can't find what you're looking for? Call 311 or use our online chat, available weekdays from 7 AM to 7 PM.</p>
      </div>
      <div class="faq">
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">When are property taxes due, and what payment options are available?<span class="pm">+</span></button>
          <div class="faq-a"><div class="inner">Real property taxes are billed annually and due in two equal installments on June 5 and December 5. You may pay online by e-check (free) or credit/debit card (2.35% processing fee), by mail, at any Customer Service Center, or through automatic monthly withdrawals with our Easy Pay program. Seniors and residents with disabilities may qualify for tax relief — apply by April 1.</div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">How do I submit a FOIA request, and how long does it take?<span class="pm">+</span></button>
          <div class="faq-a"><div class="inner">Submit your request through the online FOIA portal, by email to foia@brightwatercounty.gov, or in writing to the Clerk of the Board. State law requires a response within five business days, though complex requests may be extended by up to seven additional days. There is no fee for the first two hours of staff search time or for electronic records under 100 pages.</div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">How can I speak during a public hearing or Board meeting?<span class="pm">+</span></button>
          <div class="faq-a"><div class="inner">Register to speak online up to noon on the day of the meeting, or sign up in person at the Government Center before the meeting begins. Each speaker is allotted three minutes. You may also submit written comments, which are distributed to all commissioners and entered into the official public record.</div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">Do I need a permit for a fence, deck, or shed?<span class="pm">+</span></button>
          <div class="faq-a"><div class="inner">Fences over 7 feet, decks more than 30 inches above grade, and accessory structures larger than 200 square feet require a building permit. Properties within a Homeowners Association or historic overlay district may have additional requirements. Use our Permit Wizard to get a personalized checklist in under five minutes.</div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">How do I apply for a county job?<span class="pm">+</span></button>
          <div class="faq-a"><div class="inner">All positions are posted on our Careers portal. Create a profile, upload your résumé, and set up job alerts for the departments that interest you. Brightwater County is an Equal Opportunity Employer offering a defined-benefit pension, comprehensive health coverage, tuition assistance, and Public Service Loan Forgiveness eligibility.</div></div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer id="contact">
  <div class="container foot-grid">
    <div>
      <div class="foot-brand">
        <img src="https://placehold.co/104x104/0f2a47/d4a72c?text=BC&font=playfair+display" alt="">
        <b>Brightwater County</b>
      </div>
      <p>Brightwater County Government Center<br>1200 Commonwealth Avenue<br>Brightwater, ST 40517</p>
      <p style="margin-top:.8rem">Main: (555) 214-7000<br>311 / Non-Emergency: (555) 311-4000<br>info@brightwatercounty.gov</p>
      <p style="margin-top:.8rem">Mon–Fri 8:00 AM – 5:00 PM</p>
      <div class="social" aria-label="Social media">
        <a href="#" aria-label="Facebook">f</a><a href="#" aria-label="X">𝕏</a><a href="#" aria-label="Instagram">ig</a><a href="#" aria-label="YouTube">▶</a><a href="#" aria-label="LinkedIn">in</a>
      </div>
    </div>
    <div>
      <h4>Government</h4>
      <ul>
        <li><a href="#officials">Board of Commissioners</a></li>
        <li><a href="#">County Manager</a></li>
        <li><a href="#">Departments A–Z</a></li>
        <li><a href="#meetings">Agendas &amp; Minutes</a></li>
        <li><a href="#">Ordinances &amp; Code</a></li>
        <li><a href="#">Elections Office</a></li>
      </ul>
    </div>
    <div>
      <h4>Transparency</h4>
      <ul>
        <li><a href="#budget">Budget &amp; Finance</a></li>
        <li><a href="#">Open Checkbook</a></li>
        <li><a href="#records">FOIA Requests</a></li>
        <li><a href="#">Open Data Portal</a></li>
        <li><a href="#">Ethics &amp; Inspector General</a></li>
        <li><a href="#">Procurement &amp; Bids</a></li>
      </ul>
    </div>
    <div>
      <h4>Stay Informed</h4>
      <p>Get the weekly County Connection newsletter with meeting notices, service updates, and community news.</p>
      <form class="newsletter" onsubmit="event.preventDefault();this.innerHTML='<p style=&quot;color:#fff&quot;>✓ Thank you for subscribing!</p>';">
        <label for="nl" class="skip">Email address</label>
        <input id="nl" type="email" placeholder="you@example.com" required>
        <button type="submit">Subscribe</button>
      </form>
      <ul style="margin-top:1rem">
        <li><a href="#jobs">Jobs</a> · <a href="#news">News</a> · <a href="#faqs">FAQs</a></li>
      </ul>
    </div>
  </div>
  <div class="container foot-bottom">
    <span>© <span id="year">2025</span> Brightwater County Government. All rights reserved.</span>
    <nav aria-label="Legal">
      <a href="#">Privacy Policy</a><a href="#">Terms of Use</a><a href="#">Accessibility</a><a href="#">Language Access</a><a href="#">Sitemap</a>
    </nav>
  </div>
</footer>

<script>
// Year
document.getElementById('year').textContent = new Date().getFullYear();

// Mobile menu
const toggle=document.getElementById('menuToggle'),nav=document.getElementById('primary-nav');
toggle.addEventListener('click',()=>{const o=nav.classList.toggle('open');toggle.setAttribute('aria-expanded',o)});
nav.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{nav.classList.remove('open');nav.querySelectorAll('a').forEach(x=>x.classList.remove('active'));a.classList.add('active')}));

// FAQ accordion
document.querySelectorAll('.faq-q').forEach(btn=>{
  btn.addEventListener('click',()=>{
    const item=btn.parentElement,a=item.querySelector('.faq-a'),open=item.classList.contains('open');
    document.querySelectorAll('.faq-item').forEach(i=>{i.classList.remove('open');i.querySelector('.faq-a').style.maxHeight=null;i.querySelector('.faq-q').setAttribute('aria-expanded','false')});
    if(!open){item.classList.add('open');a.style.maxHeight=a.scrollHeight+'px';btn.setAttribute('aria-expanded','true')}
  });
});

// Budget bars animation
const barsObs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){e.target.querySelectorAll('.fill').forEach(f=>f.style.width=(f.dataset.w/34.6*100)+'%');barsObs.disconnect()}})},{threshold:.3});
barsObs.observe(document.getElementById('bars'));

// Meeting calendar
const templates=[
  {d:3,type:'board',title:'Planning Commission',time:'6:30 PM',loc:'Government Center, Room 210',desc:'Review of site plans and conditional use permits.'},
  {d:6,type:'council',title:'Board of Commissioners – Work Session',time:'2:00 PM',loc:'Board Chambers',desc:'Briefing on capital improvement priorities and transit study.'},
  {d:9,type:'community',title:'Budget Town Hall – District 2',time:'7:00 PM',loc:'Lindale Library',desc:'Share priorities for the upcoming fiscal year budget.'},
  {d:12,type:'hearing',title:'Public Hearing: Zoning Text Amendment ZTA-24-07',time:'6:00 PM',loc:'Board Chambers',desc:'Proposed accessory dwelling unit standards. Public comment welcome.'},
  {d:12,type:'council',title:'Board of Commissioners – Regular Meeting',time:'7:00 PM',loc:'Board Chambers',desc:'Consent agenda, appointments, and ordinance adoption.'},
  {d:15,type:'board',title:'Parks & Recreation Advisory Board',time:'5:30 PM',loc:'Riverside Park Lodge',desc:'Trail master plan update and facility fee review.'},
  {d:18,type:'hearing',title:'Public Hearing: Proposed Stormwater Fee Adjustment',time:'6:00 PM',loc:'Board Chambers',desc:'Hearing on proposed rate change for FY2026.'},
  {d:21,type:'board',title:'Ethics Commission',time:'4:00 PM',loc:'Room 104',desc:'Annual financial disclosure review.'},
  {d:23,type:'community',title:'Citizens\' Academy Session 3',time:'6:00 PM',loc:'Emergency Operations Center',desc:'Tour of 911 dispatch and emergency management.'},
  {d:26,type:'council',title:'Board of Commissioners – Regular Meeting',time:'7:00 PM',loc:'Board Chambers',desc:'Budget presentation by the County Manager.'},
  {d:27,type:'board',title:'Library Board of Trustees',time:'5:00 PM',loc:'Central Library',desc:'Branch hours and strategic plan discussion.'}
];
const typeLabel={council:'Board Meeting',hearing:'Public Hearing',board:'Advisory Board',community:'Community Event'};
const today=new Date();
let view=new Date(today.getFullYear(),today.getMonth(),1),selected=null,filter='all';

function eventsFor(y,m){
  const dim=new Date(y,m+1,0).getDate(),shift=(y*12+m)%3;
  return templates.map(t=>({...t,d:Math.min(dim,Math.max(1,t.d+shift-1))})).filter(e=>filter==='all'||e.type===filter);
}
function renderCal(){
  const y=view.getFullYear(),m=view.getMonth();
  document.getElementById('calTitle').textContent=view.toLocaleString('en-US',{month:'long',year:'numeric'});
  const g=document.getElementById('calGrid');g.innerHTML='';
  ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(d=>{const el=document.createElement('div');el.className='dow';el.textContent=d;g.appendChild(el)});
  const first=new Date(y,m,1).getDay(),dim=new Date(y,m+1,0).getDate(),evs=eventsFor(y,m);
  for(let i=0;i<first;i++){const e=document.createElement('div');e.className='day empty';g.appendChild(e)}
  for(let d=1;d<=dim;d++){
    const b=document.createElement('button');b.className='day';b.type='button';
    const dayEv=evs.filter(e=>e.d===d);
    b.innerHTML=d+'<span class="dots">'+dayEv.map(e=>'<i class="c-'+e.type+'"></i>').join('')+'</span>';
    b.setAttribute('aria-label',new Date(y,m,d).toDateString()+(dayEv.length?', '+dayEv.length+' event(s)':''));
    if(d===today.getDate()&&m===today.getMonth()&&y===today.getFullYear())b.classList.add('today');
    if(selected===d)b.classList.add('selected');
    b.onclick=()=>{selected=d;renderCal()};
    g.appendChild(b);
  }
  renderPanel(evs,y,m);
}
function evHTML(e,y,m){
  const dateStr=new Date(y,m,e.d).toLocaleDateString('en-US',{weekday:'short',month:'short',day:'numeric'});
  return `<div class="event ${e.type}"><span class="type">${typeLabel[e.type]} · ${dateStr} · ${e.time}</span><h4>${e.title}</h4><p>${e.desc}<br>📍 ${e.loc}</p><div class="ev-links"><a href="#">Agenda Packet</a><a href="#">Sign Up to Speak</a><a href="#">Watch Live</a></div></div>`;
}
function renderPanel(evs,y,m){
  const t=document.getElementById('panelTitle'),b=document.getElementById('panelBody');
  if(selected){
    const list=evs.filter(e=>e.d===selected);
    t.textContent=new Date(y,m,selected).toLocaleDateString('en-US',{weekday:'long',month:'long',day:'numeric'});
    b.innerHTML=list.length?list.map(e=>evHTML(e,y,m)).join(''):'<p class="empty-msg">No meetings scheduled for this date. Select another day or view upcoming meetings below.</p>'+evs.filter(e=>e.d>selected).slice(0,2).map(e=>evHTML(e,y,m)).join('');
  }else{
    t.textContent='Upcoming in '+view.toLocaleString('en-US',{month:'long'});
    const isCur=y===today.getFullYear()&&m===today.getMonth();
    const list=evs.filter(e=>!isCur||e.d>=today.getDate()).slice(0,3);
    b.innerHTML=list.length?list.map(e=>evHTML(e,y,m)).join(''):'<p class="empty-msg">No remaining meetings this month for the selected filter. Use the arrows to view next month.</p>';
  }
}
document.getElementById('prevMonth').onclick=()=>{view.setMonth(view.getMonth()-1);selected=null;renderCal()};
document.getElementById('nextMonth').onclick=()=>{view.setMonth(view.getMonth()+1);selected=null;renderCal()};
document.querySelectorAll('.chip').forEach(c=>c.onclick=()=>{document.querySelectorAll('.chip').forEach(x=>x.classList.remove('on'));c.classList.add('on');filter=c.dataset.f;renderCal()});
renderCal();
</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:51:38.204Z",
  "url": "https://benchmark.aimac.invalid/84c25e15c0dea8b2df8cf08ea131c1a8e780980027990e4415b0936443ee82b7.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "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": []
    },
    {
      "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": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "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": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"alert\" id=\"alert\" role=\"alert\">",
          "target": [
            "#alert"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"alert\" id=\"alert\" role=\"alert\">",
          "target": [
            "#alert"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"alert\" id=\"alert\" role=\"alert\">",
          "target": [
            "#alert"
          ]
        }
      ]
    },
    {
      "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": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "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": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "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": "<div id=\"safety\" style=\"margin-top:80px\" class=\"split\">",
          "target": [
            "#safety"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Your county government, open and working for you.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h3>Service Status \u2014 Today</h3>",
                  "target": [
                    ".hero-card > h3"
                  ]
                },
                {
                  "html": "<h2>Everything you need, in one place</h2>",
                  "target": [
                    ".with-sidebar > div > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>Permits &amp; Inspections</h3>",
                  "target": [
                    ".feature:nth-child(1) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Property &amp; Taxes</h3>",
                  "target": [
                    ".feature:nth-child(2) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Health &amp; Human Services</h3>",
                  "target": [
                    ".feature:nth-child(3) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Parks, Libraries &amp; Recreation</h3>",
                  "target": [
                    ".feature:nth-child(4) > .body > h3"
                  ]
                },
                {
                  "html": "<h2>Prepared, responsive, and accountable</h2>",
                  "target": [
                    "#safety > div > h2"
                  ]
                },
                {
                  "html": "<h3>\u26a0\ufe0f Emergency Alerts</h3>",
                  "target": [
                    ".emergency > h3"
                  ]
                },
                {
                  "html": "<h3>\ud83d\udcbc Current Job Openings</h3>",
                  "target": [
                    "#jobs > h3"
                  ]
                },
                {
                  "html": "<h3>\ud83d\udce2 Public Announcements</h3>",
                  "target": [
                    ".widget:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>\ud83d\udcde Quick Contacts</h3>",
                  "target": [
                    ".widget:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2>Meet your Board of Commissioners</h2>",
                  "target": [
                    "#officials > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>Elena Ramirez</h3>",
                  "target": [
                    ".official:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Daniel Okafor</h3>",
                  "target": [
                    ".official:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Margaret Lindqvist</h3>",
                  "target": [
                    ".official:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Robert Chen</h3>",
                  "target": [
                    ".official:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Tanya Whitfield</h3>",
                  "target": [
                    ".official:nth-child(5) > h3"
                  ]
                },
                {
                  "html": "<h2>Fiscal Year 2025 Adopted Budget: $1.48 Billion</h2>",
                  "target": [
                    ".budget > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Where Your Dollars Go</h3>",
                  "target": [
                    "#bars > h3"
                  ]
                },
                {
                  "html": "<h2>Meeting &amp; Public Hearing Calendar</h2>",
                  "target": [
                    "#meetings > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3 id=\"calTitle\">November 2026</h3>",
                  "target": [
                    "#calTitle"
                  ]
                },
                {
                  "html": "<h3 id=\"panelTitle\">Upcoming in November</h3>",
                  "target": [
                    "#panelTitle"
                  ]
                },
                {
                  "html": "<h4>Public Hearing: Zoning Text Amendment ZTA-24-07</h4>",
                  "target": [
                    ".hearing > h4"
                  ]
                },
                {
                  "html": "<h4>Board of Commissioners \u2013 Regular Meeting</h4>",
                  "target": [
                    ".council > h4"
                  ]
                },
                {
                  "html": "<h4>Parks &amp; Recreation Advisory Board</h4>",
                  "target": [
                    ".board > h4"
                  ]
                },
                {
                  "html": "<h2>What's happening in Brightwater County</h2>",
                  "target": [
                    "#news > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>County breaks ground on $46M Marlow Falls Community Center and Library</h3>",
                  "target": [
                    ".news-main > .body > h3"
                  ]
                },
                {
                  "html": "<h4>Board adopts updated Climate Resilience Plan after six-month public comment period</h4>",
                  "target": [
                    ".news-item:nth-child(1) > .body > h4"
                  ]
                },
                {
                  "html": "<h4>New online portal cuts average FOIA request response time to 6 business days</h4>",
                  "target": [
                    ".news-item:nth-child(2) > .body > h4"
                  ]
                },
                {
                  "html": "<h4>Route 9 resurfacing project ahead of schedule; overnight lane closures end Feb 2</h4>",
                  "target": [
                    ".news-item:nth-child(3) > .body > h4"
                  ]
                },
                {
                  "html": "<h4>Applications open for 2025 Citizens' Academy \u2014 learn how your county works</h4>",
                  "target": [
                    ".news-item:nth-child(4) > .body > h4"
                  ]
                },
                {
                  "html": "<h2>Hear from the people we serve</h2>",
                  "target": [
                    ".alt.section:nth-child(8) > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h2>Your right to know, made simple</h2>",
                  "target": [
                    ".records > div > h2"
                  ]
                },
                {
                  "html": "<h2>Frequently Asked Questions</h2>",
                  "target": [
                    "#faqs > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h4>Government</h4>",
                  "target": [
                    ".foot-grid > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Transparency</h4>",
                  "target": [
                    ".foot-grid > div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Stay Informed</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": "#c9d4e2",
                "bgColor": "#0a1d33",
                "contrastRatio": 11.32,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 11.32"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>\ud83c\udfdb\ufe0f <strong>An official website of Brightwater County.</strong> Here's how you know: official sites use <strong>.gov</strong></span>",
          "target": [
            ".gov-banner > .container > span"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"q\" class=\"skip\">Search county services</label>",
                  "target": [
                    "label[for=\"q\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"q\" type=\"search\" placeholder=\"How can we help? Try \u201cbuilding permit\u201d or \u201cproperty tax\u201d\">",
          "target": [
            "#q"
          ]
        }
      ]
    },
    {
      "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/124x124/0f2a47/d4a72c?text=BC&amp;font=playfair+display\" alt=\"Brightwater County seal\">",
          "target": [
            "img[alt=\"Brightwater County seal\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"q\" class=\"skip\">Search county services</label>",
                  "target": [
                    "label[for=\"q\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"q\" type=\"search\" placeholder=\"How can we help? Try \u201cbuilding permit\u201d or \u201cproperty tax\u201d\">",
          "target": [
            "#q"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<p><strong>Winter Storm Watch</strong> in effect Thursday 6 PM \u2013 Saturday 8 AM. Warming centers open at all county libraries. <a href=\"#safety\">View preparedness resources \u2192</a></p>",
                  "target": [
                    ".container > p"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<p><strong>Winter Storm Watch</strong> in effect Thursday 6 PM \u2013 Saturday 8 AM. Warming centers open at all county libraries. <a href=\"#safety\">View preparedness resources \u2192</a></p>",
                  "target": [
                    ".container > p"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#safety\">View preparedness resources \u2192</a>",
          "target": [
            "p > a[href$=\"#safety\"]"
          ]
        }
      ]
    },
    {
      "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\">Skip to main content</a>",
          "target": [
            "a[href$=\"#main\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            ".container > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#services\" class=\"active\">Services</a></li>",
          "target": [
            ".container > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button aria-label=\"Dismiss alert\" onclick=\"document.getElementById('alert').remove()\">\u00d7</button>",
          "target": [
            "button[aria-label=\"Dismiss alert\"]"
          ]
        }
      ]
    },
    {
      "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": 188.4,
                "height": 44.8
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (188.4px by 44.8px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#main\" class=\"skip\">Skip to main content</a>",
          "target": [
            "a[href$=\"#main\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"social\" aria-label=\"Social media\">\n        <a href=\"#\" aria-label=\"Facebook\">f</a><a href=\"#\" aria-label=\"X\">\ud835\udd4f</a><a href=\"#\" aria-label=\"Instagram\">ig</a><a href=\"#\" aria-label=\"YouTube\">\u25b6</a><a href=\"#\" aria-label=\"LinkedIn\">in</a>\n      </div>",
          "target": [
            ".social"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Serving 412,000 Residents Across 14 Municipalities</span>",
          "target": [
            ".hero > .container > div:nth-child(1) > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1f7a4d",
                "bgColor": "#d1f0df",
                "contrastRatio": 4.36,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"status ok\">Operational</span>",
                  "target": [
                    "li:nth-child(1) > .ok.status"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #1f7a4d, background color: #d1f0df, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"status ok\">Operational</span>",
          "target": [
            "li:nth-child(1) > .ok.status"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #1f7a4d, background color: #d1f0df, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1f7a4d",
                "bgColor": "#d1f0df",
                "contrastRatio": 4.36,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"status ok\">Open 8\u20135</span>",
                  "target": [
                    "li:nth-child(2) > .ok.status"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #1f7a4d, background color: #d1f0df, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"status ok\">Open 8\u20135</span>",
          "target": [
            "li:nth-child(2) > .ok.status"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #1f7a4d, background color: #d1f0df, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1f7a4d",
                "bgColor": "#d1f0df",
                "contrastRatio": 4.36,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"status ok\">~2 min wait</span>",
                  "target": [
                    "li:nth-child(5) > .ok.status"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #1f7a4d, background color: #d1f0df, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"status ok\">~2 min wait</span>",
          "target": [
            "li:nth-child(5) > .ok.status"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #1f7a4d, background color: #d1f0df, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Resident Services</span>",
          "target": [
            ".with-sidebar > div > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Public Safety</span>",
          "target": [
            "#safety > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#f6f8fb",
                "contrastRatio": 2.1,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section alt\" id=\"officials\">",
                  "target": [
                    "#officials"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Elected Officials</span>",
          "target": [
            "#officials > .container > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"official\">",
                  "target": [
                    ".official:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role\">Chair \u00b7 District 3</span>",
          "target": [
            ".official:nth-child(1) > .role"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"official\">",
                  "target": [
                    ".official:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role\">Vice Chair \u00b7 District 1</span>",
          "target": [
            ".official:nth-child(2) > .role"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"official\">",
                  "target": [
                    ".official:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role\">District 2</span>",
          "target": [
            ".official:nth-child(3) > .role"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"official\">",
                  "target": [
                    ".official:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role\">District 4</span>",
          "target": [
            ".official:nth-child(4) > .role"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"official\">",
                  "target": [
                    ".official:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"role\">District 5</span>",
          "target": [
            ".official:nth-child(5) > .role"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Budget &amp; Finance</span>",
          "target": [
            ".budget > div:nth-child(1) > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#f6f8fb",
                "contrastRatio": 2.1,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section alt\" id=\"meetings\">",
                  "target": [
                    "#meetings"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Public Meetings</span>",
          "target": [
            "#meetings > .container > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#ffffff",
                "contrastRatio": 2.24,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">News &amp; Press Releases</span>",
          "target": [
            "#news > .container > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.24 (foreground color: #d4a72c, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#f6f8fb",
                "contrastRatio": 2.1,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section alt\">",
                  "target": [
                    ".alt.section:nth-child(8)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Resident Feedback</span>",
          "target": [
            ".alt.section:nth-child(8) > .container > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d4a72c",
                "bgColor": "#f6f8fb",
                "contrastRatio": 2.1,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section alt\" id=\"faqs\">",
                  "target": [
                    "#faqs"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">FAQs</span>",
          "target": [
            "#faqs > .container > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.1 (foreground color: #d4a72c, background color: #f6f8fb, font size: 9.4pt (12.48px), 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": 212.3,
                "height": 7.1
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#services\" class=\"active\">Services</a>",
                  "target": [
                    ".active"
                  ]
                },
                {
                  "html": "<a href=\"#safety\">Public Safety</a>",
                  "target": [
                    "li:nth-child(2) > a[href$=\"#safety\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 212.3px by 7.1px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 8,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#safety\">Public Safety</a>",
                  "target": [
                    "li:nth-child(2) > a[href$=\"#safety\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 8px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Sign Up for BrightAlert</a>",
          "target": [
            "#safety > div > .btn-row > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 212.3px by 7.1px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 8px instead of at least 24px."
        },
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 202.3,
                "height": 3.9
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#services\" class=\"active\">Services</a>",
                  "target": [
                    ".active"
                  ]
                },
                {
                  "html": "<a href=\"#safety\">Public Safety</a>",
                  "target": [
                    "li:nth-child(2) > a[href$=\"#safety\"]"
                  ]
                },
                {
                  "html": "<a href=\"#officials\">Elected Officials</a>",
                  "target": [
                    "li:nth-child(3) > a[href$=\"#officials\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 202.3px by 3.9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 4.8,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#safety\">Public Safety</a>",
                  "target": [
                    "li:nth-child(2) > a[href$=\"#safety\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 4.8px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-gold\">Submit FOIA Request</a>",
          "target": [
            ".btn-gold"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 202.3px by 3.9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 4.8px instead of at least 24px."
        },
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 215.8,
                "height": 3.9
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#officials\">Elected Officials</a>",
                  "target": [
                    "li:nth-child(3) > a[href$=\"#officials\"]"
                  ]
                },
                {
                  "html": "<a href=\"#budget\">Budget &amp; Finance</a>",
                  "target": [
                    "li:nth-child(4) > a[href$=\"#budget\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 215.8px by 3.9px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 4.8,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#officials\">Elected Officials</a>",
                  "target": [
                    "li:nth-child(3) > a[href$=\"#officials\"]"
                  ]
                },
                {
                  "html": "<a href=\"#budget\">Budget &amp; Finance</a>",
                  "target": [
                    "li:nth-child(4) > a[href$=\"#budget\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 4.8px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-ghost\">Access Records Library</a>",
          "target": [
            ".btn-ghost"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 215.8px by 3.9px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 4.8px instead of at least 24px."
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 9547
      },
      {
        "y": 576,
        "height": 9547
      },
      {
        "y": 1152,
        "height": 9547
      },
      {
        "y": 1728,
        "height": 9547
      },
      {
        "y": 2304,
        "height": 9547
      },
      {
        "y": 2880,
        "height": 9547
      },
      {
        "y": 3456,
        "height": 9547
      },
      {
        "y": 4032,
        "height": 9547
      },
      {
        "y": 4608,
        "height": 9547
      },
      {
        "y": 5184,
        "height": 9547
      },
      {
        "y": 5760,
        "height": 9547
      },
      {
        "y": 6336,
        "height": 9547
      },
      {
        "y": 6912,
        "height": 9547
      },
      {
        "y": 7488,
        "height": 9547
      },
      {
        "y": 8064,
        "height": 9547
      },
      {
        "y": 8640,
        "height": 9547
      },
      {
        "y": 8827,
        "height": 9547
      }
    ],
    "scans": 18,
    "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 "Government" 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: "Government"
- Description: Government agencies, official portals, public services, and regulatory resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Government" 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: "Jobs", "News", "FAQs".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Government" category. Consider themes similar to: "Public Safety", "Elected Officials", "Budget & Finance".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "public hearing", "transparency", "FOIA request".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Access Records", "Apply for Permit", "Download Form".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Government" sector. Ideas similar but not limited to: "meeting calendar".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "job openings", "emergency alerts", "public announcements".
-   **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.