StepFun Step 3.7 Flash – Non Profit Charity

via Novita · Generated

  • AIMAC Debt 5.17
  • Cost $0.03
  • Total Violations 28
  • HTML Size 45 KB
  • Em Dashes 0

Screenshot

View StepFun Step 3.7 Flash Non Profit Charity page View Live Page

Accessibility Issues Found

28 Serious

  • color-contrast serious 28 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#donate" class="btn btn-primary">Give Now</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>HopeBridge Collective | Connecting Communities, Building Hope</title>
    <meta name="description" content="HopeBridge Collective is a non-profit organization dedicated to community outreach, capacity building, and support for underserved populations across the Pacific Northwest.">
    <!-- Google Fonts -->
    <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;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
    <style>
        /* CSS Reset & Variables */
        :root {
            --primary: #0d5c63;
            --primary-dark: #094249;
            --accent: #f06c5b;
            --accent-hover: #e05a4a;
            --neutral-light: #f8f9fa;
            --neutral: #e9ecef;
            --text-dark: #2d3436;
            --text-light: #636e72;
            --white: #ffffff;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --shadow-hover: 0 8px 20px rgba(0,0,0,0.12);
            --radius: 8px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--text-dark);
            line-height: 1.7;
            background-color: var(--neutral-light);
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 1rem;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .btn {
            display: inline-block;
            padding: 0.875rem 1.75rem;
            border-radius: var(--radius);
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            border: none;
            transition: var(--transition);
        }

        .btn-primary {
            background-color: var(--accent);
            color: var(--white);
        }

        .btn-primary:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }

        .btn-secondary:hover {
            background-color: var(--white);
            color: var(--primary);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

        .btn-outline:hover {
            background-color: var(--primary);
            color: var(--white);
        }

        /* Header */
        header {
            background-color: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 1rem 0;
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo-area img {
            width: 50px;
            height: 50px;
        }

        .site-info h1 {
            font-size: 1.5rem;
            margin-bottom: 0;
            color: var(--primary);
        }

        .site-info p {
            font-size: 0.875rem;
            color: var(--text-light);
            margin-bottom: 0;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
            flex-wrap: wrap;
        }

        nav a {
            font-weight: 600;
            color: var(--text-dark);
            font-size: 0.95rem;
        }

        nav a:hover {
            color: var(--accent);
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(13, 92, 99, 0.85), rgba(13, 92, 99, 0.7)), url('https://picsum.photos/1920/600?random=1') no-repeat center center/cover;
            min-height: 70vh;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--white);
            padding: 4rem 0;
        }

        .hero-content h2 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-content p {
            font-size: 1.25rem;
            margin-bottom: 2.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }

        .hero-buttons {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Main Layout */
        .main-wrapper {
            display: flex;
            gap: 3rem;
            padding: 4rem 0;
        }

        .main-content {
            flex: 1;
        }

        .sidebar {
            flex: 0 0 300px;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .sidebar-widget {
            background-color: var(--white);
            padding: 1.5rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .sidebar-widget h3 {
            color: var(--primary);
            font-size: 1.25rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--neutral);
        }

        /* Section Styles */
        .section {
            margin-bottom: 4rem;
        }

        .section h2 {
            font-size: 2.25rem;
            color: var(--primary);
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 3px solid var(--accent);
            display: inline-block;
        }

        .section > p {
            font-size: 1.1rem;
            color: var(--text-light);
            margin-bottom: 2rem;
            max-width: 800px;
        }

        /* Feature Grid */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .feature-card {
            background-color: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .feature-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .feature-card-content {
            padding: 1.5rem;
        }

        .feature-card h3 {
            color: var(--primary);
            margin-bottom: 0.75rem;
        }

        .feature-card p {
            color: var(--text-light);
            margin-bottom: 1.5rem;
        }

        /* Event Cards */
        .event-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .event-card {
            background-color: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
        }

        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .event-date {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background-color: var(--accent);
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: var(--radius);
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            text-align: center;
            z-index: 10;
        }

        .event-date span {
            display: block;
            font-size: 1.25rem;
            line-height: 1;
        }

        .event-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .event-card-content {
            padding: 1.5rem;
        }

        .event-card h3 {
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .event-meta {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .event-card p {
            color: var(--text-light);
            margin-bottom: 1.5rem;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .stat-card {
            background-color: var(--white);
            padding: 2rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            text-align: center;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent);
            font-family: 'Poppins', sans-serif;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-light);
            font-weight: 600;
        }

        /* Testimonial Cards */
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .testimonial-card {
            background-color: var(--white);
            padding: 2rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            text-align: center;
        }

        .testimonial-card img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 1rem;
        }

        .testimonial-card blockquote {
            font-style: italic;
            color: var(--text-light);
            margin-bottom: 1.5rem;
            border: none;
            padding: 0;
        }

        .testimonial-author {
            font-weight: 700;
            color: var(--primary);
        }

        .testimonial-role {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        /* FAQ Accordion */
        .accordion-item {
            background-color: var(--white);
            border-radius: var(--radius);
            margin-bottom: 1rem;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .accordion-header {
            width: 100%;
            padding: 1.25rem 1.5rem;
            background: none;
            border: none;
            text-align: left;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--primary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }

        .accordion-header:hover {
            background-color: var(--neutral-light);
        }

        .accordion-header::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--accent);
            transition: var(--transition);
        }

        .accordion-item.active .accordion-header::after {
            content: '-';
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 1.5rem;
        }

        .accordion-item.active .accordion-content {
            max-height: 500px;
            padding: 0 1.5rem 1.5rem;
        }

        /* Impact Calculator */
        .calculator {
            background-color: var(--white);
            padding: 2rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .calculator h3 {
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

        .calculator-input-group {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .calculator-input-group input {
            flex: 1;
            min-width: 200px;
            padding: 0.875rem 1rem;
            border: 2px solid var(--neutral);
            border-radius: var(--radius);
            font-size: 1rem;
            font-family: 'Open Sans', sans-serif;
        }

        .calculator-input-group input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .impact-list {
            list-style: none;
        }

        .impact-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--neutral);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .impact-list li:last-child {
            border-bottom: none;
        }

        .impact-list li::before {
            content: '✓';
            color: var(--accent);
            font-weight: 700;
            font-size: 1.25rem;
        }

        /* Sidebar Widgets */
        .need-help-widget {
            background-color: var(--primary);
            color: var(--white);
        }

        .need-help-widget h3 {
            color: var(--white);
            border-bottom-color: rgba(255,255,255,0.2);
        }

        .need-help-widget p {
            opacity: 0.9;
            margin-bottom: 1.5rem;
        }

        .need-help-widget .btn-primary {
            background-color: var(--white);
            color: var(--primary);
        }

        .need-help-widget .btn-primary:hover {
            background-color: var(--neutral-light);
        }

        .quick-donate-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--neutral);
            border-radius: var(--radius);
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .quick-donate-btn {
            width: 100%;
        }

        .upcoming-event {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--neutral);
        }

        .upcoming-event:last-child {
            border-bottom: none;
        }

        .upcoming-event-date {
            font-weight: 700;
            color: var(--accent);
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }

        .upcoming-event h4 {
            font-size: 1rem;
            margin-bottom: 0.25rem;
            color: var(--primary);
        }

        .upcoming-event a {
            font-size: 0.875rem;
            color: var(--accent);
            font-weight: 600;
        }

        .success-story {
            text-align: center;
        }

        .success-story img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            margin-bottom: 1rem;
        }

        .success-story blockquote {
            font-style: italic;
            color: var(--text-light);
            margin-bottom: 1rem;
            border: none;
            padding: 0;
            font-size: 0.95rem;
        }

        .success-story a {
            color: var(--accent);
            font-weight: 600;
            font-size: 0.9rem;
        }

        /* Footer */
        footer {
            background-color: var(--primary-dark);
            color: var(--white);
            padding: 4rem 0 2rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-col h3 {
            color: var(--white);
            margin-bottom: 1.5rem;
            font-size: 1.25rem;
        }

        .footer-col p {
            opacity: 0.8;
            margin-bottom: 1rem;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col ul li {
            margin-bottom: 0.75rem;
        }

        .footer-col a {
            opacity: 0.8;
        }

        .footer-col a:hover {
            opacity: 1;
            color: var(--accent);
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 50%;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .social-links a:hover {
            background-color: var(--accent);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 2rem;
            text-align: center;
            opacity: 0.7;
            font-size: 0.9rem;
        }

        .footer-bottom a {
            margin: 0 0.5rem;
        }

        .footer-bottom a:hover {
            color: var(--accent);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .main-wrapper {
                flex-direction: column;
            }

            .sidebar {
                flex: 1;
                flex-direction: row;
                flex-wrap: wrap;
            }

            .sidebar-widget {
                flex: 1 1 300px;
            }

            .hero-content h2 {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }

            nav ul {
                justify-content: center;
                gap: 1rem;
            }

            .hero-content h2 {
                font-size: 2rem;
            }

            .hero-content p {
                font-size: 1rem;
            }

            .section h2 {
                font-size: 1.75rem;
            }

            .sidebar {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container header-content">
            <div class="logo-area">
                <img src="https://placehold.co/50x50/0d5c63/ffffff?text=HB&font=poppins" alt="HopeBridge Collective Logo">
                <div class="site-info">
                    <h1>HopeBridge Collective</h1>
                    <p>Connecting Communities, Building Hope, Creating Lasting Change</p>
                </div>
            </div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#programs">Our Programs</a></li>
                    <li><a href="#fundraising">Fundraising</a></li>
                    <li><a href="#impact">Impact</a></li>
                    <li><a href="#help">Get Help</a></li>
                    <li><a href="#volunteer">Volunteer</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="container hero-content">
            <h2>Empowering Underserved Communities Across the Pacific Northwest</h2>
            <p>We work directly with local stakeholders to deliver sustainable, community-led programs that create equitable opportunity for all. Join us in building a brighter future for our neighbors in need.</p>
            <div class="hero-buttons">
                <a href="#donate" class="btn btn-primary">Give Now</a>
                <a href="#volunteer" class="btn btn-secondary">Volunteer With Us</a>
            </div>
        </div>
    </section>

    <!-- Main Content Wrapper -->
    <div class="container main-wrapper">
        <!-- Main Content -->
        <main class="main-content">
            <!-- Community Programs Section -->
            <section class="section" id="programs">
                <h2>Our Community Programs</h2>
                <p>Our community programs are designed to address the most pressing needs of underserved populations through holistic, community-led capacity building initiatives. We prioritize long-term sustainability and empowerment, ensuring every beneficiary has access to the resources they need to thrive. All our outreach programs are co-created with local community members to ensure they are culturally competent and responsive to unique local needs.</p>

                <div class="feature-grid">
                    <div class="feature-card">
                        <img src="https://picsum.photos/400/300?random=2" alt="Youth mentorship program">
                        <div class="feature-card-content">
                            <h3>Youth Empowerment & Education</h3>
                            <p>Our after-school tutoring, mentorship, and college readiness programs serve over 1,200 at-risk youth annually. We provide academic support, social-emotional learning resources, and access to extracurricular opportunities to help young people reach their full potential. 92% of our program participants graduate high school on time, compared to the 78% district average.</p>
                            <a href="#" class="btn btn-outline">Learn More</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <img src="https://picsum.photos/400/300?random=3" alt="Senior meal delivery program">
                        <div class="feature-card-content">
                            <h3>Senior Support & Wellness</h3>
                            <p>Our senior outreach program provides weekly meal deliveries, home safety checks, and social visitations for homebound adults over 65. We also host weekly senior center activities, including fitness classes, art workshops, and intergenerational events that reduce social isolation. Last year, we delivered 15,000+ meals to homebound seniors across the metro area.</p>
                            <a href="#" class="btn btn-outline">Learn More</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <img src="https://picsum.photos/400/300?random=4" alt="Food bank distribution">
                        <div class="feature-card-content">
                            <h3>Food Security & Mobile Pantry</h3>
                            <p>Our food bank and mobile pantry program provides free, nutritious groceries to families facing food insecurity. We partner with local farms, grocery stores, and food banks to source fresh produce, dairy, and pantry staples, serving over 8,000 families each year. We also offer nutrition education workshops to help families make healthy choices on a tight budget.</p>
                            <a href="#" class="btn btn-outline">Learn More</a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Fundraising & Events Section -->
            <section class="section" id="fundraising">
                <h2>Fundraising & Community Events</h2>
                <p>Our fundraising events are the lifeblood of our programs, allowing us to expand our reach and serve more community members each year. Every dollar raised goes directly to supporting our core programs, with 94% of our total budget allocated to direct service delivery. We offer a variety of ways to get involved, from large-scale galas to community fun runs, and we welcome corporate sponsorships and matching gift contributions to amplify your impact.</p>

                <div class="event-grid">
                    <div class="event-card">
                        <div class="event-date">
                            <span>OCT</span>
                            12
                        </div>
                        <img src="https://picsum.photos/400/250?random=5" alt="Annual Spring Gala">
                        <div class="event-card-content">
                            <h3>Annual HopeBridge Gala</h3>
                            <p class="event-meta">📍 Portland Art Museum | 6PM - 10PM</p>
                            <p>Join us for an elegant evening of dining, live entertainment, and silent auction proceeds that directly fund our youth mentorship and senior support programs. Individual tickets are $150, with sponsorship opportunities available for businesses looking to support our mission.</p>
                            <a href="#" class="btn btn-primary">Register Now</a>
                        </div>
                    </div>
                    <div class="event-card">
                        <div class="event-date">
                            <span>NOV</span>
                            04
                        </div>
                        <img src="https://picsum.photos/400/250?random=6" alt="Community 5K Run/Walk">
                        <div class="event-card-content">
                            <h3>Community 5K Run/Walk for Hope</h3>
                            <p class="event-meta">📍 Tom McCall Waterfront Park | 9AM - 12PM</p>
                            <p>Bring the whole family to our annual 5K fun run/walk, open to all ages and ability levels. Registration is $35 per adult, $15 for children under 12, and all proceeds go directly to our food security programs. Every participant receives a commemorative t-shirt and goodie bag.</p>
                            <a href="#" class="btn btn-primary">Register Now</a>
                        </div>
                    </div>
                    <div class="event-card">
                        <div class="event-date">
                            <span>DEC</span>
                            15
                        </div>
                        <img src="https://picsum.photos/400/250?random=7" alt="Holiday Giving Drive">
                        <div class="event-card-content">
                            <h3>Holiday Giving Drive</h3>
                            <p class="event-meta">📍 HopeBridge Community Center | 10AM - 4PM</p>
                            <p>Help us spread holiday cheer to families in need by donating new, unwrapped toys, warm winter clothing, or non-perishable food items. We will also be hosting a free holiday dinner for community members, with volunteer opportunities available for serving and gift wrapping.</p>
                            <a href="#" class="btn btn-primary">Donate Items</a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Impact & Transparency Section -->
            <section class="section" id="impact">
                <h2>Our Impact & Transparency</h2>
                <p>We are committed to full financial transparency and accountability to our donors, volunteers, and community members. Our annual impact reports detail exactly how every dollar is spent, the outcomes of our programs, and our goals for the coming year. We believe that trust is built through open communication and measurable results, and we are proud to share our progress with you each year.</p>

                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-number">12,400+</div>
                        <div class="stat-label">Beneficiaries Served in 2023</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">94%</div>
                        <div class="stat-label">Of Budget Goes to Direct Services</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">3,200+</div>
                        <div class="stat-label">Volunteer Hours Logged in 2023</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">98%</div>
                        <div class="stat-label">Donor Satisfaction Rate</div>
                    </div>
                </div>

                <div class="testimonial-grid">
                    <div class="testimonial-card">
                        <img src="https://i.pravatar.cc/80?img=1" alt="Maria Gonzalez, program beneficiary">
                        <blockquote>"HopeBridge's after-school program gave my daughter the support she needed to catch up in math and build her confidence. She's now on the honor roll and talking about college. I don't know where we'd be without this program."</blockquote>
                        <div class="testimonial-author">Maria Gonzalez</div>
                        <div class="testimonial-role">Youth Program Parent</div>
                    </div>
                    <div class="testimonial-card">
                        <img src="https://i.pravatar.cc/80?img=5" alt="James Carter, volunteer">
                        <blockquote>"Volunteering with HopeBridge's senior meal delivery program has been one of the most rewarding experiences of my life. The connections I've made with the seniors I serve have enriched my life as much as I hope I've enriched theirs."</blockquote>
                        <div class="testimonial-author">James Carter</div>
                        <div class="testimonial-role">5-Year Volunteer</div>
                    </div>
                </div>

                <div style="margin-top: 2rem;">
                    <a href="#" class="btn btn-primary">Download 2023 Annual Report</a>
                </div>
            </section>

            <!-- Volunteer Section -->
            <section class="section" id="volunteer">
                <h2>Volunteer With Us</h2>
                <p>Volunteers are the heart of HopeBridge Collective. We offer a wide range of volunteer opportunities to fit your schedule, skills, and interests, from in-person program support to remote administrative work. Whether you can give a few hours a week or a few days a year, your time and talents make a tangible difference in the lives of our community members. All volunteers receive comprehensive training and ongoing support from our program teams.</p>
                <div class="feature-grid">
                    <div class="feature-card">
                        <img src="https://picsum.photos/400/300?random=9" alt="Youth mentor volunteering">
                        <div class="feature-card-content">
                            <h3>Youth Mentor</h3>
                            <p>Commit 2-4 hours per week to mentor a young person in our after-school program. You will provide academic support, guidance, and positive role modeling to help youth build confidence and achieve their goals. Background check required.</p>
                            <a href="#" class="btn btn-outline">Apply Now</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <img src="https://picsum.photos/400/300?random=10" alt="Food bank volunteer">
                        <div class="feature-card-content">
                            <h3>Food Bank Assistant</h3>
                            <p>Help sort, pack, and distribute food at our community food bank or mobile pantry events. Shifts are available weekday mornings and weekends, and no prior experience is required. Great for groups and corporate volunteer days.</p>
                            <a href="#" class="btn btn-outline">Apply Now</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <img src="https://picsum.photos/400/300?random=11" alt="Remote volunteer working">
                        <div class="feature-card-content">
                            <h3>Remote Administrative Support</h3>
                            <p>Help us with remote tasks like data entry, social media management, grant writing, and newsletter creation. Perfect for volunteers who want to contribute from home on a flexible schedule. Training is provided for all roles.</p>
                            <a href="#" class="btn btn-outline">Apply Now</a>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 2rem;">
                    <a href="#" class="btn btn-primary">View All Volunteer Opportunities</a>
                </div>
            </section>

            <!-- FAQ Section -->
            <section class="section" id="faq">
                <h2>Frequently Asked Questions</h2>
                <div class="accordion">
                    <div class="accordion-item">
                        <button class="accordion-header">How do I apply for support services?</button>
                        <div class="accordion-content">
                            <p>To apply for our support services, you can fill out an intake form on our Get Help page, call our office at (503) 555-1234 to speak with a case manager, or visit our community center in person during business hours (Monday-Friday, 9AM-5PM). Our team will work with you to assess your needs and connect you with the appropriate programs.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-header">How can I become a volunteer?</button>
                        <div class="accordion-content">
                            <p>We welcome volunteers of all ages and skill sets! To get started, fill out a volunteer application on our Volunteer page, and our volunteer coordinator will reach out to schedule an orientation and match you with opportunities that fit your interests and availability. We have roles available for in-person and remote volunteering.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-header">Is my donation tax-deductible?</button>
                        <div class="accordion-content">
                            <p>Yes, HopeBridge Collective is a 501(c)(3) non-profit organization, so all donations are tax-deductible to the fullest extent allowed by law. You will receive a digital tax receipt via email immediately after your donation, and an annual giving statement each January for your records.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-header">How do you ensure donations are used effectively?</button>
                        <div class="accordion-content">
                            <p>We maintain strict financial oversight and transparency, with 94% of our total budget going directly to program services. Our annual audit is conducted by an independent third party, and our full financial reports are publicly available on our Impact page. We also regularly evaluate our programs to measure outcomes and ensure we are delivering the greatest possible impact for our community.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Impact Calculator Section -->
            <section class="section" id="donate">
                <h2>See Your Impact</h2>
                <p>Use our interactive impact calculator to see exactly what your donation can achieve for our community. Every dollar makes a difference, and we're committed to ensuring your gift creates lasting, measurable change.</p>

                <div class="calculator">
                    <h3>Donation Impact Calculator</h3>
                    <div class="calculator-input-group">
                        <input type="number" id="donationAmount" placeholder="Enter donation amount ($)" min="1" value="50">
                        <button class="btn btn-primary" onclick="calculateImpact()">Calculate Impact</button>
                    </div>
                    <ul class="impact-list" id="impactList">
                        <li>Your $50 donation provides school supplies for 3 local students</li>
                        <li>Your $50 donation funds 2 weeks of after-school tutoring for 1 youth</li>
                        <li>Your $50 donation provides 10 nutritious meals for families in need</li>
                    </ul>
                    <div style="margin-top: 1.5rem;">
                        <a href="#" class="btn btn-primary">Donate $<span id="donationDisplay">50</span> Now</a>
                    </div>
                </div>
            </section>
        </main>

        <!-- Sidebar -->
        <aside class="sidebar">
            <!-- Need Help Widget -->
            <div class="sidebar-widget need-help-widget" id="help">
                <h3>Need Support?</h3>
                <p>If you or someone you know is in need of assistance, our team is here to help. Connect with a case manager today to access our free programs and services.</p>
                <a href="#contact" class="btn btn-primary">Contact Us Now</a>
            </div>

            <!-- Quick Donate Widget -->
            <div class="sidebar-widget">
                <h3>Quick Donate</h3>
                <input type="number" class="quick-donate-input" placeholder="Enter amount ($)" min="1" value="25">
                <button class="btn btn-primary quick-donate-btn">Give Now</button>
            </div>

            <!-- Upcoming Events Widget -->
            <div class="sidebar-widget">
                <h3>Upcoming Events</h3>
                <div class="upcoming-event">
                    <div class="upcoming-event-date">OCT 12, 2024</div>
                    <h4>Annual HopeBridge Gala</h4>
                    <a href="#">View Details →</a>
                </div>
                <div class="upcoming-event">
                    <div class="upcoming-event-date">NOV 04, 2024</div>
                    <h4>Community 5K Run/Walk</h4>
                    <a href="#">View Details →</a>
                </div>
                <div class="upcoming-event">
                    <div class="upcoming-event-date">DEC 15, 2024</div>
                    <h4>Holiday Giving Drive</h4>
                    <a href="#">View Details →</a>
                </div>
            </div>

            <!-- Success Story Widget -->
            <div class="sidebar-widget">
                <h3>Success Story</h3>
                <div class="success-story">
                    <img src="https://picsum.photos/300/150?random=8" alt="Youth program graduate">
                    <blockquote>"I went from struggling in school to earning a full scholarship to college, all thanks to my HopeBridge mentor. This program changed my life."</blockquote>
                    <a href="#">Read More Success Stories →</a>
                </div>
            </div>
        </aside>
    </div>

    <!-- Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>HopeBridge Collective</h3>
                    <p>We are a 501(c)(3) non-profit organization dedicated to building equitable, thriving communities across the Pacific Northwest through community outreach, capacity building, and direct support services.</p>
                    <div class="social-links">
                        <a href="#" aria-label="Instagram">IG</a>
                        <a href="#" aria-label="Facebook">FB</a>
                        <a href="#" aria-label="LinkedIn">LI</a>
                        <a href="#" aria-label="Twitter">X</a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#programs">Our Programs</a></li>
                        <li><a href="#fundraising">Fundraising Events</a></li>
                        <li><a href="#impact">Impact Reports</a></li>
                        <li><a href="#volunteer">Volunteer Opportunities</a></li>
                        <li><a href="#help">Get Support</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Us</h3>
                    <p>📍 1234 Community Way, Portland, OR 97201</p>
                    <p>📞 (503) 555-1234</p>
                    <p>✉️ hello@hopebridgecollective.org</p>
                    <p>🕒 Monday-Friday: 9AM - 5PM</p>
                </div>
                <div class="footer-col">
                    <h3>Stay Connected</h3>
                    <p>Sign up for our newsletter to receive updates on our programs, events, and impact stories directly to your inbox.</p>
                    <input type="email" placeholder="Enter your email address" style="width: 100%; padding: 0.75rem; border-radius: var(--radius); border: none; margin-bottom: 1rem; font-family: 'Open Sans', sans-serif;">
                    <button class="btn btn-primary" style="width: 100%;">Subscribe</button>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 HopeBridge Collective. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">Accessibility Statement</a></p>
            </div>
        </div>
    </footer>

    <!-- JavaScript for Interactive Elements -->
    <script>
        // FAQ Accordion Functionality
        const accordionHeaders = document.querySelectorAll('.accordion-header');
        accordionHeaders.forEach(header => {
            header.addEventListener('click', () => {
                const accordionItem = header.parentElement;
                accordionItem.classList.toggle('active');
            });
        });

        // Impact Calculator Functionality
        function calculateImpact() {
            const donationAmount = document.getElementById('donationAmount').value;
            const impactList = document.getElementById('impactList');
            const donationDisplay = document.getElementById('donationDisplay');

            if (!donationAmount || donationAmount < 1) {
                alert('Please enter a valid donation amount of at least $1');
                return;
            }

            donationDisplay.textContent = donationAmount;
            let impacts = [];

            if (donationAmount >= 500) {
                impacts.push(`Your $${donationAmount} donation supports a mobile food pantry distribution for 50+ families`);
                impacts.push(`Your $${donationAmount} donation funds a month of vocational training for 5 adult learners`);
                impacts.push(`Your $${donationAmount} donation sponsors a full semester of after-school programming for 10 youth`);
            } else if (donationAmount >= 250) {
                impacts.push(`Your $${donationAmount} donation sponsors a youth mentorship program for one month`);
                impacts.push(`Your $${donationAmount} donation provides 100 nutritious meals for families in need`);
                impacts.push(`Your $${donationAmount} donation funds 4 weeks of tutoring for 2 students`);
            } else if (donationAmount >= 100) {
                impacts.push(`Your $${donationAmount} donation funds 2 weeks of vocational training for an adult learner`);
                impacts.push(`Your $${donationAmount} donation provides 40 pounds of fresh produce to local families`);
                impacts.push(`Your $${donationAmount} donation covers supplies for a month of senior art workshops`);
            } else if (donationAmount >= 50) {
                impacts.push(`Your $${donationAmount} donation provides school supplies for 3 local students`);
                impacts.push(`Your $${donationAmount} donation funds 2 weeks of after-school tutoring for 1 youth`);
                impacts.push(`Your $${donationAmount} donation provides 10 nutritious meals for families in need`);
            } else if (donationAmount >= 25) {
                impacts.push(`Your $${donationAmount} donation feeds a family of 4 for one week`);
                impacts.push(`Your $${donationAmount} donation provides a warm winter coat for a child in need`);
                impacts.push(`Your $${donationAmount} donation funds a one-week supply of hygiene products for a family`);
            } else {
                impacts.push(`Your $${donationAmount} donation provides 2 nutritious meals for families in need`);
                impacts.push(`Your $${donationAmount} donation contributes to school supply funds for local students`);
                impacts.push(`Your $${donationAmount} donation helps cover program operational costs`);
            }

            // Clear existing impacts
            impactList.innerHTML = '';
            // Add new impacts
            impacts.forEach(impact => {
                const li = document.createElement('li');
                li.textContent = impact;
                impactList.appendChild(li);
            });
        }

        // Calculate impact on page load for default value
        document.addEventListener('DOMContentLoaded', calculateImpact);
    </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:38.921Z",
  "url": "https://benchmark.aimac.invalid/f029e359542f9c718b0dbd6132379747edc47fa0844cad3fe63818b3f616d62e.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "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": "<a href=\"#\" aria-label=\"Instagram\">IG</a>",
          "target": [
            "a[aria-label=\"Instagram\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Instagram\">IG</a>",
          "target": [
            "a[aria-label=\"Instagram\"]"
          ]
        }
      ]
    },
    {
      "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": "<a href=\"#\" aria-label=\"Instagram\">IG</a>",
          "target": [
            "a[aria-label=\"Instagram\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Instagram\">IG</a>",
          "target": [
            "a[aria-label=\"Instagram\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" aria-label=\"Instagram\">IG</a>",
          "target": [
            "a[aria-label=\"Instagram\"]"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div style=\"margin-top: 2rem;\">\n                    <a href=\"#\" class=\"btn btn-primary\">Download 2023 Annual Report</a>\n                </div>",
          "target": [
            "div:nth-child(5)"
          ]
        }
      ]
    },
    {
      "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=\"accordion-header\">How do I apply for support services?</button>",
          "target": [
            ".accordion-item:nth-child(1) > .accordion-header"
          ]
        }
      ]
    },
    {
      "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>HopeBridge Collective</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Empowering Underserved Communities Across the Pacific Northwest</h2>",
                  "target": [
                    ".hero-content > h2"
                  ]
                },
                {
                  "html": "<h2>Our Community Programs</h2>",
                  "target": [
                    "#programs > h2"
                  ]
                },
                {
                  "html": "<h3>Youth Empowerment &amp; Education</h3>",
                  "target": [
                    "#programs > .feature-grid > .feature-card:nth-child(1) > .feature-card-content > h3"
                  ]
                },
                {
                  "html": "<h3>Senior Support &amp; Wellness</h3>",
                  "target": [
                    "#programs > .feature-grid > .feature-card:nth-child(2) > .feature-card-content > h3"
                  ]
                },
                {
                  "html": "<h3>Food Security &amp; Mobile Pantry</h3>",
                  "target": [
                    "#programs > .feature-grid > .feature-card:nth-child(3) > .feature-card-content > h3"
                  ]
                },
                {
                  "html": "<h2>Fundraising &amp; Community Events</h2>",
                  "target": [
                    "#fundraising > h2"
                  ]
                },
                {
                  "html": "<h3>Annual HopeBridge Gala</h3>",
                  "target": [
                    ".event-card:nth-child(1) > .event-card-content > h3"
                  ]
                },
                {
                  "html": "<h3>Community 5K Run/Walk for Hope</h3>",
                  "target": [
                    ".event-card:nth-child(2) > .event-card-content > h3"
                  ]
                },
                {
                  "html": "<h3>Holiday Giving Drive</h3>",
                  "target": [
                    ".event-card:nth-child(3) > .event-card-content > h3"
                  ]
                },
                {
                  "html": "<h2>Our Impact &amp; Transparency</h2>",
                  "target": [
                    "#impact > h2"
                  ]
                },
                {
                  "html": "<h2>Volunteer With Us</h2>",
                  "target": [
                    "#volunteer > h2"
                  ]
                },
                {
                  "html": "<h3>Youth Mentor</h3>",
                  "target": [
                    "#volunteer > .feature-grid > .feature-card:nth-child(1) > .feature-card-content > h3"
                  ]
                },
                {
                  "html": "<h3>Food Bank Assistant</h3>",
                  "target": [
                    "#volunteer > .feature-grid > .feature-card:nth-child(2) > .feature-card-content > h3"
                  ]
                },
                {
                  "html": "<h3>Remote Administrative Support</h3>",
                  "target": [
                    "#volunteer > .feature-grid > .feature-card:nth-child(3) > .feature-card-content > h3"
                  ]
                },
                {
                  "html": "<h2>Frequently Asked Questions</h2>",
                  "target": [
                    "#faq > h2"
                  ]
                },
                {
                  "html": "<h2>See Your Impact</h2>",
                  "target": [
                    "#donate > h2"
                  ]
                },
                {
                  "html": "<h3>Donation Impact Calculator</h3>",
                  "target": [
                    ".calculator > h3"
                  ]
                },
                {
                  "html": "<h3>Need Support?</h3>",
                  "target": [
                    "#help > h3"
                  ]
                },
                {
                  "html": "<h3>Quick Donate</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Upcoming Events</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h4>Annual HopeBridge Gala</h4>",
                  "target": [
                    ".upcoming-event:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Community 5K Run/Walk</h4>",
                  "target": [
                    ".upcoming-event:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Holiday Giving Drive</h4>",
                  "target": [
                    ".upcoming-event:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h3>Success Story</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>HopeBridge Collective</h3>",
                  "target": [
                    ".footer-col:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Quick Links</h3>",
                  "target": [
                    ".footer-col:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Contact Us</h3>",
                  "target": [
                    ".footer-col:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Stay Connected</h3>",
                  "target": [
                    ".footer-col:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main class=\"main-content\">",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d5c63",
                "bgColor": "#ffffff",
                "contrastRatio": 7.69,
                "fontSize": "18.0pt (24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 7.69"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h1>HopeBridge Collective</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=\"number\" id=\"donationAmount\" placeholder=\"Enter donation amount ($)\" min=\"1\" value=\"50\">",
          "target": [
            "#donationAmount"
          ]
        }
      ]
    },
    {
      "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/50x50/0d5c63/ffffff?text=HB&amp;font=poppins\" alt=\"HopeBridge Collective Logo\">",
          "target": [
            "img[alt=\"HopeBridge Collective 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": "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=\"number\" id=\"donationAmount\" placeholder=\"Enter donation amount ($)\" min=\"1\" value=\"50\">",
          "target": [
            "#donationAmount"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"upcoming-event\">\n                    <div class=\"upcoming-event-date\">OCT 12, 2024</div>\n                    <h4>Annual HopeBridge Gala</h4>\n                    <a href=\"#\">View Details \u2192</a>\n                </div>",
                  "target": [
                    ".upcoming-event:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\">View Details \u2192</a>",
          "target": [
            ".upcoming-event:nth-child(2) > a[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#home\">Home</a>",
          "target": [
            "a[href$=\"#home\"]"
          ]
        }
      ]
    },
    {
      "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=\"#home\">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/50x50/0d5c63/ffffff?text=HB&amp;font=poppins\" alt=\"HopeBridge Collective Logo\">",
          "target": [
            "img[alt=\"HopeBridge Collective 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-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=\"#home\">Home</a>",
          "target": [
            "a[href$=\"#home\"]"
          ]
        }
      ]
    }
  ],
  "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": "36.0pt (48px)",
                "fontWeight": "normal",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"home\">",
                  "target": [
                    "#home"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h2>Empowering Underserved Communities Across the Pacific Northwest</h2>",
          "target": [
            ".hero-content > 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": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#donate\" class=\"btn btn-primary\">Give Now</a>",
                  "target": [
                    "a[href$=\"#donate\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#donate\" class=\"btn btn-primary\">Give Now</a>",
          "target": [
            "a[href$=\"#donate\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\">\n                            <span>OCT</span>\n                            12\n                        </div>",
                  "target": [
                    ".event-card:nth-child(1) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\">\n                            <span>OCT</span>\n                            12\n                        </div>",
          "target": [
            ".event-card:nth-child(1) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\">\n                            <span>OCT</span>\n                            12\n                        </div>",
                  "target": [
                    ".event-card:nth-child(1) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>OCT</span>",
          "target": [
            ".event-card:nth-child(1) > .event-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Register Now</a>",
                  "target": [
                    ".event-card:nth-child(1) > .event-card-content > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Register Now</a>",
          "target": [
            ".event-card:nth-child(1) > .event-card-content > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\">\n                            <span>NOV</span>\n                            04\n                        </div>",
                  "target": [
                    ".event-card:nth-child(2) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\">\n                            <span>NOV</span>\n                            04\n                        </div>",
          "target": [
            ".event-card:nth-child(2) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\">\n                            <span>NOV</span>\n                            04\n                        </div>",
                  "target": [
                    ".event-card:nth-child(2) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>NOV</span>",
          "target": [
            ".event-card:nth-child(2) > .event-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Register Now</a>",
                  "target": [
                    ".event-card:nth-child(2) > .event-card-content > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Register Now</a>",
          "target": [
            ".event-card:nth-child(2) > .event-card-content > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\">\n                            <span>DEC</span>\n                            15\n                        </div>",
                  "target": [
                    ".event-card:nth-child(3) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"event-date\">\n                            <span>DEC</span>\n                            15\n                        </div>",
          "target": [
            ".event-card:nth-child(3) > .event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"event-date\">\n                            <span>DEC</span>\n                            15\n                        </div>",
                  "target": [
                    ".event-card:nth-child(3) > .event-date"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>DEC</span>",
          "target": [
            ".event-card:nth-child(3) > .event-date > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Donate Items</a>",
                  "target": [
                    ".event-card:nth-child(3) > .event-card-content > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Donate Items</a>",
          "target": [
            ".event-card:nth-child(3) > .event-card-content > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"stat-card\">\n                        <div class=\"stat-number\">12,400+</div>\n                        <div class=\"stat-label\">Beneficiaries Served in 2023</div>\n                    </div>",
                  "target": [
                    ".stat-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-number\">12,400+</div>",
          "target": [
            ".stat-card:nth-child(1) > .stat-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"stat-card\">\n                        <div class=\"stat-number\">94%</div>\n                        <div class=\"stat-label\">Of Budget Goes to Direct Services</div>\n                    </div>",
                  "target": [
                    ".stat-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-number\">94%</div>",
          "target": [
            ".stat-card:nth-child(2) > .stat-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"stat-card\">\n                        <div class=\"stat-number\">3,200+</div>\n                        <div class=\"stat-label\">Volunteer Hours Logged in 2023</div>\n                    </div>",
                  "target": [
                    ".stat-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-number\">3,200+</div>",
          "target": [
            ".stat-card:nth-child(3) > .stat-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "30.0pt (40px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"stat-card\">\n                        <div class=\"stat-number\">98%</div>\n                        <div class=\"stat-label\">Donor Satisfaction Rate</div>\n                    </div>",
                  "target": [
                    ".stat-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"stat-number\">98%</div>",
          "target": [
            ".stat-card:nth-child(4) > .stat-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Download 2023 Annual Report</a>",
                  "target": [
                    "div:nth-child(5) > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Download 2023 Annual Report</a>",
          "target": [
            "div:nth-child(5) > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">View All Volunteer Opportunities</a>",
                  "target": [
                    "#volunteer > div:nth-child(4) > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">View All Volunteer Opportunities</a>",
          "target": [
            "#volunteer > div:nth-child(4) > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "10.0pt (13.3333px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary\" onclick=\"calculateImpact()\">Calculate Impact</button>",
                  "target": [
                    "button[onclick=\"calculateImpact()\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary\" onclick=\"calculateImpact()\">Calculate Impact</button>",
          "target": [
            "button[onclick=\"calculateImpact()\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Donate $<span id=\"donationDisplay\">50</span> Now</a>",
                  "target": [
                    ".calculator > div:nth-child(4) > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Donate $<span id=\"donationDisplay\">50</span> Now</a>",
          "target": [
            ".calculator > div:nth-child(4) > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Donate $<span id=\"donationDisplay\">50</span> Now</a>",
                  "target": [
                    ".calculator > div:nth-child(4) > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span id=\"donationDisplay\">50</span>",
          "target": [
            "#donationDisplay"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "10.0pt (13.3333px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary quick-donate-btn\">Give Now</button>",
                  "target": [
                    ".quick-donate-btn"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary quick-donate-btn\">Give Now</button>",
          "target": [
            ".quick-donate-btn"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"upcoming-event-date\">OCT 12, 2024</div>",
          "target": [
            ".upcoming-event:nth-child(2) > .upcoming-event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">View Details \u2192</a>",
          "target": [
            ".upcoming-event:nth-child(2) > a[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"upcoming-event-date\">NOV 04, 2024</div>",
          "target": [
            ".upcoming-event:nth-child(3) > .upcoming-event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">View Details \u2192</a>",
          "target": [
            ".upcoming-event:nth-child(3) > a[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"upcoming-event-date\">DEC 15, 2024</div>",
          "target": [
            ".upcoming-event:nth-child(4) > .upcoming-event-date"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">View Details \u2192</a>",
          "target": [
            ".upcoming-event:nth-child(4) > a[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f06c5b",
                "bgColor": "#ffffff",
                "contrastRatio": 2.99,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-widget\">",
                  "target": [
                    ".sidebar-widget:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">Read More Success Stories \u2192</a>",
          "target": [
            ".success-story > a[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #f06c5b, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f06c5b",
                "contrastRatio": 2.99,
                "fontSize": "10.0pt (13.3333px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary\" style=\"width: 100%;\">Subscribe</button>",
                  "target": [
                    ".footer-col:nth-child(4) > button"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-primary\" style=\"width: 100%;\">Subscribe</button>",
          "target": [
            ".footer-col:nth-child(4) > button"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #f06c5b, font size: 10.0pt (13.3333px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8675
      },
      {
        "y": 576,
        "height": 8675
      },
      {
        "y": 1152,
        "height": 8675
      },
      {
        "y": 1728,
        "height": 8675
      },
      {
        "y": 2304,
        "height": 8675
      },
      {
        "y": 2880,
        "height": 8675
      },
      {
        "y": 3456,
        "height": 8675
      },
      {
        "y": 4032,
        "height": 8675
      },
      {
        "y": 4608,
        "height": 8675
      },
      {
        "y": 5184,
        "height": 8675
      },
      {
        "y": 5760,
        "height": 8675
      },
      {
        "y": 6336,
        "height": 8675
      },
      {
        "y": 6912,
        "height": 8675
      },
      {
        "y": 7488,
        "height": 8675
      },
      {
        "y": 7955,
        "height": 8675
      }
    ],
    "scans": 16,
    "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 "Non-Profit/Charity" 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: "Non-Profit/Charity"
- Description: Charitable organizations, non-profit initiatives, volunteering, and fundraising resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Non-Profit/Charity" 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: "Contact", "Get Help", "Volunteer".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Non-Profit/Charity" category. Consider themes similar to: "Community Programs", "Fundraising Events", "Annual Reports".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "capacity building", "community outreach", "beneficiary".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Give Now", "Learn More", "Get Involved".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Non-Profit/Charity" sector. Ideas similar but not limited to: "impact calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "partner highlights", "success stories", "impact reports".
-   **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.