NVIDIA Nemotron 3.5 Super VL – Society

via Crusoe · Generated

  • AIMAC Debt 3.71
  • Cost $0.005
  • Total Violations 6
  • HTML Size 30 KB
  • Em Dashes 2

Screenshot

View NVIDIA Nemotron 3.5 Super VL Society page View Live Page

Accessibility Issues Found

6 Serious

  • color-contrast serious 6 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <h2 id="stories-title">Voices of Impact</h2>

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>Common Ground Collective | Advocacy, Inclusion & Social Justice</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
<style>
  :root {
    --primary: #0f4c5c;
    --primary-dark: #0b3a46;
    --accent: #e36414;
    --accent-soft: #fdeeda;
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius: 10px;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
  }

  h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }
  a { text-decoration: none; color: inherit; transition: color 0.2s; }
  ul { list-style: none; }

  img { max-width: 100%; display: block; border-radius: var(--radius); }

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

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .logo {
    width: 200px;
    height: auto;
    border-radius: 0;
  }

  .tagline {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .nav-links {
    display: flex;
    gap: 1.75rem;
  }

  .nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
  }

  .nav-links a:hover { color: var(--primary); }

  .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; font-size: 1.5rem; }

  /* Hero */
  .hero {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) brightness(0.55);
  }

  .hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--surface);
    margin-bottom: 1.5rem;
    line-height: 1.15;
    font-weight: 900;
  }

  .hero p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2.25rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, color 0.2s;
    border: none;
  }

  .btn-primary {
    background: var(--primary);
    color: #fff;
  }
  .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

  .btn-outline {
    background: transparent;
    color: var(--surface);
    border: 2px solid rgba(255,255,255,0.5);
  }
  .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

  .btn-accent {
    background: var(--accent);
    color: #fff;
  }
  .btn-accent:hover { background: #d95a10; transform: translateY(-1px); }

  /* Section Header */
  .section { padding: 5rem 0; }
  .section-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; }
  .section-header h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--primary);
    margin-bottom: 1rem;
  }
  .section-header p { color: var(--text-muted); font-size: 1.1rem; }

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

  .feature-card {
    background: var(--surface);
    padding: 2.25rem 1.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
  }

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

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

  .feature-card p { font-size: 0.95rem; color: var(--text-muted); }

  .feature-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
  }

  /* Stories */
  .stories-bg { background: var(--primary); }
  .stories .section-header h2 { color: var(--surface); }
  .stories .section-header p { color: rgba(255,255,255,0.8); }

  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
  }

  .testimonial-card {
    background: rgba(255,255,255,0.92);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }

  .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--surface);
  }

  .testimonial-card blockquote {
    font-style: italic;
    color: var(--text);
    margin-bottom: 1.25rem;
    font-size: 1rem;
  }

  .testimonial-card cite {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
  }
  .testimonial-card cite span { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-muted); font-style: normal; }

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

  .issue-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
  }

  .issue-card:hover { transform: translateY(-4px); }

  .issue-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }

  .issue-body { padding: 1.5rem; }
  .issue-body h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--primary); }
  .issue-body p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.25rem; }

  /* Action Section */
  .action-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  .petition-form {
    background: var(--surface);
    padding: 2.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .petition-form h2 { font-size: 1.75rem; margin-bottom: 1rem; color: var(--primary); }
  .petition-form p { color: var(--text-muted); margin-bottom: 1.5rem; }

  .form-group { margin-bottom: 1.25rem; }
  .form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); }
  .form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
  }
  .form-group input:focus { outline: 2px solid var(--primary); border-color: transparent; }

  .petition-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  #signature-count { font-size: 1.5rem; font-weight: 700; color: var(--primary); }

  #signatures-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 1rem;
    padding-right: 0.5rem;
    font-size: 0.85rem;
  }
  #signatures-list li { padding: 0.4rem 0; border-bottom: 1px solid #f1f5f9; }

  .action-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .sidebar-card {
    background: var(--accent-soft);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid #fcd5b7;
  }

  .sidebar-card h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
  }
  .sidebar-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }

  .partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .partner-logos img {
    height: 40px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 4px;
  }
  .partner-logos img:hover { opacity: 1; }

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

  .news-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

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

  .news-body { padding: 1.5rem; }
  .news-body time { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
  .news-body h3 { font-size: 1.15rem; margin-bottom: 0.75rem; color: var(--text); }
  .news-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }

  /* FAQ */
  .faq { background: var(--bg); }
  .accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

  details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s;
  }

  details[open] { border-color: var(--primary); box-shadow: var(--shadow); }

  summary {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary);
    list-style: none;
    outline: none;
  }
  summary::-webkit-details-marker { display: none; }

  details p { margin-top: 0.75rem; font-size: 0.95rem; color: var(--text-muted); }

  /* Footer */
  footer {
    background: var(--primary);
    color: #fff;
    padding: 4rem 0 2rem;
    margin-top: 2rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .footer-brand img {
    width: 200px;
    margin-bottom: 1rem;
    border-radius: 0;
  }

  .footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.95rem; max-width: 300px; }

  .footer-col h4 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 1.25rem; color: #fff; }
  .footer-col ul li { margin-bottom: 0.75rem; }
  .footer-col ul li a { color: rgba(255,255,255,0.7); font-size: 0.95rem; }
  .footer-col ul li a:hover { color: #fff; }

  .socials { display: flex; gap: 1rem; margin-top: 1rem; }
  .socials a {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
  }
  .socials a:hover { background: var(--accent); }

  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
  }

  .footer-bottom a { color: rgba(255,255,255,0.7); margin-left: 1rem; }
  .footer-bottom a:hover { color: #fff; }

  /* Responsive */
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .action-wrapper { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 600px) {
    .hero-actions { flex-direction: column; align-items: center; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.2rem; }
  }
</style>
</head>
<body>

<header class="site-header">
  <div class="container header-inner">
    <div class="brand">
      <img src="https://placehold.co/260x70/0f4c5c/ffffff?text=Common+Ground+Collective&font=playfair%20display" alt="Common Ground Collective Logo" class="logo">
      <div class="tagline">Advocacy &bull; Inclusion &bull; Collective Action</div>
    </div>
    <nav>
      <a href="#" class="nav-links">Home</a>
      <a href="#about" class="nav-links">About</a>
      <a href="#issues" class="nav-links">Issues</a>
      <a href="#events" class="nav-links">Events</a>
      <a href="#volunteer" class="nav-links">Volunteer</a>
      <a href="#news" class="nav-links">News</a>
      <a href="#contact" class="nav-links">Contact</a>
    </nav>
    <button class="mobile-menu-btn" aria-label="Toggle menu">&#9776;</button>
  </div>
</header>

<main>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-bg">
      <img src="https://picsum.photos/1600/800?image=1068" alt="Diverse community gathering">
    </div>
    <div class="container hero-content">
      <h1>Building a Society Where Everyone Belongs</h1>
      <p>Common Ground Collective is a nonprofit advocacy organization dedicated to advancing social justice, cultural equity, and grassroots empowerment across communities nationwide. We believe that lasting change is built through inclusive dialogue, bold policy reform, and the relentless energy of ordinary people coming together for extraordinary causes.</p>
      <div class="hero-actions">
        <a href="#volunteer" class="btn btn-primary">Stand With Us</a>
        <a href="#about" class="btn btn-outline">Learn More</a>
      </div>
    </div>
  </section>

  <!-- FEATURES -->
  <section id="about" class="section features" aria-labelledby="features-title">
    <div class="container">
      <div class="section-header">
        <h2 id="features-title">How We Create Change</h2>
        <p>Our approach combines direct community organizing with strategic policy advocacy and cultural storytelling to shift both systems and hearts.</p>
      </div>
      <div class="feature-grid">
        <article class="feature-card">
          <img src="https://picsum.photos/600/400?image=1015" alt="Community organizing" class="feature-img">
          <h3>Grassroots Organizing</h3>
          <p>Sustainable change starts at the neighborhood level. We train and support local leaders to build power within their communities, facilitating town halls, door-to-door canvassing, and neighborhood assemblies that give voice to residents often left out of the political process.</p>
        </article>
        <article class="feature-card">
          <img src="https://picsum.photos/600/400?image=1025" alt="Policy advocacy" class="feature-img">
          <h3>Policy Advocacy</h3>
          <p>We work directly with legislators, regulatory bodies, and civic institutions to advance legislation that protects vulnerable populations. Our policy team conducts research, drafts model ordinances, and coordinates advocacy days to ensure that laws reflect the needs of real people, not just powerful interests.</p>
        </article>
        <article class="feature-card">
          <img src="https://picsum.photos/600/400?image=1035" alt="Cultural storytelling" class="feature-img">
          <h3>Cultural Narratives</h3>
          <p>Stories shape society. Through art installations, public storytelling events, and media partnerships, we amplify the lived experiences of marginalized communities. By shifting cultural narratives, we create the empathy necessary for lasting social transformation.</p>
        </article>
        <article class="feature-card">
          <img src="https://picsum.photos/600/400?image=1045" alt="Community care" class="feature-img">
          <h3>Community Care</h3>
          <p>Beyond advocacy, we practice mutual aid. Our community care programs distribute food, hygiene supplies, and emergency assistance to families in crisis, demonstrating that solidarity is not just a slogan—it is a daily practice rooted in dignity and shared responsibility.</p>
        </article>
      </div>
    </div>
  </section>

  <!-- SUCCESS STORIES -->
  <section class="section stories bg-light" aria-labelledby="stories-title">
    <div class="container">
      <div class="section-header">
        <h2 id="stories-title">Voices of Impact</h2>
        <p>Real stories from the people whose lives have been transformed by collective action and community solidarity.</p>
      </div>
      <div class="testimonial-grid">
        <article class="testimonial-card">
          <img src="https://i.pravatar.cc/150?u=1" alt="Maria Gonzalez" class="avatar">
          <blockquote>"Before joining Common Ground, my family faced eviction with nowhere to turn. The collective connected us with legal aid and organized a community response that saved our home. Now, I organize others to fight for housing justice in my own block."</blockquote>
          <cite>Maria Gonzalez<span>Community Organizer, Eastside</span></cite>
        </article>
        <article class="testimonial-card">
          <img src="https://i.pravatar.cc/150?u=2" alt="James Okoye" class="avatar">
          <blockquote>"As a first-time voter, I felt invisible. The voter registration drives and civic education workshops gave me the tools to participate. I have since helped register over two hundred young people in my district and served as a poll worker during the last election."</blockquote>
          <cite>James Okoye<span>Youth Advocate &amp; Volunteer</span></cite>
        </article>
        <article class="testimonial-card">
          <img src="https://i.pravatar.cc/150?u=3" alt="Aisha Rahman" class="avatar">
          <blockquote>"Our cultural festival brought together dozens of immigrant communities. It was not just a celebration—it was a statement that our traditions, languages, and voices belong in the public square. Common Ground gave us the platform and resources to make it happen."</blockquote>
          <cite>Aisha Rahman<span>Cultural Coordinator</span></cite>
        </article>
      </div>
    </div>
  </section>

  <!-- ISSUES -->
  <section id="issues" class="section issues" aria-labelledby="issues-title">
    <div class="container">
      <div class="section-header">
        <h2 id="issues-title">Issues That Matter Today</h2>
        <p>We focus on interconnected challenges where advocacy, inclusion, and grassroots power can drive measurable progress.</p>
      </div>
      <div class="issue-grid">
        <article class="issue-card">
          <img src="https://picsum.photos/600/400?image=1075" alt="Housing" class="issue-img">
          <div class="issue-body">
            <h3>Housing Justice</h3>
            <p>Rising rents and speculative development are displacing long-term residents from neighborhoods they have called home for generations. We advocate for rent stabilization, tenant right-to-counsel, and community land trusts to keep neighborhoods affordable and stable.</p>
            <a href="#" class="btn btn-accent" style="padding:0.6rem 1.2rem; font-size:0.85rem;">Spread Awareness</a>
          </div>
        </article>
        <article class="issue-card">
          <img src="https://picsum.photos/600/400?image=1085" alt="Voting" class="issue-img">
          <div class="issue-body">
            <h3>Voting Rights</h3>
            <p>Restrictive voting laws and partisan gerrymandering silence marginalized voices and dilute community power. We fight for automatic voter registration, expanded early voting, and fair maps so every citizen can make their voice heard at the ballot box.</p>
            <a href="#" class="btn btn-accent" style="padding:0.6rem 1.2rem; font-size:0.85rem;">Spread Awareness</a>
          </div>
        </article>
        <article class="issue-card">
          <img src="https://picsum.photos/600/400?image=1095" alt="Climate" class="issue-img">
          <div class="issue-body">
            <h3>Climate Justice</h3>
            <p>Environmental degradation and climate disasters hit low-income communities and communities of color first and worst. We push for equitable climate policies that center frontline communities in the transition to a green, resilient economy.</p>
            <a href="#" class="btn btn-accent" style="padding:0.6rem 1.2rem; font-size:0.85rem;">Spread Awareness</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- TAKE ACTION / PETITION -->
  <section id="volunteer" class="section action" aria-labelledby="action-title">
    <div class="container">
      <div class="action-wrapper">
        <div class="action-main">
          <div class="petition-form">
            <h2 id="action-title">Add Your Name to the Movement</h2>
            <p>Join thousands of neighbors demanding equitable housing policies and tenant protections in our city. Your signature tells local leaders that affordable housing is a human right, not a privilege.</p>
            <form id="petition-form">
              <div class="form-group">
                <label for="petition-name">Full Name</label>
                <input type="text" id="petition-name" name="name" placeholder="Enter your full name" required>
              </div>
              <div class="form-group">
                <label for="petition-email">Email Address</label>
                <input type="email" id="petition-email" name="email" placeholder="you@example.com" required>
              </div>
              <div class="form-group">
                <label for="petition-zip">ZIP Code</label>
                <input type="text" id="petition-zip" name="zip" placeholder="12345" maxlength="5" required>
              </div>
              <button type="submit" class="btn btn-primary" style="width:100%;">Sign the Petition</button>
            </form>
            <div class="petition-stats">
              <span><span id="signature-count">12,483</span> signatures collected</span>
              <span>Goal: 15,000</span>
            </div>
            <div id="signatures-list"></div>
          </div>
        </div>
        <aside class="action-sidebar">
          <div class="sidebar-card">
            <h3>Urgent Action Alert</h3>
            <p>Bill 1402 threatens to cut funding for public schools in underserved districts. Call your representative today and demand they vote no.</p>
            <a href="#" class="btn btn-outline" style="width:100%; text-align:center; font-size:0.85rem; border-color:var(--primary); color:var(--primary);">Find My Representative</a>
          </div>
          <div class="sidebar-card">
            <h3>Partner Organizations</h3>
            <div class="partner-logos">
              <img src="https://placehold.co/100x40/0f4c5c/ffffff?text=Justice+Now" alt="Justice Now">
              <img src="https://placehold.co/100x40/0f4c5c/ffffff?text=Community+Roots" alt="Community Roots">
              <img src="https://placehold.co/100x40/0f4c5c/ffffff?text=Equity+Alliance" alt="Equity Alliance">
              <img src="https://placehold.co/100x40/0f4c5c/ffffff?text=Public+Good" alt="Public Good">
            </div>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <!-- NEWS & EVENTS -->
  <section id="news" class="section" aria-labelledby="news-title">
    <div class="container">
      <div class="section-header">
        <h2 id="news-title">Latest News &amp; Events</h2>
        <p>Stay informed about upcoming actions, community gatherings, and policy victories.</p>
      </div>
      <div class="news-grid">
        <article class="news-card">
          <img src="https://picsum.photos/600/400?image=1105" alt="Town hall meeting" class="news-img">
          <div class="news-body">
            <time datetime="2024-05-10">May 10, 2024</time>
            <h3>City Council Votes in Favor of Tenant Protection Ordinance</h3>
            <p>After months of grassroots organizing and testimony from impacted residents, the council passed critical renter protections by a narrow margin.</p>
          </div>
        </article>
        <article class="news-card">
          <img src="https://picsum.photos/600/400?image=1115" alt="Community festival" class="news-img">
          <div class="news-body">
            <time datetime="2024-06-01">June 1, 2024</time>
            <h3>Summer Solidarity Festival: Join Us Downtown</h3>
            <p>Music, food, and storytelling from over twenty community groups. A celebration of culture, connection, and collective power.</p>
          </div>
        </article>
        <article class="news-card">
          <img src="https://picsum.photos/600/400?image=1125" alt="Voter registration" class="news-img">
          <div class="news-body">
            <time datetime="2024-06-15">June 15, 2024</time>
            <h3>Youth Voter Registration Drive at City College</h3>
            <p>Volunteers will be on campus helping students register and understand their voting rights ahead of the primary election.</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section id="faq" class="section faq" aria-labelledby="faq-title">
    <div class="container">
      <div class="section-header">
        <h2 id="faq-title">Frequently Asked Questions</h2>
        <p>Everything you need to know about getting involved with Common Ground Collective.</p>
      </div>
      <div class="accordion">
        <details>
          <summary>How can I volunteer with Common Ground Collective?</summary>
          <p>We offer many ways to get involved, from canvassing and phone banking to event planning and legal observer training. Fill out our volunteer interest form and a team member will follow up with opportunities that match your skills and availability.</p>
        </details>
        <details>
          <summary>Is my donation tax-deductible?</summary>
          <p>Yes. Common Ground Collective is a registered 501(c)(3) nonprofit organization, and all donations are tax-deductible to the fullest extent allowed by law. You will receive a receipt for your records.</p>
        </details>
        <details>
          <summary>How are funds allocated?</summary>
          <p>Approximately 78% of every dollar goes directly to program services, including community organizing, legal aid, mutual aid distribution, and advocacy campaigns. The remainder supports administration and fundraising.</p>
        </details>
        <details>
          <summary>Can I start a local chapter in my city?</summary>
          <p>Absolutely. We are actively expanding and provide training, seed funding, and mentorship for new local chapters. Contact our organizing team to start the conversation.</p>
        </details>
        <details>
          <summary>How do I report an issue or request assistance?</summary>
          <p>Use our confidential intake form on the Contact page or call our community hotline. All requests are reviewed by our care coordination team within two business days.</p>
        </details>
      </div>
    </div>
  </section>

</main>

<footer id="contact">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <img src="https://placehold.co/200x55/0f4c5c/ffffff?text=Common+Ground+Collective&font=playfair%20display" alt="Footer Logo">
        <p>Championing social justice, cultural equity, and grassroots power for stronger, more inclusive communities.</p>
      </div>
      <div class="footer-col">
        <h4>Get Involved</h4>
        <ul>
          <li><a href="#volunteer">Volunteer</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Join a Chapter</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Learn More</h4>
        <ul>
          <li><a href="#about">About Us</a></li>
          <li><a href="#issues">Our Issues</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Connect</h4>
        <ul>
          <li><a href="#">info@commonground.org</a></li>
          <li><a href="#">(555) 123-4567</a></li>
          <li><a href="#">123 Advocacy Way, Suite 400<br>New York, NY 10001</a></li>
        </ul>
        <div class="socials">
          <a href="#" aria-label="Facebook">&#xf09a;</a>
          <a href="#" aria-label="Twitter">&#xf099;</a>
          <a href="#" aria-label="Instagram">&#xf16d;</a>
          <a href="#" aria-label="LinkedIn">&#xf0e1;</a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <span>&copy; 2024 Common Ground Collective. All rights reserved.</span>
      <div>
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#">Accessibility</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // Smooth scrolling for navigation links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });

  // Petition form interaction
  const form = document.getElementById('petition-form');
  const list = document.getElementById('signatures-list');
  const countEl = document.getElementById('signature-count');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    const nameInput = this.elements['name'];
    const name = nameInput.value.trim();
    if (!name) return;

    const li = document.createElement('li');
    li.textContent = name;
    list.prepend(li);

    let current = parseInt(countEl.textContent.replace(/,/g, ''), 10) || 0;
    countEl.textContent = (current + 1).toLocaleString();

    this.reset();
    nameInput.focus();
  });

  // Mobile menu toggle (basic accessibility)
  const btn = document.querySelector('.mobile-menu-btn');
  const nav = document.querySelector('.nav-links');
  btn.addEventListener('click', () => {
    const isExpanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', !isExpanded);
    nav.style.display = isExpanded ? 'none' : 'flex';
    nav.style.flexDirection = 'column';
    nav.style.position = 'absolute';
    nav.style.top = '100%';
    nav.style.left = '0';
    nav.style.right = '0';
    nav.style.background = '#fff';
    nav.style.padding = '1rem';
    nav.style.borderTop = '1px solid var(--border)';
    nav.style.gap = '1rem';
  });
</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-12T10:13:05.237Z",
  "url": "https://benchmark.aimac.invalid/1611e75f5aebc1da53c5086e960ac4a2cf1ae9b4c9ca5ef65e3343c89281d14e.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<section id=\"about\" class=\"section features\" aria-labelledby=\"features-title\">",
          "target": [
            "#about"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<section id=\"about\" class=\"section features\" aria-labelledby=\"features-title\">",
          "target": [
            "#about"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<section id=\"about\" class=\"section features\" aria-labelledby=\"features-title\">",
          "target": [
            "#about"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<section id=\"about\" class=\"section features\" aria-labelledby=\"features-title\">",
          "target": [
            "#about"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<section id=\"about\" class=\"section features\" aria-labelledby=\"features-title\">",
          "target": [
            "#about"
          ]
        }
      ]
    },
    {
      "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": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
          "target": [
            ".issue-card:nth-child(1) > .issue-body > .btn-accent.btn[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button type=\"submit\" class=\"btn btn-primary\" style=\"width:100%;\">Sign the Petition</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>Building a Society Where Everyone Belongs</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 id=\"features-title\">How We Create Change</h2>",
                  "target": [
                    "#features-title"
                  ]
                },
                {
                  "html": "<h3>Grassroots Organizing</h3>",
                  "target": [
                    ".feature-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Policy Advocacy</h3>",
                  "target": [
                    ".feature-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Cultural Narratives</h3>",
                  "target": [
                    ".feature-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Community Care</h3>",
                  "target": [
                    ".feature-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"stories-title\">Voices of Impact</h2>",
                  "target": [
                    "#stories-title"
                  ]
                },
                {
                  "html": "<h2 id=\"issues-title\">Issues That Matter Today</h2>",
                  "target": [
                    "#issues-title"
                  ]
                },
                {
                  "html": "<h3>Housing Justice</h3>",
                  "target": [
                    ".issue-card:nth-child(1) > .issue-body > h3"
                  ]
                },
                {
                  "html": "<h3>Voting Rights</h3>",
                  "target": [
                    ".issue-card:nth-child(2) > .issue-body > h3"
                  ]
                },
                {
                  "html": "<h3>Climate Justice</h3>",
                  "target": [
                    ".issue-card:nth-child(3) > .issue-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"action-title\">Add Your Name to the Movement</h2>",
                  "target": [
                    "#action-title"
                  ]
                },
                {
                  "html": "<h3>Urgent Action Alert</h3>",
                  "target": [
                    ".sidebar-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Partner Organizations</h3>",
                  "target": [
                    ".sidebar-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"news-title\">Latest News &amp; Events</h2>",
                  "target": [
                    "#news-title"
                  ]
                },
                {
                  "html": "<h3>City Council Votes in Favor of Tenant Protection Ordinance</h3>",
                  "target": [
                    ".news-card:nth-child(1) > .news-body > h3"
                  ]
                },
                {
                  "html": "<h3>Summer Solidarity Festival: Join Us Downtown</h3>",
                  "target": [
                    ".news-card:nth-child(2) > .news-body > h3"
                  ]
                },
                {
                  "html": "<h3>Youth Voter Registration Drive at City College</h3>",
                  "target": [
                    ".news-card:nth-child(3) > .news-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Frequently Asked Questions</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h4>Get Involved</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Learn More</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Connect</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#ffffff",
                "contrastRatio": 4.75,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 4.75"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"tagline\">Advocacy \u2022 Inclusion \u2022 Collective Action</div>",
          "target": [
            ".tagline"
          ]
        }
      ]
    },
    {
      "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": "features-title",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h2 id=\"features-title\">How We Create Change</h2>",
          "target": [
            "#features-title"
          ]
        }
      ]
    },
    {
      "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=\"petition-name\">Full Name</label>",
                  "target": [
                    "label[for=\"petition-name\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"text\" id=\"petition-name\" name=\"name\" placeholder=\"Enter your full name\" required=\"\">",
          "target": [
            "#petition-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/260x70/0f4c5c/ffffff?text=Common+Ground+Collective&amp;font=playfair%20display\" alt=\"Common Ground Collective Logo\" class=\"logo\">",
          "target": [
            ".logo"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Full Name"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"petition-name\">Full Name</label>",
                  "target": [
                    "label[for=\"petition-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=\"petition-name\" name=\"name\" placeholder=\"Enter your full name\" required=\"\">",
          "target": [
            "#petition-name"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"issue-body\">",
                  "target": [
                    ".issue-card:nth-child(1) > .issue-body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
          "target": [
            ".issue-card:nth-child(1) > .issue-body > .btn-accent.btn[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"nav-links\">Home</a>",
          "target": [
            ".nav-links[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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>\n          <li><a href=\"#volunteer\">Volunteer</a></li>\n          <li><a href=\"#events\">Events</a></li>\n          <li><a href=\"#\">Donate</a></li>\n          <li><a href=\"#\">Join a Chapter</a></li>\n        </ul>",
          "target": [
            ".footer-col:nth-child(2) > 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=\"#volunteer\">Volunteer</a></li>",
          "target": [
            ".footer-col:nth-child(2) > 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/260x70/0f4c5c/ffffff?text=Common+Ground+Collective&amp;font=playfair%20display\" alt=\"Common Ground Collective Logo\" class=\"logo\">",
          "target": [
            ".logo"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>How can I volunteer with Common Ground Collective?</summary>",
          "target": [
            "details:nth-child(1) > summary"
          ]
        }
      ]
    },
    {
      "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": 72.4,
                "height": 25.6
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (72.4px by 25.6px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"nav-links\">Home</a>",
          "target": [
            ".nav-links[href=\"#\"]"
          ]
        }
      ]
    }
  ],
  "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": "48.0pt (64px)",
                "fontWeight": "bold",
                "messageKey": "imgNode",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<img src=\"https://picsum.photos/1600/800?image=1068\" alt=\"Diverse community gathering\">",
                  "target": [
                    "img[alt=\"Diverse community gathering\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined because element contains an image node"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h1>Building a Society Where Everyone Belongs</h1>",
          "target": [
            "h1"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because element contains an image node"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f8fafc",
                "contrastRatio": 1.04,
                "fontSize": "33.0pt (44px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.04 (foreground color: #ffffff, background color: #f8fafc, font size: 33.0pt (44px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h2 id=\"stories-title\">Voices of Impact</h2>",
          "target": [
            "#stories-title"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.04 (foreground color: #ffffff, background color: #f8fafc, font size: 33.0pt (44px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#fefefe",
                "bgColor": "#f8fafc",
                "contrastRatio": 1.03,
                "fontSize": "13.2pt (17.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.03 (foreground color: #fefefe, background color: #f8fafc, font size: 13.2pt (17.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Real stories from the people whose lives have been transformed by collective action and community solidarity.</p>",
          "target": [
            ".stories > .container > .section-header > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.03 (foreground color: #fefefe, background color: #f8fafc, font size: 13.2pt (17.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e36414",
                "contrastRatio": 3.44,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
                  "target": [
                    ".issue-card:nth-child(1) > .issue-body > .btn-accent.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.44 (foreground color: #ffffff, background color: #e36414, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
          "target": [
            ".issue-card:nth-child(1) > .issue-body > .btn-accent.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #ffffff, background color: #e36414, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e36414",
                "contrastRatio": 3.44,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
                  "target": [
                    ".issue-card:nth-child(2) > .issue-body > .btn-accent.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.44 (foreground color: #ffffff, background color: #e36414, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
          "target": [
            ".issue-card:nth-child(2) > .issue-body > .btn-accent.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #ffffff, background color: #e36414, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e36414",
                "contrastRatio": 3.44,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
                  "target": [
                    ".issue-card:nth-child(3) > .issue-body > .btn-accent.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.44 (foreground color: #ffffff, background color: #e36414, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-accent\" style=\"padding:0.6rem 1.2rem; font-size:0.85rem;\">Spread Awareness</a>",
          "target": [
            ".issue-card:nth-child(3) > .issue-body > .btn-accent.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #ffffff, background color: #e36414, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#fdeeda",
                "contrastRatio": 4.17,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.17 (foreground color: #64748b, background color: #fdeeda, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Bill 1402 threatens to cut funding for public schools in underserved districts. Call your representative today and demand they vote no.</p>",
          "target": [
            ".sidebar-card:nth-child(1) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.17 (foreground color: #64748b, background color: #fdeeda, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 6321
      },
      {
        "y": 576,
        "height": 6321
      },
      {
        "y": 1152,
        "height": 6321
      },
      {
        "y": 1728,
        "height": 6321
      },
      {
        "y": 2304,
        "height": 6321
      },
      {
        "y": 2880,
        "height": 6321
      },
      {
        "y": 3456,
        "height": 6321
      },
      {
        "y": 4032,
        "height": 6321
      },
      {
        "y": 4608,
        "height": 6321
      },
      {
        "y": 5184,
        "height": 6321
      },
      {
        "y": 5601,
        "height": 6321
      }
    ],
    "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 "Society" 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: "Society"
- Description: Social issues, advocacy, cultural organizations, and community initiatives.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Society" 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: "Events", "Volunteer", "News".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Society" category. Consider themes similar to: "Success Stories", "Policy Impact", "Current Issues".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "inclusion", "social justice", "grassroots".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Stand With Us", "Share Story", "Spread Awareness".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Society" sector. Ideas similar but not limited to: "petition signer".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "action alerts", "partner organizations", "breaking news".
-   **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.