OpenAI GPT 5.4 Mini – Government
via OpenAI · Generated
- AIMAC Debt 0.00
- Cost $0.036
- Total Violations 0
- HTML Size 32 KB
- Em Dashes 1
Screenshot
View Live Page
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Civic Harbor — City Services, Permits & Public Resources</title>
<meta name="description" content="Civic Harbor is a modern government portal for permits, services, public safety resources, records access, and community updates." />
<style>
:root{
--bg:#f4f7fb;
--surface:#ffffff;
--surface-2:#eef4fb;
--text:#163047;
--muted:#587089;
--primary:#0b5cab;
--primary-dark:#084a8a;
--accent:#15a37a;
--accent-dark:#0d7f5d;
--border:#d7e2ee;
--shadow:0 18px 50px rgba(16, 44, 74, .12);
--radius:20px;
--radius-sm:14px;
--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color:var(--text);
background:
radial-gradient(circle at top left, rgba(11,92,171,.08), transparent 30%),
radial-gradient(circle at top right, rgba(21,163,122,.08), transparent 28%),
var(--bg);
line-height:1.6;
}
img{max-width:100%; display:block; border-radius:16px}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.skip-link{
position:absolute; left:-999px; top:10px; background:#fff; padding:10px 14px; z-index:1000;
}
.skip-link:focus{left:10px}
header{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(14px);
background:rgba(244,247,251,.84);
border-bottom:1px solid rgba(215,226,238,.8);
}
.topbar{
display:flex; align-items:center; justify-content:space-between; gap:18px;
padding:16px 0;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand img{width:54px; height:54px; border-radius:14px; box-shadow:0 8px 24px rgba(11,92,171,.15)}
.brand-text{min-width:0}
.brand-text strong{display:block; font-size:1.15rem; letter-spacing:.2px}
.brand-text span{display:block; color:var(--muted); font-size:.94rem}
nav ul{
list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; justify-content:flex-end;
}
nav a{
display:inline-flex; align-items:center; padding:10px 14px;
border-radius:999px; color:var(--text); font-weight:600; font-size:.95rem;
transition:.2s ease;
}
nav a:hover{background:rgba(11,92,171,.08); color:var(--primary)}
.hero{
padding:32px 0 18px;
}
.hero-grid{
display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:stretch;
}
.hero-card, .panel, .section-card, .sidebar-card, .faq, .testimonial, .stat{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
box-shadow:var(--shadow);
}
.hero-card{padding:34px}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
color:var(--primary-dark); background:rgba(11,92,171,.08);
border:1px solid rgba(11,92,171,.12);
padding:8px 12px; border-radius:999px; font-weight:700; font-size:.9rem;
}
h1{margin:16px 0 14px; font-size:clamp(2.25rem, 5vw, 4.2rem); line-height:1.05}
.lead{font-size:1.08rem; color:var(--muted); max-width:62ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:13px 18px; border-radius:14px; font-weight:700; border:1px solid transparent;
transition:.2s ease; cursor:pointer;
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:transparent; border-color:var(--border); color:var(--text)}
.btn-secondary:hover{border-color:var(--primary); color:var(--primary)}
.hero-aside{display:grid; gap:18px}
.hero-visual{
overflow:hidden; min-height:290px; position:relative;
}
.hero-visual img{width:100%; height:100%; object-fit:cover}
.overlay{
position:absolute; inset:auto 0 0 0; padding:18px;
background:linear-gradient(180deg, transparent, rgba(10,29,51,.82));
color:#fff;
}
.overlay strong{display:block; font-size:1.05rem}
.overlay span{font-size:.95rem; opacity:.92}
.mini-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:20px}
.stat{padding:18px}
.stat strong{display:block; font-size:1.55rem; color:var(--primary)}
.stat span{color:var(--muted); font-size:.95rem}
main{padding:20px 0 54px}
.content-grid{
display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start;
}
.section-card{padding:28px; margin-bottom:22px}
.section-head{display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:18px}
.section-head h2{margin:0; font-size:1.6rem}
.section-head p{margin:0; color:var(--muted); max-width:65ch}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feature{
padding:18px; border-radius:18px; background:linear-gradient(180deg, #fff, #f7fbff);
border:1px solid var(--border);
}
.feature h3{margin:10px 0 8px; font-size:1.03rem}
.feature p{margin:0; color:var(--muted); font-size:.96rem}
.icon{
width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
background:rgba(21,163,122,.12); color:var(--accent-dark); font-weight:800;
}
.split{
display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center;
}
.copy p{color:var(--muted); margin-top:0}
.copy p:last-child{margin-bottom:0}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pill{
display:inline-flex; align-items:center; padding:9px 12px; border-radius:999px;
background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-weight:600; font-size:.92rem;
}
.sidebar{position:sticky; top:98px; display:grid; gap:18px}
.sidebar-card{padding:20px}
.sidebar-card h3{margin:0 0 12px; font-size:1.08rem}
.notice{padding:14px 0; border-top:1px solid var(--border)}
.notice:first-of-type{border-top:0; padding-top:0}
.notice small{display:block; color:var(--muted); margin-bottom:3px}
.notice strong{display:block; margin-bottom:4px}
.form{
display:grid; gap:12px; margin-top:16px
}
.form label{font-weight:600; font-size:.94rem}
.form input, .form select, .form textarea{
width:100%; border:1px solid var(--border); background:#fff; color:var(--text);
border-radius:12px; padding:12px 13px; font:inherit;
}
.form textarea{min-height:110px; resize:vertical}
.faq-list{display:grid; gap:12px}
details.faq{padding:18px 20px}
details summary{cursor:pointer; font-weight:700}
details p{color:var(--muted); margin:10px 0 0}
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.testimonial{padding:18px}
.testimonial p{color:var(--muted); margin:0 0 14px}
.quote{font-size:.95rem}
.author{display:flex; align-items:center; gap:12px}
.author img{width:46px; height:46px; border-radius:50%}
footer{
background:#0f2133; color:#d6e5f4; padding:34px 0 22px;
}
.footer-grid{display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:22px}
footer a{color:#d6e5f4; opacity:.92}
footer a:hover{opacity:1; text-decoration:underline}
.footer-bottom{
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
margin-top:22px; padding-top:18px; border-top:1px solid rgba(214,229,244,.16); color:#a8bfd4;
font-size:.94rem;
}
.social{display:flex; gap:10px; flex-wrap:wrap}
.social a{padding:8px 10px; border:1px solid rgba(214,229,244,.18); border-radius:999px}
@media (max-width: 980px){
.hero-grid, .content-grid, .split, .footer-grid, .testimonials, .feature-grid, .mini-grid{grid-template-columns:1fr}
.sidebar{position:static}
nav ul{justify-content:flex-start}
}
@media (max-width: 640px){
.hero-card, .section-card{padding:22px}
.topbar{flex-direction:column; align-items:flex-start}
h1{font-size:2.2rem}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>
<div class="container topbar">
<a class="brand" href="#" aria-label="Civic Harbor home">
<img src="https://placehold.co/108x108/0b5cab/ffffff?text=CH&font=montserrat" alt="Civic Harbor logo placeholder" />
<div class="brand-text">
<strong>Civic Harbor</strong>
<span>City Services, Permits & Public Resources</span>
</div>
</a>
<nav aria-label="Primary">
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#permits">Permits</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#public-safety">Public Safety</a></li>
<li><a href="#records">Public Records</a></li>
<li><a href="#pay">Pay Online</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container hero-grid">
<article class="hero-card">
<span class="eyebrow">Official Municipal Portal</span>
<h1>Fast, transparent access to the services residents use every day.</h1>
<p class="lead">
Civic Harbor is the one-stop destination for permits, service requests, community programs, public records, and emergency updates.
Built for accessibility and clarity, our portal helps residents, businesses, and civic partners complete essential tasks without confusion.
Whether you need to pay a utility bill, submit a FOIA request, or check the status of a construction permit, you can find what you need in minutes.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="#services">Explore Services</a>
<a class="btn btn-secondary" href="#pay">Pay Online</a>
<a class="btn btn-secondary" href="#records">Access Records</a>
</div>
<div class="mini-grid" aria-label="Quick facts">
<div class="stat">
<strong>24/7</strong>
<span>Online access to key resident services</span>
</div>
<div class="stat">
<strong>3</strong>
<span>Business days average permit review kickoff</span>
</div>
<div class="stat">
<strong>100%</strong>
<span>Digital submissions supported for major requests</span>
</div>
</div>
</article>
<aside class="hero-aside">
<div class="hero-visual panel">
<img src="https://picsum.photos/900/620?blur=1" alt="Placeholder civic building and city skyline" />
<div class="overlay">
<strong>Serving residents across every neighborhood</strong>
<span>Digital-first services designed for reliable access, clear guidance, and timely response.</span>
</div>
</div>
<div class="panel" style="padding:18px;">
<strong style="display:block; font-size:1.05rem; margin-bottom:8px;">Today’s priorities</strong>
<p style="margin:0; color:var(--muted);">
Roadwork notices, seasonal storm readiness, and the current fiscal year budget hearings are now posted in the News & Notices section below.
</p>
</div>
</aside>
</div>
</section>
<main id="main">
<div class="container content-grid">
<div>
<section id="services" class="section-card">
<div class="section-head">
<div>
<h2>Government Services, organized for speed and clarity</h2>
<p>
Our resident service center brings together common transactions and self-service tools in one place.
From account changes to inspection scheduling, the portal reduces wait times and makes it easier to track the status of each request.
</p>
</div>
</div>
<div class="feature-grid">
<div class="feature">
<div class="icon">01</div>
<h3>Resident Accounts</h3>
<p>Manage utility profiles, paperless billing, service alerts, and payment history from a secure dashboard. Account holders can review current balances and past due notices at any time.</p>
</div>
<div class="feature">
<div class="icon">02</div>
<h3>Applications & Appointments</h3>
<p>Submit applications for local programs, schedule appointments with departments, and receive confirmation numbers for each step in the process.</p>
</div>
<div class="feature">
<div class="icon">03</div>
<h3>Public Updates</h3>
<p>Read ordinance summaries, service advisories, and press releases issued during the current fiscal year. Notices are archived for easy public reference.</p>
</div>
</div>
<div class="split" style="margin-top:22px;">
<div class="copy">
<p>
We have designed this portal to reflect the way residents actually engage with local government: quickly, on mobile devices, and often outside of normal office hours.
Department pages provide concise guidance with required documentation, eligibility notes, and turnaround expectations so that applicants know what to expect before they submit.
</p>
<p>
The result is fewer incomplete forms, fewer repeat visits, and faster routing for staff who process service requests, issue approvals, and follow up on open cases.
For business owners, contractors, and property managers, this means easier compliance and a clearer path through permitting requirements.
</p>
<div class="actions">
<a class="btn btn-primary" href="#contact">Request Assistance</a>
<a class="btn btn-secondary" href="#permits">View Permit Guide</a>
</div>
</div>
<img src="https://picsum.photos/780/560?grayscale&blur=2" alt="Placeholder image of public service desk and city office environment" />
</div>
</section>
<section id="permits" class="section-card">
<div class="section-head">
<div>
<h2>Permits and licensing for residents, contractors, and businesses</h2>
<p>
Whether you are planning a home renovation, opening a storefront, or organizing a public event, the permits center helps you understand requirements, fees, and review timelines before you apply.
</p>
</div>
</div>
<div class="split">
<img src="https://picsum.photos/760/540?blur=2" alt="Placeholder image representing permit review and planning documents" />
<div class="copy">
<p>
Applications are reviewed by the appropriate division based on scope, location, and regulatory impact. Standard submissions may include site plans, contractor credentials, occupancy details, and proof of insurance.
Where applicable, zoning and code compliance checks are completed before final approval is issued.
</p>
<p>
Applicants can monitor progress in real time, upload revised documents, and receive email alerts when a case moves between departments.
If additional information is needed, the portal clearly lists outstanding items so that delays are minimized and re-submissions are accurate.
</p>
<div class="actions">
<a class="btn btn-primary" href="#pay">Pay Permit Fee</a>
<a class="btn btn-secondary" href="#faq">Permit FAQs</a>
</div>
</div>
</div>
<div class="actions" style="margin-top:18px;">
<span class="pill">Building Permits</span>
<span class="pill">Business Licenses</span>
<span class="pill">Special Event Permits</span>
<span class="pill">Parking Variances</span>
<span class="pill">Right-of-Way Requests</span>
</div>
</section>
<section id="public-safety" class="section-card">
<div class="section-head">
<div>
<h2>Public safety, preparedness, and community confidence</h2>
<p>
Public safety information must be timely, accessible, and easy to act on. This section consolidates emergency contacts, preparedness guidance, and community alerts so residents can make informed decisions quickly.
</p>
</div>
</div>
<div class="split">
<div class="copy">
<p>
During severe weather, road closures, or public health advisories, the city issues coordinated alerts through the website, text notifications, and social channels.
Residents can sign up for neighborhood-level updates and receive reminders about evacuation routes, cooling centers, and shelter availability.
</p>
<p>
In addition to emergency notices, the portal features crime-prevention resources, fire safety checklists, and seasonal guidance for flood, heat, and winter hazards.
Our goal is to keep public safety information central, current, and understandable for every household and business district.
</p>
<div class="actions">
<a class="btn btn-primary" href="#contact">Report Issue</a>
<a class="btn btn-secondary" href="#events">Emergency Preparedness Events</a>
</div>
</div>
<img src="https://picsum.photos/760/540?grayscale" alt="Placeholder image showing emergency services and public safety operations" />
</div>
</section>
<section id="pay" class="section-card">
<div class="section-head">
<div>
<h2>Secure payment portal</h2>
<p>
Use the payment tool below to handle common city balances, including utilities, citations, permits, and service fees.
All transactions are processed through a secure gateway and can be referenced later using your receipt number.
</p>
</div>
</div>
<div class="split">
<div>
<form class="panel" style="padding:22px;" action="#" method="post">
<div class="form">
<label for="payment-type">Payment type</label>
<select id="payment-type" name="payment-type">
<option>Utility bill</option>
<option>Permit fee</option>
<option>Parking citation</option>
<option>License renewal</option>
<option>Other municipal fee</option>
</select>
<label for="account">Account or citation number</label>
<input id="account" name="account" type="text" placeholder="Enter account number" />
<label for="amount">Payment amount</label>
<input id="amount" name="amount" type="text" placeholder="$0.00" />
<button class="btn btn-primary" type="submit">Continue to Secure Checkout</button>
</div>
</form>
</div>
<div class="copy">
<p>
Residents can also enroll in autopay, download receipts for tax records, and review prior payments by fiscal year.
For businesses with multiple accounts, a single dashboard can be used to track current balances and due dates across locations.
</p>
<p>
Need help with a disputed charge or an account transfer? Use the support option in the contact section to submit documentation and request a review.
Staff will respond within standard service hours, and urgent issues are escalated through the appropriate department.
</p>
</div>
</div>
</section>
<section id="events" class="section-card">
<div class="section-head">
<div>
<h2>Community programs, hearings, and public meetings</h2>
<p>
Civic Harbor supports an active calendar of public meetings, neighborhood outreach, and resident education programs.
These events keep the community informed on service delivery, capital planning, and policy updates.
</p>
</div>
</div>
<div class="feature-grid">
<div class="feature">
<div class="icon">A</div>
<h3>Budget Town Hall</h3>
<p>Review the proposed fiscal year budget, ask questions about departmental allocations, and learn how capital improvements are prioritized.</p>
</div>
<div class="feature">
<div class="icon">B</div>
<h3>Neighborhood Cleanup Day</h3>
<p>Volunteer with parks staff and community partners to improve shared spaces, report maintenance concerns, and collect bulk waste guidance.</p>
</div>
<div class="feature">
<div class="icon">C</div>
<h3>Small Business Workshop</h3>
<p>Get step-by-step help on licensing, zoning, and inspections, including advice on submitting complete applications the first time.</p>
</div>
</div>
<div class="actions" style="margin-top:18px;">
<a class="btn btn-primary" href="#contact">Register for an Event</a>
<a class="btn btn-secondary" href="#faq">View Event Policies</a>
</div>
</section>
<section class="section-card">
<div class="section-head">
<div>
<h2>What residents and partners are saying</h2>
<p>Feedback from community members helps us improve access, response time, and clarity across departments.</p>
</div>
</div>
<div class="testimonials">
<article class="testimonial">
<p class="quote">“Submitting our signage permit online saved us several trips to city hall. The checklist was clear and the approval timeline matched what was posted.”</p>
<div class="author">
<img src="https://i.pravatar.cc/96?u=business-owner-1" alt="Community member avatar" />
<div><strong>Marina K.</strong><br><span style="color:var(--muted); font-size:.92rem;">Local business owner</span></div>
</div>
</article>
<article class="testimonial">
<p class="quote">“The emergency alerts during the storm were concise and helpful. I appreciated having the shelter locations and road closures in one place.”</p>
<div class="author">
<img src="https://i.pravatar.cc/96?u=resident-2" alt="Community member avatar" />
<div><strong>Jordan P.</strong><br><span style="color:var(--muted); font-size:.92rem;">Resident</span></div>
</div>
</article>
<article class="testimonial">
<p class="quote">“Our nonprofit used the portal to track a special event permit and communicate with staff. It made coordination much easier.”</p>
<div class="author">
<img src="https://i.pravatar.cc/96?u=nonprofit-3" alt="Community member avatar" />
<div><strong>Elena T.</strong><br><span style="color:var(--muted); font-size:.92rem;">Community organizer</span></div>
</div>
</article>
</div>
</section>
<section id="faq" class="section-card">
<div class="section-head">
<div>
<h2>Frequently asked questions</h2>
<p>Clear answers reduce delays and help residents find the right department the first time.</p>
</div>
</div>
<div class="faq-list">
<details class="faq">
<summary>How do I submit a FOIA request or access public records?</summary>
<p>
Use the public records portal to identify the department, describe the records you need, and submit your request online.
Many documents are available immediately, while others may require staff review for redaction, legal exemption checks, or archival retrieval.
</p>
</details>
<details class="faq">
<summary>How long does a permit review usually take?</summary>
<p>
Standard turnaround depends on permit type, completeness of the application, and whether multiple divisions must review the case.
Simple requests can move quickly, while projects requiring zoning, inspections, or environmental coordination may take longer.
</p>
</details>
<details class="faq">
<summary>Can I pay bills and fees without creating an account?</summary>
<p>
Yes. One-time guest payment options are available for many transactions. Creating an account, however, lets you save payment methods, review receipts, and track history across multiple services.
</p>
</details>
</div>
</section>
</div>
<aside class="sidebar">
<div class="sidebar-card">
<h3>Public announcements</h3>
<div class="notice">
<small>Today</small>
<strong>Street resurfacing begins on Maple Avenue</strong>
<span style="color:var(--muted);">Expect lane shifts from 9 AM to 4 PM through Friday.</span>
</div>
<div class="notice">
<small>Monday</small>
<strong>Library annex closed for HVAC maintenance</strong>
<span style="color:var(--muted);">Digital services remain available during normal hours.</span>
</div>
<div class="notice">
<small>This week</small>
<strong>Budget workshop packets now available</strong>
<span style="color:var(--muted);">View the fiscal year agenda and public comment guidelines.</span>
</div>
</div>
<div class="sidebar-card">
<h3>Quick links</h3>
<div class="actions" style="margin-top:0;">
<a class="pill" href="#permits">Permits</a>
<a class="pill" href="#services">Services</a>
<a class="pill" href="#public-safety">Safety Alerts</a>
<a class="pill" href="#records">Records</a>
<a class="pill" href="#pay">Payments</a>
<a class="pill" href="#contact">Contact Desk</a>
</div>
</div>
<div class="sidebar-card" id="records">
<h3>Public records center</h3>
<p style="margin-top:0; color:var(--muted);">
Search agendas, meeting minutes, ordinances, contracts, and archived notices. Submit a FOIA request when a record is not immediately available.
</p>
<a class="btn btn-primary" href="#contact" style="width:100%;">Access Records</a>
</div>
<div class="sidebar-card">
<h3>Contact city services</h3>
<p style="margin-top:0; color:var(--muted);">
Main line: (555) 014-2200<br />
Service desk: Mon–Fri, 8:00 AM–5:00 PM<br />
Emergency line: 911 for immediate danger
</p>
</div>
</aside>
</div>
<section id="contact" class="container" style="padding-top:2px;">
<div class="section-card">
<div class="section-head">
<div>
<h2>Request help, submit a question, or report an issue</h2>
<p>
Use the contact form for service questions, documentation follow-up, and general inquiries.
For urgent safety concerns, contact emergency services directly.
</p>
</div>
</div>
<div class="split">
<div class="copy">
<p>
Our public service team routes inquiries to the correct department and provides a response within standard business hours.
If your request involves an active case, please include the reference number, address, or account details so staff can locate it quickly.
</p>
<p>
Residents can use this form to ask about permit status, service interruptions, public hearing schedules, public records availability, or technical support for online accounts.
We welcome feedback that helps improve accessibility, clarity, and turnaround time across the portal.
</p>
</div>
<form class="panel" style="padding:22px;" action="#" method="post">
<div class="form">
<label for="name">Full name</label>
<input id="name" type="text" placeholder="Your name" />
<label for="email">Email address</label>
<input id="email" type="email" placeholder="name@example.gov" />
<label for="topic">Topic</label>
<select id="topic">
<option>Report issue</option>
<option>Permit question</option>
<option>Public records request</option>
<option>Billing support</option>
<option>Event registration</option>
</select>
<label for="message">Message</label>
<textarea id="message" placeholder="Please include any reference numbers, dates, or relevant details."></textarea>
<button class="btn btn-primary" type="submit">Submit Request</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div>
<a class="brand" href="#" style="margin-bottom:12px;">
<img src="https://placehold.co/108x108/15a37a/ffffff?text=CH&font=montserrat" alt="Civic Harbor logo placeholder" />
<div class="brand-text">
<strong style="color:#fff;">Civic Harbor</strong>
<span style="color:#b9cee1;">City Services, Permits & Public Resources</span>
</div>
</a>
<p style="margin:0; color:#b9cee1; max-width:58ch;">
A modern government portal built to provide reliable service delivery, transparent communication, and easy access to essential public information for residents, businesses, and community partners.
</p>
</div>
<div>
<h3 style="margin-top:0; color:#fff;">Standard links</h3>
<p style="margin:0 0 8px;"><a href="#">Privacy Policy</a></p>
<p style="margin:0 0 8px;"><a href="#">Terms of Use</a></p>
<p style="margin:0 0 8px;"><a href="#">Accessibility Statement</a></p>
<p style="margin:0;"><a href="#">Open Data</a></p>
</div>
<div>
<h3 style="margin-top:0; color:#fff;">Follow us</h3>
<div class="social">
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="X">X</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
<a href="#" aria-label="YouTube">YouTube</a>
</div>
<p style="margin-top:16px; color:#b9cee1;">
Civic Harbor Municipal Center<br />
1400 Harbor Plaza, Suite 200<br />
Rivergate, ST 10420
</p>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Civic Harbor. All rights reserved.</span>
<span>Designed for public service, accessibility, and trust.</span>
</div>
</div>
</footer>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:41:25.742Z",
"url": "https://benchmark.aimac.invalid/85968ab52d164e08ee0aa5a567e52d182b8b539ae8dee8290e7a71be0c002dbd.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Civic Harbor home\">",
"target": [
"a[aria-label=\"Civic Harbor home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Civic Harbor home\">",
"target": [
"a[aria-label=\"Civic Harbor home\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Civic Harbor home\">",
"target": [
"a[aria-label=\"Civic Harbor home\"]"
]
}
]
},
{
"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 class=\"brand\" href=\"#\" aria-label=\"Civic Harbor home\">",
"target": [
"a[aria-label=\"Civic Harbor home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Civic Harbor home\">",
"target": [
"a[aria-label=\"Civic Harbor home\"]"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div class=\"panel\" style=\"padding:18px;\">",
"target": [
".hero-aside > .panel:nth-child(2)"
]
}
]
},
{
"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-primary\" type=\"submit\">Continue to Secure Checkout</button>",
"target": [
"div:nth-child(1) > form > .form > button"
]
}
]
},
{
"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>Fast, transparent access to the services residents use every day.</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Government Services, organized for speed and clarity</h2>",
"target": [
"#services > .section-head > div > h2"
]
},
{
"html": "<h3>Resident Accounts</h3>",
"target": [
"#services > .feature-grid > .feature:nth-child(1) > h3"
]
},
{
"html": "<h3>Applications & Appointments</h3>",
"target": [
"#services > .feature-grid > .feature:nth-child(2) > h3"
]
},
{
"html": "<h3>Public Updates</h3>",
"target": [
"#services > .feature-grid > .feature:nth-child(3) > h3"
]
},
{
"html": "<h2>Permits and licensing for residents, contractors, and businesses</h2>",
"target": [
"#permits > .section-head > div > h2"
]
},
{
"html": "<h2>Public safety, preparedness, and community confidence</h2>",
"target": [
"#public-safety > .section-head > div > h2"
]
},
{
"html": "<h2>Secure payment portal</h2>",
"target": [
"#pay > .section-head > div > h2"
]
},
{
"html": "<h2>Community programs, hearings, and public meetings</h2>",
"target": [
"#events > .section-head > div > h2"
]
},
{
"html": "<h3>Budget Town Hall</h3>",
"target": [
"#events > .feature-grid > .feature:nth-child(1) > h3"
]
},
{
"html": "<h3>Neighborhood Cleanup Day</h3>",
"target": [
"#events > .feature-grid > .feature:nth-child(2) > h3"
]
},
{
"html": "<h3>Small Business Workshop</h3>",
"target": [
"#events > .feature-grid > .feature:nth-child(3) > h3"
]
},
{
"html": "<h2>What residents and partners are saying</h2>",
"target": [
".section-card:nth-child(6) > .section-head > div > h2"
]
},
{
"html": "<h2>Frequently asked questions</h2>",
"target": [
"#faq > .section-head > div > h2"
]
},
{
"html": "<h3>Public announcements</h3>",
"target": [
".sidebar-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Quick links</h3>",
"target": [
".sidebar-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Public records center</h3>",
"target": [
"#records > h3"
]
},
{
"html": "<h3>Contact city services</h3>",
"target": [
".sidebar-card:nth-child(4) > h3"
]
},
{
"html": "<h2>Request help, submit a question, or report an issue</h2>",
"target": [
"#contact > .section-card > .section-head > div > h2"
]
},
{
"html": "<h3 style=\"margin-top:0; color:#fff;\">Standard links</h3>",
"target": [
".footer-grid > div:nth-child(2) > h3"
]
},
{
"html": "<h3 style=\"margin-top:0; color:#fff;\">Follow us</h3>",
"target": [
".footer-grid > div:nth-child(3) > h3"
]
}
],
"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": "#084a8a",
"bgColor": "#ebf2f8",
"contrastRatio": 7.88,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 7.88"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"eyebrow\">Official Municipal Portal</span>",
"target": [
".eyebrow"
]
}
]
},
{
"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": "payment-type",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<select id=\"payment-type\" name=\"payment-type\">",
"target": [
"#payment-type"
]
}
]
},
{
"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=\"payment-type\">Payment type</label>",
"target": [
"label[for=\"payment-type\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"payment-type\" name=\"payment-type\">",
"target": [
"#payment-type"
]
}
]
},
{
"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/108x108/0b5cab/ffffff?text=CH&font=montserrat\" alt=\"Civic Harbor logo placeholder\">",
"target": [
"a[aria-label=\"Civic Harbor home\"] > img[alt=\"Civic Harbor logo placeholder\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Account or citation number"
},
"relatedNodes": [
{
"html": "<label for=\"account\">Account or citation number</label>",
"target": [
"label[for=\"account\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"account\" name=\"account\" type=\"text\" placeholder=\"Enter account number\">",
"target": [
"#account"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"sidebar-card\" id=\"records\">",
"target": [
"#records"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"btn btn-primary\" href=\"#contact\" style=\"width:100%;\">Access Records</a>",
"target": [
"#records > .btn-primary.btn[href$=\"#contact\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
"ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#services\">Services</a></li>",
"target": [
"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/108x108/0b5cab/ffffff?text=CH&font=montserrat\" alt=\"Civic Harbor logo placeholder\">",
"target": [
"a[aria-label=\"Civic Harbor home\"] > img[alt=\"Civic Harbor logo placeholder\"]"
]
}
]
},
{
"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": "Payment type"
},
"relatedNodes": [
{
"html": "<label for=\"payment-type\">Payment type</label>",
"target": [
"label[for=\"payment-type\"]"
]
}
],
"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=\"payment-type\" name=\"payment-type\">",
"target": [
"#payment-type"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>How do I submit a FOIA request or access public records?</summary>",
"target": [
"details:nth-child(1) > 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": 137.8,
"height": 45.6
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (137.8px by 45.6px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
}
],
"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=\"mini-grid\" aria-label=\"Quick facts\">",
"target": [
".mini-grid"
],
"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": "13.8pt (18.4px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header>",
"target": [
"header"
]
},
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>Civic Harbor</strong>",
"target": [
"a[aria-label=\"Civic Harbor home\"] > .brand-text > strong"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6798
},
{
"y": 576,
"height": 6798
},
{
"y": 1152,
"height": 6798
},
{
"y": 1728,
"height": 6798
},
{
"y": 2304,
"height": 6798
},
{
"y": 2880,
"height": 6798
},
{
"y": 3456,
"height": 6798
},
{
"y": 4032,
"height": 6798
},
{
"y": 4608,
"height": 6798
},
{
"y": 5184,
"height": 6798
},
{
"y": 5760,
"height": 6798
},
{
"y": 6078,
"height": 6798
}
],
"scans": 13,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "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", "Services", "Events".
- **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: "Community Programs", "Government Services", "Public Safety".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "fiscal year", "public records", "FOIA request".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Report Issue", "Pay Online", "Access Records".
- **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: "payment portal".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "public announcements", "recent ordinances", "press releases".
- **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.