Mistral Mistral Medium 3.5 – Non Profit Charity
via Mistral · Generated
- AIMAC Debt 19.53
- Cost $0.09
- Total Violations 36
- HTML Size 47 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
2 Critical 34 Serious
-
color-contrast serious 29 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p>Empowering Communities, Changing Lives</p> -
label critical 1 instance
Form elements must have labels
Example HTML
<input type="date" id="logger-date" required=""> -
link-name serious 5 instances
Links must have discernible text
Example HTML
<a href="#"><i class="fab fa-facebook-f"></i></a> -
select-name critical 1 instance
Select element must have an accessible name
Example HTML
<select id="logger-activity" required="">
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 Hope Foundation | Empowering Communities, Changing Lives</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #2a5c6a;
--secondary: #f8b400;
--light: #f8f9fa;
--dark: #212529;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--text: #333;
--text-light: #777;
--border: #dee2e6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
color: var(--text);
line-height: 1.6;
background-color: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
a {
text-decoration: none;
color: var(--primary);
transition: color 0.3s;
}
a:hover {
color: var(--secondary);
}
img {
max-width: 100%;
height: auto;
}
.btn {
display: inline-block;
padding: 10px 25px;
border-radius: 5px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: #1e4550;
}
.btn-secondary {
background-color: var(--secondary);
color: var(--dark);
}
.btn-secondary:hover {
background-color: #e0a000;
}
.btn-outline {
background-color: transparent;
border-color: var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background-color: var(--primary);
color: white;
}
/* Header */
.header {
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.top-bar {
background-color: var(--primary);
color: white;
padding: 8px 0;
font-size: 0.9rem;
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar a {
color: white;
}
.top-bar a:hover {
color: var(--secondary);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 50px;
margin-right: 15px;
}
.logo-text h1 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--primary);
margin-bottom: -5px;
}
.logo-text p {
font-size: 0.9rem;
color: var(--text-light);
}
.main-nav ul {
display: flex;
list-style: none;
}
.main-nav ul li {
margin-left: 25px;
}
.main-nav ul li a {
color: var(--dark);
font-weight: 500;
padding: 5px 0;
position: relative;
}
.main-nav ul li a:hover {
color: var(--secondary);
}
.main-nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: width 0.3s;
}
.main-nav ul li a:hover::after {
width: 100%;
}
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
color: var(--dark);
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://picsum.photos/1600/800?grayscale') no-repeat center center/cover;
color: white;
text-align: center;
padding: 120px 0 80px;
}
.hero h2 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
}
.hero p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 30px;
color: #e9ecef;
}
.hero .btn {
margin: 0 10px;
}
/* Main Content */
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 15px;
}
.section-title p {
max-width: 700px;
margin: 0 auto;
color: var(--text-light);
}
/* About Section */
.about {
background-color: #f8f9fa;
}
.about-content {
display: flex;
align-items: center;
gap: 40px;
}
.about-img {
flex: 1;
}
.about-img img {
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.about-text {
flex: 1;
}
.about-text h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--primary);
margin-bottom: 20px;
}
.about-text p {
margin-bottom: 15px;
}
.progress-bars {
margin-top: 30px;
}
.progress {
margin-bottom: 20px;
}
.progress-name {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.progress-bar {
height: 10px;
background-color: var(--border);
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--secondary);
border-radius: 5px;
}
/* Causes Section */
.causes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.cause-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.cause-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.cause-img {
height: 200px;
overflow: hidden;
}
.cause-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.cause-card:hover .cause-img img {
transform: scale(1.05);
}
.cause-content {
padding: 25px;
}
.cause-content h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 10px;
}
.cause-content p {
color: var(--text-light);
margin-bottom: 20px;
}
.cause-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
color: var(--text-light);
font-size: 0.9rem;
}
.cause-progress {
width: 100%;
height: 8px;
background-color: var(--border);
border-radius: 4px;
margin-bottom: 10px;
overflow: hidden;
}
.cause-progress-fill {
height: 100%;
background-color: var(--secondary);
border-radius: 4px;
}
/* Volunteer Section */
.volunteer {
background-color: #f8f9fa;
}
.volunteer-content {
display: flex;
align-items: center;
gap: 40px;
}
.volunteer-text {
flex: 1;
}
.volunteer-text h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--primary);
margin-bottom: 20px;
}
.volunteer-form {
flex: 1;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--border);
border-radius: 5px;
font-family: inherit;
font-size: 1rem;
}
.form-group textarea {
height: 120px;
resize: vertical;
}
/* Testimonials */
.testimonials {
background-color: var(--primary);
color: white;
}
.testimonials .section-title h2,
.testimonials .section-title p {
color: white;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.testimonial-card {
background-color: rgba(255,255,255,0.1);
padding: 30px;
border-radius: 10px;
backdrop-filter: blur(5px);
}
.testimonial-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.testimonial-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
margin-right: 20px;
border: 3px solid rgba(255,255,255,0.3);
}
.testimonial-name {
font-weight: 600;
margin-bottom: 5px;
}
.testimonial-role {
font-size: 0.9rem;
opacity: 0.8;
}
.testimonial-text {
font-style: italic;
line-height: 1.8;
}
/* Hour Logger */
.hour-logger {
background-color: #f8f9fa;
padding: 50px 0;
}
.logger-container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
text-align: center;
}
.logger-title {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--primary);
margin-bottom: 20px;
}
.logger-form {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.logger-form input {
flex: 1;
padding: 12px;
border: 1px solid var(--border);
border-radius: 5px;
font-family: inherit;
}
.logger-actions {
display: flex;
gap: 10px;
justify-content: center;
}
.logger-list {
margin-top: 30px;
text-align: left;
}
.logger-list h4 {
margin-bottom: 15px;
color: var(--primary);
}
.logger-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.logger-item:last-child {
border-bottom: none;
}
/* Footer */
.footer {
background-color: var(--dark);
color: white;
padding: 60px 0 20px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo img {
height: 40px;
margin-right: 10px;
}
.footer-logo h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
display: inline-block;
}
.footer-col h4 {
font-size: 1.1rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--secondary);
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: #adb5bd;
}
.footer-col ul li a:hover {
color: var(--secondary);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.1);
border-radius: 50%;
color: white;
transition: all 0.3s;
}
.social-links a:hover {
background-color: var(--secondary);
color: var(--dark);
transform: translateY(-3px);
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
color: #adb5bd;
font-size: 0.9rem;
}
/* Responsive */
@media (max-width: 992px) {
.about-content,
.volunteer-content {
flex-direction: column;
}
.about-img,
.volunteer-form {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: white;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
padding: 20px;
}
.main-nav.active {
display: block;
}
.main-nav ul {
flex-direction: column;
}
.main-nav ul li {
margin: 10px 0;
}
.mobile-menu-btn {
display: block;
}
.hero h2 {
font-size: 2.5rem;
}
.hero p {
font-size: 1rem;
}
.section-title h2 {
font-size: 2rem;
}
}
@media (max-width: 576px) {
.hero h2 {
font-size: 2rem;
}
.logger-form {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="top-bar">
<div class="container">
<div>
<a href="tel:+18001234567"><i class="fas fa-phone-alt"></i> +1 (800) 123-4567</a>
<span style="margin: 0 10px;">|</span>
<a href="mailto:info@horizonhope.org"><i class="fas fa-envelope"></i> info@horizonhope.org</a>
</div>
<div>
<a href="#"><i class="fas fa-user"></i> Volunteer Login</a>
<span style="margin: 0 10px;">|</span>
<a href="#"><i class="fas fa-heart"></i> Donor Portal</a>
</div>
</div>
</div>
<div class="container nav-container">
<div class="logo">
<img src="https://placehold.co/50x50/2a5c6a/f8b400?text=HH" alt="Horizon Hope Foundation Logo">
<div class="logo-text">
<h1>Horizon Hope</h1>
<p>Empowering Communities, Changing Lives</p>
</div>
</div>
<button class="mobile-menu-btn"><i class="fas fa-bars"></i></button>
<nav class="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#causes">Our Causes</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="#volunteer">Volunteer</a></li>
<li><a href="#donate" class="btn btn-secondary">Donate Now</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h2>Building a Brighter Future Together</h2>
<p>Join us in our mission to create sustainable change through education, healthcare, and community development initiatives. As a 501(c)(3) organization, we're committed to transparency, impact measurement, and lasting solutions.</p>
<div>
<a href="#donate" class="btn btn-secondary">Donate Now</a>
<a href="#volunteer" class="btn btn-outline" style="color: white; border-color: white;">Become a Volunteer</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="section about" id="about">
<div class="container">
<div class="section-title">
<h2>Our Mission & Impact</h2>
<p>Since our founding in 2005, Horizon Hope Foundation has been at the forefront of community transformation, touching thousands of lives through our comprehensive programs and initiatives.</p>
</div>
<div class="about-content">
<div class="about-img">
<img src="https://picsum.photos/600/400?grayscale&blur=1" alt="Community members working together">
</div>
<div class="about-text">
<h3>Empowering Through Action</h3>
<p>At Horizon Hope Foundation, we believe that lasting change begins with empowered communities. Our holistic approach combines direct aid with capacity-building initiatives to create sustainable solutions to poverty, inequality, and injustice.</p>
<p>With a 92% program expense ratio, we ensure that the vast majority of your donations directly support our programs. Our impact measurement framework tracks not just dollars raised, but lives changed - with over 50,000 individuals served last year alone.</p>
<p>As a platinum-rated non-profit by Charity Navigator, we maintain the highest standards of transparency and accountability in all our operations.</p>
<div class="progress-bars">
<div class="progress">
<div class="progress-name">
<span>Education Programs</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 85%;"></div>
</div>
</div>
<div class="progress">
<div class="progress-name">
<span>Healthcare Initiatives</span>
<span>72%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 72%;"></div>
</div>
</div>
<div class="progress">
<div class="progress-name">
<span>Community Development</span>
<span>65%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 65%;"></div>
</div>
</div>
</div>
<a href="#about" class="btn btn-primary" style="margin-top: 20px;">Learn More About Us</a>
</div>
</div>
</div>
</section>
<!-- Causes Section -->
<section class="section" id="causes">
<div class="container">
<div class="section-title">
<h2>Our Featured Causes</h2>
<p>Your support enables us to tackle the most pressing challenges in our communities. Explore our current initiatives and see how your contribution can make a direct impact.</p>
</div>
<div class="causes-grid">
<div class="cause-card">
<div class="cause-img">
<img src="https://picsum.photos/400/300?grayscale&blur=1" alt="Children in classroom">
</div>
<div class="cause-content">
<h3>Education for All</h3>
<p>Providing quality education and scholarships to underprivileged children, with a focus on STEM programs and digital literacy.</p>
<div class="cause-meta">
<span><i class="fas fa-map-marker-alt"></i> 5 Countries</span>
<span><i class="fas fa-users"></i> 2,500+ Beneficiaries</span>
</div>
<div class="cause-progress">
<div class="cause-progress-fill" style="width: 60%;"></div>
</div>
<p><strong>$120,000</strong> raised of <strong>$200,000</strong> goal</p>
<a href="#" class="btn btn-primary btn-block">Support This Cause</a>
</div>
</div>
<div class="cause-card">
<div class="cause-img">
<img src="https://picsum.photos/400/300?grayscale&blur=2" alt="Medical professionals at work">
</div>
<div class="cause-content">
<h3>Healthcare Access</h3>
<p>Building and equipping medical clinics in rural areas, providing free health screenings and essential medications.</p>
<div class="cause-meta">
<span><i class="fas fa-heartbeat"></i> 12 Clinics</span>
<span><i class="fas fa-user-md"></i> 50+ Medical Staff</span>
</div>
<div class="cause-progress">
<div class="cause-progress-fill" style="width: 45%;"></div>
</div>
<p><strong>$85,000</strong> raised of <strong>$180,000</strong> goal</p>
<a href="#" class="btn btn-primary btn-block">Support This Cause</a>
</div>
</div>
<div class="cause-card">
<div class="cause-img">
<img src="https://picsum.photos/400/300?grayscale&blur=3" alt="Community garden">
</div>
<div class="cause-content">
<h3>Sustainable Communities</h3>
<p>Developing eco-friendly housing, clean water systems, and sustainable agriculture programs to empower communities.</p>
<div class="cause-meta">
<span><i class="fas fa-home"></i> 8 Villages</span>
<span><i class="fas fa-tint"></i> 15 Water Wells</span>
</div>
<div class="cause-progress">
<div class="cause-progress-fill" style="width: 75%;"></div>
</div>
<p><strong>$150,000</strong> raised of <strong>$200,000</strong> goal</p>
<a href="#" class="btn btn-primary btn-block">Support This Cause</a>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 40px;">
<a href="#" class="btn btn-outline">View All Causes</a>
</div>
</div>
</section>
<!-- Volunteer Section -->
<section class="section volunteer" id="volunteer">
<div class="container">
<div class="section-title">
<h2>Join Our Volunteer Network</h2>
<p>With over 5,000 active volunteers contributing more than 100,000 hours annually, our volunteer program is the heart of our organization. Whether you can give a few hours a week or a few weeks a year, your time and skills can make a world of difference.</p>
</div>
<div class="volunteer-content">
<div class="volunteer-text">
<h3>Why Volunteer With Us?</h3>
<p>At Horizon Hope, we believe that volunteering is a two-way street. While you're making a difference in the lives of others, you'll also gain:</p>
<ul style="margin: 20px 0; padding-left: 20px;">
<li>Professional development and skill-building opportunities</li>
<li>Networking with like-minded individuals and professionals</li>
<li>Cultural immersion and global perspective</li>
<li>Personal growth and a sense of purpose</li>
<li>Exclusive volunteer appreciation events and recognition</li>
</ul>
<p>We offer both local and international volunteer opportunities, with flexible schedules to accommodate your availability. All volunteers receive comprehensive training and ongoing support from our dedicated volunteer coordination team.</p>
<div style="margin-top: 30px;">
<a href="#" class="btn btn-primary">Browse Opportunities</a>
<a href="#" class="btn btn-outline" style="margin-left: 15px;">Volunteer FAQs</a>
</div>
</div>
<div class="volunteer-form">
<h3>Quick Sign-Up</h3>
<p>Ready to make a difference? Fill out this form and our volunteer coordinator will contact you within 48 hours.</p>
<form>
<div class="form-group">
<label for="vol-name">Full Name</label>
<input type="text" id="vol-name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="vol-email">Email Address</label>
<input type="email" id="vol-email" placeholder="john@example.com" required>
</div>
<div class="form-group">
<label for="vol-phone">Phone Number</label>
<input type="tel" id="vol-phone" placeholder="+1 (555) 123-4567">
</div>
<div class="form-group">
<label for="vol-interest">Area of Interest</label>
<select id="vol-interest" required>
<option value="" disabled selected>Select an option</option>
<option value="education">Education & Mentoring</option>
<option value="healthcare">Healthcare Support</option>
<option value="construction">Construction & Development</option>
<option value="admin">Administrative Support</option>
<option value="events">Event Planning</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="vol-availability">Availability</label>
<select id="vol-availability" required>
<option value="" disabled selected>Select an option</option>
<option value="weekdays">Weekdays</option>
<option value="weekends">Weekends</option>
<option value="evenings">Evenings</option>
<option value="flexible">Flexible</option>
</select>
</div>
<div class="form-group">
<label for="vol-message">Tell us about yourself</label>
<textarea id="vol-message" placeholder="Your skills, experience, and why you want to volunteer..."></textarea>
</div>
<button type="submit" class="btn btn-secondary">Submit Application</button>
</form>
</div>
</div>
</div>
</section>
<!-- Hour Logger -->
<section class="hour-logger">
<div class="container">
<div class="logger-container">
<h3 class="logger-title">Volunteer Hour Logger</h3>
<p>Track your volunteer hours to help us measure our collective impact. Your logged hours contribute to our annual impact reports and help us secure grants and funding.</p>
<div class="logger-form">
<input type="date" id="logger-date" required>
<input type="number" id="logger-hours" placeholder="Hours" min="0.5" max="24" step="0.5" required>
<select id="logger-activity" required>
<option value="" disabled selected>Activity</option>
<option value="education">Education</option>
<option value="healthcare">Healthcare</option>
<option value="construction">Construction</option>
<option value="admin">Admin</option>
<option value="events">Events</option>
</select>
</div>
<div class="logger-actions">
<button class="btn btn-primary" onclick="addHourEntry()">Add Entry</button>
<button class="btn btn-outline" onclick="clearHourEntries()">Clear All</button>
</div>
<div class="logger-list">
<h4>Your Logged Hours</h4>
<div id="hour-entries">
<!-- Entries will be added here dynamically -->
</div>
<p style="margin-top: 15px; font-weight: 600;">Total Hours: <span id="total-hours">0</span></p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section testimonials">
<div class="container">
<div class="section-title">
<h2>Voices of Impact</h2>
<p>Hear from those whose lives have been changed through our programs, and from the generous donors and volunteers who make our work possible.</p>
</div>
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="testimonial-header">
<img src="https://i.pravatar.cc/70?u=maria" alt="Maria S." class="testimonial-avatar">
<div>
<div class="testimonial-name">Maria S.</div>
<div class="testimonial-role">Scholarship Recipient, Guatemala</div>
</div>
</div>
<div class="testimonial-text">
"Thanks to Horizon Hope's education program, I'm the first person in my family to attend university. The scholarship didn't just pay for my tuition - it gave me the confidence to dream big. Now I'm studying to become a teacher so I can give back to my community."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-header">
<img src="https://i.pravatar.cc/70?u=james" alt="James K." class="testimonial-avatar">
<div>
<div class="testimonial-name">James K.</div>
<div class="testimonial-role">Volunteer, USA</div>
</div>
</div>
<div class="testimonial-text">
"Volunteering with Horizon Hope in Kenya was a life-changing experience. Building a school alongside community members taught me more about resilience and community than any book could. The organization's commitment to sustainable solutions is truly inspiring."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-header">
<img src="https://i.pravatar.cc/70?u=sarah" alt="Sarah L." class="testimonial-avatar">
<div>
<div class="testimonial-name">Sarah L.</div>
<div class="testimonial-role">Monthly Donor, Canada</div>
</div>
</div>
<div class="testimonial-text">
"I've been donating to Horizon Hope for five years, and what keeps me coming back is their transparency. I love receiving updates on exactly how my donations are being used and the impact they're making. Knowing that 92% of my contribution goes directly to programs gives me confidence in my giving."
</div>
</div>
</div>
</div>
</section>
<!-- Partners Section -->
<section class="section" id="partners">
<div class="container">
<div class="section-title">
<h2>Our Valued Partners</h2>
<p>We're proud to collaborate with these organizations who share our commitment to creating positive change. Through strategic partnerships, we amplify our impact and reach more communities in need.</p>
</div>
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 30px;">
<img src="https://placehold.co/200x100/ffffff/2a5c6a?text=Global+Health" alt="Global Health Partners" style="max-height: 80px;">
<img src="https://placehold.co/200x100/ffffff/2a5c6a?text=Edu+First" alt="Education First Initiative" style="max-height: 80px;">
<img src="https://placehold.co/200x100/ffffff/2a5c6a?text=Green+Earth" alt="Green Earth Foundation" style="max-height: 80px;">
<img src="https://placehold.co/200x100/ffffff/2a5c6a?text=Tech4Good" alt="Tech for Good" style="max-height: 80px;">
<img src="https://placehold.co/200x100/ffffff/2a5c6a?text=Unity+Bank" alt="Unity Bank" style="max-height: 80px;">
</div>
<div style="text-align: center; margin-top: 40px;">
<a href="#" class="btn btn-outline">Learn About Partnerships</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<div class="footer-logo">
<img src="https://placehold.co/50x50/ffffff/f8b400?text=HH" alt="Horizon Hope Foundation Logo">
<h3>Horizon Hope</h3>
</div>
<p>Empowering communities and changing lives through sustainable development programs, healthcare initiatives, and educational opportunities.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#causes">Our Causes</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#">Impact Reports</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Get Involved</h4>
<ul>
<li><a href="#volunteer">Volunteer</a></li>
<li><a href="#donate">Donate</a></li>
<li><a href="#">Fundraise</a></li>
<li><a href="#">Advocate</a></li>
<li><a href="#">Corporate Partnerships</a></li>
<li><a href="#">Planned Giving</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact Us</h4>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 123 Hope Street, Suite 456</li>
<li style="margin-left: 23px;">New York, NY 10001</li>
<li><i class="fas fa-phone-alt"></i> +1 (800) 123-4567</li>
<li><i class="fas fa-envelope"></i> info@horizonhope.org</li>
<li><i class="fas fa-fax"></i> +1 (800) 123-4568</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Horizon Hope Foundation. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">Non-Discrimination Policy</a></p>
<p style="margin-top: 10px;">Horizon Hope Foundation is a registered 501(c)(3) non-profit organization. EIN: 12-3456789</p>
</div>
</div>
</footer>
<!-- Donation Modal (Hidden by default) -->
<div id="donation-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 2000; justify-content: center; align-items: center;">
<div style="background-color: white; padding: 40px; border-radius: 10px; max-width: 500px; width: 90%; position: relative;">
<button onclick="closeDonationModal()" style="position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; cursor: pointer;">×</button>
<h2 style="font-family: 'Playfair Display', serif; color: var(--primary); margin-bottom: 20px;">Make a Donation</h2>
<p style="margin-bottom: 20px;">Your generous donation will help us continue our mission to empower communities and change lives.</p>
<form>
<div class="form-group">
<label for="donation-amount">Donation Amount</label>
<select id="donation-amount" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 5px;">
<option value="50">$50</option>
<option value="100" selected>$100</option>
<option value="250">$250</option>
<option value="500">$500</option>
<option value="1000">$1,000</option>
<option value="custom">Custom Amount</option>
</select>
</div>
<div class="form-group" id="custom-amount-group" style="display: none;">
<label for="custom-donation-amount">Custom Amount</label>
<input type="number" id="custom-donation-amount" placeholder="$" min="1" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 5px;">
</div>
<div class="form-group">
<label for="donation-frequency">Frequency</label>
<select id="donation-frequency" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 5px;">
<option value="one-time">One Time</option>
<option value="monthly">Monthly</option>
<option value="quarterly">Quarterly</option>
<option value="annual">Annual</option>
</select>
</div>
<div class="form-group">
<label for="donation-cause">Designate to a Cause (Optional)</label>
<select id="donation-cause" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 5px;">
<option value="general" selected>General Fund (Most Needed)</option>
<option value="education">Education Programs</option>
<option value="healthcare">Healthcare Initiatives</option>
<option value="community">Community Development</option>
</select>
</div>
<button type="button" class="btn btn-secondary" style="width: 100%; margin-top: 20px;">Continue to Payment</button>
</form>
</div>
</div>
<script>
// Mobile menu toggle
document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
document.querySelector('.main-nav').classList.toggle('active');
});
// Donation modal
document.querySelectorAll('a[href="#donate"]').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('donation-modal').style.display = 'flex';
});
});
function closeDonationModal() {
document.getElementById('donation-modal').style.display = 'none';
}
// Custom donation amount
document.getElementById('donation-amount').addEventListener('change', function() {
if (this.value === 'custom') {
document.getElementById('custom-amount-group').style.display = 'block';
} else {
document.getElementById('custom-amount-group').style.display = 'none';
}
});
// Hour logger functionality
let hourEntries = [];
let totalHours = 0;
function addHourEntry() {
const date = document.getElementById('logger-date').value;
const hours = parseFloat(document.getElementById('logger-hours').value);
const activity = document.getElementById('logger-activity').value;
if (!date || isNaN(hours) || !activity) {
alert('Please fill in all fields with valid values.');
return;
}
const entry = { date, hours, activity };
hourEntries.push(entry);
totalHours += hours;
updateHourLogger();
resetHourForm();
}
function clearHourEntries() {
if (confirm('Are you sure you want to clear all entries?')) {
hourEntries = [];
totalHours = 0;
updateHourLogger();
}
}
function updateHourLogger() {
const entriesContainer = document.getElementById('hour-entries');
entriesContainer.innerHTML = '';
hourEntries.forEach(entry => {
const entryElement = document.createElement('div');
entryElement.className = 'logger-item';
entryElement.innerHTML = `
<span>${entry.date} - ${getActivityName(entry.activity)}</span>
<span>${entry.hours} hours</span>
`;
entriesContainer.appendChild(entryElement);
});
document.getElementById('total-hours').textContent = totalHours.toFixed(1);
}
function resetHourForm() {
document.getElementById('logger-date').value = '';
document.getElementById('logger-hours').value = '';
document.getElementById('logger-activity').selectedIndex = 0;
}
function getActivityName(value) {
const activities = {
'education': 'Education',
'healthcare': 'Healthcare',
'construction': 'Construction',
'admin': 'Admin',
'events': 'Events'
};
return activities[value] || value;
}
// Close modal when clicking outside
document.getElementById('donation-modal').addEventListener('click', function(e) {
if (e.target === this) {
closeDonationModal();
}
});
</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:42:18.144Z",
"url": "https://benchmark.aimac.invalid/a9207953a5760f42a79388af0c3427c215cfe14bbe9fd665c233cd3313d476ee.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": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "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>",
"target": [
"body"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span style=\"margin: 0 10px;\">|</span>",
"target": [
".container > div:nth-child(1) > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\" class=\"btn btn-secondary\">Submit Application</button>",
"target": [
"button[type=\"submit\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Horizon Hope</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Building a Brighter Future Together</h2>",
"target": [
".container > h2"
]
},
{
"html": "<h2>Our Mission & Impact</h2>",
"target": [
"#about > .container > .section-title > h2"
]
},
{
"html": "<h3>Empowering Through Action</h3>",
"target": [
".about-text > h3"
]
},
{
"html": "<h2>Our Featured Causes</h2>",
"target": [
"#causes > .container > .section-title > h2"
]
},
{
"html": "<h3>Education for All</h3>",
"target": [
".cause-card:nth-child(1) > .cause-content > h3"
]
},
{
"html": "<h3>Healthcare Access</h3>",
"target": [
".cause-card:nth-child(2) > .cause-content > h3"
]
},
{
"html": "<h3>Sustainable Communities</h3>",
"target": [
".cause-card:nth-child(3) > .cause-content > h3"
]
},
{
"html": "<h2>Join Our Volunteer Network</h2>",
"target": [
"#volunteer > .container > .section-title > h2"
]
},
{
"html": "<h3>Why Volunteer With Us?</h3>",
"target": [
".volunteer-text > h3"
]
},
{
"html": "<h3>Quick Sign-Up</h3>",
"target": [
".volunteer-form > h3"
]
},
{
"html": "<h3 class=\"logger-title\">Volunteer Hour Logger</h3>",
"target": [
".logger-title"
]
},
{
"html": "<h4>Your Logged Hours</h4>",
"target": [
".logger-list > h4"
]
},
{
"html": "<h2>Voices of Impact</h2>",
"target": [
".testimonials > .container > .section-title > h2"
]
},
{
"html": "<h2>Our Valued Partners</h2>",
"target": [
"#partners > .container > .section-title > h2"
]
},
{
"html": "<h3>Horizon Hope</h3>",
"target": [
".footer-logo > h3"
]
},
{
"html": "<h4>Quick Links</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Get Involved</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact Us</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#2a5c6a",
"contrastRatio": 7.4,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 7.4"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"tel:+18001234567\"><i class=\"fas fa-phone-alt\"></i> +1 (800) 123-4567</a>",
"target": [
"a[href=\"tel:+18001234567\"]"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "vol-name",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<input type=\"text\" id=\"vol-name\" placeholder=\"John Doe\" required=\"\">",
"target": [
"#vol-name"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"vol-name\">Full Name</label>",
"target": [
"label[for=\"vol-name\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"vol-name\" placeholder=\"John Doe\" required=\"\">",
"target": [
"#vol-name"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/50x50/2a5c6a/f8b400?text=HH\" alt=\"Horizon Hope Foundation Logo\">",
"target": [
".logo > img[alt=\"Horizon Hope Foundation Logo\"]"
]
}
]
},
{
"id": "label",
"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 every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Full Name"
},
"relatedNodes": [
{
"html": "<label for=\"vol-name\">Full Name</label>",
"target": [
"label[for=\"vol-name\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"vol-name\" placeholder=\"John Doe\" required=\"\">",
"target": [
"#vol-name"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": null,
"relatedNodes": [
{
"html": "<p>\u00a9 2023 Horizon Hope Foundation. All Rights Reserved. | <a href=\"#\">Privacy Policy</a> | <a href=\"#\">Terms of Service</a> | <a href=\"#\">Non-Discrimination Policy</a></p>",
"target": [
"p:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\">Privacy Policy</a>",
"target": [
"p:nth-child(1) > a[href=\"#\"]:nth-child(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 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=\"tel:+18001234567\"><i class=\"fas fa-phone-alt\"></i> +1 (800) 123-4567</a>",
"target": [
"a[href=\"tel:+18001234567\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
"nav > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#home\">Home</a></li>",
"target": [
"nav > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/50x50/2a5c6a/f8b400?text=HH\" alt=\"Horizon Hope Foundation Logo\">",
"target": [
".logo > img[alt=\"Horizon Hope Foundation Logo\"]"
]
}
]
},
{
"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": "explicit-label",
"data": {
"explicitLabel": "Area of Interest"
},
"relatedNodes": [
{
"html": "<label for=\"vol-interest\">Area of Interest</label>",
"target": [
"label[for=\"vol-interest\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"vol-interest\" required=\"\">",
"target": [
"#vol-interest"
]
}
]
},
{
"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.9,
"height": 29
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (49.9px by 29px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#home\">Home</a>",
"target": [
"nav > ul > li:nth-child(1) > a[href$=\"#home\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "36.0pt (48px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h2>Building a Brighter Future Together</h2>",
"target": [
".container > h2"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"header\">",
"target": [
"header"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Empowering Communities, Changing Lives</p>",
"target": [
".logo-text > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#f8f9fa",
"contrastRatio": 4.24,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section about\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.24 (foreground color: #777777, background color: #f8f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Since our founding in 2005, Horizon Hope Foundation has been at the forefront of community transformation, touching thousands of lives through our comprehensive programs and initiatives.</p>",
"target": [
"#about > .container > .section-title > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.24 (foreground color: #777777, background color: #f8f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Your support enables us to tackle the most pressing challenges in our communities. Explore our current initiatives and see how your contribution can make a direct impact.</p>",
"target": [
"#causes > .container > .section-title > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Providing quality education and scholarships to underprivileged children, with a focus on STEM programs and digital literacy.</p>",
"target": [
".cause-card:nth-child(1) > .cause-content > p:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><i class=\"fas fa-map-marker-alt\"></i> 5 Countries</span>",
"target": [
".cause-card:nth-child(1) > .cause-content > .cause-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><i class=\"fas fa-users\"></i> 2,500+ Beneficiaries</span>",
"target": [
".cause-card:nth-child(1) > .cause-content > .cause-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p><strong>$120,000</strong> raised of <strong>$200,000</strong> goal</p>",
"target": [
".cause-card:nth-child(1) > .cause-content > p:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>$120,000</strong>",
"target": [
".cause-card:nth-child(1) > .cause-content > p:nth-child(5) > strong:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>$200,000</strong>",
"target": [
".cause-card:nth-child(1) > .cause-content > p:nth-child(5) > strong:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Building and equipping medical clinics in rural areas, providing free health screenings and essential medications.</p>",
"target": [
".cause-card:nth-child(2) > .cause-content > p:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><i class=\"fas fa-heartbeat\"></i> 12 Clinics</span>",
"target": [
".cause-card:nth-child(2) > .cause-content > .cause-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><i class=\"fas fa-user-md\"></i> 50+ Medical Staff</span>",
"target": [
".cause-card:nth-child(2) > .cause-content > .cause-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p><strong>$85,000</strong> raised of <strong>$180,000</strong> goal</p>",
"target": [
".cause-card:nth-child(2) > .cause-content > p:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>$85,000</strong>",
"target": [
".cause-card:nth-child(2) > .cause-content > p:nth-child(5) > strong:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>$180,000</strong>",
"target": [
".cause-card:nth-child(2) > .cause-content > p:nth-child(5) > strong:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Developing eco-friendly housing, clean water systems, and sustainable agriculture programs to empower communities.</p>",
"target": [
".cause-card:nth-child(3) > .cause-content > p:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><i class=\"fas fa-home\"></i> 8 Villages</span>",
"target": [
".cause-card:nth-child(3) > .cause-content > .cause-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><i class=\"fas fa-tint\"></i> 15 Water Wells</span>",
"target": [
".cause-card:nth-child(3) > .cause-content > .cause-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p><strong>$150,000</strong> raised of <strong>$200,000</strong> goal</p>",
"target": [
".cause-card:nth-child(3) > .cause-content > p:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>$150,000</strong>",
"target": [
".cause-card:nth-child(3) > .cause-content > p:nth-child(5) > strong:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"cause-card\">",
"target": [
".cause-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>$200,000</strong>",
"target": [
".cause-card:nth-child(3) > .cause-content > p:nth-child(5) > strong:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#f8f9fa",
"contrastRatio": 4.24,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section volunteer\" id=\"volunteer\">",
"target": [
"#volunteer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.24 (foreground color: #777777, background color: #f8f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>With over 5,000 active volunteers contributing more than 100,000 hours annually, our volunteer program is the heart of our organization. Whether you can give a few hours a week or a few weeks a year, your time and skills can make a world of difference.</p>",
"target": [
"#volunteer > .container > .section-title > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.24 (foreground color: #777777, background color: #f8f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9e2e4",
"bgColor": "#3f6c79",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(1)"
]
},
{
"html": "<section class=\"section testimonials\">",
"target": [
".testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #d9e2e4, background color: #3f6c79, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"testimonial-role\">Scholarship Recipient, Guatemala</div>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-header > div > .testimonial-role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #d9e2e4, background color: #3f6c79, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9e2e4",
"bgColor": "#3f6c79",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(2)"
]
},
{
"html": "<section class=\"section testimonials\">",
"target": [
".testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #d9e2e4, background color: #3f6c79, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"testimonial-role\">Volunteer, USA</div>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-header > div > .testimonial-role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #d9e2e4, background color: #3f6c79, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9e2e4",
"bgColor": "#3f6c79",
"contrastRatio": 4.39,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(3)"
]
},
{
"html": "<section class=\"section testimonials\">",
"target": [
".testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #d9e2e4, background color: #3f6c79, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"testimonial-role\">Monthly Donor, Canada</div>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-header > div > .testimonial-role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #d9e2e4, background color: #3f6c79, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#777777",
"bgColor": "#ffffff",
"contrastRatio": 4.47,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>We're proud to collaborate with these organizations who share our commitment to creating positive change. Through strategic partnerships, we amplify our impact and reach more communities in need.</p>",
"target": [
"#partners > .container > .section-title > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #777777, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2a5c6a",
"bgColor": "#212529",
"contrastRatio": 2.08,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.08 (foreground color: #2a5c6a, background color: #212529, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Privacy Policy</a>",
"target": [
"p:nth-child(1) > a[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.08 (foreground color: #2a5c6a, background color: #212529, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2a5c6a",
"bgColor": "#212529",
"contrastRatio": 2.08,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.08 (foreground color: #2a5c6a, background color: #212529, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Terms of Service</a>",
"target": [
"p:nth-child(1) > a[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.08 (foreground color: #2a5c6a, background color: #212529, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2a5c6a",
"bgColor": "#212529",
"contrastRatio": 2.08,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.08 (foreground color: #2a5c6a, background color: #212529, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Non-Discrimination Policy</a>",
"target": [
"p:nth-child(1) > a[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.08 (foreground color: #2a5c6a, background color: #212529, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "label",
"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 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": "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": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder 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": "<input type=\"date\" id=\"logger-date\" required=\"\">",
"target": [
"#logger-date"
],
"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 has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"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=\"#\"><i class=\"fab fa-facebook-f\"></i></a>",
"target": [
".social-links > a[href=\"#\"]:nth-child(1)"
],
"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=\"#\"><i class=\"fab fa-twitter\"></i></a>",
"target": [
".social-links > a[href=\"#\"]:nth-child(2)"
],
"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=\"#\"><i class=\"fab fa-instagram\"></i></a>",
"target": [
".social-links > a[href=\"#\"]:nth-child(3)"
],
"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=\"#\"><i class=\"fab fa-linkedin-in\"></i></a>",
"target": [
"a[href=\"#\"]:nth-child(4)"
],
"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=\"#\"><i class=\"fab fa-youtube\"></i></a>",
"target": [
"a[href=\"#\"]:nth-child(5)"
],
"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 id=\"logger-activity\" required=\"\">",
"target": [
"#logger-activity"
],
"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": 6123
},
{
"y": 576,
"height": 6123
},
{
"y": 1152,
"height": 6123
},
{
"y": 1728,
"height": 6123
},
{
"y": 2304,
"height": 6123
},
{
"y": 2880,
"height": 6123
},
{
"y": 3456,
"height": 6123
},
{
"y": 4032,
"height": 6123
},
{
"y": 4608,
"height": 6123
},
{
"y": 5184,
"height": 6123
},
{
"y": 5403,
"height": 6123
}
],
"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 "Non-Profit/Charity" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Non-Profit/Charity"
- Description: Charitable organizations, non-profit initiatives, volunteering, and fundraising resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Non-Profit/Charity" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Partners", "Donate", "Volunteer".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Non-Profit/Charity" category. Consider themes similar to: "Advocacy Initiatives", "Volunteer Opportunities", "Community Programs".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "impact measurement", "501(c)(3) status", "volunteer hours".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Give Now", "Register", "Start Giving".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Non-Profit/Charity" sector. Ideas similar but not limited to: "volunteer hour logger".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "partner highlights", "volunteer spotlights", "upcoming fundraisers".
- **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.