HomeMistral Mistral Small 4Education

Mistral Mistral Small 4 – Education

via Mistral · Generated

  • AIMAC Debt 21.56
  • Cost $0.007
  • Total Violations 16
  • HTML Size 39 KB
  • Em Dashes 0

Screenshot

View Mistral Mistral Small 4 Education page View Live Page

Accessibility Issues Found

5 Critical 11 Serious

  • color-contrast serious 7 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#" class="accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all">Schedule Campus Tour</a>
  • link-name serious 4 instances

    Links must have discernible text

    Example HTML <a href="#" class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 transition-colors">
  • select-name critical 5 instances

    Select element must have an accessible name

    Example HTML <select class="bg-white text-gray-800 px-4 py-3 rounded-lg w-full sm:w-auto">

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>Horizon Academy | Where Futures Take Flight</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            color: #2d3748;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Lora', serif;
        }
        .hero-bg {
            background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
        }
        .accent-blue {
            background-color: #3182ce;
        }
        .accent-blue:hover {
            background-color: #2c5282;
        }
        .testimonial-card {
            background-color: #f7fafc;
            border-left: 4px solid #3182ce;
        }
        .faq-item {
            transition: all 0.3s ease;
        }
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .faq-content.open {
            max-height: 200px;
        }
    </style>
</head>
<body class="bg-white">
    <!-- Header -->
    <header class="hero-bg text-white">
        <nav class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://placehold.co/60x60/ffffff/1a365d?text=HA" alt="Horizon Academy Logo" class="h-12 w-12 rounded-full border-2 border-white">
                    <div>
                        <h1 class="text-2xl font-bold">Horizon Academy</h1>
                        <p class="text-sm opacity-90">Where Futures Take Flight</p>
                    </div>
                </div>

                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="hover:text-blue-200 transition-colors">Home</a>
                    <a href="#" class="hover:text-blue-200 transition-colors">Admissions</a>
                    <a href="#" class="hover:text-blue-200 transition-colors">Academics</a>
                    <a href="#" class="hover:text-blue-200 transition-colors">Student Life</a>
                    <a href="#" class="hover:text-blue-200 transition-colors">About Us</a>
                    <a href="#" class="hover:text-blue-200 transition-colors">Alumni</a>
                    <a href="#" class="hover:text-blue-200 transition-colors">Contact</a>
                </div>

                <button class="md:hidden text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </button>
            </div>
        </nav>

        <!-- Hero Section -->
        <div class="container mx-auto px-6 py-20 text-center">
            <h2 class="text-4xl md:text-6xl font-bold mb-6">Inspiring Minds, Shaping Futures</h2>
            <p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto opacity-90">A premier educational institution dedicated to academic excellence, character development, and innovative learning experiences for students from grades 9-12 and college preparation.</p>

            <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-12">
                <a href="#" class="accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all">Schedule Campus Tour</a>
                <a href="#" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-800 transition-all">Meet Our Faculty</a>
            </div>

            <div class="max-w-4xl mx-auto">
                <h3 class="text-2xl font-semibold mb-6">Find Your Path to Success</h3>
                <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <select class="bg-white text-gray-800 px-4 py-3 rounded-lg w-full sm:w-auto">
                        <option>Select Program</option>
                        <option>High School Diploma</option>
                        <option>Advanced Placement</option>
                        <option>College Preparation</option>
                        <option>STEM Academy</option>
                    </select>
                    <input type="text" placeholder="Enter your email" class="w-full sm:w-80 px-4 py-3 rounded-lg text-gray-800">
                    <button class="accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all w-full sm:w-auto">Get Started</button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-16">
        <!-- About Section -->
        <section class="mb-20">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-4xl font-bold mb-6">Academic Excellence Since 1985</h2>
                    <p class="text-lg mb-6">Founded on the principles of intellectual curiosity and personal growth, Horizon Academy has been shaping the leaders of tomorrow for nearly four decades. Our commitment to educational excellence is reflected in our consistently high graduation rates and college acceptance statistics.</p>

                    <p class="text-lg mb-8">We offer a rigorous college-preparatory curriculum that challenges students to reach their full potential while providing abundant opportunities for personal development and community engagement.</p>

                    <div class="space-y-4">
                        <div class="flex items-center space-x-3">
                            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <span>100% College Acceptance Rate</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <span>Nationally Ranked STEM Program</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <span>5:1 Student-Faculty Ratio</span>
                        </div>
                    </div>
                </div>

                <div class="relative">
                    <img src="https://picsum.photos/600/400?grayscale&blur=2" alt="Students in classroom discussion" class="rounded-lg shadow-xl w-full">
                    <div class="absolute bottom-4 right-4 bg-white bg-opacity-90 p-4 rounded-lg shadow-lg">
                        <p class="text-sm font-semibold">Class of 2024 Statistics</p>
                        <p class="text-2xl font-bold text-blue-600">$23M</p>
                        <p class="text-xs">Total Scholarships Awarded</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Programs Section -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Our Academic Programs</h2>
                <p class="text-lg max-w-3xl mx-auto">We offer a comprehensive educational experience designed to prepare students for both college and life beyond. Our programs are tailored to meet individual learning styles while maintaining the highest academic standards.</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- Program 1 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="https://picsum.photos/400/250?grayscale&blur=1" alt="High School Diploma Program" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">High School Diploma Program</h3>
                        <p class="text-gray-600 mb-4">Our comprehensive college-preparatory curriculum spans grades 9-12, offering 28 Advanced Placement courses and 15 honors options. Students benefit from personalized academic advising and comprehensive college counseling starting in 9th grade.</p>
                        <div class="space-y-2 mb-6">
                            <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">College Prep</span>
                            <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">AP Courses</span>
                            <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Honors Track</span>
                        </div>
                        <a href="#" class="accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow">Learn More</a>
                    </div>
                </div>

                <!-- Program 2 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="https://picsum.photos/400/250?grayscale&blur=1" alt="STEM Academy" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">STEM Academy</h3>
                        <p class="text-gray-600 mb-4">Our nationally recognized STEM program offers specialized tracks in Engineering, Computer Science, and Biomedical Sciences. Students engage in cutting-edge research projects and have access to state-of-the-art laboratories and maker spaces.</p>
                        <div class="space-y-2 mb-6">
                            <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Engineering</span>
                            <span class="inline-block bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Research</span>
                            <span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Competitions</span>
                        </div>
                        <a href="#" class="accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow">Learn More</a>
                    </div>
                </div>

                <!-- Program 3 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="https://picsum.photos/400/250?grayscale&blur=1" alt="Arts & Humanities" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Arts & Humanities</h3>
                        <p class="text-gray-600 mb-4">Our award-winning arts program offers concentrations in Visual Arts, Music, Theater, and Creative Writing. Students showcase their talents in professional-quality productions and exhibitions throughout the year.</p>
                        <div class="space-y-2 mb-6">
                            <span class="inline-block bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">Performing Arts</span>
                            <span class="inline-block bg-teal-100 text-teal-800 text-xs px-2 py-1 rounded-full">Visual Arts</span>
                            <span class="inline-block bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">Scholarships</span>
                        </div>
                        <a href="#" class="accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow">Learn More</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Student Spotlight -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Student Spotlight</h2>
                <p class="text-lg max-w-3xl mx-auto">Meet some of our remarkable students who are making a difference in their communities and preparing for success in college and beyond.</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="testimonial-card p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <img src="https://i.pravatar.cc/80?u=michellem" alt="Michelle Chen" class="w-16 h-16 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold text-lg">Michelle Chen</h4>
                            <p class="text-blue-600 font-semibold">Class of 2024</p>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">Michelle has been a leader in our STEM program, conducting original research on renewable energy solutions. Her project on solar panel efficiency won first place at the National Science Fair and earned her a full scholarship to MIT.</p>
                    <p class="text-sm text-gray-500">"Horizon Academy gave me the tools and confidence to pursue my passion for engineering. The faculty mentorship and research opportunities prepared me for college in ways I never imagined."</p>
                </div>

                <div class="testimonial-card p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <img src="https://i.pravatar.cc/80?u=javier" alt="Javier Rodriguez" class="w-16 h-16 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold text-lg">Javier Rodriguez</h4>
                            <p class="text-blue-600 font-semibold">Class of 2024</p>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">Javier is an accomplished musician and community volunteer who balanced AP coursework with leading our award-winning mariachi band. He was selected as a National YoungArts Foundation winner and received a full scholarship to Berklee College of Music.</p>
                    <p class="text-sm text-gray-500">"The arts program at Horizon Academy taught me discipline and creativity. I learned that excellence in music requires the same dedication as excellence in academics."</p>
                </div>
            </div>
        </section>

        <!-- Tuition Calculator -->
        <section class="mb-20 bg-gray-50 rounded-xl p-8">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-3xl font-bold mb-6">Tuition Investment Calculator</h2>
                <p class="text-lg mb-8">Understanding the investment in your education is important. Use our calculator to estimate your annual tuition costs based on your program and financial aid eligibility.</p>

                <div class="bg-white p-6 rounded-lg shadow-md mb-8">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-left font-semibold mb-2">Program Selection</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg">
                                <option>High School Diploma Program</option>
                                <option>STEM Academy</option>
                                <option>Arts & Humanities</option>
                                <option>International Baccalaureate</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-left font-semibold mb-2">Family Income Level</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg">
                                <option>Less than $50,000</option>
                                <option>$50,000 - $100,000</option>
                                <option>$100,000 - $150,000</option>
                                <option>More than $150,000</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-left font-semibold mb-2">Scholarship Awards</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg">
                                <option>None</option>
                                <option>Academic Scholarship (25%)</option>
                                <option>Merit Scholarship (50%)</option>
                                <option>Full Tuition Scholarship</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-left font-semibold mb-2">Payment Plan</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg">
                                <option>Full Payment (5% discount)</option>
                                <option>Semester Plan (3% processing fee)</option>
                                <option>Monthly Plan (5% processing fee)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="bg-blue-50 p-6 rounded-lg mb-6">
                    <h3 class="text-xl font-bold mb-4">Your Estimated Investment</h3>
                    <div class="text-4xl font-bold text-blue-600 mb-2">$18,750 <span class="text-lg font-normal">per year</span></div>
                    <p class="text-gray-600">This estimate includes tuition, fees, and standard program costs. Additional expenses for books, technology, and special programs may apply.</p>
                </div>

                <a href="#" class="accent-blue text-white px-8 py-3 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow">Contact Financial Aid Office</a>
            </div>
        </section>

        <!-- Faculty Spotlight -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Meet Our Exceptional Faculty</h2>
                <p class="text-lg max-w-3xl mx-auto">Our dedicated educators bring a wealth of knowledge and real-world experience to the classroom. With an average of 15 years teaching experience and 70% holding advanced degrees, our faculty is committed to student success.</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- Faculty Member 1 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="https://i.pravatar.cc/300?u=drharris" alt="Dr. Sarah Harris" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Dr. Sarah Harris</h3>
                        <p class="text-blue-600 font-semibold mb-4">AP Biology & Science Department Chair</p>
                        <p class="text-gray-600 mb-4">With a Ph.D. in Molecular Biology from Stanford University, Dr. Harris has led our science department to national recognition. She mentors students in cutting-edge research projects that have earned multiple awards at national science fairs.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>18 Years at Horizon</span>
                            <span>Ph.D. Stanford University</span>
                        </div>
                    </div>
                </div>

                <!-- Faculty Member 2 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="https://i.pravatar.cc/300?u=profjones" alt="Professor Michael Jones" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Professor Michael Jones</h3>
                        <p class="text-blue-600 font-semibold mb-4">Mathematics & Engineering</p>
                        <p class="text-gray-600 mb-4">A former NASA engineer, Professor Jones brings real-world applications to abstract mathematical concepts. His innovative teaching methods have increased student performance in calculus by 40% over three years.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>12 Years at Horizon</span>
                            <span>M.Eng. MIT</span>
                        </div>
                    </div>
                </div>

                <!-- Faculty Member 3 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="https://i.pravatar.cc/300?u=msgarcia" alt="Ms. Elena Garcia" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Ms. Elena Garcia</h3>
                        <p class="text-blue-600 font-semibold mb-4">Visual Arts & Department Chair</p>
                        <p class="text-gray-600 mb-4">Award-winning artist Ms. Garcia has exhibited her work internationally and brings that global perspective to her classroom. She established our Visual Arts Portfolio Program, which has helped students earn over $2M in art scholarships.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>9 Years at Horizon</span>
                            <span>MFA Yale University</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Frequently Asked Questions</h2>
                <p class="text-lg max-w-3xl mx-auto">We've compiled answers to the most common questions about admissions, academics, and student life at Horizon Academy.</p>
            </div>

            <div class="max-w-4xl mx-auto space-y-4">
                <div class="faq-item bg-white rounded-lg shadow-md">
                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
                        <span class="font-semibold text-lg">What are the graduation requirements for Horizon Academy?</span>
                        <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="faq-content px-6 pb-6">
                        <p class="text-gray-600">To graduate from Horizon Academy, students must complete 24 credits including: 4 credits in English, 4 credits in Mathematics, 3 credits in Science, 3 credits in Social Studies, 2 credits in World Languages, 1 credit in Fine Arts, 1 credit in Physical Education, and 6 credits in elective courses. Students must also complete 100 hours of community service and maintain a minimum 2.0 GPA.</p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-lg shadow-md">
                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
                        <span class="font-semibold text-lg">Does Horizon Academy offer financial aid and scholarships?</span>
                        <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="faq-content px-6 pb-6">
                        <p class="text-gray-600">Yes, we are committed to making our education accessible. Approximately 75% of our students receive some form of financial assistance. We offer merit-based scholarships, need-based grants, and payment plans. Last year, we distributed over $3.2 million in financial aid and scholarships.</p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-lg shadow-md">
                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
                        <span class="font-semibold text-lg">What is the student-to-teacher ratio at Horizon Academy?</span>
                        <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="faq-content px-6 pb-6">
                        <p class="text-gray-600">Our average student-to-teacher ratio is 8:1, significantly lower than the national average. This allows for personalized attention, mentoring relationships, and differentiated instruction tailored to each student's learning style and pace.</p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-lg shadow-md">
                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
                        <span class="font-semibold text-lg">What extracurricular activities and clubs are available?</span>
                        <svg class="w-6 h-6 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="faq-content px-6 pb-6">
                        <p class="text-gray-600">We offer over 50 student clubs and organizations ranging from academic teams (Debate, Model UN, Science Olympiad) to cultural groups, service organizations, and special interest clubs. Students can also participate in our award-winning performing arts program and 14 varsity sports teams.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Sidebar -->
    <aside class="container mx-auto px-6 pb-16">
        <div class="grid md:grid-cols-3 gap-8">
            <!-- Upcoming Events -->
            <div class="bg-blue-50 rounded-xl p-6">
                <h3 class="text-xl font-bold mb-4 text-center">Upcoming Events</h3>
                <div class="space-y-4">
                    <div class="flex items-center space-x-3">
                        <div class="bg-blue-200 p-2 rounded-lg">
                            <svg class="w-5 h-5 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        </div>
                        <div>
                            <p class="font-semibold">College Application Workshop</p>
                            <p class="text-sm text-gray-600">September 15, 3:00 PM</p>
                        </div>
                    </div>

                    <div class="flex items-center space-x-3">
                        <div class="bg-green-200 p-2 rounded-lg">
                            <svg class="w-5 h-5 text-green-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                        </div>
                        <div>
                            <p class="font-semibold">STEM Research Symposium</p>
                            <p class="text-sm text-gray-600">September 22, 9:00 AM</p>
                        </div>
                    </div>

                    <div class="flex items-center space-x-3">
                        <div class="bg-purple-200 p-2 rounded-lg">
                            <svg class="w-5 h-5 text-purple-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                        </div>
                        <div>
                            <p class="font-semibold">Parent Information Session</p>
                            <p class="text-sm text-gray-600">September 28, 6:30 PM</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Scholarship Opportunities -->
            <div class="bg-green-50 rounded-xl p-6">
                <h3 class="text-xl font-bold mb-4 text-center">Scholarship Opportunities</h3>
                <div class="space-y-4">
                    <div class="bg-white p-4 rounded-lg shadow-sm">
                        <h4 class="font-semibold text-green-700">Horizon Merit Scholarship</h4>
                        <p class="text-sm text-gray-600">Award: Up to $15,000</p>
                        <p class="text-xs text-gray-500">Deadline: November 15</p>
                    </div>

                    <div class="bg-white p-4 rounded-lg shadow-sm">
                        <h4 class="font-semibold text-green-700">Community Leadership Award</h4>
                        <p class="text-sm text-gray-600">Award: $10,000</p>
                        <p class="text-xs text-gray-500">Deadline: December 1</p>
                    </div>

                    <div class="bg-white p-4 rounded-lg shadow-sm">
                        <h4 class="font-semibold text-green-700">STEM Excellence Grant</h4>
                        <p class="text-sm text-gray-600">Award: $8,000</p>
                        <p class="text-xs text-gray-500">Deadline: January 15</p>
                    </div>
                </div>
            </div>

            <!-- Student Life -->
            <div class="bg-purple-50 rounded-xl p-6">
                <h3 class="text-xl font-bold mb-4 text-center">Student Life Highlights</h3>
                <div class="space-y-4">
                    <div class="flex items-center space-x-3">
                        <img src="https://picsum.photos/60/60?grayscale&blur=1" alt="Sports" class="w-12 h-12 rounded-lg object-cover">
                        <div>
                            <p class="font-semibold">14 Varsity Sports Teams</p>
                            <p class="text-sm text-gray-600">State Champions 2023</p>
                        </div>
                    </div>

                    <div class="flex items-center space-x-3">
                        <img src="https://picsum.photos/60/60?grayscale&blur=1" alt="Arts" class="w-12 h-12 rounded-lg object-cover">
                        <div>
                            <p class="font-semibold">50+ Student Clubs</p>
                            <p class="text-sm text-gray-600">National Awards Won</p>
                        </div>
                    </div>

                    <div class="flex items-center space-x-3">
                        <img src="https://picsum.photos/60/60?grayscale&blur=1" alt="Community" class="w-12 h-12 rounded-lg object-cover">
                        <div>
                            <p class="font-semibold">100+ Community Service Hours</p>
                            <p class="text-sm text-gray-600">Average per Student</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white">
        <div class="container mx-auto px-6 py-12">
            <div class="grid md:grid-cols-4 gap-8">
                <!-- Logo and Info -->
                <div class="md:col-span-1">
                    <div class="flex items-center space-x-3 mb-4">
                        <img src="https://placehold.co/60x60/ffffff/1a365d?text=HA" alt="Horizon Academy Logo" class="h-12 w-12 rounded-full border-2 border-white">
                        <div>
                            <h3 class="text-xl font-bold">Horizon Academy</h3>
                            <p class="text-sm opacity-90">Where Futures Take Flight</p>
                        </div>
                    </div>
                    <p class="text-sm opacity-80 mb-4">Founded in 1985, Horizon Academy is a premier college-preparatory institution dedicated to academic excellence and character development.</p>
                    <p class="text-sm opacity-80">Accredited by the National Association of Independent Schools.</p>
                </div>

                <!-- Quick Links -->
                <div>
                    <h4 class="font-bold text-lg mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-blue-200 transition-colors">Admissions</a></li>
                        <li><a href="#" class="hover:text-blue-200 transition-colors">Academics</a></li>
                        <li><a href="#" class="hover:text-blue-200 transition-colors">Student Life</a></li>
                        <li><a href="#" class="hover:text-blue-200 transition-colors">About Us</a></li>
                        <li><a href="#" class="hover:text-blue-200 transition-colors">Faculty & Staff</a></li>
                        <li><a href="#" class="hover:text-blue-200 transition-colors">Alumni</a></li>
                        <li><a href="#" class="hover:text-blue-200 transition-colors">Contact</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div>
                    <h4 class="font-bold text-lg mb-4">Contact Information</h4>
                    <div class="space-y-2 text-sm">
                        <p><strong>Address:</strong><br>123 College Avenue<br>Springfield, ST 12345</p>
                        <p><strong>Phone:</strong><br>(555) 123-4567</p>
                        <p><strong>Email:</strong><br>admissions@horizonacademy.edu</p>
                        <p><strong>Office Hours:</strong><br>Mon-Fri: 8:00 AM - 4:30 PM</p>
                    </div>
                </div>

                <!-- Connect With Us -->
                <div>
                    <h4 class="font-bold text-lg mb-4">Connect With Us</h4>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
                        </a>
                        <a href="#" class="bg-blue-800 p-2 rounded-full hover:bg-blue-700 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg>
                        </a>
                        <a href="#" class="bg-blue-700 p-2 rounded-full hover:bg-blue-600 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        </a>
                        <a href="#" class="bg-red-600 p-2 rounded-full hover:bg-red-500 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                        </a>
                    </div>
                    <a href="#" class="accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow">Request Information</a>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm opacity-70">
                <p>&copy; 2024 Horizon Academy. All rights reserved. | <a href="#" class="hover:text-blue-200">Privacy Policy</a> | <a href="#" class="hover:text-blue-200">Terms of Service</a> | <a href="#" class="hover:text-blue-200">Non-Discrimination Policy</a></p>
            </div>
        </div>
    </footer>

    <script>
        // FAQ Toggle Functionality
        document.querySelectorAll('.faq-toggle').forEach(button => {
            button.addEventListener('click', () => {
                const content = button.nextElementSibling;
                const icon = button.querySelector('svg');

                content.classList.toggle('open');
                icon.classList.toggle('rotate-180');
            });
        });

        // Mobile Navigation Toggle
        const mobileMenuButton = document.querySelector('header button');
        const nav = document.querySelector('header nav > div:nth-child(1)');

        mobileMenuButton.addEventListener('click', () => {
            // Simple mobile menu toggle - in a real implementation, you'd show/hide a mobile menu
            console.log('Mobile menu toggled');
        });
    </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:41:10.193Z",
  "url": "https://benchmark.aimac.invalid/9f48988760569c1bcfd4e95afaeff949752f5cc7a24a40f72864cd391cccfa81.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-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": []
    },
    {
      "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-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": []
    },
    {
      "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-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": []
    },
    {
      "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": "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": []
    },
    {
      "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": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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-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 class=\"bg-white\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all w-full sm:w-auto\">Get Started</button>",
          "target": [
            ".hover\\:shadow-lg.sm\\:w-auto.transition-all"
          ]
        }
      ]
    },
    {
      "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": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"text-2xl font-bold\">Horizon Academy</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl md:text-6xl font-bold mb-6\">Inspiring Minds, Shaping Futures</h2>",
                  "target": [
                    ".md\\:text-6xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-semibold mb-6\">Find Your Path to Success</h3>",
                  "target": [
                    ".text-2xl.mb-6"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl font-bold mb-6\">Academic Excellence Since 1985</h2>",
                  "target": [
                    ".gap-12 > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl font-bold mb-4\">Our Academic Programs</h2>",
                  "target": [
                    "section:nth-child(2) > .mb-12.text-center > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-3\">High School Diploma Program</h3>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(1) > .p-6 > .mb-3"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-3\">STEM Academy</h3>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(2) > .p-6 > .mb-3"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-3\">Arts &amp; Humanities</h3>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(3) > .p-6 > .mb-3"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl font-bold mb-4\">Student Spotlight</h2>",
                  "target": [
                    "section:nth-child(3) > .mb-12.text-center > h2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-lg\">Michelle Chen</h4>",
                  "target": [
                    ".testimonial-card.p-6.rounded-lg:nth-child(1) > .items-center.flex.mb-4 > div > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-lg\">Javier Rodriguez</h4>",
                  "target": [
                    ".testimonial-card.p-6.rounded-lg:nth-child(2) > .items-center.flex.mb-4 > div > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl font-bold mb-6\">Tuition Investment Calculator</h2>",
                  "target": [
                    ".text-3xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-4\">Your Estimated Investment</h3>",
                  "target": [
                    ".bg-blue-50.mb-6.p-6 > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl font-bold mb-4\">Meet Our Exceptional Faculty</h2>",
                  "target": [
                    "section:nth-child(5) > .mb-12.text-center > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-2\">Dr. Sarah Harris</h3>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(1) > .p-6 > .mb-2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-2\">Professor Michael Jones</h3>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(2) > .p-6 > .mb-2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-2\">Ms. Elena Garcia</h3>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(3) > .p-6 > .mb-2"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl font-bold mb-4\">Frequently Asked Questions</h2>",
                  "target": [
                    "section:nth-child(6) > .mb-12.text-center > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-4 text-center\">Upcoming Events</h3>",
                  "target": [
                    ".bg-blue-50.rounded-xl.p-6 > .text-center"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-4 text-center\">Scholarship Opportunities</h3>",
                  "target": [
                    ".bg-green-50 > .text-center"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-green-700\">Horizon Merit Scholarship</h4>",
                  "target": [
                    ".shadow-sm.p-4.bg-white:nth-child(1) > .text-green-700"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-green-700\">Community Leadership Award</h4>",
                  "target": [
                    ".shadow-sm.p-4.bg-white:nth-child(2) > .text-green-700"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-green-700\">STEM Excellence Grant</h4>",
                  "target": [
                    ".shadow-sm.p-4.bg-white:nth-child(3) > .text-green-700"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-4 text-center\">Student Life Highlights</h3>",
                  "target": [
                    ".bg-purple-50 > .text-center"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold\">Horizon Academy</h3>",
                  "target": [
                    ".space-x-3.items-center.flex > div > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-lg mb-4\">Quick Links</h4>",
                  "target": [
                    ".md\\:grid-cols-4 > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-lg mb-4\">Contact Information</h4>",
                  "target": [
                    ".md\\:grid-cols-4 > div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-lg mb-4\">Connect With Us</h4>",
                  "target": [
                    "div:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main class=\"container mx-auto px-6 py-16\">",
                  "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": "#1f2937",
                "bgColor": "#ffffff",
                "contrastRatio": 14.67,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.67"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<select class=\"bg-white text-gray-800 px-4 py-3 rounded-lg w-full sm:w-auto\">",
          "target": [
            ".text-gray-800.px-4.sm\\:w-auto"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select class=\"bg-white text-gray-800 px-4 py-3 rounded-lg w-full sm:w-auto\">",
          "target": [
            ".text-gray-800.px-4.sm\\:w-auto"
          ]
        }
      ]
    },
    {
      "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/60x60/ffffff/1a365d?text=HA\" alt=\"Horizon Academy Logo\" class=\"h-12 w-12 rounded-full border-2 border-white\">",
          "target": [
            ".justify-between.items-center.flex > .space-x-3.items-center.flex > .border-2.border-white[alt=\"Horizon Academy Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" placeholder=\"Enter your email\" class=\"w-full sm:w-80 px-4 py-3 rounded-lg text-gray-800\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"hover:text-blue-200 transition-colors\">Home</a>",
          "target": [
            ".hidden > .hover\\:text-blue-200.transition-colors: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=\"space-y-2 text-sm\">",
          "target": [
            "ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#\" class=\"hover:text-blue-200 transition-colors\">Admissions</a></li>",
          "target": [
            "li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/60x60/ffffff/1a365d?text=HA\" alt=\"Horizon Academy Logo\" class=\"h-12 w-12 rounded-full border-2 border-white\">",
          "target": [
            ".justify-between.items-center.flex > .space-x-3.items-center.flex > .border-2.border-white[alt=\"Horizon Academy 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": 49.7,
                "height": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (49.7px by 24px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"hover:text-blue-200 transition-colors\">Home</a>",
          "target": [
            ".hidden > .hover\\:text-blue-200.transition-colors: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": "18.0pt (24px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"hero-bg text-white\">",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h1 class=\"text-2xl font-bold\">Horizon Academy</h1>",
          "target": [
            "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": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all\">Schedule Campus Tour</a>",
                  "target": [
                    ".py-20 > .flex-col.sm\\:flex-row.justify-center > .hover\\:shadow-lg.transition-all.px-8"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all\">Schedule Campus Tour</a>",
          "target": [
            ".py-20 > .flex-col.sm\\:flex-row.justify-center > .hover\\:shadow-lg.transition-all.px-8"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all w-full sm:w-auto\">Get Started</button>",
                  "target": [
                    ".hover\\:shadow-lg.sm\\:w-auto.transition-all"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all w-full sm:w-auto\">Get Started</button>",
          "target": [
            ".hover\\:shadow-lg.sm\\:w-auto.transition-all"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Learn More</a>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(1) > .p-6 > .py-2.hover\\:shadow-md.accent-blue"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Learn More</a>",
          "target": [
            ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(1) > .p-6 > .py-2.hover\\:shadow-md.accent-blue"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Learn More</a>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(2) > .p-6 > .py-2.hover\\:shadow-md.accent-blue"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Learn More</a>",
          "target": [
            ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(2) > .p-6 > .py-2.hover\\:shadow-md.accent-blue"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Learn More</a>",
                  "target": [
                    ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(3) > .p-6 > .py-2.hover\\:shadow-md.accent-blue"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Learn More</a>",
          "target": [
            ".overflow-hidden.hover\\:shadow-xl.shadow-lg:nth-child(3) > .p-6 > .py-2.hover\\:shadow-md.accent-blue"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Contact Financial Aid Office</a>",
                  "target": [
                    ".px-8.hover\\:shadow-md.py-3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"accent-blue text-white px-8 py-3 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Contact Financial Aid Office</a>",
          "target": [
            ".px-8.hover\\:shadow-md.py-3"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#3182ce",
                "contrastRatio": 4.02,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Request Information</a>",
                  "target": [
                    "div:nth-child(4) > .py-2.hover\\:shadow-md.accent-blue"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"accent-blue text-white px-6 py-2 rounded-lg font-semibold inline-block hover:shadow-md transition-shadow\">Request Information</a>",
          "target": [
            "div:nth-child(4) > .py-2.hover\\:shadow-md.accent-blue"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #ffffff, background color: #3182ce, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "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 does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"bg-blue-600 p-2 rounded-full hover:bg-blue-500 transition-colors\">",
          "target": [
            ".bg-blue-600"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"bg-blue-800 p-2 rounded-full hover:bg-blue-700 transition-colors\">",
          "target": [
            ".bg-blue-800"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"bg-blue-700 p-2 rounded-full hover:bg-blue-600 transition-colors\">",
          "target": [
            ".bg-blue-700"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"bg-red-600 p-2 rounded-full hover:bg-red-500 transition-colors\">",
          "target": [
            ".bg-red-600"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        }
      ]
    },
    {
      "id": "select-name",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select class=\"bg-white text-gray-800 px-4 py-3 rounded-lg w-full sm:w-auto\">",
          "target": [
            ".text-gray-800.px-4.sm\\:w-auto"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select class=\"w-full p-3 border border-gray-300 rounded-lg\">",
          "target": [
            "div:nth-child(1) > .p-3.border.border-gray-300"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select class=\"w-full p-3 border border-gray-300 rounded-lg\">",
          "target": [
            "div:nth-child(2) > .p-3.border.border-gray-300"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select class=\"w-full p-3 border border-gray-300 rounded-lg\">",
          "target": [
            "div:nth-child(3) > .p-3.border.border-gray-300"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select class=\"w-full p-3 border border-gray-300 rounded-lg\">",
          "target": [
            "div:nth-child(4) > .p-3.border.border-gray-300"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5988
      },
      {
        "y": 576,
        "height": 5988
      },
      {
        "y": 1152,
        "height": 5988
      },
      {
        "y": 1728,
        "height": 5988
      },
      {
        "y": 2304,
        "height": 5988
      },
      {
        "y": 2880,
        "height": 5988
      },
      {
        "y": 3456,
        "height": 5988
      },
      {
        "y": 4032,
        "height": 5988
      },
      {
        "y": 4608,
        "height": 5988
      },
      {
        "y": 5184,
        "height": 5988
      },
      {
        "y": 5268,
        "height": 5988
      }
    ],
    "scans": 12,
    "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 "Education" 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: "Education"
- Description: Educational resources, school and university information, and online learning platforms.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Education" 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: "Admissions", "Student Portal", "About".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Education" category. Consider themes similar to: "Course Catalog", "Faculty Spotlight", "Research Excellence".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "graduation requirements", "prerequisites", "scholarship".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Contact Advisor", "Explore Programs", "Schedule Tour".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Education" sector. Ideas similar but not limited to: "tuition calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "scholarship opportunities", "faculty highlights", "alumni achievements".
-   **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.
← Back to Mistral Mistral Small 4 summary View all models for Education