OpenAI GPT 6.1 Sol – Non Profit Charity

via OpenAI · Generated

  • AIMAC Debt 4.28
  • Cost $0.15
  • Total Violations 11
  • HTML Size 54 KB
  • Em Dashes 8

Screenshot

View OpenAI GPT 6.1 Sol Non Profit Charity page View Live Page

Accessibility Issues Found

11 Serious

  • color-contrast serious 11 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="brand-tag">GOOD GROWS TOGETHER</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#173e35">
  <meta name="description" content="Common Ground brings neighbors together to build food security, create opportunity, and strengthen communities. Give, volunteer, or find your next local event.">
  <title>Common Ground — Good grows together.</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{--ink:#173e35;--text:#43584f;--muted:#6c7970;--paper:#faf9f5;--mint:#e9efe5;--line:#dce1d6;--orange:#df5c35;--white:#fff;--radius:18px}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:105px}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.65}
    button,input,select{font:inherit}
    button,a,input,select{ -webkit-tap-highlight-color:transparent}
    a{color:inherit;text-decoration:none}
    button{cursor:pointer}
    img{display:block;width:100%;object-fit:cover}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{font-family:Manrope,sans-serif;line-height:1.15}
    h1{font-size:clamp(44px,5.6vw,76px);font-weight:600;letter-spacing:-3.5px;margin-bottom:24px}
    h2{font-size:clamp(32px,3.5vw,46px);font-weight:600;letter-spacing:-1.7px;margin-bottom:22px}
    h3{font-size:23px;letter-spacing:-.7px}
    p{color:var(--text)}
    :focus-visible{outline:3px solid var(--orange);outline-offset:5px}
    .wrap{max-width:1240px;padding-inline:40px;margin-inline:auto}
    .eyebrow{display:block;text-transform:uppercase;font-weight:700;font-size:11px;letter-spacing:2px;margin-bottom:18px}
    .eyebrow:before{content:"";display:inline-block;width:18px;height:2px;background:var(--orange);vertical-align:middle;margin-right:10px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:49px;padding:12px 23px;border:1px solid transparent;border-radius:6px;font-weight:700;font-size:14px;transition:background .2s,transform .2s}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--orange);color:white}
    .btn-primary:hover{background:#be4623}
    .btn-dark{background:var(--ink);color:#fff}
    .btn-dark:hover{background:#25584b}
    .btn-outline{border-color:#a9b8a9;background:transparent;color:var(--ink)}
    .btn-light{background:var(--paper);color:var(--ink)}
    .arrow{font-size:21px;line-height:1}
    .text-link{font-size:14px;font-weight:700;display:inline-flex;gap:15px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:4px}
    .skip{position:fixed;top:-90px;left:20px;background:white;padding:15px;z-index:100}
    .skip:focus{top:10px}
    .announcement{background:var(--ink);color:#f2f4e8;font-size:12px;text-align:center;padding:9px 20px;letter-spacing:.2px}
    .announcement a{margin-left:10px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
    .site-header{background:rgba(250,249,245,.96);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}
    .header-inner{height:92px;display:flex;align-items:center;justify-content:space-between;gap:25px}
    .brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
    .brand img{width:43px;height:43px;border-radius:50%}
    .brand-name{font-family:Manrope,sans-serif;display:block;font-size:21px;font-weight:800;letter-spacing:-.8px;line-height:1.2}
    .brand-tag{display:block;font-size:10px;letter-spacing:1.15px;color:var(--muted);margin-top:4px}
    nav{display:flex;align-items:center;gap:25px}
    nav a:not(.btn){font-size:13px;font-weight:600}
    nav a:not(.btn):hover{color:var(--orange)}
    nav .btn{min-height:42px;padding:9px 18px;margin-left:3px}
    .menu-toggle{display:none;border:1px solid var(--line);background:transparent;border-radius:5px;padding:7px 12px;font-size:20px}
    .hero{position:relative;padding-top:66px;padding-bottom:69px;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.03fr 1fr;gap:58px;align-items:center}
    .hero-copy{padding:12px 0}
    .hero h1 span{color:var(--orange)}
    .hero-copy>p{font-size:17px;max-width:460px;margin-bottom:28px;line-height:1.75}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
    .community-proof{display:flex;gap:12px;align-items:center}
    .avatars{display:flex;padding-left:0}
    .avatars img{width:35px;height:35px;border:3px solid var(--paper);border-radius:50%;margin-left:-9px}
    .avatars img:first-child{margin-left:0}
    .community-proof p{font-size:11px;margin:0;line-height:1.5}
    .community-proof strong{display:block;color:var(--ink);font-size:12px}
    .hero-visual{position:relative;padding-bottom:24px}
    .hero-photo{height:495px;border-radius:130px 14px 14px 14px;filter:brightness(.9)}
    .photo-note{position:absolute;right:22px;top:20px;background:rgba(250,249,245,.92);padding:8px 13px;border-radius:30px;font-size:11px;font-weight:600}
    .impact-float{position:absolute;bottom:0;left:-28px;background:#fff;box-shadow:0 14px 40px #173e3514;border-radius:12px;padding:19px 25px;display:flex;align-items:center;gap:18px;max-width:300px}
    .impact-float .icon{background:var(--mint);width:49px;height:49px;border-radius:50%;display:grid;place-items:center;font-size:25px}
    .impact-float strong{font-size:26px;font-family:Manrope,sans-serif;line-height:1.2;display:block}
    .impact-float span:not(.icon){font-size:11px;color:var(--muted)}
    .round-stamp{position:absolute;bottom:45px;right:-18px;background:#e9a665;color:var(--ink);border:7px solid var(--paper);width:98px;height:98px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);font-size:9px;font-weight:700;letter-spacing:1px}
    .round-stamp b{font-size:30px;font-weight:500;line-height:1.2}
    .impact-band{background:var(--mint)}
    .metrics{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;padding-block:32px;align-items:center}
    .metric{padding:0 30px;border-left:1px solid #cbd6c5}
    .metric:first-child{padding-left:0;border:0}
    .metric:first-child p{font-size:17px;font-weight:600;color:var(--ink);line-height:1.45;margin:0;max-width:190px}
    .metric strong{display:block;font-family:Manrope,sans-serif;font-size:35px;font-weight:600;letter-spacing:-1.5px;line-height:1.3}
    .metric span{font-size:12px;color:var(--text)}
    .section{padding-block:88px}
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px}
    .section-head h2{margin-bottom:0}
    .section-head p{font-size:14px;max-width:385px;margin:0}
    .program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .program-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .program-image{height:223px;position:relative;overflow:hidden}
    .program-image img{height:100%;transition:transform .5s}
    .program-card:hover img{transform:scale(1.035)}
    .pill{position:absolute;top:16px;left:16px;background:#faf9f5;padding:5px 11px;border-radius:30px;font-size:10px;font-weight:700}
    .program-content{padding:25px 25px 27px}
    .program-content h3{margin-bottom:13px}
    .program-content p{font-size:13px;line-height:1.75;margin-bottom:22px}
    .program-content .text-link{font-size:12px;border:0}
    .partner-line{margin-top:35px;border-top:1px solid var(--line);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap}
    .partner-line>p{font-size:11px;max-width:190px;margin:0}
    .partner-name{font-family:Manrope,sans-serif;font-weight:800;color:#768476;letter-spacing:-.7px;font-size:19px}
    .partner-name small{font-size:10px;letter-spacing:1.5px;display:block;line-height:1.2;text-transform:uppercase}
    .story-section{background:var(--ink);color:var(--paper)}
    .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
    .story-image{position:relative}
    .story-image>img{height:490px;border-radius:12px 100px 12px 12px}
    .story-image .caption{position:absolute;left:22px;right:22px;bottom:20px;background:#faf9f5ed;color:var(--ink);padding:17px 20px;border-radius:7px;display:flex;justify-content:space-between;align-items:center}
    .caption strong{display:block;font-size:13px}
    .caption span{font-size:11px;color:var(--muted)}
    .story-copy p{color:#c1d0c6;font-size:14px;line-height:1.8}
    .story-copy h2{max-width:440px}
    .story-copy blockquote{font-family:Manrope,sans-serif;font-size:21px;letter-spacing:-.4px;line-height:1.5;border-left:2px solid #e9a665;padding-left:23px;margin:26px 0 10px}
    .story-copy cite{display:block;font-size:11px;font-style:normal;color:#c1d0c6;padding-left:25px;margin-bottom:25px}
    .story-copy .text-link{color:#f2bd90}
    .giving-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
    .giving-copy>p{font-size:15px}
    .allocation{margin-top:28px}
    .allocation-bar{height:12px;border-radius:10px;overflow:hidden;display:flex;margin-bottom:16px}
    .allocation-bar span:nth-child(1){background:var(--ink);width:84%}
    .allocation-bar span:nth-child(2){background:#aabd9d;width:10%}
    .allocation-bar span:nth-child(3){background:#e9a665;width:6%}
    .allocation-key{display:flex;gap:18px;flex-wrap:wrap;font-size:10px;color:var(--text);margin-bottom:19px}
    .allocation-key span:before{content:"";display:inline-block;width:7px;height:7px;background:var(--ink);margin-right:5px;border-radius:2px}
    .allocation-key span:nth-child(2):before{background:#aabd9d}
    .allocation-key span:nth-child(3):before{background:#e9a665}
    .donation-card{padding:33px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 40px #173e3506;border-radius:var(--radius)}
    .donation-card h3{margin-bottom:8px}
    .donation-card>p{font-size:12px;margin-bottom:22px}
    .toggle{display:grid;grid-template-columns:1fr 1fr;border-radius:7px;background:var(--mint);padding:4px;margin-bottom:22px}
    .toggle button{border:0;background:transparent;padding:9px;border-radius:5px;font-size:12px;font-weight:600;color:var(--text)}
    .toggle button.active{background:var(--ink);color:white}
    .amount-label{font-size:11px;font-weight:700;display:block;margin-bottom:10px}
    .amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
    .amounts button{border:1px solid var(--line);background:white;border-radius:6px;padding:11px;font-weight:700;font-size:14px;color:var(--ink)}
    .amounts button.selected{border-color:var(--ink);background:var(--mint);box-shadow:inset 0 0 0 1px var(--ink)}
    .custom-amount{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;padding-left:14px;font-size:13px}
    .custom-amount input{width:100%;padding:10px;border:0;background:transparent;min-width:0;color:var(--ink)}
    .impact-preview{margin:17px 0;background:#f2f5ed;border-radius:7px;padding:13px 15px;font-size:12px;color:var(--ink);min-height:64px;display:flex;gap:10px;align-items:center}
    .donation-card .btn{width:100%}
    .donation-note{font-size:10px;text-align:center;color:var(--muted);margin:13px 0 0!important}
    .error{color:#a63422;font-size:12px}
    .get-involved{background:#efeee7}
    .involvement-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px}
    .volunteer-card{border-radius:13px;overflow:hidden;background:var(--mint)}
    .volunteer-card img{height:258px}
    .volunteer-body{padding:30px}
    .volunteer-body p{font-size:14px}
    .volunteer-body .btn{margin-top:8px}
    .events-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
    .events-title h3{margin:0}
    .events-title .text-link{font-size:11px}
    .event{display:grid;grid-template-columns:60px 1fr 28px;gap:20px;align-items:center;padding:25px 0;border-bottom:1px solid #d4d7ce}
    .date{background:var(--paper);border-radius:8px;padding:8px;text-align:center;line-height:1.3}
    .date span{font-size:9px;font-weight:700;letter-spacing:1px}
    .date strong{display:block;font-size:26px;font-family:Manrope,sans-serif}
    .event h4{font-size:16px;margin-bottom:6px}
    .event p{font-size:11px;margin-bottom:6px}
    .event .tag{font-size:9px;font-weight:700;color:#68774e;text-transform:uppercase;letter-spacing:.6px}
    .event button{background:transparent;border:0;color:var(--ink);font-size:24px;padding:3px}
    .events-foot{font-size:12px;margin-top:22px}
    .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .resource{padding:27px;border:1px solid var(--line);border-radius:12px;background:white;display:flex;flex-direction:column}
    .resource .resource-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:9px;background:var(--mint);font-size:21px;margin-bottom:20px}
    .resource .type{font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin-bottom:10px}
    .resource h3{font-size:19px}
    .resource p{font-size:13px;margin-bottom:20px}
    .resource .text-link{margin-top:auto;align-self:flex-start;font-size:12px}
    .faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:85px;margin-top:75px;border-top:1px solid var(--line);padding-top:55px}
    .faq h2{font-size:33px}
    .faq p{font-size:13px}
    details{border-bottom:1px solid var(--line)}
    summary{cursor:pointer;list-style:none;padding:18px 30px 18px 0;font-size:14px;font-weight:600;position:relative}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";position:absolute;right:3px;top:13px;font-size:24px;font-weight:400}
    details[open] summary:after{content:"−"}
    details p{padding:0 25px 10px 0;margin-bottom:8px;line-height:1.8}
    .newsletter{background:#dbe7d4;padding:42px 0}
    .newsletter-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
    .newsletter h2{font-size:30px;margin-bottom:9px;letter-spacing:-1px}
    .newsletter p{font-size:13px;margin-bottom:0}
    .newsletter-form{display:flex;gap:9px}
    .newsletter-form input{flex:1;min-width:0;border:1px solid #b9c9b1;border-radius:6px;background:#f9fbf5;padding:12px 15px;font-size:13px}
    .newsletter-small{font-size:10px!important;margin-top:9px!important}
    footer{background:var(--ink);color:var(--paper);padding-top:55px}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:42px;padding-bottom:42px}
    footer .brand{margin-bottom:20px}
    footer .brand-tag{color:#b8c8ba}
    footer p{font-size:12px;color:#b8c8ba;max-width:260px}
    footer h3{font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:0;margin:6px 0 18px}
    footer ul{list-style:none;padding:0;margin:0}
    footer li{font-size:12px;color:#b8c8ba;margin-bottom:10px}
    footer a:hover{color:#edb188}
    .socials{display:flex;gap:9px;margin-top:20px}
    .socials a{border:1px solid #4c6a59;min-width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
    .footer-bottom{border-top:1px solid #39594a;padding-block:19px;display:flex;justify-content:space-between;gap:20px;color:#aebfb2;font-size:10px}
    .footer-legal{display:flex;gap:20px}
    .footer-legal button{padding:0;border:0;background:none;font-size:10px;color:inherit}
    dialog{width:min(540px,calc(100% - 32px));max-height:85vh;overflow:auto;border:0;padding:35px;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #0003}
    dialog::backdrop{background:#0f2b25aa;backdrop-filter:blur(4px)}
    .dialog-close{position:absolute;right:16px;top:11px;background:transparent;border:0;font-size:27px;color:var(--ink)}
    dialog h2{font-size:29px;padding-right:12px}
    dialog p{font-size:14px}
    dialog label{display:block;font-size:12px;font-weight:600;margin:13px 0 5px}
    dialog input,dialog select{display:block;width:100%;padding:11px 12px;background:#fff;border:1px solid #b9c9b1;border-radius:6px;color:var(--ink)}
    dialog .btn{margin-top:20px;width:100%}
    .dialog-note{font-size:11px!important;margin-top:15px;margin-bottom:0}
    .notice{background:var(--mint);padding:15px;border-radius:7px}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    @media(min-width:1500px){.wrap{max-width:1320px}.hero-photo{height:540px}}
    @media(max-width:1100px){.wrap{padding-inline:28px}nav{gap:15px}.brand-name{font-size:19px}nav a:not(.btn){font-size:12px}.hero-grid{gap:35px}h1{font-size:60px}.hero-photo{height:470px}.story-grid,.giving-grid{gap:40px}.program-content{padding:22px}.partner-name{font-size:16px}}
    @media(max-width:900px){.menu-toggle{display:block}nav{display:none;position:absolute;left:0;right:0;top:80px;background:var(--paper);padding:20px 28px;border-bottom:1px solid var(--line);box-shadow:0 10px 20px #0001;flex-direction:column;align-items:stretch;gap:0}nav.open{display:flex}nav a:not(.btn){padding:11px;font-size:14px}nav .btn{margin-top:10px}.header-inner{height:80px}.hero-grid{gap:27px}h1{font-size:49px;letter-spacing:-2.5px}.hero-photo{height:435px}.hero-copy>p{font-size:15px}.hero-actions .btn{padding:10px 16px;gap:10px}.impact-float{left:-12px;padding:15px}.round-stamp{right:-10px;width:80px;height:80px}.metric{padding:0 18px}.metric strong{font-size:29px}.metric:first-child p{font-size:15px}.program-grid{gap:15px}.program-content h3{font-size:20px}.program-image{height:175px}.program-content{padding:20px}.story-grid{gap:30px}.story-image>img{height:450px}.giving-grid{gap:30px}.donation-card{padding:25px}.involvement-grid{gap:30px}.resource{padding:22px}.faq{gap:40px}.footer-grid{gap:25px;grid-template-columns:1.5fr 1fr 1fr}.footer-contact{grid-column:1/-1;display:flex;gap:40px}.footer-contact h3{margin:0}.newsletter-grid{gap:30px}}
    @media(max-width:680px){.wrap{padding-inline:22px}.announcement{font-size:10px}.announcement a{margin-left:5px}.header-inner{height:76px}nav{top:76px}.brand-name{font-size:20px}.hero{padding-top:38px;padding-bottom:40px}.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy{padding:0}h1{font-size:54px;letter-spacing:-2.8px;max-width:470px}.hero-copy>p{font-size:16px;max-width:100%}.hero-photo{height:365px;border-top-left-radius:95px}.hero-visual{margin-left:9px;margin-right:9px}.impact-float{left:-9px}.round-stamp{right:-14px}.metrics{grid-template-columns:1fr 1fr;gap:22px;padding-block:26px}.metric{padding:0 0 0 20px}.metric:nth-child(3){border:0;padding-left:0}.metric:first-child p{max-width:155px}.metric strong{font-size:31px}.metric span{font-size:11px}.section{padding-block:55px}.section-head{display:block;margin-bottom:27px}.section-head p{margin-top:20px;max-width:100%}h2{font-size:35px}.program-grid,.story-grid,.giving-grid,.involvement-grid,.resource-grid,.faq,.newsletter-grid{grid-template-columns:1fr;gap:27px}.program-image{height:235px}.program-content{padding:25px}.program-content h3{font-size:24px}.program-content p{font-size:14px}.partner-line{justify-content:flex-start;gap:23px}.partner-line>p{max-width:100%;width:100%}.partner-name{font-size:17px}.story-image>img{height:390px}.story-copy{margin-top:5px}.giving-grid{gap:35px}.donation-card{padding:25px}.volunteer-card img{height:235px}.events-title{margin-top:10px}.event{gap:15px}.resource{padding:26px}.faq{margin-top:45px;padding-top:38px;gap:10px}.faq h2{margin-bottom:15px}.newsletter{padding-block:35px}.newsletter-grid{gap:22px}.newsletter-form{gap:7px}.newsletter-form .btn{padding:12px 16px}.footer-grid{grid-template-columns:1fr 1fr;gap:27px}.footer-brand{grid-column:1/-1}.footer-contact{display:block}.footer-contact h3{margin-bottom:12px}.footer-bottom{flex-direction:column;gap:10px}dialog{padding:28px}.hero-actions{margin-bottom:25px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
  </style>
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>
  <div class="announcement">A little time. A lasting difference. Our fall volunteer season is open. <a href="#volunteer">Find your place ↗</a></div>
  <header class="site-header">
    <div class="wrap header-inner">
      <a class="brand" href="#" aria-label="Common Ground home">
        <img src="https://placehold.co/86x86/173e35/faf9f5?text=cg&font=manrope" width="43" height="43" alt="Common Ground logo">
        <span><span class="brand-name">common ground<span style="color:var(--orange)">.</span></span><span class="brand-tag">GOOD GROWS TOGETHER</span></span>
      </a>
      <button class="menu-toggle" aria-label="Open navigation" aria-expanded="false" aria-controls="main-nav">☰</button>
      <nav id="main-nav" aria-label="Primary navigation">
        <a href="#about">About</a>
        <a href="#programs">Our work</a>
        <a href="#impact">Impact</a>
        <a href="#events">Events</a>
        <a href="#volunteer">Volunteer</a>
        <a href="#resources">Resources</a>
        <a class="btn btn-primary" href="#give">Give now <span aria-hidden="true">↗</span></a>
      </nav>
    </div>
  </header>

  <main id="main">
    <section class="hero" id="about" aria-labelledby="hero-title">
      <div class="wrap hero-grid">
        <div class="hero-copy">
          <span class="eyebrow">Rooted in community. Built on care.</span>
          <h1 id="hero-title">Stronger neighbors.<br><span>Brighter futures.</span></h1>
          <p>Lasting change starts close to home. We bring people, resources, and possibility together so every neighbor has the opportunity to thrive.</p>
          <div class="hero-actions">
            <a href="#give" class="btn btn-primary">Make a donation <span class="arrow" aria-hidden="true">↗</span></a>
            <a href="#volunteer" class="btn btn-outline">Find your way to help <span aria-hidden="true">→</span></a>
          </div>
          <div class="community-proof">
            <div class="avatars" aria-hidden="true">
              <img src="https://i.pravatar.cc/72?u=common-ground-1" width="35" height="35" alt="">
              <img src="https://i.pravatar.cc/72?u=common-ground-2" width="35" height="35" alt="">
              <img src="https://i.pravatar.cc/72?u=common-ground-3" width="35" height="35" alt="">
              <img src="https://i.pravatar.cc/72?u=common-ground-4" width="35" height="35" alt="">
            </div>
            <p><strong>Small acts. A whole lot of good.</strong>Join a community of 1,200+ volunteers.</p>
          </div>
        </div>
        <div class="hero-visual">
          <img class="hero-photo" src="https://picsum.photos/id/209/900/1000" width="900" height="1000" fetchpriority="high" alt="A green woodland landscape, a reminder of the places we care for together">
          <span class="photo-note">People first. Always.</span>
          <div class="impact-float">
            <span class="icon" aria-hidden="true">♡</span>
            <div><strong>8,400</strong><span>neighbors supported last year</span></div>
          </div>
          <div class="round-stamp" aria-hidden="true"><span>ROOTED IN</span><b>✳</b><span>COMMUNITY</span></div>
        </div>
      </div>
    </section>

    <section class="impact-band" aria-label="Our 2025 community impact">
      <div class="wrap metrics">
        <div class="metric"><p>Real people.<br>Real, lasting impact.</p><span>Our 2025 year in community</span></div>
        <div class="metric"><strong>42,000</strong><span>nutritious meals shared</span></div>
        <div class="metric"><strong>1,200+</strong><span>neighbors volunteering</span></div>
        <div class="metric"><strong>18</strong><span>community partners</span></div>
      </div>
    </section>

    <section class="section" id="programs" aria-labelledby="programs-title">
      <div class="wrap">
        <div class="section-head">
          <div><span class="eyebrow">Our work</span><h2 id="programs-title">A stronger community<br>starts with the essentials.</h2></div>
          <p>We listen first, then work alongside residents to turn local priorities into practical solutions. Our programs connect immediate support with long-term opportunity.</p>
        </div>
        <div class="program-grid">
          <article class="program-card">
            <div class="program-image">
              <img src="https://picsum.photos/id/292/650/440" width="650" height="440" loading="lazy" alt="Fresh food prepared with care">
              <span class="pill">NOURISH</span>
            </div>
            <div class="program-content">
              <h3>Food on every table.</h3>
              <p>Our neighborhood pantries and shared-meal programs make fresh, nourishing food easier to access. We partner with local growers and food businesses to reduce waste while preserving choice and dignity for every household.</p>
              <a class="text-link" href="#give" data-program="Food security">Help nourish a neighbor <span aria-hidden="true">↗</span></a>
            </div>
          </article>
          <article class="program-card">
            <div class="program-image">
              <img src="https://picsum.photos/id/24/650/440" width="650" height="440" loading="lazy" alt="An open book representing learning and new opportunities">
              <span class="pill">EMPOWER</span>
            </div>
            <div class="program-content">
              <h3>Room to grow.</h3>
              <p>From after-school mentoring to practical job-readiness workshops, we help people take their next step with confidence. Volunteer mentors offer consistent support, and our partner network connects learners with real opportunities.</p>
              <a class="text-link" href="#volunteer">Become a mentor <span aria-hidden="true">↗</span></a>
            </div>
          </article>
          <article class="program-card">
            <div class="program-image">
              <img src="https://picsum.photos/id/119/650/440" width="650" height="440" loading="lazy" alt="An outdoor landscape reflecting our shared environment">
              <span class="pill">CONNECT</span>
            </div>
            <div class="program-content">
              <h3>Places to belong.</h3>
              <p>Community gardens, neighborhood gatherings, and resident-led advocacy bring people together. We invest in shared spaces and support local leadership, because a healthy community is one where every voice has a place.</p>
              <a class="text-link" href="#events">Meet your community <span aria-hidden="true">↗</span></a>
            </div>
          </article>
        </div>
        <div class="partner-line" aria-label="Community partnership highlights">
          <p>Progress is a team effort.<br>Made possible with our local partners.</p>
          <span class="partner-name">Field &amp; Fork<small>Local food collective</small></span>
          <span class="partner-name">NORTHLINE<small>Community credit union</small></span>
          <span class="partner-name">open door<small>Learning alliance</small></span>
          <span class="partner-name">Evergreen<small>Neighborhood foundation</small></span>
        </div>
      </div>
    </section>

    <section class="section story-section" id="impact" aria-labelledby="story-title">
      <div class="wrap story-grid">
        <div class="story-image">
          <img src="https://picsum.photos/id/106/800/900" width="800" height="900" loading="lazy" alt="Flowers growing in a shared outdoor space">
          <div class="caption"><div><strong>From an empty lot to a shared beginning.</strong><span>The Maple Street Garden story</span></div><span aria-hidden="true" style="font-size:24px">↗</span></div>
        </div>
        <div class="story-copy">
          <span class="eyebrow">The people behind the progress</span>
          <h2 id="story-title">Sometimes, a garden grows more than food.</h2>
          <p>When residents on Maple Street imagined turning an unused lot into a community garden, they weren’t just thinking about vegetables. They wanted a place where neighbors could meet, share skills, and feel at home.</p>
          <p>With small grants, volunteer workdays, and support from our growing partners, that idea became 24 raised beds and a weekly gathering place. Today, families share the harvest, young people learn from older gardeners, and residents lead the next chapter.</p>
          <blockquote>“I came to plant a few seeds. What I found was a whole community.”</blockquote>
          <cite>— Elena R., Maple Street resident &amp; volunteer</cite>
          <a class="text-link" href="#volunteer">Be part of the next story <span aria-hidden="true">↗</span></a>
        </div>
      </div>
    </section>

    <section class="section" id="give" aria-labelledby="give-title">
      <div class="wrap giving-grid">
        <div class="giving-copy">
          <span class="eyebrow">Generosity, put to work</span>
          <h2 id="give-title">Your kindness.<br>A neighbor’s next step.</h2>
          <p>A gift to Common Ground keeps pantry shelves stocked, connects young people with mentors, and gives resident-led ideas room to grow. Monthly giving helps us plan ahead and show up reliably, all year long.</p>
          <p>Good stewardship is a promise we take seriously. We track our outcomes, share what we learn, and pair today’s support with thoughtful endowment planning to protect this work for future generations.</p>
          <div class="allocation">
            <span class="amount-label">How we used every dollar in 2025</span>
            <div class="allocation-bar" role="img" aria-label="84 percent programs, 10 percent operations, 6 percent fundraising"><span></span><span></span><span></span></div>
            <div class="allocation-key"><span>84% Programs</span><span>10% Operations</span><span>6% Fundraising</span></div>
            <button class="text-link" style="background:none;border-top:0;border-left:0;border-right:0;color:var(--ink);cursor:pointer" data-resource="report">Explore our impact &amp; financials <span aria-hidden="true">↗</span></button>
          </div>
        </div>
        <form class="donation-card" id="donation-form">
          <h3>Make good happen.</h3>
          <p>Choose your gift. See the difference it could make.</p>
          <div class="toggle" role="group" aria-label="Giving frequency">
            <button type="button" class="active" data-frequency="monthly" aria-pressed="true">Monthly ♡</button>
            <button type="button" data-frequency="once" aria-pressed="false">One time</button>
          </div>
          <span class="amount-label" id="gift-amount-label">Choose an amount (USD)</span>
          <div class="amounts" role="group" aria-labelledby="gift-amount-label">
            <button type="button" data-amount="15" aria-pressed="false">$15</button>
            <button type="button" data-amount="30" class="selected" aria-pressed="true">$30</button>
            <button type="button" data-amount="60" aria-pressed="false">$60</button>
            <button type="button" data-amount="100" aria-pressed="false">$100</button>
          </div>
          <label class="sr-only" for="custom-amount">Enter another gift amount in US dollars</label>
          <div class="custom-amount"><span aria-hidden="true">$</span><input id="custom-amount" type="number" min="1" max="100000" step="1" inputmode="numeric" placeholder="Other amount" aria-describedby="gift-error"></div>
          <div class="impact-preview" aria-live="polite"><span aria-hidden="true">✳</span><span id="impact-preview-text">Your $30 monthly gift could help provide 12 nourishing meals each month.</span></div>
          <p class="error" id="gift-error" hidden></p>
          <button class="btn btn-primary" type="submit"><span id="give-button-text">Give $30 monthly</span><span aria-hidden="true">↗</span></button>
          <p class="donation-note">Explore your impact · This demonstration does not collect payments.</p>
        </form>
      </div>
    </section>

    <section class="section get-involved" aria-labelledby="involved-title">
      <div class="wrap">
        <div class="section-head">
          <div><span class="eyebrow">Show up. Pitch in. Belong.</span><h2 id="involved-title">There’s a place for you here.</h2></div>
          <p>Whether you have an hour, a skill to share, or a team ready to help, your time can make a meaningful difference. No experience required—just a little curiosity and care.</p>
        </div>
        <div class="involvement-grid">
          <article class="volunteer-card" id="volunteer">
            <img src="https://picsum.photos/id/42/850/500" width="850" height="500" loading="lazy" alt="An outdoor gathering space overlooking a green landscape">
            <div class="volunteer-body">
              <span class="eyebrow">Give your time</span>
              <h3>Bring yourself. We’ll bring the purpose.</h3>
              <p>Help pack pantry boxes, tend a garden, or mentor a young learner. We offer welcoming orientations, accessible roles, and flexible shifts for individuals, families, and workplace teams.</p>
              <button class="btn btn-dark" data-signup="Volunteer interest">Explore volunteering <span aria-hidden="true">↗</span></button>
            </div>
          </article>
          <div id="events">
            <div class="events-title"><h3>Coming together, soon.</h3><a href="#newsletter" class="text-link">Get event updates <span aria-hidden="true">↗</span></a></div>
            <article class="event">
              <time class="date" datetime="2026-09-12"><span>SEP</span><strong>12</strong></time>
              <div><span class="tag">Volunteer day</span><h4>Grow Together: Garden Workday</h4><p>9:00 AM–12:00 PM · Maple Street Garden</p><p>Plant, harvest, and meet the neighbors. All ages welcome.</p></div>
              <button data-signup="Grow Together: Garden Workday — September 12, 2026" aria-label="Register for Grow Together Garden Workday">↗</button>
            </article>
            <article class="event">
              <time class="date" datetime="2026-09-24"><span>SEP</span><strong>24</strong></time>
              <div><span class="tag">Community conversation</span><h4>A Seat at the Table</h4><p>6:00–7:30 PM · Common Ground Hub</p><p>Share a meal and help shape next year’s neighborhood priorities.</p></div>
              <button data-signup="A Seat at the Table — September 24, 2026" aria-label="Register for A Seat at the Table">↗</button>
            </article>
            <article class="event">
              <time class="date" datetime="2026-10-10"><span>OCT</span><strong>10</strong></time>
              <div><span class="tag">Fundraiser</span><h4>The Good Together Walk</h4><p>10:00 AM–1:00 PM · Riverside Park</p><p>A family-friendly 5K supporting food security close to home.</p></div>
              <button data-signup="The Good Together Walk — October 10, 2026" aria-label="Register for The Good Together Walk">↗</button>
            </article>
            <p class="events-foot">Have an idea for a community event? <a href="mailto:hello@commonground.example" style="text-decoration:underline;text-underline-offset:3px">Let’s make it happen together.</a></p>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="resources" aria-labelledby="resources-title">
      <div class="wrap">
        <div class="section-head">
          <div><span class="eyebrow">Knowledge that opens doors</span><h2 id="resources-title">Good work starts<br>with good resources.</h2></div>
          <p>Find practical guidance, explore our progress, and learn how to speak up for your community. These resources are here to help you take an informed next step.</p>
        </div>
        <div class="resource-grid">
          <article class="resource">
            <span class="resource-icon" aria-hidden="true">↗</span>
            <span class="type">IMPACT &amp; ACCOUNTABILITY</span>
            <h3>Our 2025 year in action</h3>
            <p>Explore the outcomes, partnerships, and financial stewardship behind our work, along with the priorities guiding our next year.</p>
            <button class="text-link" style="border-top:0;border-left:0;border-right:0;background:none;color:inherit" data-resource="report">Read the impact summary <span aria-hidden="true">→</span></button>
          </article>
          <article class="resource">
            <span class="resource-icon" aria-hidden="true">♡</span>
            <span class="type">VOLUNTEER TOOLKIT</span>
            <h3>Your first day, made easier</h3>
            <p>A simple guide to getting started: what to expect, what to bring, and how we make volunteering safe, inclusive, and genuinely useful.</p>
            <button class="text-link" style="border-top:0;border-left:0;border-right:0;background:none;color:inherit" data-resource="volunteer">Open the volunteer guide <span aria-hidden="true">→</span></button>
          </article>
          <article class="resource">
            <span class="resource-icon" aria-hidden="true">◎</span>
            <span class="type">COMMUNITY ADVOCACY</span>
            <h3>Turn your voice into action</h3>
            <p>Learn to identify a local issue, listen to your neighbors, and work with community leaders toward a shared, achievable goal.</p>
            <button class="text-link" style="border-top:0;border-left:0;border-right:0;background:none;color:inherit" data-resource="advocacy">Explore the action guide <span aria-hidden="true">→</span></button>
          </article>
        </div>
        <div class="faq">
          <div><span class="eyebrow">A little more clarity</span><h2>Good questions.<br>Honest answers.</h2><p>Can’t find what you need? Our community team is happy to help.</p><a class="text-link" href="mailto:hello@commonground.example">Get in touch <span aria-hidden="true">↗</span></a></div>
          <div>
            <details><summary>Where does my donation go?</summary><p>Unrestricted gifts support the areas of greatest need across food access, learning, and neighborhood programs. Our 2025 illustrative allocation is 84% programs, 10% operations, and 6% fundraising. The estimator uses an average cost of $2.50 per meal; actual costs and outcomes vary. This demonstration website does not process donations.</p></details>
            <details><summary>Can I volunteer without any experience?</summary><p>Absolutely. Most roles require no previous experience, and every new volunteer receives an orientation and support from a team lead. Mentoring roles may involve additional training and safeguarding checks. Let us know about accessibility needs so we can help you find a comfortable fit.</p></details>
            <details><summary>Can my workplace or organization get involved?</summary><p>Yes. We welcome group volunteer days, skills-based projects, food drives, and longer-term partnerships. We’ll work with your team to match your interests with community priorities—not just a one-day photo opportunity. Contact our community team to start a conversation.</p></details>
            <details><summary>How can I access support for myself or my family?</summary><p>Reach out to our community team to learn about pantry hours, learning programs, and partner referrals. You don’t need to be a donor or volunteer to ask for help. Share only what you feel comfortable sharing; our approach centers dignity, privacy, and practical support.</p></details>
          </div>
        </div>
      </div>
    </section>

    <section class="newsletter" id="newsletter" aria-labelledby="newsletter-title">
      <div class="wrap newsletter-grid">
        <div><h2 id="newsletter-title">A little good in your inbox.</h2><p>Community stories, upcoming events, and meaningful ways to help.<br>No noise. Just neighbors doing good.</p></div>
        <div>
          <form class="newsletter-form" id="newsletter-form">
            <label class="sr-only" for="newsletter-email">Your email address</label>
            <input id="newsletter-email" name="email" type="email" autocomplete="email" placeholder="Your email address" required>
            <button class="btn btn-dark" type="submit">Count me in <span aria-hidden="true">↗</span></button>
          </form>
          <p class="newsletter-small" id="newsletter-status" role="status">Demo signup only. No email is sent or stored. Your privacy matters.</p>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="wrap">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="brand" href="#" aria-label="Common Ground home">
            <img src="https://placehold.co/86x86/e9efe5/173e35?text=cg&font=manrope" width="43" height="43" loading="lazy" alt="Common Ground logo">
            <span><span class="brand-name">common ground.</span><span class="brand-tag">GOOD GROWS TOGETHER</span></span>
          </a>
          <p>We believe stronger communities begin with people looking out for one another. Let’s build something good, together.</p>
          <div class="socials" aria-label="Social media">
            <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit Instagram (opens in a new tab)">ig</a>
            <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit Facebook (opens in a new tab)">f</a>
            <a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit LinkedIn (opens in a new tab)">in</a>
          </div>
        </div>
        <div><h3>Discover</h3><ul><li><a href="#about">Our purpose</a></li><li><a href="#programs">Our programs</a></li><li><a href="#impact">Community impact</a></li><li><a href="#resources">Resources &amp; reports</a></li></ul></div>
        <div><h3>Get involved</h3><ul><li><a href="#give">Make a donation</a></li><li><a href="#volunteer">Volunteer with us</a></li><li><a href="#events">Upcoming events</a></li><li><a href="mailto:partners@commonground.example">Become a partner</a></li></ul></div>
        <div class="footer-contact"><h3>Let’s connect</h3><ul><li>128 Maple Street, Suite 200<br>Portland, OR 97205</li><li><a href="mailto:hello@commonground.example">hello@commonground.example</a></li><li><a href="tel:+15035550146">(503) 555-0146</a></li><li>Monday–Friday · 9 AM–5 PM PT</li></ul></div>
      </div>
      <div class="footer-bottom"><span>© <span id="year">2026</span> Common Ground. Good grows together. · Fictional nonprofit demonstration.</span><div class="footer-legal"><button data-legal="privacy">Privacy</button><button data-legal="terms">Terms</button><a href="#main">Back to top ↑</a></div></div>
    </div>
  </footer>

  <dialog id="content-dialog" aria-labelledby="dialog-title">
    <button class="dialog-close" aria-label="Close dialog">×</button>
    <div id="dialog-content"></div>
  </dialog>

  <script>
    (() => {
      const nav = document.getElementById('main-nav');
      const menu = document.querySelector('.menu-toggle');
      menu.addEventListener('click', () => {
        const open = menu.getAttribute('aria-expanded') !== 'true';
        menu.setAttribute('aria-expanded', String(open));
        menu.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
        menu.textContent = open ? '×' : '☰';
        nav.classList.toggle('open', open);
      });
      nav.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
        nav.classList.remove('open');
        menu.setAttribute('aria-expanded', 'false');
        menu.setAttribute('aria-label', 'Open navigation');
        menu.textContent = '☰';
      }));

      const dialog = document.getElementById('content-dialog');
      const dialogContent = document.getElementById('dialog-content');
      let lastFocus;
      function openDialog(html) {
        lastFocus = document.activeElement;
        dialogContent.innerHTML = html;
        dialog.showModal();
        document.body.style.overflow = 'hidden';
      }
      function closeDialog() { dialog.close(); }
      dialog.querySelector('.dialog-close').addEventListener('click', closeDialog);
      dialog.addEventListener('click', e => { if (e.target === dialog) {
        const r = dialog.getBoundingClientRect();
        if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) closeDialog();
      }});
      dialog.addEventListener('close', () => {
        document.body.style.overflow = '';
        if (lastFocus) lastFocus.focus();
      });

      let amount = 30, frequency = 'monthly';
      const custom = document.getElementById('custom-amount');
      const amountButtons = document.querySelectorAll('[data-amount]');
      const error = document.getElementById('gift-error');
      function updateGift() {
        const valid = Number.isFinite(amount) && amount >= 1 && amount <= 100000 && Number.isInteger(amount);
        const formatted = valid ? amount.toLocaleString('en-US') : '—';
        const meals = valid ? Math.floor(amount / 2.5).toLocaleString('en-US') : '0';
        document.getElementById('give-button-text').textContent = valid ? `Give $${formatted}${frequency === 'monthly' ? ' monthly' : ''}` : 'Choose a gift amount';
        document.getElementById('impact-preview-text').textContent = valid
          ? (amount < 2.5 ? `Your $${formatted} gift joins with other donations to help fund nourishing meals.` : `Your $${formatted}${frequency === 'monthly' ? ' monthly' : ''} gift could help provide ${meals} nourishing meals${frequency === 'monthly' ? ' each month' : ''}.`)
          : 'Enter a whole-dollar amount between $1 and $100,000 to explore your impact.';
        error.hidden = true;
      }
      document.querySelectorAll('[data-frequency]').forEach(button => button.addEventListener('click', () => {
        frequency = button.dataset.frequency;
        document.querySelectorAll('[data-frequency]').forEach(b => {
          const active = b === button;
          b.classList.toggle('active', active);
          b.setAttribute('aria-pressed', String(active));
        });
        updateGift();
      }));
      amountButtons.forEach(button => button.addEventListener('click', () => {
        amount = Number(button.dataset.amount);
        custom.value = '';
        amountButtons.forEach(b => {
          b.classList.toggle('selected', b === button);
          b.setAttribute('aria-pressed', String(b === button));
        });
        updateGift();
      }));
      custom.addEventListener('input', () => {
        amount = custom.value === '' ? 30 : Number(custom.value);
        amountButtons.forEach(b => {
          const selected = custom.value === '' && Number(b.dataset.amount) === 30;
          b.classList.toggle('selected', selected);
          b.setAttribute('aria-pressed', String(selected));
        });
        updateGift();
      });
      document.getElementById('donation-form').addEventListener('submit', e => {
        e.preventDefault();
        if (!Number.isFinite(amount) || amount < 1 || amount > 100000 || !Number.isInteger(amount)) {
          error.textContent = 'Please choose a whole-dollar amount between $1 and $100,000.';
          error.hidden = false;
          custom.focus();
          return;
        }
        openDialog(`<span class="eyebrow">Your generosity matters</span><h2 id="dialog-title">A little kindness goes a long way.</h2><p>You’ve explored a <strong>$${amount.toLocaleString('en-US')} ${frequency === 'monthly' ? 'monthly' : 'one-time'} gift</strong>. Gifts like this can help keep nourishing food and practical support within reach for our neighbors.</p><div class="notice"><p style="margin:0">This is a fictional nonprofit demonstration. No payment has been collected and no recurring gift has been created.</p></div><p class="dialog-note">A live site would connect this step to a verified, secure donation provider. Never enter payment information into a demonstration.</p>`);
      });

      document.querySelectorAll('[data-signup]').forEach(button => button.addEventListener('click', () => {
        const topic = button.dataset.signup;
        openDialog(`<span class="eyebrow">Let’s do good together</span><h2 id="dialog-title">${topic === 'Volunteer interest' ? 'Find your volunteer fit.' : 'Save your place.'}</h2><p>${topic}</p><p>Tell us a little about yourself to preview the signup experience. All events use local Pacific time.</p><form id="interest-form"><label for="signup-name">Your name</label><input id="signup-name" name="name" autocomplete="name" required maxlength="100"><label for="signup-email">Email address</label><input id="signup-email" name="email" type="email" autocomplete="email" required><label for="signup-interest">What interests you most?</label><select id="signup-interest"><option>Food access &amp; pantry support</option><option>Gardens &amp; neighborhood projects</option><option>Learning &amp; mentoring</option><option>Community events</option><option>I’m open to anything</option></select><button type="submit" class="btn btn-dark">Preview my registration <span aria-hidden="true">↗</span></button><p class="dialog-note">Demo only. Your information is not sent or stored, and this does not reserve an event space.</p></form>`);
        document.getElementById('interest-form').addEventListener('submit', e => {
          e.preventDefault();
          dialogContent.innerHTML = `<span class="eyebrow">A great first step</span><h2 id="dialog-title">You’re ready to get involved.</h2><p>Your registration preview is complete. On a live site, our community team would send next steps, accessibility information, and orientation details.</p><div class="notice"><p style="margin:0">No reservation was made and no personal information was submitted. Thanks for exploring this demonstration.</p></div>`;
          dialog.querySelector('.dialog-close').focus();
        });
      }));

      const resources = {
        report: `<span class="eyebrow">2025 impact summary</span><h2 id="dialog-title">Accountability, in action.</h2><p>In our illustrative 2025 reporting year, Common Ground supported 8,400 neighbors, shared 42,000 meals, and worked with 1,200+ volunteers and 18 community partners.</p><h3 style="font-size:18px">Responsible stewardship</h3><p>Our sample spending allocation is 84% for direct programs, 10% for operations, and 6% for fundraising. Program investments include pantry procurement, learning materials, resident-led projects, and frontline coordination.</p><h3 style="font-size:18px">Looking ahead</h3><p>Our next priorities are expanding evening pantry access, strengthening mentor retention, and creating a resident advisory circle. Endowment planning is intended to support long-term stability without replacing immediate community investment.</p><p class="dialog-note">All figures are fictional examples. This summary is not an audited financial report or a statement of charitable registration.</p>`,
        volunteer: `<span class="eyebrow">Volunteer toolkit</span><h2 id="dialog-title">Your first day, made easier.</h2><h3 style="font-size:18px">Before you arrive</h3><p>Choose a role that matches your interests and availability. Let the coordinator know about accessibility needs, and review your shift instructions. Youth volunteers should confirm age requirements and guardian arrangements.</p><h3 style="font-size:18px">What to bring</h3><p>Wear comfortable, closed-toe shoes and clothes suited to the task. Bring a water bottle and, for outdoor shifts, weather protection. Necessary tools and role-specific safety equipment are provided.</p><h3 style="font-size:18px">How we work together</h3><p>Start with a team orientation. Respect the privacy of community members, ask before taking photos, and follow food-handling and safeguarding guidance. If anything feels unclear or unsafe, pause and ask your team lead.</p><p class="dialog-note">This is an illustrative guide. Confirm the requirements of your actual volunteer organization before attending.</p>`,
        advocacy: `<span class="eyebrow">Community advocacy guide</span><h2 id="dialog-title">Start small. Speak together.</h2><h3 style="font-size:18px">1. Listen before you lead</h3><p>Talk with neighbors who are directly affected by an issue. Ask what is working, what is missing, and what a useful change would look like. Seek out voices that are often left out of the conversation.</p><h3 style="font-size:18px">2. Choose a practical goal</h3><p>Turn a broad concern into a specific request, such as evening pantry hours or safer access to a neighborhood garden. Identify who can make that change and what evidence would help them understand the need.</p><h3 style="font-size:18px">3. Build a shared next step</h3><p>Invite partners, prepare a clear message, and attend a local listening session or public meeting. Keep advocacy respectful and nonpartisan, protect personal information, and share progress with the community.</p>`
      };
      document.querySelectorAll('[data-resource]').forEach(button => button.addEventListener('click', () => openDialog(resources[button.dataset.resource])));
      document.querySelectorAll('[data-legal]').forEach(button => button.addEventListener('click', () => {
        openDialog(button.dataset.legal === 'privacy'
          ? `<h2 id="dialog-title">Privacy, plainly stated.</h2><p>This fictional demonstration has no backend. Donation selections are held only in page memory. Newsletter and registration details are not sent, saved, or used to contact you.</p><p>Images and fonts are loaded from external providers, which may receive ordinary connection information such as your IP address. Social links open third-party websites with their own privacy policies.</p><p>No payment information is requested. A live organization must publish its own privacy policy, data retention rules, and contact information before collecting personal data.</p>`
          : `<h2 id="dialog-title">Demonstration terms.</h2><p>Common Ground is a fictional organization created to demonstrate a nonprofit website. Names, stories, partners, impact figures, events, and contact details are illustrative. Images are placeholders rather than documentation of actual programs.</p><p>No charitable donations, event reservations, or volunteer applications are processed here. Do not rely on this page for real support services, tax advice, or charitable registration information.</p><p>External links are provided for demonstration purposes and do not imply an affiliation or endorsement.</p>`);
      }));
      document.getElementById('newsletter-form').addEventListener('submit', e => {
        e.preventDefault();
        document.getElementById('newsletter-status').textContent = 'Thanks for your interest! This demo has not subscribed you or stored your email.';
        e.target.reset();
      });
      document.getElementById('year').textContent = new Date().getFullYear();
    })();
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:58:11.473Z",
  "url": "https://benchmark.aimac.invalid/fdbf8be84f414888bc5b8b16afd374c41a080fd1c2fa5b03c11e4fb45937f5c6.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-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-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-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": "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": "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": "<a class=\"brand\" href=\"#\" aria-label=\"Common Ground home\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#\" aria-label=\"Common Ground home\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"allocation-bar\" role=\"img\" aria-label=\"84 percent programs, 10 percent operations, 6 percent fundraising\"><span></span><span></span><span></span></div>",
          "target": [
            ".allocation-bar"
          ]
        }
      ]
    },
    {
      "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-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": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span aria-hidden=\"true\">\u2197</span>",
          "target": [
            "#main-nav > .btn-primary.btn[href$=\"#give\"] > span[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#\" aria-label=\"Common Ground home\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"allocation-bar\" role=\"img\" aria-label=\"84 percent programs, 10 percent operations, 6 percent fundraising\"><span></span><span></span><span></span></div>",
          "target": [
            ".allocation-bar"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"allocation-bar\" role=\"img\" aria-label=\"84 percent programs, 10 percent operations, 6 percent fundraising\"><span></span><span></span><span></span></div>",
          "target": [
            ".allocation-bar"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#\" aria-label=\"Common Ground home\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#\" aria-label=\"Common Ground home\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input id=\"newsletter-email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"Your email address\" required=\"\">",
          "target": [
            "#newsletter-email"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span style=\"color:var(--orange)\">.</span>",
          "target": [
            ".brand-name > span"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"text-link\" style=\"background:none;border-top:0;border-left:0;border-right:0;color:var(--ink);cursor:pointer\" data-resource=\"report\">Explore our impact &amp; financials <span aria-hidden=\"true\">\u2197</span></button>",
          "target": [
            ".allocation > .text-link[data-resource=\"report\"]"
          ]
        }
      ]
    },
    {
      "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 id=\"hero-title\">Stronger neighbors.<br><span>Brighter futures.</span></h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2 id=\"programs-title\">A stronger community<br>starts with the essentials.</h2>",
                  "target": [
                    "#programs-title"
                  ]
                },
                {
                  "html": "<h3>Food on every table.</h3>",
                  "target": [
                    ".program-card:nth-child(1) > .program-content > h3"
                  ]
                },
                {
                  "html": "<h3>Room to grow.</h3>",
                  "target": [
                    ".program-card:nth-child(2) > .program-content > h3"
                  ]
                },
                {
                  "html": "<h3>Places to belong.</h3>",
                  "target": [
                    ".program-card:nth-child(3) > .program-content > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"story-title\">Sometimes, a garden grows more than food.</h2>",
                  "target": [
                    "#story-title"
                  ]
                },
                {
                  "html": "<h2 id=\"give-title\">Your kindness.<br>A neighbor\u2019s next step.</h2>",
                  "target": [
                    "#give-title"
                  ]
                },
                {
                  "html": "<h3>Make good happen.</h3>",
                  "target": [
                    "#donation-form > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"involved-title\">There\u2019s a place for you here.</h2>",
                  "target": [
                    "#involved-title"
                  ]
                },
                {
                  "html": "<h3>Bring yourself. We\u2019ll bring the purpose.</h3>",
                  "target": [
                    ".volunteer-body > h3"
                  ]
                },
                {
                  "html": "<h3>Coming together, soon.</h3>",
                  "target": [
                    ".events-title > h3"
                  ]
                },
                {
                  "html": "<h4>Grow Together: Garden Workday</h4>",
                  "target": [
                    ".event:nth-child(2) > div > h4"
                  ]
                },
                {
                  "html": "<h4>A Seat at the Table</h4>",
                  "target": [
                    ".event:nth-child(3) > div > h4"
                  ]
                },
                {
                  "html": "<h4>The Good Together Walk</h4>",
                  "target": [
                    ".event:nth-child(4) > div > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"resources-title\">Good work starts<br>with good resources.</h2>",
                  "target": [
                    "#resources-title"
                  ]
                },
                {
                  "html": "<h3>Our 2025 year in action</h3>",
                  "target": [
                    ".resource:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Your first day, made easier</h3>",
                  "target": [
                    ".resource:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Turn your voice into action</h3>",
                  "target": [
                    ".resource:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Good questions.<br>Honest answers.</h2>",
                  "target": [
                    ".faq > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2 id=\"newsletter-title\">A little good in your inbox.</h2>",
                  "target": [
                    "#newsletter-title"
                  ]
                },
                {
                  "html": "<h3>Discover</h3>",
                  "target": [
                    ".footer-grid > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Get involved</h3>",
                  "target": [
                    "div:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Let\u2019s connect</h3>",
                  "target": [
                    ".footer-contact > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"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": "#f2f4e8",
                "bgColor": "#173e35",
                "contrastRatio": 10.62,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 10.62"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"announcement\">A little time. A lasting difference. Our fall volunteer season is open. <a href=\"#volunteer\">Find your place \u2197</a></div>",
          "target": [
            ".announcement"
          ]
        }
      ]
    },
    {
      "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": "main-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav id=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#main-nav"
          ]
        }
      ]
    },
    {
      "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 class=\"sr-only\" for=\"custom-amount\">Enter another gift amount in US dollars</label>",
                  "target": [
                    "label[for=\"custom-amount\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"custom-amount\" type=\"number\" min=\"1\" max=\"100000\" step=\"1\" inputmode=\"numeric\" placeholder=\"Other amount\" aria-describedby=\"gift-error\">",
          "target": [
            "#custom-amount"
          ]
        }
      ]
    },
    {
      "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/86x86/173e35/faf9f5?text=cg&amp;font=manrope\" width=\"43\" height=\"43\" alt=\"Common Ground logo\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"] > img[width=\"43\"][height=\"43\"][alt=\"Common Ground 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": null,
              "relatedNodes": [
                {
                  "html": "<label class=\"sr-only\" for=\"custom-amount\">Enter another gift amount in US dollars</label>",
                  "target": [
                    "label[for=\"custom-amount\"]"
                  ]
                }
              ],
              "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 id=\"custom-amount\" type=\"number\" min=\"1\" max=\"100000\" step=\"1\" inputmode=\"numeric\" placeholder=\"Other amount\" aria-describedby=\"gift-error\">",
          "target": [
            "#custom-amount"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"announcement\">A little time. A lasting difference. Our fall volunteer season is open. <a href=\"#volunteer\">Find your place \u2197</a></div>",
                  "target": [
                    ".announcement"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"announcement\">A little time. A lasting difference. Our fall volunteer season is open. <a href=\"#volunteer\">Find your place \u2197</a></div>",
                  "target": [
                    ".announcement"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#volunteer\">Find your place \u2197</a>",
          "target": [
            ".announcement > a[href$=\"#volunteer\"]"
          ]
        }
      ]
    },
    {
      "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 class=\"skip\" href=\"#main\">Skip to content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    },
    {
      "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><li><a href=\"#about\">Our purpose</a></li><li><a href=\"#programs\">Our programs</a></li><li><a href=\"#impact\">Community impact</a></li><li><a href=\"#resources\">Resources &amp; reports</a></li></ul>",
          "target": [
            "div: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=\"#about\">Our purpose</a></li>",
          "target": [
            "div: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\">",
          "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/86x86/173e35/faf9f5?text=cg&amp;font=manrope\" width=\"43\" height=\"43\" alt=\"Common Ground logo\">",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"] > img[width=\"43\"][height=\"43\"][alt=\"Common Ground logo\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"allocation-bar\" role=\"img\" aria-label=\"84 percent programs, 10 percent operations, 6 percent fundraising\"><span></span><span></span><span></span></div>",
          "target": [
            ".allocation-bar"
          ]
        }
      ]
    },
    {
      "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>Where does my donation go?</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": 143.7,
                "height": 56.4
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (143.7px by 56.4px, 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 class=\"skip\" href=\"#main\">Skip to content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "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": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"partner-line\" aria-label=\"Community partnership highlights\">",
          "target": [
            ".partner-line"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "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": {
                "messageKey": "nonBmp"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element content contains only non-text characters"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span aria-hidden=\"true\">\u2192</span>",
          "target": [
            ".btn-outline > span[aria-hidden=\"true\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element content contains only non-text characters"
        }
      ]
    }
  ],
  "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": "#6c7970",
                "bgColor": "#faf9f5",
                "contrastRatio": 4.32,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\">",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.32 (foreground color: #6c7970, background color: #faf9f5, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand-tag\">GOOD GROWS TOGETHER</span>",
          "target": [
            ".header-inner > .brand[href=\"#\"][aria-label=\"Common Ground home\"] > span > .brand-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.32 (foreground color: #6c7970, background color: #faf9f5, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#df5c35",
                "contrastRatio": 3.67,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a class=\"btn btn-primary\" href=\"#give\">Give now <span aria-hidden=\"true\">\u2197</span></a>",
                  "target": [
                    "#main-nav > .btn-primary.btn[href$=\"#give\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.67 (foreground color: #ffffff, background color: #df5c35, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"btn btn-primary\" href=\"#give\">Give now <span aria-hidden=\"true\">\u2197</span></a>",
          "target": [
            "#main-nav > .btn-primary.btn[href$=\"#give\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.67 (foreground color: #ffffff, background color: #df5c35, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#df5c35",
                "contrastRatio": 3.67,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#give\" class=\"btn btn-primary\">Make a donation <span class=\"arrow\" aria-hidden=\"true\">\u2197</span></a>",
                  "target": [
                    ".hero-actions > .btn-primary.btn[href$=\"#give\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.67 (foreground color: #ffffff, background color: #df5c35, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#give\" class=\"btn btn-primary\">Make a donation <span class=\"arrow\" aria-hidden=\"true\">\u2197</span></a>",
          "target": [
            ".hero-actions > .btn-primary.btn[href$=\"#give\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.67 (foreground color: #ffffff, background color: #df5c35, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#768476",
                "bgColor": "#faf9f5",
                "contrastRatio": 3.73,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Local food collective</small>",
          "target": [
            ".partner-name:nth-child(2) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#768476",
                "bgColor": "#faf9f5",
                "contrastRatio": 3.73,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Community credit union</small>",
          "target": [
            ".partner-name:nth-child(3) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#768476",
                "bgColor": "#faf9f5",
                "contrastRatio": 3.73,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Learning alliance</small>",
          "target": [
            ".partner-name:nth-child(4) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#768476",
                "bgColor": "#faf9f5",
                "contrastRatio": 3.73,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>Neighborhood foundation</small>",
          "target": [
            ".partner-name:nth-child(5) > small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.73 (foreground color: #768476, background color: #faf9f5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#df5c35",
                "contrastRatio": 3.67,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-primary\" type=\"submit\"><span id=\"give-button-text\">Give $30 monthly</span><span aria-hidden=\"true\">\u2197</span></button>",
                  "target": [
                    ".btn-primary.btn[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.67 (foreground color: #ffffff, background color: #df5c35, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span id=\"give-button-text\">Give $30 monthly</span>",
          "target": [
            "#give-button-text"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.67 (foreground color: #ffffff, background color: #df5c35, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68774e",
                "bgColor": "#efeee7",
                "contrastRatio": 4.16,
                "fontSize": "6.8pt (9px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section get-involved\" aria-labelledby=\"involved-title\">",
                  "target": [
                    ".get-involved"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #68774e, background color: #efeee7, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Volunteer day</span>",
          "target": [
            ".event:nth-child(2) > div > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #68774e, background color: #efeee7, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68774e",
                "bgColor": "#efeee7",
                "contrastRatio": 4.16,
                "fontSize": "6.8pt (9px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section get-involved\" aria-labelledby=\"involved-title\">",
                  "target": [
                    ".get-involved"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #68774e, background color: #efeee7, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Community conversation</span>",
          "target": [
            ".event:nth-child(3) > div > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #68774e, background color: #efeee7, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#68774e",
                "bgColor": "#efeee7",
                "contrastRatio": 4.16,
                "fontSize": "6.8pt (9px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section get-involved\" aria-labelledby=\"involved-title\">",
                  "target": [
                    ".get-involved"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.16 (foreground color: #68774e, background color: #efeee7, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Fundraiser</span>",
          "target": [
            ".event:nth-child(4) > div > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.16 (foreground color: #68774e, background color: #efeee7, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5722
      },
      {
        "y": 576,
        "height": 5722
      },
      {
        "y": 1152,
        "height": 5722
      },
      {
        "y": 1728,
        "height": 5722
      },
      {
        "y": 2304,
        "height": 5722
      },
      {
        "y": 2880,
        "height": 5722
      },
      {
        "y": 3456,
        "height": 5722
      },
      {
        "y": 4032,
        "height": 5722
      },
      {
        "y": 4608,
        "height": 5722
      },
      {
        "y": 5002,
        "height": 5722
      }
    ],
    "scans": 11,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Non-Profit/Charity" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Non-Profit/Charity"
- Description: Charitable organizations, non-profit initiatives, volunteering, and fundraising resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Non-Profit/Charity" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Events", "Volunteer", "About".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Non-Profit/Charity" category. Consider themes similar to: "Partnership Highlights", "Impact Stories", "Resource Center".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "advocacy", "stewardship", "endowment".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Make Donation", "Register", "Give Now".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Non-Profit/Charity" sector. Ideas similar but not limited to: "donation tracker".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "impact reports", "success stories", "volunteer spotlights".
-   **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.