Anthropic Claude Haiku 5.5 – Government
via Anthropic · Generated
- AIMAC Debt 8.03
- Cost $0.012
- Total Violations 16
- HTML Size 58 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
16 Serious
-
color-contrast serious 13 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="eyebrow">Online Services</span> -
link-in-text-block serious 3 instances
Links must be distinguishable without relying on color
Example HTML
<a href="tel:+15558012300">(555) 801-2300</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">
<meta name="description" content="Brightwater County Civic Portal: permits, public records, emergency services, community programs, and official county news.">
<title>Brightwater County Civic Portal | Open Services. Accountable Government.</title>
<style>
:root {
--navy: #13294b;
--navy-dark: #0b1a33;
--blue: #1f5fa8;
--teal: #0f8b8d;
--gold: #f2b134;
--red: #b3261e;
--light: #f4f6fa;
--white: #ffffff;
--text: #1d2939;
--muted: #5b6678;
--border: #d9dfeb;
--radius: 12px;
--shadow: 0 8px 24px rgba(19, 41, 75, 0.08);
--container: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: "Source Sans 3", "Source Sans Pro", "Open Sans", system-ui, sans-serif;
color: var(--text);
background: var(--white);
line-height: 1.65;
font-size: 17px;
}
h1, h2, h3, h4 { font-family: "Merriweather", Georgia, serif; color: var(--navy); line-height: 1.25; }
h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1rem; }
h3 { font-size: 1.25rem; margin-bottom: .5rem; }
p + p { margin-top: 1rem; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 2px;
}
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
section { padding: 4.5rem 0; }
.section-alt { background: var(--light); }
.eyebrow {
display: inline-block;
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: .6rem;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 66ch; }
.section-header { max-width: 720px; margin-bottom: 2.5rem; }
.skip-link {
position: absolute; left: -999px; top: 0;
background: var(--gold); color: var(--navy-dark);
padding: .6rem 1rem; z-index: 999; font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .8rem 1.4rem; border-radius: 8px;
font-weight: 700; font-size: 1rem; border: 2px solid transparent;
cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease;
font-family: inherit;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: #184c8a; }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: #e7a420; }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: #e9eef7; }
.btn-danger { background: var(--red); color: var(--white); }
.btn-danger:hover { background: #8f1d17; }
.link-arrow { font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }
/* Header */
.topbar {
background: var(--navy-dark);
color: #c9d4e8;
font-size: .875rem;
padding: .45rem 0;
}
.topbar .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: #ffffff; }
.topbar strong { color: var(--gold); }
.site-header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: 1rem; color: var(--navy); }
.brand:hover { text-decoration: none; }
.brand img { width: 64px; height: 64px; border-radius: 10px; }
.brand-text .site-name { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: 1.35rem; color: var(--navy); line-height: 1.1; }
.brand-text .tagline { font-size: .9rem; color: var(--muted); }
.header-actions { display: flex; gap: .75rem; align-items: center; }
.menu-toggle {
display: none; background: none; border: 2px solid var(--navy); color: var(--navy);
padding: .5rem .9rem; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.main-nav { border-top: 1px solid var(--border); background: var(--white); }
.main-nav ul {
list-style: none; display: flex; gap: .25rem; flex-wrap: wrap; padding: .4rem 0;
}
.main-nav a {
display: block; padding: .6rem .9rem; border-radius: 8px;
color: var(--navy); font-weight: 600; font-size: .98rem;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--light); text-decoration: none; color: var(--blue); }
/* Hero */
.hero { background: linear-gradient(135deg, var(--navy) 0%, #1c3d6e 60%, #1f5fa8 100%); color: var(--white); padding: 4.5rem 0 5rem; }
.hero h1, .hero h2 { color: var(--white); }
.hero .eyebrow { color: var(--gold); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero p.lead { color: #d6e2f5; margin-top: 1rem; }
.hero-figure img {
border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.35);
width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.hero-figure figcaption { font-size: .85rem; color: #b9c8e0; margin-top: .6rem; }
.service-search {
margin-top: 2rem; background: var(--white); border-radius: var(--radius);
padding: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; box-shadow: var(--shadow);
}
.service-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.service-search input {
flex: 1 1 260px; border: 1px solid var(--border); border-radius: 8px;
padding: .8rem 1rem; font-size: 1rem; font-family: inherit; color: var(--text);
}
.service-search button { flex: 0 0 auto; }
.hero-quick { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; font-size: .92rem; }
.hero-quick a {
color: var(--white); border: 1px solid rgba(255,255,255,.35);
padding: .3rem .8rem; border-radius: 999px;
}
.hero-quick a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
/* Alert */
.alert-bar {
background: #fff6dd; border-left: 6px solid var(--gold); padding: 1rem 0;
}
.alert-bar .container { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.alert-bar strong { color: var(--navy); }
.alert-bar p { font-size: .98rem; }
/* Services grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.feature-card {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.75rem; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
display: flex; flex-direction: column;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(19,41,75,.14); }
.icon {
width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
background: #e6f0fb; color: var(--blue); font-size: 1.6rem; margin-bottom: 1rem;
}
.icon.teal { background: #e0f4f4; color: var(--teal); }
.icon.gold { background: #fff3d6; color: #b57a00; }
.icon.red { background: #fde7e5; color: var(--red); }
.feature-card p { color: var(--muted); font-size: .98rem; flex-grow: 1; }
.feature-card .link-arrow { margin-top: 1rem; }
/* Split content sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-media figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.split-body p { color: var(--text); margin-top: 1rem; }
.checklist { list-style: none; margin: 1.25rem 0 1.75rem; display: grid; gap: .7rem; }
.checklist li { padding-left: 2rem; position: relative; }
.checklist li::before {
content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px;
background: var(--teal); color: var(--white); border-radius: 50%;
display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.steps { counter-reset: step; list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
.steps li {
counter-increment: step; background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.1rem 1.25rem 1.1rem 4.2rem; position: relative;
}
.steps li::before {
content: counter(step); position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--white);
display: grid; place-items: center; font-weight: 700;
}
.steps strong { color: var(--navy); display: block; }
.steps span { color: var(--muted); font-size: .97rem; }
/* Emergency */
.emergency-panel {
background: var(--navy-dark); color: var(--white); border-radius: 18px; padding: 3rem;
display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: center;
position: relative; overflow: hidden;
}
.emergency-panel h2 { color: var(--white); }
.emergency-panel p { color: #d3dcec; margin-top: 1rem; }
.emergency-panel .eyebrow { color: #ff8a80; }
.emergency-numbers { display: grid; gap: .9rem; }
.emergency-card {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.emergency-card .label { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #aebedb; }
.emergency-card .number { font-size: 1.6rem; font-weight: 800; color: var(--white); font-family: "Merriweather", Georgia, serif; }
.emergency-card.urgent { background: var(--red); border-color: var(--red); }
.emergency-card.urgent .label { color: #ffe1de; }
.emergency-note { font-size: .92rem; color: #aebedb; margin-top: 1rem; }
.table-wrap { overflow-x: auto; margin-top: 2rem; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: var(--white); min-width: 560px; }
th, td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
th { background: var(--light); color: var(--navy); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
tr:last-child td { border-bottom: none; }
.status { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.status.open { background: #dff5e8; color: #1b6b3a; }
.status.limited { background: #fff3d6; color: #8a5a00; }
/* Community programs */
.program-card {
background: var(--white); border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.program-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.program-card .body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.program-card .body p { color: var(--muted); font-size: .98rem; flex-grow: 1; margin-bottom: 1rem; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--teal); background: #e0f4f4; padding: .2rem .6rem; border-radius: 6px; margin-bottom: .75rem; width: fit-content; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.testimonial {
background: var(--white); border-radius: var(--radius); padding: 1.75rem;
border: 1px solid var(--border); position: relative;
}
.testimonial::before {
content: "\201C"; font-family: Georgia, serif; font-size: 4rem; line-height: 1;
color: var(--gold); position: absolute; top: .4rem; right: 1rem;
}
.testimonial blockquote { color: var(--text); font-style: italic; margin-bottom: 1.25rem; }
.author { display: flex; align-items: center; gap: .85rem; }
.author img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--light); }
.author strong { display: block; color: var(--navy); line-height: 1.2; }
.author span { font-size: .88rem; color: var(--muted); }
/* FAQ */
.faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items: start; }
.faq-list { display: grid; gap: .8rem; }
details {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem;
}
details[open] { box-shadow: var(--shadow); border-color: #b9c9e3; }
summary {
cursor: pointer; font-weight: 700; color: var(--navy); list-style: none; display: flex;
justify-content: space-between; align-items: center; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.4rem; color: var(--blue); line-height: 1; transition: transform .2s; }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); margin-top: .8rem; font-size: .98rem; }
.records-box {
background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 2rem; margin-top: 2rem;
}
.records-box h3 { color: var(--white); }
.records-box p { color: #d6e2f5; font-size: .98rem; margin-top: .5rem; }
.records-box .btn { margin-top: 1rem; }
/* Reporter */
.reporter-wrap {
background: var(--white); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--border);
display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden;
}
.reporter-info { background: linear-gradient(160deg, var(--teal), #0a6a6c); color: var(--white); padding: 2.5rem; }
.reporter-info h2 { color: var(--white); }
.reporter-info p { color: #dff3f3; margin-top: 1rem; }
.reporter-info ul { list-style: none; margin-top: 1.5rem; display: grid; gap: .7rem; font-size: .98rem; }
.reporter-info li::before { content: "→ "; font-weight: 700; color: var(--gold); }
.reporter-form { padding: 2.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-weight: 700; color: var(--navy); font-size: .95rem; }
.form-group label .req { color: var(--red); }
.form-group input, .form-group select, .form-group textarea {
border: 1px solid #b8c3d6; border-radius: 8px; padding: .75rem .9rem; font: inherit; color: var(--text); background: #fbfcfe;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-hint { font-size: .85rem; color: var(--muted); }
.form-error { color: var(--red); font-size: .88rem; display: none; }
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--red); }
.form-group.invalid .form-error { display: block; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.form-actions small { color: var(--muted); }
.confirmation {
display: none; background: #e8f7ee; border: 1px solid #9fd8b3; color: #14502a;
border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-top: 1.25rem;
}
.confirmation.show { display: block; }
.confirmation strong { color: #0f3d20; }
/* News + sidebar */
.with-sidebar { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
.news-grid { display: grid; gap: 1.5rem; }
.news-card {
display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; background: var(--white);
border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.news-card img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
.news-card .body { padding: 1.5rem 1.5rem 1.5rem 0; }
.news-meta { font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.news-card p { color: var(--muted); font-size: .98rem; margin: .5rem 0 .75rem; }
.sidebar { display: grid; gap: 1.5rem; position: sticky; top: 150px; }
.widget { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.widget h3 {
font-size: 1.1rem; padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 2px solid var(--gold);
display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.widget h3 a { font-family: "Source Sans 3", "Source Sans Pro", sans-serif; font-size: .88rem; font-weight: 700; }
.widget ul { list-style: none; display: grid; gap: .9rem; }
.meeting { display: flex; gap: .9rem; align-items: flex-start; }
.date-badge {
flex: 0 0 52px; text-align: center; background: var(--navy); color: var(--white);
border-radius: 8px; padding: .3rem 0; line-height: 1.1;
}
.date-badge .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; display: block; color: #f7d27a; }
.date-badge .d { font-size: 1.35rem; font-weight: 800; font-family: "Merriweather", Georgia, serif; }
.meeting strong { color: var(--navy); display: block; font-size: .98rem; line-height: 1.3; }
.meeting span { font-size: .87rem; color: var(--muted); }
.job { border-bottom: 1px dashed var(--border); padding-bottom: .9rem; }
.job:last-child { border-bottom: none; padding-bottom: 0; }
.job a { font-weight: 700; color: var(--navy); }
.job span { display: block; font-size: .87rem; color: var(--muted); }
.ordinance { font-size: .95rem; }
.ordinance code { background: var(--light); padding: .1rem .4rem; border-radius: 4px; font-size: .85rem; color: var(--navy); }
.ordinance span { display: block; color: var(--muted); font-size: .87rem; }
.widget .btn { width: 100%; justify-content: center; margin-top: 1rem; }
/* Footer */
.site-footer { background: var(--navy-dark); color: #b8c4da; padding-top: 4rem; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
.site-footer h4 { color: var(--white); font-size: 1.05rem; margin-bottom: 1rem; font-family: "Source Sans 3", "Source Sans Pro", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.site-footer a { color: #d6e2f5; }
.site-footer ul { list-style: none; display: grid; gap: .55rem; }
.footer-brand { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.footer-brand img { width: 56px; height: 56px; border-radius: 10px; }
.footer-brand strong { color: var(--white); font-family: "Merriweather", Georgia, serif; font-size: 1.15rem; display: block; }
.socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.socials a {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: .85rem;
}
.socials a:hover { background: var(--gold); color: var(--navy-dark); text-decoration: none; border-color: var(--gold); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12); padding: 1.5rem 0; display: flex; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; font-size: .88rem;
}
.footer-bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
/* Responsive */
@media (max-width: 1024px) {
.with-sidebar { grid-template-columns: 1fr; }
.sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.emergency-panel { grid-template-columns: 1fr; padding: 2.25rem; }
}
@media (max-width: 860px) {
.hero-grid, .split, .faq-layout, .reporter-wrap { grid-template-columns: 1fr; }
.split.reverse .split-media { order: 0; }
.reporter-info { padding: 2rem; }
.reporter-form { padding: 2rem; }
.news-card { grid-template-columns: 1fr; }
.news-card .body { padding: 0 1.5rem 1.5rem; }
.news-card img { height: 220px; }
.menu-toggle { display: inline-block; }
.main-nav { display: none; }
.main-nav.open { display: block; }
.main-nav ul { flex-direction: column; }
.header-actions .btn-outline { display: none; }
}
@media (max-width: 600px) {
body { font-size: 16px; }
section { padding: 3.25rem 0; }
.form-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.brand-text .tagline { display: none; }
.brand img { width: 52px; height: 52px; }
.emergency-panel { padding: 1.75rem; }
}
</style>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<!-- ============ HEADER ============ -->
<div class="topbar">
<div class="container">
<span><strong>Official Site</strong> of Brightwater County Government. Verify the .gov domain before sharing personal information.</span>
<span>Emergency? Call <a href="#emergency"><strong>911</strong></a> · Non-emergency: <a href="tel:+15558012300">(555) 801-2300</a></span>
</div>
</div>
<header class="site-header">
<div class="container brand-row">
<a href="#top" class="brand" aria-label="Brightwater County Civic Portal home">
<img src="https://placehold.co/128x128/13294b/ffffff?text=BCG&font=montserrat" alt="Brightwater County Government seal placeholder" width="64" height="64">
<div class="brand-text">
<div class="site-name">Brightwater County Civic Portal</div>
<div class="tagline">Open Services. Accountable Government.</div>
</div>
</a>
<div class="header-actions">
<a href="#permits" class="btn btn-outline">Pay a Bill</a>
<a href="#reporter" class="btn btn-gold">Report an Issue</a>
<button class="menu-toggle" id="menuToggle" aria-expanded="false" aria-controls="mainNav">Menu</button>
</div>
</div>
<nav class="main-nav" id="mainNav" aria-label="Primary navigation">
<div class="container">
<ul>
<li><a href="#services" aria-current="page">Services</a></li>
<li><a href="#permits">Permits</a></li>
<li><a href="#public-records">Public Records</a></li>
<li><a href="#news">News</a></li>
<li><a href="#community">Community Programs</a></li>
<li><a href="#emergency">Emergency Services</a></li>
<li><a href="#meetings">Meetings & Jobs</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main id="main">
<!-- ============ HERO ============ -->
<section class="hero" id="top">
<div class="container hero-grid">
<div>
<span class="eyebrow">Brightwater County · Serving 214,000 Residents</span>
<h1>Government That Works for Every Neighborhood</h1>
<p class="lead">
Welcome to the official civic portal for Brightwater County. Apply for building and zoning permits, request public records,
pay fees, track service requests, and stay informed about county ordinances, budgets, and public meetings. Every service
is designed to be accessible, transparent, and available on the device you already use.
</p>
<form class="service-search" role="search" action="#services" id="serviceSearch">
<label for="q">Search services</label>
<input type="search" id="q" name="q" placeholder="Search permits, records, trash pickup, property tax..." autocomplete="off">
<button class="btn btn-gold" type="submit">Search Services</button>
</form>
<div class="hero-quick" aria-label="Popular services">
<span style="color:#d6e2f5;">Popular:</span>
<a href="#permits">Building Permit</a>
<a href="#public-records">Public Records Request</a>
<a href="#community">Property Tax</a>
<a href="#meetings">Board Agendas</a>
</div>
</div>
<figure class="hero-figure">
<img src="https://picsum.photos/1000/750" alt="Aerial view of a county government campus surrounded by parks and residential streets" width="1000" height="750">
<figcaption>The Brightwater County Administration Campus, home of the Board of Supervisors and Department of Planning & Zoning.</figcaption>
</figure>
</div>
</section>
<!-- ============ ALERT ============ -->
<div class="alert-bar" role="status">
<div class="container">
<strong>Notice:</strong>
<p>The Division of Motor Vehicles and Records Office will close early on Friday for system maintenance. Online permit submissions remain open 24 hours a day. Check the <a href="#news">news center</a> for updated holiday hours.</p>
</div>
</div>
<!-- ============ SERVICES GRID ============ -->
<section id="services">
<div class="container">
<div class="section-header">
<span class="eyebrow">Online Services</span>
<h2>Everything You Need, in One Place</h2>
<p class="lead">
Most county transactions can now be completed online in minutes. Our service catalog covers licensing, property,
public safety, sanitation, and community support. If you need help, our customer service team is available by phone,
email, or in person at any county service center.
</p>
</div>
<div class="feature-grid">
<article class="feature-card">
<div class="icon" aria-hidden="true">🏡</div>
<h3>Building & Zoning Permits</h3>
<p>Submit residential and commercial applications, upload plans, schedule inspections, and track plan review status from your dashboard. Average first review completes in 10 business days.</p>
<a href="#permits" class="link-arrow">Apply for Permit</a>
</article>
<article class="feature-card">
<div class="icon teal" aria-hidden="true">📁</div>
<h3>Public Records Requests</h3>
<p>Request copies of county documents, meeting minutes, contracts, and inspection reports under the state Open Records Act. Track your request and receive electronic delivery when available.</p>
<a href="#public-records" class="link-arrow">Submit Records Request</a>
</article>
<article class="feature-card">
<div class="icon gold" aria-hidden="true">💵</div>
<h3>Pay Taxes & Fees</h3>
<p>Pay property taxes, utility bills, business license renewals, and citation fines securely by card or electronic check. Set up recurring payments and download receipts for your records.</p>
<a href="#contact" class="link-arrow">Make a Payment</a>
</article>
<article class="feature-card">
<div class="icon red" aria-hidden="true">🚨</div>
<h3>Emergency Services</h3>
<p>Dispatch, fire prevention, flood alerts, and emergency management resources. Enroll in the county alert system to receive weather, road closure, and public safety notifications by text or email.</p>
<a href="#emergency" class="link-arrow">Enroll in Alerts</a>
</article>
<article class="feature-card">
<div class="icon" aria-hidden="true">🚚</div>
<h3>Roads, Transit & Utilities</h3>
<p>Report potholes, request streetlight repairs, check road construction schedules, and view transit route changes. Track service requests from submission through final resolution.</p>
<a href="#reporter" class="link-arrow">Report a Problem</a>
</article>
<article class="feature-card">
<div class="icon teal" aria-hidden="true">🍃</div>
<h3>Parks & Recreation</h3>
<p>Reserve picnic shelters, sports fields, and community rooms. Browse seasonal program registrations, youth athletics, senior activity schedules, and trail maps for all county parks.</p>
<a href="#community" class="link-arrow">Browse Programs</a>
</article>
</div>
</div>
</section>
<!-- ============ PERMITS & PLANNING ============ -->
<section id="permits" class="section-alt">
<div class="container split">
<div class="split-media">
<img src="https://picsum.photos/900/675?grayscale" alt="Architectural plans spread across a table during a permit review meeting" width="900" height="675">
<figcaption>Planning staff review site plans submitted through the online permit portal.</figcaption>
</div>
<div class="split-body">
<span class="eyebrow">Permits & Planning</span>
<h2>Planning & Zoning, Made Clear</h2>
<p>
The Department of Planning & Zoning administers land use regulations, building codes, and development standards
established by the County Zoning Ordinance and the adopted International Building Code. Whether you are adding a
bedroom, opening a restaurant, or subdividing a parcel, our team is responsible for ensuring every project meets
safety, environmental, and neighborhood compatibility requirements.
</p>
<p>
Before submitting, we recommend reviewing the zoning district map for your parcel and scheduling a pre-application
conference. Pre-application meetings typically take 30 minutes, are available by video, and can reduce revision cycles
significantly by identifying setback, height, parking, and stormwater issues early.
</p>
<ul class="checklist">
<li>Parcel-specific zoning district and overlay information</li>
<li>Online plan review with redline comments and version history</li>
<li>Inspection scheduling available 7 days a week</li>
<li>Variance and conditional use hearing calendars</li>
</ul>
<div class="cta-row">
<a href="#contact" class="btn btn-primary">Apply for Permit</a>
<a href="#contact" class="btn btn-outline">Schedule Pre-Application Meeting</a>
</div>
<ol class="steps" aria-label="Permit application steps">
<li><strong>Create an account and select your permit type</strong><span>Use the guided wizard to determine required forms and fees for your project.</span></li>
<li><strong>Upload plans and supporting documents</strong><span>Accepted formats include PDF, DWG, and high-resolution JPG. Maximum file size is 50 MB.</span></li>
<li><strong>Pay fees and receive a tracking number</strong><span>Fees are calculated automatically based on project valuation and square footage.</span></li>
</ol>
</div>
</div>
</section>
<!-- ============ EMERGENCY SERVICES ============ -->
<section id="emergency">
<div class="container">
<div class="emergency-panel">
<div>
<span class="eyebrow">Emergency Services</span>
<h2>Prepared Communities Recover Faster</h2>
<p>
Brightwater County Emergency Management coordinates police, fire, emergency medical services, and public works
during disasters and critical incidents. Our Office of Emergency Management maintains evacuation plans, shelter
agreements, and the county hazard mitigation plan, which is updated every five years in partnership with state and
federal agencies.
</p>
<p>
Residents are encouraged to build a household emergency kit, identify two evacuation routes, and register for
county alerts. Registration takes less than two minutes and allows you to receive targeted warnings for your
address, including flood advisories, wildfire smoke, and power outage updates.
</p>
<div class="cta-row" style="margin-top:1.75rem;">
<a href="#reporter" class="btn btn-gold">Report a Hazard</a>
<a href="tel:+15558012300" class="btn btn-light">Call Dispatch Non-Emergency</a>
</div>
</div>
<div class="emergency-numbers">
<div class="emergency-card urgent">
<div class="label">Life-threatening emergency</div>
<div class="number">Call 911</div>
</div>
<div class="emergency-card">
<div class="label">Non-emergency dispatch</div>
<div class="number">(555) 801-2300</div>
</div>
<div class="emergency-card">
<div class="label">Emergency management office</div>
<div class="number">(555) 801-2355</div>
</div>
<p class="emergency-note">If you cannot speak safely, text 911 where available, or dial 911 and stay on the line.</p>
</div>
</div>
<div class="table-wrap" aria-label="Current service status">
<table>
<thead>
<tr><th scope="col">Service Center</th><th scope="col">Address</th><th scope="col">Hours</th><th scope="col">Status</th></tr>
</thead>
<tbody>
<tr><td>Central Administration Office</td><td>400 Civic Plaza Dr.</td><td>Mon–Fri, 8:00 AM – 5:00 PM</td><td><span class="status open">Open</span></td></tr>
<tr><td>Northside Permit Center</td><td>1290 Harbor Blvd.</td><td>Mon–Sat, 8:00 AM – 6:00 PM</td><td><span class="status open">Open</span></td></tr>
<tr><td>Eastfield Public Library Annex</td><td>88 Willow Rd.</td><td>Tue–Sat, 10:00 AM – 4:00 PM</td><td><span class="status limited">Limited Services</span></td></tr>
<tr><td>Emergency Operations Center</td><td>12 Ridge Parkway</td><td>24 hours, 7 days</td><td><span class="status open">Operational</span></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ============ COMMUNITY PROGRAMS ============ -->
<section id="community" class="section-alt">
<div class="container">
<div class="section-header">
<span class="eyebrow">Community Programs</span>
<h2>Programs That Strengthen Our Neighborhoods</h2>
<p class="lead">
From housing assistance and senior services to youth workforce training and small business grants, county community
programs are funded through a combination of state appropriations, federal block grants, and local tax revenue.
Eligibility criteria are published for every program, and applications are reviewed by independent citizen panels.
</p>
</div>
<div class="feature-grid">
<article class="program-card">
<img src="https://picsum.photos/800/500" alt="Volunteers planting trees in a community park" width="800" height="500">
<div class="body">
<span class="tag">Housing & Neighborhoods</span>
<h3>First-Time Homebuyer Assistance</h3>
<p>Down payment and closing cost assistance is available for households earning up to 80% of area median income. Attend a required education workshop and apply through a participating lender.</p>
<a href="#contact" class="link-arrow">Apply for Assistance</a>
</div>
</article>
<article class="program-card">
<img src="https://picsum.photos/800/501" alt="Senior residents participating in a group fitness class at a community center" width="800" height="501">
<div class="body">
<span class="tag">Seniors & Health</span>
<h3>Active Aging Program</h3>
<p>Free transportation to medical appointments, home-delivered meals, and weekly wellness classes for adults aged 60 and older. Enrollment is open year-round at all county senior centers.</p>
<a href="#contact" class="link-arrow">Register Today</a>
</div>
</article>
<article class="program-card">
<img src="https://picsum.photos/800/502" alt="Young adults in a workforce training classroom" width="800" height="502">
<div class="body">
<span class="tag">Workforce & Youth</span>
<h3>Brightwater Skills Accelerator</h3>
<p>Paid apprenticeships, certification courses in trades and healthcare, and job placement support for residents ages 16 to 24. Cohorts begin each quarter with partner employers across the county.</p>
<a href="#contact" class="link-arrow">Submit Interest Form</a>
</div>
</article>
</div>
<div class="testimonial-grid" aria-label="Resident testimonials">
<figure class="testimonial">
<blockquote>"I submitted my deck permit from my kitchen table and had plan review comments back in nine days. The inspector even explained the setback rule so I could fix it the same afternoon."</blockquote>
<figcaption class="author">
<img src="https://i.pravatar.cc/120?u=resident-maria" alt="" width="48" height="48">
<div><strong>Maria Ochoa</strong><span>Homeowner, Eastfield District</span></div>
</figcaption>
</figure>
<figure class="testimonial">
<blockquote>"When our street flooded, the county alert text came before the water did. The emergency team followed up personally and helped us coordinate sandbag delivery for our elderly neighbors."</blockquote>
<figcaption class="author">
<img src="https://i.pravatar.cc/120?u=resident-david" alt="" width="48" height="48">
<div><strong>David Thompson</strong><span>Resident, Harbor Heights</span></div>
</figcaption>
</figure>
<figure class="testimonial">
<blockquote>"The Skills Accelerator gave me a paid apprenticeship and a certification in HVAC. Six months later I'm a licensed technician and I now mentor the next cohort."</blockquote>
<figcaption class="author">
<img src="https://i.pravatar.cc/120?u=resident-aisha" alt="" width="48" height="48">
<div><strong>Aisha Bennett</strong><span>Program Graduate, Class of 2024</span></div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ============ PUBLIC RECORDS / FAQ ============ -->
<section id="public-records">
<div class="container faq-layout">
<div>
<span class="eyebrow">Public Records & Transparency</span>
<h2>Open Records, Open Government</h2>
<p class="lead">
Under the state Public Records Act, most documents created or received by county agencies are available to the public.
The Office of the County Clerk processes requests within statutory timelines and publishes frequently requested records
in our open data library so residents can search without filing a formal request.
</p>
<p>
Some records are exempt from disclosure to protect personal privacy, active law enforcement investigations, and
confidential procurement negotiations. When a request is denied in whole or in part, the agency will cite the specific
statutory exemption and explain your right to appeal.
</p>
<div class="records-box">
<h3>Ready to Request a Record?</h3>
<p>Describe the document, date range, and responsible department. Most requests are completed within 5 to 10 business days, and fee waivers are available for qualifying requesters.</p>
<a href="#reporter" class="btn btn-gold">Submit Records Request</a>
</div>
</div>
<div class="faq-list">
<details open>
<summary>What counts as a public record?</summary>
<p>Any writing, email, photograph, map, audio recording, or electronic file prepared, owned, used, or retained by a county agency in the course of official business is generally considered a public record. Drafts and personal notes may be subject to different rules, so consult the Clerk if you are unsure.</p>
</details>
<details>
<summary>How long does it take to receive a response?</summary>
<p>The county must acknowledge your request within three business days and provide responsive records or a written determination within ten business days. Complex or voluminous requests may require an extension, and you will be notified in advance with the reason for the delay.</p>
</details>
<details>
<summary>Are there fees for copies?</summary>
<p>Electronic copies are free when available. Paper copies are charged at $0.15 per page for standard letter size, and staff time for extensive searches may be billed at the lowest hourly rate necessary to fulfill the request. Requests from news media and nonprofit organizations may qualify for a fee reduction.</p>
</details>
<details>
<summary>Can I request body camera footage or building plans?</summary>
<p>Yes, with restrictions. Body-worn camera footage involving minors, victims, or ongoing investigations may be redacted or withheld. Building plans for residential properties are generally available to the owner of record, while commercial plans may require a signed authorization. Review the request guide for specifics.</p>
</details>
</div>
</div>
</section>
<!-- ============ REPORTER + NEWS + SIDEBAR ============ -->
<section id="reporter" class="section-alt">
<div class="container">
<div class="section-header">
<span class="eyebrow">Civic Engagement</span>
<h2>Report a Problem in Your Neighborhood</h2>
<p class="lead">
Potholes, broken streetlights, illegal dumping, graffiti, and overgrown vegetation can all be reported through the
Issue Reporter. Each submission receives a unique reference number, is routed to the responsible department, and
can be tracked from submission to resolution.
</p>
</div>
<div class="reporter-wrap">
<div class="reporter-info">
<h2>How the Issue Reporter Works</h2>
<p>Our Citizen Response Team reviews every report within one business day. Non-emergency issues are assigned to the appropriate public works, code enforcement, or utilities division with target resolution windows published for each category.</p>
<ul>
<li>Pin the exact location on the map or enter an address</li>
<li>Attach up to three photos to speed up triage</li>
<li>Receive a reference number and status updates by email</li>
<li>Emergencies must always be reported by calling 911</li>
</ul>
</div>
<div class="reporter-form">
<form id="issueForm" novalidate>
<div class="form-grid">
<div class="form-group" id="grpCategory">
<label for="category">Issue category <span class="req" aria-hidden="true">*</span></label>
<select id="category" name="category" required>
<option value="">Select a category</option>
<option>Pothole or road damage</option>
<option>Streetlight outage</option>
<option>Illegal dumping</option>
<option>Graffiti or vandalism</option>
<option>Overgrown vegetation</option>
<option>Stormwater or drainage</option>
<option>Other public concern</option>
</select>
<span class="form-error">Please choose a category.</span>
</div>
<div class="form-group" id="grpAddress">
<label for="address">Location or nearest address <span class="req" aria-hidden="true">*</span></label>
<input type="text" id="address" name="address" placeholder="e.g., 214 Maple Ave & 3rd St" autocomplete="street-address">
<span class="form-error">Please provide a location.</span>
</div>
<div class="form-group full" id="grpDesc">
<label for="description">Describe the issue <span class="req" aria-hidden="true">*</span></label>
<textarea id="description" name="description" placeholder="Include size, duration, hazards, and any landmarks nearby." maxlength="800"></textarea>
<span class="form-hint">Up to 800 characters. Do not include personal or medical information.</span>
<span class="form-error">Please describe the issue (at least 15 characters).</span>
</div>
<div class="form-group">
<label for="name">Your name (optional)</label>
<input type="text" id="name" name="name" autocomplete="name">
</div>
<div class="form-group">
<label for="email">Email for updates (optional)</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="you@example.com">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit Report</button>
<small>Submissions are public records and may be shared with responsible departments.</small>
</div>
</div>
</form>
<div class="confirmation" id="confirmation" role="status" aria-live="polite">
<strong>Thank you. Your report has been received.</strong>
<p style="margin-top:.4rem;">Reference number: <strong id="refNumber">BCG-000000</strong>. Please save this number to track progress. A routing summary will be sent to your email if provided.</p>
</div>
</div>
</div>
</div>
</section>
<section id="news">
<div class="container with-sidebar">
<div>
<div class="section-header" style="margin-bottom:2rem;">
<span class="eyebrow">County News</span>
<h2>Latest from the Board of Supervisors</h2>
<p class="lead">Official announcements, budget updates, and program launches from across Brightwater County government.</p>
</div>
<div class="news-grid">
<article class="news-card">
<img src="https://picsum.photos/480/360" alt="Construction crew repairing a bridge deck" width="480" height="360">
<div class="body">
<div class="news-meta">Public Works · Published 3 days ago</div>
<h3>Riverside Bridge Rehabilitation Enters Phase Two</h3>
<p>The county has awarded a $4.2 million contract for structural repairs to the Riverside Bridge, following a competitive procurement process. Lane restrictions will begin next week and are expected to continue through the spring.</p>
<a href="#news" class="link-arrow">Read full announcement</a>
</div>
</article>
<article class="news-card">
<img src="https://picsum.photos/480/361" alt="Residents attending a public budget hearing" width="480" height="361">
<div class="body">
<div class="news-meta">Finance · Published 1 week ago</div>
<h3>Proposed FY Budget Open for Public Comment</h3>
<p>The proposed operating budget includes investments in emergency dispatch staffing, library hours expansion, and stormwater infrastructure. Residents may submit written comments or testify at the public hearing scheduled for next month.</p>
<a href="#news" class="link-arrow">View budget documents</a>
</div>
</article>
<article class="news-card">
<img src="https://picsum.photos/480/362" alt="Community members gathered at a neighborhood cleanup event" width="480" height="362">
<div class="body">
<div class="news-meta">Community · Published 2 weeks ago</div>
<h3>Spring Neighborhood Cleanup Registration Opens</h3>
<p>Over 40 neighborhood associations have registered for the annual cleanup initiative. Free bags, gloves, and pickup of bulk items are provided. Volunteers can sign up by neighborhood or select a citywide event day.</p>
<a href="#community" class="link-arrow">Register to volunteer</a>
</div>
</article>
</div>
</div>
<aside class="sidebar" id="meetings" aria-label="Sidebar: meetings, jobs, and ordinances">
<div class="widget">
<h3>Upcoming Meetings <a href="#meetings">Full calendar</a></h3>
<ul>
<li class="meeting">
<div class="date-badge"><span class="m">Oct</span><span class="d">14</span></div>
<div><strong>Board of Supervisors Regular Session</strong><span>6:00 PM · Chambers, Civic Plaza</span></div>
</li>
<li class="meeting">
<div class="date-badge"><span class="m">Oct</span><span class="d">16</span></div>
<div><strong>Planning Commission Public Hearing</strong><span>9:30 AM · Room 210, Admin Building</span></div>
</li>
<li class="meeting">
<div class="date-badge"><span class="m">Oct</span><span class="d">21</span></div>
<div><strong>Budget Committee Work Session</strong><span>2:00 PM · Livestreamed online</span></div>
</li>
</ul>
<a href="#meetings" class="btn btn-outline">View Agendas & Minutes</a>
</div>
<div class="widget">
<h3>Job Openings <a href="#contact">All jobs</a></h3>
<div class="job">
<a href="#contact">Environmental Health Specialist II</a>
<span>Public Health · Full-time · Closes Oct 28</span>
</div>
<div class="job">
<a href="#contact">Emergency Dispatcher (Telecommunicator)</a>
<span>Public Safety · Full-time · Continuous</span>
</div>
<div class="job">
<a href="#contact">Senior Civil Engineer, Transportation</a>
<span>Public Works · Full-time · Closes Nov 4</span>
</div>
</div>
<div class="widget">
<h3>Recent Ordinances <a href="#public-records">Code library</a></h3>
<ul>
<li class="ordinance">
<code>Ord. 2024-17</code> Short-Term Rental Registration
<span>Adopted Sept 9 · Effective Jan 1</span>
</li>
<li class="ordinance">
<code>Ord. 2024-19</code> Urban Tree Canopy Protection
<span>Adopted Sept 23 · Effective Nov 1</span>
</li>
<li class="ordinance">
<code>Ord. 2024-21</code> Fireworks Discharge Restrictions
<span>Adopted Oct 1 · Effective immediately</span>
</li>
</ul>
<a href="#public-records" class="btn btn-primary">Browse County Code</a>
</div>
</aside>
</div>
</section>
<!-- ============ CONTACT CTA ============ -->
<section id="contact">
<div class="container">
<div class="section-header" style="text-align:center; margin-inline:auto;">
<span class="eyebrow">Contact Us</span>
<h2>Still Need Help? Reach a Real Person.</h2>
<p class="lead" style="margin-inline:auto;">
Our Customer Service Center answers calls Monday through Friday and staffs in-person service counters at three
locations across the county. Interpretation services are available in more than 150 languages at no cost.
</p>
</div>
<div class="feature-grid" style="grid-template-columns: repeat(auto-fit, minmax(220px,1fr));">
<div class="feature-card" style="text-align:center; align-items:center;">
<div class="icon" aria-hidden="true">📞</div>
<h3>Call Customer Service</h3>
<p>(555) 801-2000<br>Mon–Fri, 8:00 AM – 5:00 PM</p>
<a href="tel:+15558012000" class="btn btn-primary">Contact Department</a>
</div>
<div class="feature-card" style="text-align:center; align-items:center;">
<div class="icon teal" aria-hidden="true">✉</div>
<h3>Send a Message</h3>
<p>info@brightwatercounty.gov<br>Response within 2 business days</p>
<a href="mailto:info@brightwatercounty.gov" class="btn btn-outline">Send Email</a>
</div>
<div class="feature-card" style="text-align:center; align-items:center;">
<div class="icon gold" aria-hidden="true">📍</div>
<h3>Visit a Service Center</h3>
<p>400 Civic Plaza Drive<br>Brightwater, ST 40215</p>
<a href="#contact" class="btn btn-outline">Get Directions</a>
</div>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-brand">
<img src="https://placehold.co/112x112/0f8b8d/ffffff?text=BCG&font=montserrat" alt="Brightwater County logo placeholder" width="56" height="56">
<div>
<strong>Brightwater County</strong>
<span>Civic Portal</span>
</div>
</div>
<p>Official website of Brightwater County Government. Serving residents, businesses, and visitors through transparent, accessible, and efficient public services since 1889.</p>
<div class="socials" aria-label="Social media">
<a href="#" aria-label="Facebook">Fb</a>
<a href="#" aria-label="X (formerly Twitter)">X</a>
<a href="#" aria-label="YouTube">Yt</a>
<a href="#" aria-label="Instagram">Ig</a>
<a href="#" aria-label="LinkedIn">In</a>
</div>
</div>
<div>
<h4>Quick Links</h4>
<ul>
<li><a href="#permits">Building Permits</a></li>
<li><a href="#public-records">Public Records</a></li>
<li><a href="#news">County News</a></li>
<li><a href="#meetings">Meeting Agendas</a></li>
<li><a href="#community">Community Programs</a></li>
<li><a href="#emergency">Emergency Management</a></li>
</ul>
</div>
<div>
<h4>Government</h4>
<ul>
<li><a href="#contact">Board of Supervisors</a></li>
<li><a href="#contact">County Clerk</a></li>
<li><a href="#contact">Procurement & Bids</a></li>
<li><a href="#contact">Budget & Finance</a></li>
<li><a href="#contact">Careers</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li>400 Civic Plaza Drive<br>Brightwater, ST 40215</li>
<li><a href="tel:+15558012000">(555) 801-2000</a></li>
<li><a href="mailto:info@brightwatercounty.gov">info@brightwatercounty.gov</a></li>
<li>Accessibility line: <a href="tel:+15558012999">(555) 801-2999</a> (TTY/TDD)</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2025</span> Brightwater County Government. All rights reserved.</span>
<nav aria-label="Legal">
<a href="#top">Privacy Policy</a>
<a href="#top">Terms of Use</a>
<a href="#top">Accessibility Statement</a>
<a href="#top">Sitemap</a>
</nav>
</div>
</div>
</footer>
<script>
// Dynamic copyright year
document.getElementById('year').textContent = new Date().getFullYear();
// Mobile navigation toggle
const menuToggle = document.getElementById('menuToggle');
const mainNav = document.getElementById('mainNav');
menuToggle.addEventListener('click', () => {
const open = mainNav.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
});
// Service search: scroll to services and clear focus
document.getElementById('serviceSearch').addEventListener('submit', (e) => {
e.preventDefault();
const query = document.getElementById('q').value.trim();
document.getElementById('services').scrollIntoView({ behavior: 'smooth' });
if (query) {
document.getElementById('q').value = '';
}
});
// Issue Reporter with validation and reference number
const form = document.getElementById('issueForm');
const confirmation = document.getElementById('confirmation');
const refNumber = document.getElementById('refNumber');
function setInvalid(id, invalid) {
document.getElementById(id).classList.toggle('invalid', invalid);
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const category = document.getElementById('category').value.trim();
const address = document.getElementById('address').value.trim();
const description = document.getElementById('description').value.trim();
const badCategory = !category;
const badAddress = address.length < 3;
const badDesc = description.length < 15;
setInvalid('grpCategory', badCategory);
setInvalid('grpAddress', badAddress);
setInvalid('grpDesc', badDesc);
if (badCategory || badAddress || badDesc) {
const firstInvalid = form.querySelector('.invalid select, .invalid input, .invalid textarea');
if (firstInvalid) firstInvalid.focus();
confirmation.classList.remove('show');
return;
}
const ref = 'BCG-' + Math.floor(100000 + Math.random() * 900000);
refNumber.textContent = ref;
confirmation.classList.add('show');
confirmation.scrollIntoView({ behavior: 'smooth', block: 'center' });
form.reset();
});
// Clear error state as the user types
['category', 'address', 'description'].forEach((id) => {
const el = document.getElementById(id);
el.addEventListener('input', () => {
el.closest('.form-group').classList.remove('invalid');
});
el.addEventListener('change', () => {
el.closest('.form-group').classList.remove('invalid');
});
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:08:16.770Z",
"url": "https://benchmark.aimac.invalid/1d1a48a4c6f6b6eef7a3fabfe86fb479714f3c6e0d25646e025cbeb078acbae8.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Brightwater County Civic Portal home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Brightwater County Civic Portal home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<form class=\"service-search\" role=\"search\" action=\"#services\" id=\"serviceSearch\">",
"target": [
"#serviceSearch"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"icon\" aria-hidden=\"true\">\ud83c\udfe1</div>",
"target": [
"#services > .container > .feature-grid > .feature-card:nth-child(1) > .icon[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Brightwater County Civic Portal home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<form class=\"service-search\" role=\"search\" action=\"#services\" id=\"serviceSearch\">",
"target": [
"#serviceSearch"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<form class=\"service-search\" role=\"search\" action=\"#services\" id=\"serviceSearch\">",
"target": [
"#serviceSearch"
]
}
]
},
{
"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": "<a href=\"#top\" class=\"brand\" aria-label=\"Brightwater County Civic Portal home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Brightwater County Civic Portal home\">",
"target": [
".brand"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"search\" id=\"q\" name=\"q\" placeholder=\"Search permits, records, trash pickup, property tax...\" autocomplete=\"off\">",
"target": [
"#q"
]
}
]
},
{
"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": "<span style=\"color:#d6e2f5;\">Popular:</span>",
"target": [
".hero-quick > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn btn-gold\" type=\"submit\">Search Services</button>",
"target": [
"#serviceSearch > button[type=\"submit\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Government That Works for Every Neighborhood</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Everything You Need, in One Place</h2>",
"target": [
"#services > .container > .section-header > h2"
]
},
{
"html": "<h3>Building & Zoning Permits</h3>",
"target": [
"#services > .container > .feature-grid > .feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Public Records Requests</h3>",
"target": [
"#services > .container > .feature-grid > .feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Pay Taxes & Fees</h3>",
"target": [
"#services > .container > .feature-grid > .feature-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Emergency Services</h3>",
"target": [
".feature-card:nth-child(4) > h3"
]
},
{
"html": "<h3>Roads, Transit & Utilities</h3>",
"target": [
".feature-card:nth-child(5) > h3"
]
},
{
"html": "<h3>Parks & Recreation</h3>",
"target": [
".feature-card:nth-child(6) > h3"
]
},
{
"html": "<h2>Planning & Zoning, Made Clear</h2>",
"target": [
".split-body > h2"
]
},
{
"html": "<h2>Prepared Communities Recover Faster</h2>",
"target": [
".emergency-panel > div:nth-child(1) > h2"
]
},
{
"html": "<h2>Programs That Strengthen Our Neighborhoods</h2>",
"target": [
"#community > .container > .section-header > h2"
]
},
{
"html": "<h3>First-Time Homebuyer Assistance</h3>",
"target": [
".program-card:nth-child(1) > .body > h3"
]
},
{
"html": "<h3>Active Aging Program</h3>",
"target": [
".program-card:nth-child(2) > .body > h3"
]
},
{
"html": "<h3>Brightwater Skills Accelerator</h3>",
"target": [
".program-card:nth-child(3) > .body > h3"
]
},
{
"html": "<h2>Open Records, Open Government</h2>",
"target": [
".faq-layout > div:nth-child(1) > h2"
]
},
{
"html": "<h3>Ready to Request a Record?</h3>",
"target": [
".records-box > h3"
]
},
{
"html": "<h2>Report a Problem in Your Neighborhood</h2>",
"target": [
"#reporter > .container > .section-header > h2"
]
},
{
"html": "<h2>How the Issue Reporter Works</h2>",
"target": [
".reporter-info > h2"
]
},
{
"html": "<h2>Latest from the Board of Supervisors</h2>",
"target": [
".with-sidebar > div > .section-header > h2"
]
},
{
"html": "<h3>Riverside Bridge Rehabilitation Enters Phase Two</h3>",
"target": [
".news-card:nth-child(1) > .body > h3"
]
},
{
"html": "<h3>Proposed FY Budget Open for Public Comment</h3>",
"target": [
".news-card:nth-child(2) > .body > h3"
]
},
{
"html": "<h3>Spring Neighborhood Cleanup Registration Opens</h3>",
"target": [
".news-card:nth-child(3) > .body > h3"
]
},
{
"html": "<h3>Upcoming Meetings <a href=\"#meetings\">Full calendar</a></h3>",
"target": [
".widget:nth-child(1) > h3"
]
},
{
"html": "<h3>Job Openings <a href=\"#contact\">All jobs</a></h3>",
"target": [
".widget:nth-child(2) > h3"
]
},
{
"html": "<h3>Recent Ordinances <a href=\"#public-records\">Code library</a></h3>",
"target": [
".widget:nth-child(3) > h3"
]
},
{
"html": "<h2>Still Need Help? Reach a Real Person.</h2>",
"target": [
"#contact > .container > .section-header > h2"
]
},
{
"html": "<h3>Call Customer Service</h3>",
"target": [
"#contact > .container > .feature-grid > .feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Send a Message</h3>",
"target": [
"#contact > .container > .feature-grid > .feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Visit a Service Center</h3>",
"target": [
"#contact > .container > .feature-grid > .feature-card:nth-child(3) > h3"
]
},
{
"html": "<h4>Quick Links</h4>",
"target": [
"div:nth-child(2) > h4"
]
},
{
"html": "<h4>Government</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact</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": "#c9d4e8",
"bgColor": "#0b1a33",
"contrastRatio": 11.62,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.62"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span><strong>Official Site</strong> of Brightwater County Government. Verify the .gov domain before sharing personal information.</span>",
"target": [
".container > span:nth-child(1)"
]
}
]
},
{
"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": "mainNav",
"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=\"main-nav\" id=\"mainNav\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"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\">Search services</label>",
"target": [
"label[for=\"q\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"search\" id=\"q\" name=\"q\" placeholder=\"Search permits, records, trash pickup, property tax...\" autocomplete=\"off\">",
"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/128x128/13294b/ffffff?text=BCG&font=montserrat\" alt=\"Brightwater County Government seal placeholder\" width=\"64\" height=\"64\">",
"target": [
"img[width=\"64\"]"
]
}
]
},
{
"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\">Search 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 type=\"search\" id=\"q\" name=\"q\" placeholder=\"Search permits, records, trash pickup, property tax...\" autocomplete=\"off\">",
"target": [
"#q"
]
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"records-box\">",
"target": [
".records-box"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#reporter\" class=\"btn btn-gold\">Submit Records Request</a>",
"target": [
".records-box > .btn-gold.btn[href$=\"#reporter\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#main\" class=\"skip-link\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"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\" aria-current=\"page\">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": "<img src=\"https://placehold.co/128x128/13294b/ffffff?text=BCG&font=montserrat\" alt=\"Brightwater County Government seal placeholder\" width=\"64\" height=\"64\">",
"target": [
"img[width=\"64\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Issue category"
},
"relatedNodes": [
{
"html": "<label for=\"category\">Issue category <span class=\"req\" aria-hidden=\"true\">*</span></label>",
"target": [
"label[for=\"category\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"category\" name=\"category\" required=\"\">",
"target": [
"#category"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>What counts as a public record?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 199,
"height": 47.2
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (199px by 47.2px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#main\" class=\"skip-link\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "td-headers-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The headers attribute is exclusively used to refer to other cells in the table"
}
],
"none": [],
"impact": null,
"html": "<table>",
"target": [
"table"
]
}
]
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "th-has-data-cells",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "All table header cells refer to data cells"
}
],
"none": [],
"impact": null,
"html": "<table>",
"target": [
"table"
]
}
]
}
],
"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=\"hero-quick\" aria-label=\"Popular services\">",
"target": [
".hero-quick"
],
"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.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Brightwater County \u00b7 Serving 214,000 Residents</span>",
"target": [
".hero-grid > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"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": {
"messageKey": "bgOverlap"
},
"relatedNodes": [
{
"html": "<span>Emergency? Call <a href=\"#emergency\"><strong>911</strong></a> \u00b7 Non-emergency: <a href=\"tel:+15558012300\">(555) 801-2300</a></span>",
"target": [
".container > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element's contrast ratio could not be determined because of element overlap"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#emergency\"><strong>911</strong></a>",
"target": [
"span:nth-child(2) > a[href$=\"#emergency\"]"
],
"failureSummary": "Fix any of the following:\n Element's contrast ratio could not be determined because of element overlap"
}
]
}
],
"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": "#0f8b8d",
"bgColor": "#ffffff",
"contrastRatio": 4.11,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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=\"eyebrow\">Online Services</span>",
"target": [
"#services > .container > .section-header > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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": "#0f8b8d",
"bgColor": "#f4f6fa",
"contrastRatio": 3.8,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"permits\" class=\"section-alt\">",
"target": [
"#permits"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.8 (foreground color: #0f8b8d, background color: #f4f6fa, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Permits & Planning</span>",
"target": [
".split-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.8 (foreground color: #0f8b8d, background color: #f4f6fa, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#f4f6fa",
"contrastRatio": 3.8,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"community\" class=\"section-alt\">",
"target": [
"#community"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.8 (foreground color: #0f8b8d, background color: #f4f6fa, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Community Programs</span>",
"target": [
"#community > .container > .section-header > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.8 (foreground color: #0f8b8d, background color: #f4f6fa, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#e0f4f4",
"contrastRatio": 3.61,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Housing & Neighborhoods</span>",
"target": [
".program-card:nth-child(1) > .body > .tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.61 (foreground color: #0f8b8d, background color: #e0f4f4, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Housing & Neighborhoods</span>",
"target": [
".program-card:nth-child(1) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.61 (foreground color: #0f8b8d, background color: #e0f4f4, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#e0f4f4",
"contrastRatio": 3.61,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Seniors & Health</span>",
"target": [
".program-card:nth-child(2) > .body > .tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.61 (foreground color: #0f8b8d, background color: #e0f4f4, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Seniors & Health</span>",
"target": [
".program-card:nth-child(2) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.61 (foreground color: #0f8b8d, background color: #e0f4f4, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#e0f4f4",
"contrastRatio": 3.61,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Workforce & Youth</span>",
"target": [
".program-card:nth-child(3) > .body > .tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.61 (foreground color: #0f8b8d, background color: #e0f4f4, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Workforce & Youth</span>",
"target": [
".program-card:nth-child(3) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.61 (foreground color: #0f8b8d, background color: #e0f4f4, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#ffffff",
"contrastRatio": 4.11,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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=\"eyebrow\">Public Records & Transparency</span>",
"target": [
".faq-layout > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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": "#0f8b8d",
"bgColor": "#f4f6fa",
"contrastRatio": 3.8,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"reporter\" class=\"section-alt\">",
"target": [
"#reporter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.8 (foreground color: #0f8b8d, background color: #f4f6fa, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Civic Engagement</span>",
"target": [
"#reporter > .container > .section-header > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.8 (foreground color: #0f8b8d, background color: #f4f6fa, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#ffffff",
"contrastRatio": 4.11,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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=\"eyebrow\">County News</span>",
"target": [
".with-sidebar > div > .section-header > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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": "#5b6678",
"bgColor": "#13294b",
"contrastRatio": 2.5,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"date-badge\"><span class=\"m\">Oct</span><span class=\"d\">14</span></div>",
"target": [
".meeting:nth-child(1) > .date-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.5 (foreground color: #5b6678, background color: #13294b, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"d\">14</span>",
"target": [
".meeting:nth-child(1) > .date-badge > .d"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.5 (foreground color: #5b6678, background color: #13294b, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5b6678",
"bgColor": "#13294b",
"contrastRatio": 2.5,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"date-badge\"><span class=\"m\">Oct</span><span class=\"d\">16</span></div>",
"target": [
".meeting:nth-child(2) > .date-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.5 (foreground color: #5b6678, background color: #13294b, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"d\">16</span>",
"target": [
".meeting:nth-child(2) > .date-badge > .d"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.5 (foreground color: #5b6678, background color: #13294b, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5b6678",
"bgColor": "#13294b",
"contrastRatio": 2.5,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"date-badge\"><span class=\"m\">Oct</span><span class=\"d\">21</span></div>",
"target": [
".meeting:nth-child(3) > .date-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.5 (foreground color: #5b6678, background color: #13294b, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"d\">21</span>",
"target": [
".meeting:nth-child(3) > .date-badge > .d"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.5 (foreground color: #5b6678, background color: #13294b, font size: 16.2pt (21.6px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0f8b8d",
"bgColor": "#ffffff",
"contrastRatio": 4.11,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, 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=\"eyebrow\">Contact Us</span>",
"target": [
"#contact > .container > .section-header > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.11 (foreground color: #0f8b8d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"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": {
"messageKey": "fgContrast",
"contrastRatio": 1.49,
"requiredContrastRatio": 3,
"nodeColor": "#ffffff",
"parentColor": "#c9d4e8"
},
"relatedNodes": [
{
"html": "<span>Emergency? Call <a href=\"#emergency\"><strong>911</strong></a> \u00b7 Non-emergency: <a href=\"tel:+15558012300\">(555) 801-2300</a></span>",
"target": [
".container > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.49:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #c9d4e8)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span>Emergency? Call <a href=\"#emergency\"><strong>911</strong></a> \u00b7 Non-emergency: <a href=\"tel:+15558012300\">(555) 801-2300</a></span>",
"target": [
".container > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15558012300\">(555) 801-2300</a>",
"target": [
"span:nth-child(2) > a[href=\"tel:+15558012300\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.49:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #c9d4e8)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
},
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 2.28,
"requiredContrastRatio": 3,
"nodeColor": "#1f5fa8",
"parentColor": "#1d2939"
},
"relatedNodes": [
{
"html": "<p>The Division of Motor Vehicles and Records Office will close early on Friday for system maintenance. Online permit submissions remain open 24 hours a day. Check the <a href=\"#news\">news center</a> for updated holiday hours.</p>",
"target": [
".container > p"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 2.28:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1f5fa8, surrounding text: #1d2939)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<p>The Division of Motor Vehicles and Records Office will close early on Friday for system maintenance. Online permit submissions remain open 24 hours a day. Check the <a href=\"#news\">news center</a> for updated holiday hours.</p>",
"target": [
".container > p"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#news\">news center</a>",
"target": [
"p > a[href$=\"#news\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 2.28:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1f5fa8, surrounding text: #1d2939)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
},
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 1.34,
"requiredContrastRatio": 3,
"nodeColor": "#d6e2f5",
"parentColor": "#b8c4da"
},
"relatedNodes": [
{
"html": "<li>Accessibility line: <a href=\"tel:+15558012999\">(555) 801-2999</a> (TTY/TDD)</li>",
"target": [
"div:nth-child(4) > ul > li:nth-child(4)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.34:1 with the surrounding text. (Minimum contrast is 3:1, link text: #d6e2f5, surrounding text: #b8c4da)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<li>Accessibility line: <a href=\"tel:+15558012999\">(555) 801-2999</a> (TTY/TDD)</li>",
"target": [
"div:nth-child(4) > ul > li:nth-child(4)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15558012999\">(555) 801-2999</a>",
"target": [
"a[href=\"tel:+15558012999\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.34:1 with the surrounding text. (Minimum contrast is 3:1, link text: #d6e2f5, surrounding text: #b8c4da)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 10877
},
{
"y": 576,
"height": 10877
},
{
"y": 1152,
"height": 10877
},
{
"y": 1728,
"height": 10877
},
{
"y": 2304,
"height": 10877
},
{
"y": 2880,
"height": 10877
},
{
"y": 3456,
"height": 10877
},
{
"y": 4032,
"height": 10877
},
{
"y": 4608,
"height": 10877
},
{
"y": 5184,
"height": 10877
},
{
"y": 5760,
"height": 10877
},
{
"y": 6336,
"height": 10877
},
{
"y": 6912,
"height": 10877
},
{
"y": 7488,
"height": 10877
},
{
"y": 8064,
"height": 10877
},
{
"y": 8640,
"height": 10877
},
{
"y": 9216,
"height": 10877
},
{
"y": 9792,
"height": 10877
},
{
"y": 10157,
"height": 10877
}
],
"scans": 20,
"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: "Permits", "News", "Public Records".
- **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: "Emergency Services", "Community Programs", "Planning & Zoning".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "public records", "procurement", "ordinance".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Submit Request", "Apply for Permit", "Contact Department".
- **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: "issue reporter".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "meeting schedules", "job openings", "recent ordinances".
- **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.