StepFun Step 3.7 Flash – Government

via Novita · Generated

  • AIMAC Debt 2.66
  • Cost $0.013
  • Total Violations 2
  • HTML Size 34 KB
  • Em Dashes 0

Screenshot

View StepFun Step 3.7 Flash Government page View Live Page

Accessibility Issues Found

2 Serious

  • color-contrast serious 2 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#" class="active">Home</a>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CivicConnect Portal | Springfield Metropolitan Government</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root {
            --primary: #003366;
            --accent: #008080;
            --accent-hover: #006666;
            --light-gray: #f5f7fa;
            --border: #e0e0e0;
            --text-dark: #333333;
            --text-light: #666666;
            --white: #ffffff;
            --shadow: 0 4px 6px rgba(0,0,0,0.1);
            --shadow-hover: 0 6px 12px rgba(0,0,0,0.15);
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
            background-color: var(--light-gray);
        }
        a {
            text-decoration: none;
            color: inherit;
        }
        ul {
            list-style: none;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        /* Header Styles */
        header {
            background-color: var(--primary);
            color: var(--white);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow);
        }
        .header-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .logo-area {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .logo {
            height: 50px;
            width: auto;
        }
        .site-info h1 {
            font-size: 1.5rem;
            font-weight: 700;
        }
        .site-info p {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        nav ul {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }
        nav a {
            font-weight: 500;
            padding: 0.5rem 0;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }
        nav a:hover, nav a.active {
            border-bottom-color: var(--accent);
            color: var(--accent);
        }
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            align-self: flex-end;
        }
        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 51, 102, 0.9), rgba(0, 51, 102, 0.8)), url('https://placehold.co/1200x600/003366/FFFFFF?text=Springfield+Civic+Center&font=open+sans') no-repeat center center/cover;
            color: var(--white);
            padding: 4rem 0;
            text-align: center;
        }
        .hero h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }
        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            border-radius: 4px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        .btn-primary {
            background-color: var(--accent);
            color: var(--white);
        }
        .btn-primary:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
        }
        .btn-secondary {
            background-color: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }
        .btn-secondary:hover {
            background-color: var(--white);
            color: var(--primary);
            transform: translateY(-2px);
        }
        /* Main Content Layout */
        .main-content {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 2rem;
            padding: 3rem 0;
        }
        .section {
            background-color: var(--white);
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow);
        }
        .section h3 {
            color: var(--primary);
            font-size: 1.8rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid var(--accent);
            padding-bottom: 0.5rem;
        }
        .section-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 1.5rem;
        }
        .section p {
            margin-bottom: 1rem;
            color: var(--text-light);
        }
        .section-ctas {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }
        .btn-small {
            padding: 0.6rem 1rem;
            font-size: 0.9rem;
        }
        /* Sidebar Styles */
        .sidebar-widget {
            background-color: var(--white);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow);
        }
        .sidebar-widget h4 {
            color: var(--primary);
            font-size: 1.2rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 0.5rem;
        }
        .announcement-item, .meeting-item, .quick-link-item {
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--border);
        }
        .announcement-item:last-child, .meeting-item:last-child, .quick-link-item:last-child {
            border-bottom: none;
        }
        .announcement-date, .meeting-date {
            font-size: 0.85rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.3rem;
        }
        .quick-link-item a {
            color: var(--primary);
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .quick-link-item a:hover {
            color: var(--accent);
        }
        .contact-quick p {
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
        /* Testimonials */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        .testimonial-card {
            background-color: var(--light-gray);
            padding: 1.5rem;
            border-radius: 8px;
            border-left: 4px solid var(--accent);
        }
        .testimonial-card p {
            font-style: italic;
            margin-bottom: 1rem;
        }
        .testimonial-author {
            font-weight: 600;
            color: var(--primary);
        }
        /* Service Tracker */
        .tracker-form {
            display: flex;
            gap: 1rem;
            margin: 1.5rem 0;
            flex-wrap: wrap;
        }
        .tracker-form input {
            flex: 1;
            min-width: 250px;
            padding: 0.8rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-family: inherit;
        }
        .tracker-result {
            padding: 1rem;
            background-color: var(--light-gray);
            border-radius: 4px;
            margin-top: 1rem;
            display: none;
        }
        .tracker-result.active {
            display: block;
        }
        .tracker-result h5 {
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        /* FAQ Accordion */
        .accordion-item {
            border-bottom: 1px solid var(--border);
        }
        .accordion-header {
            width: 100%;
            text-align: left;
            padding: 1rem 0;
            background: none;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            color: var(--primary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: inherit;
        }
        .accordion-header::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--accent);
        }
        .accordion-header.active::after {
            content: '-';
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .accordion-content p {
            padding-bottom: 1rem;
            color: var(--text-light);
        }
        /* Footer */
        footer {
            background-color: var(--primary);
            color: var(--white);
            padding: 3rem 0 1rem;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .footer-col h4 {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding-bottom: 0.5rem;
        }
        .footer-col p, .footer-col li {
            margin-bottom: 0.8rem;
            opacity: 0.9;
            font-size: 0.95rem;
        }
        .footer-col a {
            color: var(--white);
            transition: color 0.3s ease;
        }
        .footer-col a:hover {
            color: var(--accent);
        }
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        .social-links a {
            display: inline-block;
            padding: 0.5rem 1rem;
            background-color: rgba(255,255,255,0.1);
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        .social-links a:hover {
            background-color: var(--accent);
        }
        .copyright {
            text-align: center;
            padding-top: 1rem;
            border-top: 1px solid rgba(255,255,255,0.2);
            opacity: 0.8;
            font-size: 0.9rem;
        }
        /* Responsive Design */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                align-items: flex-start;
            }
            .mobile-menu-btn {
                display: block;
            }
            nav ul {
                display: none;
                flex-direction: column;
                gap: 1rem;
                width: 100%;
            }
            nav ul.active {
                display: flex;
            }
            .main-content {
                grid-template-columns: 1fr;
            }
            .hero h2 {
                font-size: 2rem;
            }
            .hero p {
                font-size: 1rem;
            }
            .section h3 {
                font-size: 1.5rem;
            }
        }
        @media (max-width: 480px) {
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                width: 100%;
                text-align: center;
            }
            .section-ctas {
                flex-direction: column;
            }
            .btn-small {
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo-area">
                    <img src="https://placehold.co/150x50/003366/FFFFFF?text=CivicConnect&font=open+sans" alt="CivicConnect Portal Logo" class="logo">
                    <div class="site-info">
                        <h1>CivicConnect Portal</h1>
                        <p>Springfield Metropolitan Government | Official Public Services Hub</p>
                    </div>
                    <button class="mobile-menu-btn" aria-label="Toggle navigation menu">☰</button>
                </div>
                <nav>
                    <ul>
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="#public-services">Public Services</a></li>
                        <li><a href="#business">Business Resources</a></li>
                        <li><a href="#news">News</a></li>
                        <li><a href="#jobs">Jobs</a></li>
                        <li><a href="#faqs">FAQs</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h2>Serving Our Community with Transparency and Efficiency</h2>
            <p>Access government services, public records, and constituent support 24/7 from anywhere. CivicConnect streamlines interactions with your local government to save you time and improve accountability.</p>
            <div class="cta-buttons">
                <a href="#public-services" class="btn btn-primary">Get Started</a>
                <a href="#tracker" class="btn btn-secondary">Track Service Request</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container">
        <div class="main-content">
            <!-- Left Column: Main Content -->
            <div class="main-column">
                <!-- Core Public Services Section -->
                <section id="public-services" class="section">
                    <h3>Essential Public Services for All Constituents</h3>
                    <img src="https://placehold.co/600x400/008080/FFFFFF?text=Public+Works+and+Safety+Team&font=open+sans" alt="Public works and safety team servicing community" class="section-image">
                    <p>CivicConnect provides centralized access to all core municipal services for Springfield residents and businesses. From non-emergency public works requests to public records access, our platform eliminates red tape and reduces processing times by an average of 40% compared to in-person submissions. All constituent services are available 24/7 online, with optional in-person appointments at the Civic Center for services that require documentation verification.</p>
                    <p>In fiscal year 2023, our department fulfilled over 12,400 service requests, including street light repairs, graffiti removal, park maintenance reports, and public records inquiries. All requests are tracked in real time, so you can monitor progress from submission to completion without follow-up calls or emails. We also offer multilingual support for 12 languages to ensure accessibility for all community members.</p>
                    <div class="section-ctas">
                        <a href="#contact" class="btn btn-primary btn-small">Schedule In-Person Appointment</a>
                        <a href="#" class="btn btn-primary btn-small">Download Public Records Request Form</a>
                        <a href="#" class="btn btn-primary btn-small">Report Non-Emergency Issue</a>
                    </div>
                </section>

                <!-- Business & Economic Development Section -->
                <section id="business" class="section">
                    <h3>Supporting Local Business Growth and Compliance</h3>
                    <img src="https://placehold.co/600x400/003366/FFFFFF?text=Springfield+Small+Business+District&font=open+sans" alt="Springfield small business district with local storefronts" class="section-image">
                    <p>Springfield Metropolitan Government is committed to fostering a business-friendly environment for local entrepreneurs and established companies alike. Our Business Resources portal streamlines permit applications, license renewals, and compliance reporting, with an average processing time of 3 business days for standard applications. For fiscal year 2024, we have allocated $2.3 million to small business support programs, including grant opportunities for minority-owned businesses and technical assistance for new startups.</p>
                    <p>Business owners can access interactive zoning maps, apply for special event permits, and sign up for free business development workshops directly through the portal. We also maintain a public database of all active business licenses to ensure transparency and compliance with local ordinances. For questions about tax incentives, development regulations, or contracting opportunities with the city, our dedicated business support team is available Monday through Friday, 8AM to 5PM.</p>
                    <div class="section-ctas">
                        <a href="#" class="btn btn-primary btn-small">Apply for Business License</a>
                        <a href="#" class="btn btn-primary btn-small">View FY2024 Economic Development Budget</a>
                        <a href="#" class="btn btn-primary btn-small">Access Interactive Zoning Maps</a>
                    </div>
                </section>

                <!-- Community & Transparency Section -->
                <section id="community" class="section">
                    <h3>Open Government and Community Engagement</h3>
                    <img src="https://placehold.co/600x400/008080/FFFFFF?text=Town+Hall+Public+Meeting&font=open+sans" alt="Public town hall meeting with residents and city officials" class="section-image">
                    <p>Transparency and constituent input are core values of Springfield Metropolitan Government. All city council meetings, planning commission hearings, and public board sessions are open to the public, with agendas posted 72 hours in advance and meeting minutes published within 48 hours of session conclusion. We offer both in-person and virtual attendance options for all public meetings to maximize community participation.</p>
                    <p>Our open government initiative includes a public records request portal with a 5-business-day response guarantee, an annual performance report detailing department metrics and fiscal year spending, and a constituent feedback portal for submitting suggestions and complaints. We also publish a monthly newsletter highlighting new programs, upcoming events, and policy changes that impact residents. All city ordinances, budgets, and strategic plans are available for public download at any time.</p>
                    <div class="section-ctas">
                        <a href="#" class="btn btn-primary btn-small">View Upcoming Public Meetings</a>
                        <a href="#" class="btn btn-primary btn-small">Submit Constituent Feedback</a>
                        <a href="#" class="btn btn-primary btn-small">Download 2023 Annual Performance Report</a>
                    </div>
                </section>

                <!-- Testimonials Section -->
                <section class="section">
                    <h3>What Our Community Says</h3>
                    <div class="testimonials-grid">
                        <div class="testimonial-card">
                            <p>"I was able to report a pothole and track its repair status in real time through CivicConnect. No more waiting on hold for hours or driving to the Civic Center during work hours. This portal has made interacting with the city so much easier."</p>
                            <p class="testimonial-author">Sarah J., Springfield Resident</p>
                        </div>
                        <div class="testimonial-card">
                            <p>"The online business license application cut my processing time from 2 weeks to 3 days. As a new small business owner, this saved me critical time and resources during my startup phase. The staff was also incredibly responsive when I had questions."</p>
                            <p class="testimonial-author">Michael T., Owner, Main Street Coffee Co.</p>
                        </div>
                        <div class="testimonial-card">
                            <p>"CivicConnect has streamlined our public safety reporting process, allowing us to respond to community concerns 30% faster. The integrated system for submitting and tracking non-emergency reports has freed up our dispatch lines for actual emergencies."</p>
                            <p class="testimonial-author">Chief Lisa M., Springfield Fire Department</p>
                        </div>
                    </div>
                </section>

                <!-- Interactive Service Tracker -->
                <section id="tracker" class="section">
                    <h3>Track Your Service Request Status</h3>
                    <p>Enter your service request ID below to get real-time updates on your submission, including current status, assigned department, and estimated completion date.</p>
                    <div class="tracker-form">
                        <input type="text" id="requestId" placeholder="Enter Service Request ID (e.g., SR-2024-7890)" aria-label="Service request ID">
                        <button class="btn btn-primary" onclick="trackRequest()">Track Status</button>
                    </div>
                    <div id="trackerResult" class="tracker-result">
                        <h5>Request Status: <span id="statusText"></span></h5>
                        <p>Assigned Department: <span id="departmentText"></span></p>
                        <p>Estimated Completion: <span id="dateText"></span></p>
                        <p>Last Updated: <span id="updatedText"></span></p>
                    </div>
                </section>

                <!-- FAQ Section -->
                <section id="faqs" class="section">
                    <h3>Frequently Asked Questions</h3>
                    <div class="accordion">
                        <div class="accordion-item">
                            <button class="accordion-header">How do I submit a public records request?</button>
                            <div class="accordion-content">
                                <p>You can submit a public records request online through our Public Records Portal, by mail to the City Clerk's Office at 123 Civic Center Drive, or in person at the Civic Center front desk. Online requests are processed faster, with a standard 5-business-day response time. There is no fee for requests under 50 pages; additional fees apply for larger requests or certified copies.</p>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <button class="accordion-header">What are the hours for in-person services at the Civic Center?</button>
                            <div class="accordion-content">
                                <p>The Civic Center is open Monday through Friday, 8:00 AM to 5:00 PM, excluding city-observed holidays. In-person services include business license applications, permit submissions, public records requests, and constituent support. We recommend scheduling an appointment online in advance to reduce wait times.</p>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <button class="accordion-header">How do I apply for a small business grant?</button>
                            <div class="accordion-content">
                                <p>Small business grant applications are accepted quarterly through our Business Resources portal. Eligibility requirements include a valid Springfield business license, fewer than 50 employees, and annual revenue under $1 million. Grants range from $5,000 to $25,000 and are awarded based on community impact, innovation, and financial need. The next application window opens September 1, 2024.</p>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <button class="accordion-header">Where can I find information about upcoming city council meetings?</button>
                            <div class="accordion-content">
                                <p>All upcoming city council meeting agendas, packets, and virtual attendance links are posted on our Public Meetings page 72 hours before each session. Meetings are held on the first and third Tuesday of every month at 7:00 PM in the City Council Chambers at the Civic Center. All meetings are also livestreamed on our YouTube channel and local government access channel.</p>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <button class="accordion-header">How do I report a non-emergency public safety issue?</button>
                            <div class="accordion-content">
                                <p>Non-emergency public safety issues (including noise complaints, suspicious activity, and minor traffic incidents) can be reported online through the CivicConnect portal, by calling our non-emergency dispatch line at (555) 987-6543, or by dialing 311 for non-emergency city services. For life-threatening emergencies, always call 911 first.</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- Right Column: Sidebar -->
            <aside class="sidebar">
                <div class="sidebar-widget">
                    <h4>Recent Announcements</h4>
                    <div class="announcement-item">
                        <div class="announcement-date">June 1, 2024</div>
                        <p>New Curbside Recycling Program Launching July 15, 2024: Expanded recycling guidelines and new collection schedules are now available on our Public Works page.</p>
                    </div>
                    <div class="announcement-item">
                        <div class="announcement-date">May 28, 2024</div>
                        <p>FY2024 Budget Approved by City Council: The $145 million fiscal year budget includes increased funding for public safety, road repairs, and youth programs.</p>
                    </div>
                    <div class="announcement-item">
                        <div class="announcement-date">May 20, 2024</div>
                        <p>Summer Youth Employment Program Now Accepting Applications: Applications are open to residents aged 16-21 for paid positions with city departments and local businesses.</p>
                    </div>
                </div>

                <div class="sidebar-widget">
                    <h4>Upcoming Public Meetings</h4>
                    <div class="meeting-item">
                        <div class="meeting-date">June 15, 2024 | 7:00 PM</div>
                        <p>City Council Regular Meeting, City Council Chambers</p>
                    </div>
                    <div class="meeting-item">
                        <div class="meeting-date">June 18, 2024 | 6:00 PM</div>
                        <p>Planning Commission Meeting, Civic Center Room 201</p>
                    </div>
                    <div class="meeting-item">
                        <div class="meeting-date">June 20, 2024 | 5:30 PM</div>
                        <p>Parks & Recreation Board Meeting, Community Center</p>
                    </div>
                </div>

                <div class="sidebar-widget">
                    <h4>Quick Links</h4>
                    <div class="quick-link-item">
                        <a href="#">FY2024 Adopted Budget Report (PDF)</a>
                    </div>
                    <div class="quick-link-item">
                        <a href="#">Recent Ordinance #2024-12: Short-Term Rental Regulations</a>
                    </div>
                    <div class="quick-link-item">
                        <a href="#">Public Records Request Portal</a>
                    </div>
                    <div class="quick-link-item">
                        <a href="#" id="jobs">Job Openings Portal</a>
                    </div>
                </div>

                <div class="sidebar-widget contact-quick">
                    <h4>Contact Quick Info</h4>
                    <p><strong>Non-Emergency Dispatch:</strong> (555) 987-6543</p>
                    <p><strong>311 Non-Emergency Services:</strong> Dial 311 or (555) 111-2222</p>
                    <p><strong>Email:</strong> info@civicconnect.gov</p>
                    <p><strong>Office Hours:</strong> Mon-Fri 8AM-5PM</p>
                </div>
            </aside>
        </div>
    </div>

    <!-- Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4>About CivicConnect</h4>
                    <p>CivicConnect is the official online portal for Springfield Metropolitan Government, committed to delivering transparent, accessible, and efficient public services to all constituents. Our mission is to bridge the gap between residents and local government through technology and community engagement.</p>
                </div>
                <div class="footer-col">
                    <h4>Contact Us</h4>
                    <p>123 Civic Center Drive, Suite 100<br>Springfield, ST 12345</p>
                    <p>Phone: (555) 123-4567</p>
                    <p>Email: info@civicconnect.gov</p>
                    <p>Office Hours: Monday-Friday, 8:00 AM - 5:00 PM</p>
                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Use</a></li>
                        <li><a href="#">Accessibility Statement</a></li>
                        <li><a href="#">Sitemap</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Follow Us</h4>
                    <p>Stay up to date with the latest news, events, and announcements from Springfield Metropolitan Government.</p>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook">Facebook</a>
                        <a href="#" aria-label="X (Twitter)">X</a>
                        <a href="#" aria-label="LinkedIn">LinkedIn</a>
                        <a href="#" aria-label="Instagram">Instagram</a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2024 Springfield Metropolitan Government. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile Menu Toggle
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const navUl = document.querySelector('nav ul');
        mobileMenuBtn.addEventListener('click', () => {
            navUl.classList.toggle('active');
            mobileMenuBtn.textContent = navUl.classList.contains('active') ? '✕' : '☰';
        });

        // Service Request Tracker
        function trackRequest() {
            const requestId = document.getElementById('requestId').value.trim();
            const resultDiv = document.getElementById('trackerResult');
            const statusText = document.getElementById('statusText');
            const departmentText = document.getElementById('departmentText');
            const dateText = document.getElementById('dateText');
            const updatedText = document.getElementById('updatedText');

            if (!requestId) {
                alert('Please enter a service request ID');
                return;
            }

            // Mock response for demo purposes
            if (requestId.toLowerCase() === 'sr-2024-7890') {
                statusText.textContent = 'In Progress';
                departmentText.textContent = 'Public Works Department';
                dateText.textContent = 'June 20, 2024';
                updatedText.textContent = 'June 10, 2024, 2:30 PM';
                resultDiv.classList.add('active');
            } else {
                statusText.textContent = 'Not Found';
                departmentText.textContent = '-';
                dateText.textContent = '-';
                updatedText.textContent = '-';
                resultDiv.classList.add('active');
            }
        }

        // FAQ Accordion
        const accordionHeaders = document.querySelectorAll('.accordion-header');
        accordionHeaders.forEach(header => {
            header.addEventListener('click', () => {
                const content = header.nextElementSibling;
                const isActive = header.classList.contains('active');

                // Close all other accordions
                accordionHeaders.forEach(h => {
                    h.classList.remove('active');
                    h.nextElementSibling.style.maxHeight = null;
                });

                // Toggle current accordion
                if (!isActive) {
                    header.classList.add('active');
                    content.style.maxHeight = content.scrollHeight + 'px';
                }
            });
        });

        // Close mobile menu when clicking a link
        document.querySelectorAll('nav a').forEach(link => {
            link.addEventListener('click', () => {
                navUl.classList.remove('active');
                mobileMenuBtn.textContent = '☰';
            });
        });
    </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:43:35.024Z",
  "url": "https://benchmark.aimac.invalid/9e6df14619e57e8ed9c0148c5e49115b6d6a670ae04f312838f055cfd372926c.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": "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": []
    },
    {
      "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": "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": []
    },
    {
      "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": "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": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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\" onclick=\"trackRequest()\">Track Status</button>",
          "target": [
            "button[onclick=\"trackRequest()\"]"
          ]
        }
      ]
    },
    {
      "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>CivicConnect Portal</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Serving Our Community with Transparency and Efficiency</h2>",
                  "target": [
                    "h2"
                  ]
                },
                {
                  "html": "<h3>Essential Public Services for All Constituents</h3>",
                  "target": [
                    "#public-services > h3"
                  ]
                },
                {
                  "html": "<h3>Supporting Local Business Growth and Compliance</h3>",
                  "target": [
                    "#business > h3"
                  ]
                },
                {
                  "html": "<h3>Open Government and Community Engagement</h3>",
                  "target": [
                    "#community > h3"
                  ]
                },
                {
                  "html": "<h3>What Our Community Says</h3>",
                  "target": [
                    ".section:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Track Your Service Request Status</h3>",
                  "target": [
                    "#tracker > h3"
                  ]
                },
                {
                  "html": "<h3>Frequently Asked Questions</h3>",
                  "target": [
                    "#faqs > h3"
                  ]
                },
                {
                  "html": "<h4>Recent Announcements</h4>",
                  "target": [
                    ".sidebar-widget:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Upcoming Public Meetings</h4>",
                  "target": [
                    ".sidebar-widget:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Quick Links</h4>",
                  "target": [
                    ".sidebar-widget:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact Quick Info</h4>",
                  "target": [
                    ".contact-quick > h4"
                  ]
                },
                {
                  "html": "<h4>About CivicConnect</h4>",
                  "target": [
                    ".footer-col:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact Us</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Quick Links</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Follow Us</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#003366",
                "contrastRatio": 12.6,
                "fontSize": "18.0pt (24px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 12.6"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h1>CivicConnect Portal</h1>",
          "target": [
            "h1"
          ]
        }
      ]
    },
    {
      "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": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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/150x50/003366/FFFFFF?text=CivicConnect&amp;font=open+sans\" alt=\"CivicConnect Portal Logo\" class=\"logo\">",
          "target": [
            ".logo"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"requestId\" placeholder=\"Enter Service Request ID (e.g., SR-2024-7890)\" aria-label=\"Service request ID\">",
          "target": [
            "#requestId"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"active\">Home</a>",
          "target": [
            ".active"
          ]
        }
      ]
    },
    {
      "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": [
            "nav > 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=\"#\" class=\"active\">Home</a></li>",
          "target": [
            "nav > 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/150x50/003366/FFFFFF?text=CivicConnect&amp;font=open+sans\" alt=\"CivicConnect Portal Logo\" class=\"logo\">",
          "target": [
            ".logo"
          ]
        }
      ]
    },
    {
      "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": 45.8,
                "height": 40
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (45.8px by 40px, 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=\"#\" class=\"active\">Home</a>",
          "target": [
            ".active"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h2>Serving Our Community with Transparency and Efficiency</h2>",
          "target": [
            "h2"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#008080",
                "bgColor": "#003366",
                "contrastRatio": 2.64,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.64 (foreground color: #008080, background color: #003366, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"active\">Home</a>",
          "target": [
            ".active"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.64 (foreground color: #008080, background color: #003366, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f6f8fb",
                "contrastRatio": 1.06,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" aria-label=\"Instagram\">Instagram</a>",
                  "target": [
                    "a[aria-label=\"Instagram\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.06 (foreground color: #ffffff, background color: #f6f8fb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" aria-label=\"Instagram\">Instagram</a>",
          "target": [
            "a[aria-label=\"Instagram\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.06 (foreground color: #ffffff, background color: #f6f8fb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5293
      },
      {
        "y": 576,
        "height": 5293
      },
      {
        "y": 1152,
        "height": 5293
      },
      {
        "y": 1728,
        "height": 5293
      },
      {
        "y": 2304,
        "height": 5293
      },
      {
        "y": 2880,
        "height": 5293
      },
      {
        "y": 3456,
        "height": 5293
      },
      {
        "y": 4032,
        "height": 5293
      },
      {
        "y": 4573,
        "height": 5293
      }
    ],
    "scans": 10,
    "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: "News", "Jobs", "FAQs".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Government" category. Consider themes similar to: "Public Safety", "Government Services", "Business Licenses".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "constituent services", "public records", "fiscal year".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Schedule Appointment", "Download Form", "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: "issue reporter".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "recent ordinances", "budget reports", "public announcements".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.