StepFun Step 3.7 Flash – Religion and Spirituality

via Novita · Generated

  • AIMAC Debt 3.32
  • Cost $0.02
  • Total Violations 4
  • HTML Size 35 KB
  • Em Dashes 2

Screenshot

View StepFun Step 3.7 Flash Religion and Spirituality page View Live Page

Accessibility Issues Found

4 Serious

  • color-contrast serious 4 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <p class="tagline">Where faith grows, community thrives, and purpose unfolds</p>

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>Grace Harbor Community | Where Faith Grows, Community Thrives</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root {
            --primary: #2c5282;
            --primary-hover: #2a4365;
            --secondary: #ecc94b;
            --secondary-hover: #d69e2e;
            --bg-light: #f7fafc;
            --white: #ffffff;
            --text-dark: #2d3748;
            --text-light: #718096;
            --border: #e2e8f0;
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--text-dark);
            background-color: var(--bg-light);
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            color: var(--primary);
            line-height: 1.3;
        }
        a {
            text-decoration: none;
            color: inherit;
            transition: color 0.3s ease;
        }
        ul {
            list-style: none;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.375rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }
        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
        }
        .btn-secondary {
            background-color: var(--secondary);
            color: var(--text-dark);
        }
        .btn-secondary:hover {
            background-color: var(--secondary-hover);
        }

        /* Header */
        header {
            background-color: var(--white);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logo-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .logo {
            height: 40px;
        }
        .site-info h1 {
            font-size: 1.5rem;
            margin-bottom: 0;
            line-height: 1.2;
        }
        .tagline {
            font-size: 0.875rem;
            color: var(--text-light);
        }
        .nav {
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        .nav-links {
            display: flex;
            gap: 2rem;
        }
        .nav-links a {
            font-weight: 500;
            color: var(--text-dark);
        }
        .nav-links a:hover {
            color: var(--primary);
        }
        .hamburger {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-dark);
        }

        /* Hero */
        .hero {
            width: 100%;
            min-height: 600px;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/1200/800?random=7') no-repeat center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            padding: 2rem;
        }
        .hero-content {
            max-width: 800px;
        }
        .hero h1 {
            font-size: 3rem;
            color: var(--white);
            margin-bottom: 1rem;
        }
        .hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        .hero-ctas {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Main Layout */
        .main-wrapper {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
        }
        section {
            margin-bottom: 3rem;
        }
        .section-title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--secondary);
        }
        .section-content p {
            margin-bottom: 1rem;
            color: #4a5568;
        }
        .cta-group {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }

        /* Events Grid */
        .events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        .event-card {
            background-color: var(--white);
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        .event-card:hover {
            transform: translateY(-4px);
        }
        .event-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .event-content {
            padding: 1.5rem;
        }
        .event-date {
            font-size: 0.875rem;
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .event-card h3 {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
        }
        .event-card p {
            font-size: 0.95rem;
            color: #4a5568;
            margin-bottom: 1rem;
        }
        .event-cta {
            color: var(--primary);
            font-weight: 600;
        }
        .event-cta:hover {
            text-decoration: underline;
        }

        /* Testimonials */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        .testimonial-card {
            background-color: var(--white);
            padding: 2rem;
            border-radius: 0.5rem;
            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 p {
            font-style: italic;
            color: #4a5568;
            margin-bottom: 1rem;
        }
        .testimonial-card h4 {
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
        }
        .testimonial-card span {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        /* Prayer Form */
        .prayer-form-container {
            background-color: var(--white);
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: var(--shadow);
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            font-family: inherit;
        }
        .form-group textarea {
            min-height: 150px;
            resize: vertical;
        }
        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .prayer-form-container .btn {
            width: 100%;
        }
        .thank-you-message {
            display: none;
            background-color: #c6f6d5;
            color: #22543d;
            padding: 1rem;
            border-radius: 0.375rem;
            margin-top: 1rem;
            text-align: center;
        }

        /* Sidebar */
        .sidebar-widget {
            background-color: var(--white);
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: var(--shadow);
            margin-bottom: 2rem;
        }
        .sidebar-widget h3 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }
        .service-schedule li {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid #e7f0f7;
        }
        .service-schedule li:last-child {
            border-bottom: none;
        }
        .service-time {
            font-weight: 600;
            color: var(--primary);
        }
        .service-name {
            color: #4a5568;
        }
        .announcements li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #e7f0f7;
        }
        .announcements li:last-child {
            border-bottom: none;
        }
        .announcements li::before {
            content: "•";
            color: var(--secondary);
            font-weight: bold;
            margin-right: 0.5rem;
        }
        .accordion-item {
            border-bottom: 1px solid var(--border);
        }
        .accordion-question {
            width: 100%;
            background: none;
            border: none;
            padding: 1rem 0;
            text-align: left;
            font-weight: 600;
            color: var(--primary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .accordion-question::after {
            content: "+";
            font-size: 1.25rem;
            color: var(--text-light);
        }
        .accordion-question.active::after {
            content: "-";
        }
        .accordion-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            color: #4a5568;
            padding-right: 1rem;
        }
        .accordion-answer.active {
            max-height: 500px;
            padding-bottom: 1rem;
        }
        .quick-links li {
            margin-bottom: 0.75rem;
        }
        .quick-links a {
            color: var(--primary);
            font-weight: 500;
        }
        .quick-links a:hover {
            text-decoration: underline;
        }

        /* Footer */
        footer {
            background-color: var(--text-dark);
            color: var(--white);
            padding: 3rem 2rem 1rem;
        }
        .footer-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .footer-widget h3 {
            color: var(--secondary);
            margin-bottom: 1rem;
        }
        .footer-widget p,
        .footer-widget li {
            color: #cbd5e0;
            margin-bottom: 0.75rem;
        }
        .footer-widget a {
            color: #cbd5e0;
        }
        .footer-widget a:hover {
            color: var(--secondary);
        }
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #4a5568;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            transition: all 0.3s ease;
        }
        .social-icon:hover {
            background-color: var(--secondary);
            color: var(--text-dark);
        }
        .copyright {
            text-align: center;
            padding-top: 1rem;
            border-top: 1px solid #4a5568;
            color: #a0aec0;
            font-size: 0.9rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            header {
                flex-wrap: wrap;
                padding: 1rem;
            }
            .logo-container {
                width: 100%;
                justify-content: center;
                margin-bottom: 1rem;
            }
            .tagline {
                display: none;
            }
            .nav {
                width: 100%;
                display: none;
                flex-direction: column;
                gap: 1rem;
                padding: 1rem 0;
                text-align: center;
            }
            .nav.active {
                display: flex;
            }
            .hamburger {
                display: block;
            }
            .hero h1 {
                font-size: 2rem;
            }
            .main-wrapper {
                grid-template-columns: 1fr;
            }
            .events-grid,
            .testimonials-grid {
                grid-template-columns: 1fr;
            }
            .footer-wrapper {
                grid-template-columns: 1fr;
            }
            .hero-ctas {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                width: 100%;
                max-width: 300px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="logo-container">
            <img src="https://placehold.co/150x50/2c5282/ffffff?text=Grace+Harbor&font=playfair+display" alt="Grace Harbor Community Logo" class="logo">
            <div class="site-info">
                <h1>Grace Harbor Community</h1>
                <p class="tagline">Where faith grows, community thrives, and purpose unfolds</p>
            </div>
        </div>
        <button class="hamburger" aria-label="Toggle navigation">☰</button>
        <nav class="nav">
            <div class="nav-links">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Resources</a>
                <a href="#">Youth</a>
                <a href="#">Outreach</a>
                <a href="#">Events</a>
                <a href="#">Contact</a>
            </div>
            <a href="#" class="btn btn-primary">Give Online</a>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>A Welcoming Space for Faith and Connection</h1>
            <p>Join our vibrant, multi-generational congregation for worship, community, and service. All are welcome here, no matter where you are on your spiritual journey.</p>
            <div class="hero-ctas">
                <a href="#" class="btn btn-primary">Join Us This Sunday</a>
                <a href="#about" class="btn btn-secondary">Learn More About Us</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="main-wrapper">
        <main>
            <!-- Upcoming Events Section -->
            <section id="events">
                <h2 class="section-title">Upcoming Community Events</h2>
                <div class="events-grid">
                    <div class="event-card">
                        <img src="https://picsum.photos/300/200?random=3" alt="Summer community potluck with families eating together">
                        <div class="event-content">
                            <p class="event-date">📅 June 15, 2024 | 12:00pm – 3:00pm</p>
                            <h3>Summer Community Potluck</h3>
                            <p>Join us for our beloved annual summer tradition! Bring your favorite dish to share, and enjoy live music, lawn games, and activities for all ages. This is the perfect chance to meet our congregation and experience our warm, welcoming community firsthand. Newcomers are especially encouraged to attend—no registration required.</p>
                            <a href="#" class="event-cta">RSVP Now</a>
                        </div>
                    </div>
                    <div class="event-card">
                        <img src="https://picsum.photos/300/200?random=4" alt="Small group Bible study meeting in a home">
                        <div class="event-content">
                            <p class="event-date">📅 Every Wednesday | 7:00pm</p>
                            <h3>Weekly Bible Study Group</h3>
                            <p>Our midweek Bible study offers a relaxed, intimate space to dive deeper into scripture and build meaningful relationships. We’re currently exploring the book of Psalms, learning how ancient words of praise and lament speak to our modern lives. All backgrounds and experience levels are welcome, and childcare is available for children ages 0-5.</p>
                            <a href="#" class="event-cta">Find a Group</a>
                        </div>
                    </div>
                    <div class="event-card">
                        <img src="https://picsum.photos/300/200?random=5" alt="Volunteers sorting food donations for a food drive">
                        <div class="event-content">
                            <p class="event-date">📅 June 22, 2024 | 9:00am – 1:00pm</p>
                            <h3>Annual Outreach Food Drive</h3>
                            <p>Help us support local families in need! We’re collecting non-perishable food items, hygiene products, and baby supplies to stock our community food pantry, which serves over 200 families monthly. Volunteers are also needed to help sort donations and distribute food to community members. Sign up for a shift or drop off donations at the link below.</p>
                            <a href="#" class="event-cta">Sign Up to Volunteer</a>
                        </div>
                    </div>
                    <div class="event-card">
                        <img src="https://picsum.photos/300/200?random=6" alt="Family fun day with bounce house and children playing">
                        <div class="event-content">
                            <p class="event-date">📅 June 29, 2024 | 10:00am – 2:00pm</p>
                            <h3>Family Fun Day</h3>
                            <p>Bring the whole family for a free day of fun on our church grounds! We’ll have bounce houses, face painting, a dunk tank, live music, and food trucks. All activities are free and open to the public, so invite your friends and neighbors to join us for a joyful day of community connection.</p>
                            <a href="#" class="event-cta">RSVP Here</a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Ministry & Outreach Section -->
            <section id="ministry">
                <h2 class="section-title">Ministry & Outreach</h2>
                <div class="section-content">
                    <p>At Grace Harbor, we believe faith is not just something we practice on Sundays—it’s something we live out every day through intentional community, deep study, and compassionate service to others. Our ministry offerings are designed to meet you wherever you are on your spiritual journey, whether you’re a lifelong believer, exploring faith for the first time, or somewhere in between.</p>
                    <p>Our small group Bible studies meet weekly in homes across the Serenity Valley area, providing a safe, intimate space to dive deeper into scripture, ask questions, and build authentic relationships with other members of our congregation. We offer groups for all life stages and spiritual backgrounds, from young adults to retirees, and we also have specialized groups for those navigating grief, divorce, or other life challenges. All groups are led by trained, vetted members of our community, and new members are always welcome to join at any time.</p>
                    <p>Our outreach ministry is the heart of our communal commitment to serving others. We operate a weekly food pantry that serves over 200 local families every month, and our team of volunteers regularly partners with local homeless shelters to provide meals, clothing, and support services. We also organize annual mission trips to both domestic and international communities, where we work alongside local organizations to build homes, support schools, and share resources with underserved populations. If you feel called to serve, we have opportunities for every skill set and schedule, from one-time events to ongoing weekly commitments.</p>
                    <p>Our weekly communal worship services blend traditional hymns with contemporary music, creating a space for reflection, celebration, and connection with God and one another. Services are held every Sunday at 9am and 11am, and include children’s ministry for ages 0-11, so the whole family can participate.</p>
                    <div class="cta-group">
                        <a href="#" class="btn btn-primary">Find a Small Group</a>
                        <a href="#" class="btn btn-secondary">Get Involved in Outreach</a>
                    </div>
                </div>
            </section>

            <!-- Youth & Family Section -->
            <section id="youth">
                <h2 class="section-title">Youth & Family Programs</h2>
                <div class="section-content">
                    <p>We believe that nurturing faith in the next generation is one of the most important investments we can make in our community. Our youth and family programs are designed to be safe, fun, and spiritually enriching for children and teens of all ages, helping them build a strong foundation of faith that will last a lifetime. All youth program leaders are background-checked and trained in child and youth ministry, and we prioritize creating an inclusive environment where every child and teen feels valued and accepted.</p>
                    <p>Our Children’s Ministry runs every Sunday during our 9am and 11am worship services, with age-appropriate lessons, activities, and crafts for children ages 0-11. Our trained volunteers create a warm, welcoming environment where kids can learn about faith through play, stories, and interactive activities. We also host monthly family events, including game nights, service projects, and holiday celebrations, designed to bring families together and strengthen bonds within our congregation.</p>
                    <p>For middle and high school students, our Youth Group meets every Wednesday at 6:30pm for worship, Bible study, games, and community service projects. We also host annual retreats, mission trips, and lock-ins, giving teens the chance to build deep friendships, explore their faith in a low-pressure environment, and serve others. Our youth program is open to all teens in grades 6-12, regardless of their faith background or prior experience with church.</p>
                    <div class="cta-group">
                        <a href="#" class="btn btn-primary">Learn More About Youth Programs</a>
                        <a href="#" class="btn btn-secondary">Register for VBS 2024</a>
                    </div>
                </div>
            </section>

            <!-- Testimonials Section -->
            <section id="testimonials">
                <h2 class="section-title">Community Stories</h2>
                <div class="testimonials-grid">
                    <div class="testimonial-card">
                        <img src="https://i.pravatar.cc/150?u=1" alt="Sarah M., congregation member">
                        <p>"Grace Harbor has been our spiritual home for over 10 years. The community here is so supportive, and the worship services always leave me feeling renewed and connected. The small groups have been a lifeline for me during difficult times."</p>
                        <h4>Sarah M.</h4>
                        <span>Congregation Member since 2014</span>
                    </div>
                    <div class="testimonial-card">
                        <img src="https://i.pravatar.cc/150?u=2" alt="David T., youth group parent">
                        <p>"My teenagers love the youth group! The leaders are amazing, and they've made such great friends while growing in their faith. I couldn't ask for a better environment for my kids to explore their spirituality in a safe, fun way."</p>
                        <h4>David T.</h4>
                        <span>Parent of Youth Group Members</span>
                    </div>
                    <div class="testimonial-card">
                        <img src="https://i.pravatar.cc/150?u=3" alt="Maria L., outreach volunteer">
                        <p>"Volunteering with the outreach ministry has been such a rewarding experience. It's incredible to see how our small acts of service can make a big difference in our community. Grace Harbor truly lives out its call to love and serve our neighbors."</p>
                        <h4>Maria L.</h4>
                        <span>Outreach Volunteer</span>
                    </div>
                </div>
            </section>

            <!-- Prayer Request Form -->
            <section id="prayer">
                <h2 class="section-title">Submit a Prayer Request</h2>
                <div class="prayer-form-container">
                    <p class="section-content">At Grace Harbor, we believe in the power of prayer. Whether you’re celebrating a joy, navigating a challenge, or lifting up a loved one in need, our prayer team is here to support you. All requests are kept strictly confidential, and you may choose to be contacted by a member of our team if you would like additional support.</p>
                    <form class="prayer-form">
                        <div class="form-group">
                            <label for="name">Full Name (Optional)</label>
                            <input type="text" id="name" placeholder="Enter your full name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address (Optional)</label>
                            <input type="email" id="email" placeholder="Enter your email if you'd like to be contacted">
                        </div>
                        <div class="form-group">
                            <label for="prayer-request">Prayer Request *</label>
                            <textarea id="prayer-request" placeholder="Share your prayer request here..." required></textarea>
                        </div>
                        <div class="form-group form-checkbox">
                            <input type="checkbox" id="contact-consent">
                            <label for="contact-consent">I would like to be contacted by a member of the prayer team</label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit Prayer Request</button>
                    </form>
                    <div class="thank-you-message">
                        Thank you for submitting your prayer request. Our team will be lifting you up in prayer, and will reach out if you requested to be contacted.
                    </div>
                </div>
            </section>
        </main>

        <!-- Sidebar -->
        <aside>
            <!-- Service Schedule Widget -->
            <div class="sidebar-widget">
                <h3>Weekly Service Schedule</h3>
                <ul class="service-schedule">
                    <li>
                        <span class="service-name">Sunday Worship</span>
                        <span class="service-time">9:00am & 11:00am</span>
                    </li>
                    <li>
                        <span class="service-name">Wednesday Bible Study</span>
                        <span class="service-time">7:00pm (In-person & Zoom)</span>
                    </li>
                    <li>
                        <span class="service-name">Youth Group</span>
                        <span class="service-time">Wednesdays 6:30pm</span>
                    </li>
                    <li>
                        <span class="service-name">Children's Ministry</span>
                        <span class="service-time">Sundays during 9am & 11am</span>
                    </li>
                    <li>
                        <span class="service-name">Community Prayer Meeting</span>
                        <span class="service-time">First Saturday, 10:00am</span>
                    </li>
                </ul>
            </div>

            <!-- Announcements Widget -->
            <div class="sidebar-widget">
                <h3>Latest Announcements</h3>
                <ul class="announcements">
                    <li>🥫 Our Summer Food Drive kicks off June 22nd! Drop off non-perishable items in the lobby all month long.</li>
                    <li>🎉 Youth Group Lock-In: June 14th, 6pm-8am. Sign up at the youth desk or online.</li>
                    <li>📖 Summer Bible Study Series: "Finding Peace in a Busy World" starts June 5th. All are welcome!</li>
                    <li>👕 Our annual community clothing drive is ongoing. Donate gently used clothing in the lobby bins.</li>
                </ul>
            </div>

            <!-- FAQ Widget -->
            <div class="sidebar-widget">
                <h3>Frequently Asked Questions</h3>
                <div class="accordion">
                    <div class="accordion-item">
                        <button class="accordion-question">What are your regular service times?</button>
                        <div class="accordion-answer">
                            <p>We hold two Sunday worship services at 9:00am and 11:00am. We also have Wednesday Bible study at 7:00pm, available both in-person and via Zoom.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-question">Do I have to be a member to attend events?</button>
                        <div class="accordion-answer">
                            <p>Absolutely not! All of our events, services, and groups are open to everyone, regardless of your faith background or membership status. We welcome visitors and newcomers with open arms.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-question">Is childcare available during services?</button>
                        <div class="accordion-answer">
                            <p>Yes! We offer Children’s Ministry for children ages 0-11 during both Sunday services, with age-appropriate lessons and activities. Nursery care is available for infants and toddlers.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-question">How can I make a donation?</button>
                        <div class="accordion-answer">
                            <p>You can make a secure online donation using the "Give Online" button in the top navigation, or drop off cash or checks in the offering box during services. All donations are tax-deductible.</p>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <button class="accordion-question">Are your facilities accessible?</button>
                        <div class="accordion-answer">
                            <p>Yes! Our building is fully ADA accessible, with ramps, automatic doors, and accessible restrooms. We also have assisted listening devices available for services.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Links Widget -->
            <div class="sidebar-widget">
                <h3>Quick Links</h3>
                <ul class="quick-links">
                    <li><a href="#">Resources Library</a></li>
                    <li><a href="#">Online Giving</a></li>
                    <li><a href="#">Volunteer Opportunities</a></li>
                    <li><a href="#">Member Portal</a></li>
                    <li><a href="#">Sermon Archive</a></li>
                </ul>
            </div>
        </aside>
    </div>

    <!-- Footer -->
    <footer>
        <div class="footer-wrapper">
            <div class="footer-widget">
                <h3>Contact Us</h3>
                <p>Grace Harbor Community</p>
                <p>123 Faith Avenue</p>
                <p>Serenity Valley, CA 90210</p>
                <p>Phone: (555) 123-4567</p>
                <p>Email: info@graceharbor.org</p>
            </div>
            <div class="footer-widget">
                <h3>Connect With Us</h3>
                <p>Follow us on social media to stay up to date on events, sermons, and community updates.</p>
                <div class="social-links">
                    <a href="#" class="social-icon" aria-label="Facebook">
                        <img src="https://placehold.co/24x24/3b5998/ffffff?text=f" alt="Facebook">
                    </a>
                    <a href="#" class="social-icon" aria-label="Instagram">
                        <img src="https://placehold.co/24x24/e4405f/ffffff?text=i" alt="Instagram">
                    </a>
                    <a href="#" class="social-icon" aria-label="YouTube">
                        <img src="https://placehold.co/24x24/ff0000/ffffff?text=y" alt="YouTube">
                    </a>
                    <a href="#" class="social-icon" aria-label="X (Twitter)">
                        <img src="https://placehold.co/24x24/000000/ffffff?text=x" alt="X">
                    </a>
                </div>
            </div>
            <div class="footer-widget">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Accessibility Statement</a></li>
                    <li><a href="#">Staff Directory</a></li>
                    <li><a href="#">Employment Opportunities</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            © 2024 Grace Harbor Community. All rights reserved.
        </div>
    </footer>

    <script>
        // Hamburger menu toggle
        const hamburger = document.querySelector('.hamburger');
        const nav = document.querySelector('.nav');
        hamburger.addEventListener('click', () => {
            nav.classList.toggle('active');
        });

        // Accordion toggle
        const accordionQuestions = document.querySelectorAll('.accordion-question');
        accordionQuestions.forEach(question => {
            question.addEventListener('click', () => {
                question.classList.toggle('active');
                const answer = question.nextElementSibling;
                answer.classList.toggle('active');
            });
        });

        // Prayer form submission
        const prayerForm = document.querySelector('.prayer-form');
        const thankYouMessage = document.querySelector('.thank-you-message');
        prayerForm.addEventListener('submit', (e) => {
            e.preventDefault();
            thankYouMessage.style.display = 'block';
            prayerForm.reset();
            // In a production environment, this would send the form data to a backend server
        });
    </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:41.572Z",
  "url": "https://benchmark.aimac.invalid/7a885d5a8e0c3ae7abb68cd42787904287ef15496c2b7b7b27fed9a486cbbfa1.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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=\"#\" class=\"social-icon\" aria-label=\"Facebook\">\n                        <img src=\"https://placehold.co/24x24/3b5998/ffffff?text=f\" alt=\"Facebook\">\n                    </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"social-icon\" aria-label=\"Facebook\">\n                        <img src=\"https://placehold.co/24x24/3b5998/ffffff?text=f\" alt=\"Facebook\">\n                    </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"social-icon\" aria-label=\"Facebook\">\n                        <img src=\"https://placehold.co/24x24/3b5998/ffffff?text=f\" alt=\"Facebook\">\n                    </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"social-icon\" aria-label=\"Facebook\">\n                        <img src=\"https://placehold.co/24x24/3b5998/ffffff?text=f\" alt=\"Facebook\">\n                    </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"social-icon\" aria-label=\"Facebook\">\n                        <img src=\"https://placehold.co/24x24/3b5998/ffffff?text=f\" alt=\"Facebook\">\n                    </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "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 type=\"submit\" class=\"btn btn-primary\">Submit Prayer Request</button>",
          "target": [
            "button[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>Grace Harbor Community</h1>",
                  "target": [
                    ".site-info > h1"
                  ]
                },
                {
                  "html": "<h1>A Welcoming Space for Faith and Connection</h1>",
                  "target": [
                    ".hero-content > h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Upcoming Community Events</h2>",
                  "target": [
                    "#events > h2"
                  ]
                },
                {
                  "html": "<h3>Summer Community Potluck</h3>",
                  "target": [
                    ".event-card:nth-child(1) > .event-content > h3"
                  ]
                },
                {
                  "html": "<h3>Weekly Bible Study Group</h3>",
                  "target": [
                    ".event-card:nth-child(2) > .event-content > h3"
                  ]
                },
                {
                  "html": "<h3>Annual Outreach Food Drive</h3>",
                  "target": [
                    ".event-card:nth-child(3) > .event-content > h3"
                  ]
                },
                {
                  "html": "<h3>Family Fun Day</h3>",
                  "target": [
                    ".event-card:nth-child(4) > .event-content > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Ministry &amp; Outreach</h2>",
                  "target": [
                    "#ministry > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Youth &amp; Family Programs</h2>",
                  "target": [
                    "#youth > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Community Stories</h2>",
                  "target": [
                    "#testimonials > h2"
                  ]
                },
                {
                  "html": "<h4>Sarah M.</h4>",
                  "target": [
                    ".testimonial-card:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>David T.</h4>",
                  "target": [
                    ".testimonial-card:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Maria L.</h4>",
                  "target": [
                    ".testimonial-card:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Submit a Prayer Request</h2>",
                  "target": [
                    "#prayer > h2"
                  ]
                },
                {
                  "html": "<h3>Weekly Service Schedule</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Latest Announcements</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Frequently Asked Questions</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Quick Links</h3>",
                  "target": [
                    ".sidebar-widget:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Contact Us</h3>",
                  "target": [
                    ".footer-widget:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Connect With Us</h3>",
                  "target": [
                    ".footer-widget:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Quick Links</h3>",
                  "target": [
                    ".footer-widget:nth-child(3) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2c5282",
                "bgColor": "#ffffff",
                "contrastRatio": 7.96,
                "fontSize": "18.0pt (24px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 7.96"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h1>Grace Harbor Community</h1>",
          "target": [
            ".site-info > 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": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "name",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<input type=\"text\" id=\"name\" placeholder=\"Enter your full name\">",
          "target": [
            "#name"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"name\">Full Name (Optional)</label>",
                  "target": [
                    "label[for=\"name\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"name\" placeholder=\"Enter your full name\">",
          "target": [
            "#name"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/150x50/2c5282/ffffff?text=Grace+Harbor&amp;font=playfair+display\" alt=\"Grace Harbor Community Logo\" class=\"logo\">",
          "target": [
            ".logo"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Full Name (Optional)"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"name\">Full Name (Optional)</label>",
                  "target": [
                    "label[for=\"name\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"name\" placeholder=\"Enter your full name\">",
          "target": [
            "#name"
          ]
        }
      ]
    },
    {
      "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=\"event-content\">",
                  "target": [
                    ".event-card:nth-child(1) > .event-content"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"event-cta\">RSVP Now</a>",
          "target": [
            ".event-card:nth-child(1) > .event-content > .event-cta[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</a>",
          "target": [
            ".nav-links > a[href=\"#\"]:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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 class=\"service-schedule\">",
          "target": [
            ".service-schedule"
          ]
        }
      ]
    },
    {
      "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>\n                        <span class=\"service-name\">Sunday Worship</span>\n                        <span class=\"service-time\">9:00am &amp; 11:00am</span>\n                    </li>",
          "target": [
            ".service-schedule > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/150x50/2c5282/ffffff?text=Grace+Harbor&amp;font=playfair+display\" alt=\"Grace Harbor Community Logo\" class=\"logo\">",
          "target": [
            ".logo"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 45.8,
                "height": 25.6
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (45.8px by 25.6px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\">Home</a>",
          "target": [
            ".nav-links > a[href=\"#\"]:nth-child(1)"
          ]
        }
      ]
    }
  ],
  "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": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h1>A Welcoming Space for Faith and Connection</h1>",
          "target": [
            ".hero-content > h1"
          ],
          "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": "#718096",
                "bgColor": "#ffffff",
                "contrastRatio": 4.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.01 (foreground color: #718096, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"tagline\">Where faith grows, community thrives, and purpose unfolds</p>",
          "target": [
            ".tagline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.01 (foreground color: #718096, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#718096",
                "bgColor": "#ffffff",
                "contrastRatio": 4.01,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"testimonial-card\">",
                  "target": [
                    ".testimonial-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.01 (foreground color: #718096, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Congregation Member since 2014</span>",
          "target": [
            ".testimonial-card:nth-child(1) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.01 (foreground color: #718096, 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": "#718096",
                "bgColor": "#ffffff",
                "contrastRatio": 4.01,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"testimonial-card\">",
                  "target": [
                    ".testimonial-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.01 (foreground color: #718096, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Parent of Youth Group Members</span>",
          "target": [
            ".testimonial-card:nth-child(2) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.01 (foreground color: #718096, 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": "#718096",
                "bgColor": "#ffffff",
                "contrastRatio": 4.01,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"testimonial-card\">",
                  "target": [
                    ".testimonial-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.01 (foreground color: #718096, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Outreach Volunteer</span>",
          "target": [
            ".testimonial-card:nth-child(3) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.01 (foreground color: #718096, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5737
      },
      {
        "y": 576,
        "height": 5737
      },
      {
        "y": 1152,
        "height": 5737
      },
      {
        "y": 1728,
        "height": 5737
      },
      {
        "y": 2304,
        "height": 5737
      },
      {
        "y": 2880,
        "height": 5737
      },
      {
        "y": 3456,
        "height": 5737
      },
      {
        "y": 4032,
        "height": 5737
      },
      {
        "y": 4608,
        "height": 5737
      },
      {
        "y": 5017,
        "height": 5737
      }
    ],
    "scans": 11,
    "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 "Religion and Spirituality" 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: "Religion and Spirituality"
- Description: Religious organizations, spiritual resources, faith communities, and worship services.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Religion and Spirituality" 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: "Resources", "Youth", "Outreach".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Religion and Spirituality" category. Consider themes similar to: "Study Groups", "Community Events", "Outreach Ministry".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "outreach", "congregation", "communal worship".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Register", "Get Involved", "Find Group".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Religion and Spirituality" sector. Ideas similar but not limited to: "prayer request form".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "service schedule", "community highlights", "weekly announcements".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.