OpenAI GPT 6 Astra Pro – Society

via OpenAI · Generated

  • AIMAC Debt 4.09
  • Cost $1.94
  • Total Violations 9
  • HTML Size 58 KB
  • Em Dashes 11

Screenshot

View OpenAI GPT 6 Astra Pro Society page View Live Page

Accessibility Issues Found

9 Serious

  • color-contrast serious 9 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="program-number">01 / CONNECT</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="#23483d">
  <meta name="description" content="Commonkind brings neighbors together to build fairer, more connected communities through local organizing, practical resources, and collective action.">
  <title>Commonkind — A little closer. A lot stronger.</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;550;600;650;700&family=Fraunces:opsz,wght@9..144,400;9..144,450;9..144,500;9..144,600&display=swap" rel="stylesheet">
  <style>
    :root{--cream:#f7f5ee;--paper:#fffdf7;--green:#23483d;--dark:#173b31;--ink:#263c33;--muted:#667167;--orange:#e88d65;--lime:#d9e7aa;--line:#d9ddd0;--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",sans-serif}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:105px}
    body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    button,input,select{font:inherit}
    button,a,input,select,summary{ -webkit-tap-highlight-color:transparent}
    button{cursor:pointer}
    img{display:block;max-width:100%;object-fit:cover}
    button{color:inherit}
    h1,h2,h3,p{margin:0}
    h1,h2,h3{font-family:var(--serif);font-weight:450;line-height:1.08;letter-spacing:-.035em}
    h2{font-size:clamp(36px,4vw,56px)}
    h3{font-size:28px}
    p+p{margin-top:16px}
    a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b9683c;outline-offset:5px}
    ::selection{background:var(--lime);color:var(--dark)}
    .wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}
    .icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
    .eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:22px}
    .eyebrow:before{content:"";height:7px;width:7px;border-radius:50%;background:var(--orange)}
    .btn{border:1px solid transparent;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:14px 22px;line-height:1.4;font-size:14px;font-weight:600;transition:background .2s,transform .2s;min-height:49px}
    .btn:hover{transform:translateY(-2px)}
    .btn-green{background:var(--green);color:white}
    .btn-green:hover{background:#315e4f}
    .btn-light{background:var(--cream);color:var(--dark)}
    .btn-lime{background:var(--lime);color:var(--dark)}
    .btn-outline{background:transparent;border-color:#a8b0a2}
    .text-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:650;border-bottom:1px solid currentColor;padding-bottom:4px}
    .text-link:hover{gap:18px}
    .skip{position:fixed;top:-100px;left:16px;background:white;padding:12px;z-index:100}
    .skip:focus{top:10px}
    .announcement{background:var(--green);color:#f1f1df;text-align:center;padding:8px 20px;font-size:11px;letter-spacing:.035em}
    .announcement a{border-bottom:1px solid #93aa91;margin-left:12px;white-space:nowrap}
    header{background:rgba(247,245,238,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}
    .header-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .brand img{height:43px;width:43px;border-radius:50%}
    .brand-name{display:block;font-size:26px;letter-spacing:-1.3px;font-weight:650;line-height:1.05}
    .brand-tag{display:block;font-size:9px;letter-spacing:.035em;margin-top:6px}
    .nav{display:flex;align-items:center;gap:27px}
    .nav>a{font-size:13px;font-weight:550;white-space:nowrap}
    .nav>a:not(.btn):hover{color:#a8532f}
    .nav .btn{padding:11px 19px;min-height:43px;margin-left:8px}
    .menu-toggle{display:none;border:1px solid var(--line);background:transparent;padding:9px;border-radius:4px}
    .hero{padding:62px 0 66px}
    .hero-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:70px;align-items:center}
    .hero h1{font-size:clamp(55px,6.5vw,86px);line-height:1.02;max-width:610px;letter-spacing:-.05em}
    .hero h1 em{font-style:normal;color:#608069;position:relative}
    .hero-copy>p{font-size:16px;max-width:425px;line-height:1.8;color:var(--muted);margin:27px 0}
    .hero-actions{display:flex;gap:26px;align-items:center}
    .hero-proof{display:flex;align-items:center;gap:13px;margin-top:37px}
    .avatars{display:flex;padding-left:0}
    .avatars img{width:34px;height:34px;border-radius:50%;border:2px solid var(--cream);margin-left:-9px}
    .avatars img:first-child{margin-left:0}
    .hero-proof p{font-size:11px;line-height:1.6;color:var(--muted)}
    .hero-proof strong{color:var(--green);font-weight:700}
    .hero-art{position:relative;padding-top:15px}
    .hero-photo{width:100%;height:548px;border-radius:130px 8px 8px 8px;filter:saturate(.75);background:#ccd1bd}
    .photo-shade{position:absolute;inset:15px 0 0;background:linear-gradient(transparent 58%,rgba(13,30,22,.6));border-radius:130px 8px 8px 8px}
    .photo-caption{position:absolute;left:30px;bottom:30px;color:white;font-size:11px;letter-spacing:.07em}
    .photo-caption span{display:block;font-family:var(--serif);font-size:23px;letter-spacing:-.02em;margin-bottom:3px}
    .roundel{position:absolute;top:-7px;right:-24px;width:118px;height:118px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(11deg);box-shadow:0 4px 0 rgba(0,0,0,.03)}
    .roundel span{font-size:9px;letter-spacing:.16em;font-weight:700}
    .roundel b{font-size:38px;font-family:var(--serif);font-weight:400;line-height:1.3}
    .hero-note{position:absolute;left:-37px;bottom:84px;background:var(--paper);padding:19px 23px;max-width:252px;box-shadow:0 9px 25px #173b3112;border-radius:4px;transform:rotate(-4deg)}
    .hero-note .note-top{font-size:9px;text-transform:uppercase;letter-spacing:.15em;display:flex;align-items:center;gap:8px;margin-bottom:7px}
    .hero-note .note-top:before{content:"";width:6px;height:6px;background:#73904b;border-radius:50%}
    .hero-note p{font-family:var(--serif);font-size:21px;line-height:1.2}
    .belief-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .belief-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:89px}
    .belief-inner>p{font-size:11px;color:var(--muted);max-width:160px;line-height:1.6}
    .belief{display:flex;gap:12px;align-items:center;font-family:var(--serif);font-size:19px}
    .belief .icon{width:25px;height:25px}
    .section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:36px}
    .section-head h2{max-width:570px}
    .section-head>p{max-width:360px;color:var(--muted);font-size:14px;line-height:1.8}
    .program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .program{background:#eeeee3;border:1px solid #e0e2d5;border-radius:6px;padding:29px 28px 26px;position:relative;display:flex;flex-direction:column;align-items:start;min-height:344px}
    .program:nth-child(2){background:#f2e9dd;border-color:#e9dfd2}
    .program:nth-child(3){background:#e7ece3;border-color:#dce4d8}
    .program-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:31px}
    .program-icon{display:grid;place-items:center;border:1px solid #afb9a5;width:47px;height:47px;border-radius:50%}
    .program-icon .icon{width:25px;height:25px}
    .program-number{font-size:11px;color:var(--muted)}
    .program p{font-size:13px;color:#606c5f;line-height:1.85;margin:15px 0 24px}
    .program .text-link{margin-top:auto;font-size:12px;border:0;padding:0}
    .about-bar{display:grid;grid-template-columns:1fr 2.4fr;gap:70px;margin-top:41px;padding:28px 0 0;border-top:1px solid var(--line)}
    .about-bar h3{font-size:24px}
    .about-bar p{font-size:14px;color:var(--muted)}
    .impact{background:var(--green);color:var(--cream);padding:75px 0;position:relative;overflow:hidden}
    .impact-grid{display:grid;grid-template-columns:.92fr 1fr;gap:84px;align-items:center}
    .impact-visual{position:relative}
    .impact-visual img{height:426px;width:100%;border-radius:5px 5px 90px 5px;filter:saturate(.65)}
    .impact-label{position:absolute;bottom:22px;left:22px;background:var(--cream);color:var(--green);font-size:11px;padding:10px 15px;border-radius:3px}
    .impact h2{font-size:49px;max-width:440px}
    .impact-copy>p{color:#c7d4c8;font-size:14px;margin:22px 0 26px;line-height:1.85}
    .stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px;margin:28px 0 29px}
    .stat{border-top:1px solid #5b7364;padding-top:17px}
    .stat strong{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-.03em;color:var(--lime)}
    .stat span{display:block;font-size:11px;color:#d0dbd1;margin-top:7px}
    .impact .text-link{font-size:12px}
    .impact-footnote{font-size:10px!important;opacity:.75;margin:16px 0 0!important}
    .story-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
    .story-feature{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--paper)}
    .story-image{height:275px;position:relative;overflow:hidden}
    .story-image img{width:100%;height:100%;filter:saturate(.65);transition:transform .5s}
    .story-feature:hover .story-image img{transform:scale(1.025)}
    .tag{position:absolute;top:18px;left:18px;background:var(--cream);font-size:9px;font-weight:650;letter-spacing:.09em;padding:6px 11px;border-radius:20px;text-transform:uppercase}
    .story-body{padding:27px 30px}
    .story-meta{font-size:10px;color:var(--muted);letter-spacing:.025em;margin-bottom:11px}
    .story-body h3{font-size:31px;max-width:470px}
    .story-body p{font-size:13px;color:var(--muted);line-height:1.85;margin:15px 0 21px}
    .story-body .text-link{font-size:12px}
    .quote-card{padding:42px;background:#e7ebdc;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
    .quote-mark{font-family:var(--serif);font-size:84px;line-height:.85;color:#7f9570}
    blockquote{margin:12px 0 30px;font-family:var(--serif);font-size:32px;line-height:1.35;letter-spacing:-.025em}
    .quote-person{display:flex;align-items:center;gap:13px}
    .quote-person img{height:46px;width:46px;border-radius:50%}
    .quote-person strong{display:block;font-size:12px}
    .quote-person span{display:block;font-size:11px;color:var(--muted)}
    .quote-bottom{padding-top:24px;margin-top:26px;border-top:1px solid #cbd3bf;font-size:12px;line-height:1.8;color:#607052}
    .resources{border-top:1px solid var(--line);padding:70px 0 80px}
    .resource-grid{display:grid;grid-template-columns:.9fr 1.25fr;gap:95px}
    .resource-intro p{color:var(--muted);font-size:14px;margin:21px 0 25px;max-width:370px}
    .resource-item{display:flex;align-items:center;gap:23px;border-bottom:1px solid var(--line);padding:25px 0;text-align:left;width:100%;background:transparent;border-top:0;border-left:0;border-right:0}
    .resource-item:first-child{padding-top:0}
    .resource-item:hover h3{color:#a8532f}
    .resource-cover{height:76px;width:60px;min-width:60px;background:#dce5b9;border-radius:2px;padding:9px;display:flex;align-items:end;box-shadow:3px 3px 0 #d8ddce}
    .resource-cover .icon{width:27px;height:27px}
    .resource-item:nth-child(2) .resource-cover{background:#ecc3a8}
    .resource-item:nth-child(3) .resource-cover{background:#b4c7bc}
    .resource-info{flex:1}
    .resource-info span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
    .resource-info h3{font-size:23px;margin:4px 0 5px}
    .resource-info p{font-size:11px;color:var(--muted)}
    .resource-item>.icon{width:18px}
    .join-section{padding:0 0 83px}
    .join-box{display:grid;grid-template-columns:1fr 1fr;gap:75px;padding:52px 58px;background:#e8ebdc;border-radius:8px;position:relative;overflow:hidden}
    .join-copy h2{font-size:47px}
    .join-copy>p{font-size:14px;line-height:1.8;color:#62705d;margin:22px 0 25px}
    .join-reassurance{font-size:11px!important;display:flex;gap:10px;align-items:center}
    .match-form{padding:28px;background:var(--paper);border:1px solid #d6ddca;border-radius:5px;align-self:center}
    .match-form h3{font-size:23px;margin-bottom:19px}
    label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}
    select,input{width:100%;border:1px solid #c9d0c1;background:var(--paper);color:var(--ink);border-radius:4px;padding:11px 12px;min-height:45px}
    .field+.field{margin-top:15px}
    .match-form .btn{width:100%;margin-top:20px}
    .match-result{margin-top:18px;background:#edf1e4;padding:18px;border-radius:4px;font-size:13px;border-left:3px solid #72905c}
    .match-result h4{margin:0 0 7px;font-size:15px}
    .match-result p{line-height:1.75}
    .match-result a{margin-top:12px}
    [hidden]{display:none!important}
    .faq{padding:0 0 80px}
    .faq-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:80px}
    .faq h2{font-size:35px}
    .faq-intro p{font-size:13px;color:var(--muted);margin:18px 0}
    details{border-bottom:1px solid var(--line)}
    details:first-child{border-top:1px solid var(--line)}
    summary{cursor:pointer;list-style:none;padding:20px 0;font-size:14px;font-weight:550;display:flex;align-items:center;justify-content:space-between;gap:25px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";font-size:21px;font-weight:400}
    details[open] summary:after{content:"−"}
    details p{font-size:13px;color:var(--muted);padding:0 30px 22px 0;line-height:1.9}
    .newsletter{border-top:1px solid #547063;border-bottom:1px solid #547063;display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:35px 0;margin-bottom:47px}
    .newsletter h3{font-size:30px;margin-bottom:9px}
    .newsletter p{font-size:12px;color:#bdcebf}
    .newsletter form{align-self:center}
    .newsletter label{font-size:11px}
    .email-row{display:flex;gap:8px}
    .email-row input{background:#335547;border-color:#647c6a;color:white;min-width:0}
    .email-row input::placeholder{color:#c2cdbc}
    .email-row .btn{white-space:nowrap;gap:15px}
    .newsletter .form-note{font-size:10px;margin-top:9px}
    footer{background:var(--dark);color:var(--cream);padding:43px 0 24px}
    .footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;margin-bottom:45px}
    .footer-brand .brand-name{font-size:32px}
    .footer-brand>p{max-width:235px;font-size:12px;color:#bacbbd;margin:19px 0}
    .footer-heading{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#aabd9f;margin-bottom:17px}
    .footer-links{display:flex;flex-direction:column;align-items:start;gap:9px;font-size:12px}
    .footer-links a:hover{text-decoration:underline}
    .footer-contact{font-style:normal;font-size:12px;line-height:1.9;color:#c5d1c5}
    .socials{display:flex;gap:14px;margin-top:15px}
    .socials a{font-size:11px;border-bottom:1px solid #7b8b77}
    .footer-bottom{border-top:1px solid #4a6757;padding-top:23px;display:flex;justify-content:space-between;gap:20px;color:#afc0b1;font-size:10px}
    .footer-bottom div{display:flex;gap:24px}
    .link-button{border:0;padding:0;background:transparent;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
    dialog{width:min(620px,calc(100% - 32px));border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);padding:39px;max-height:85vh}
    dialog::backdrop{background:#102c23a6;backdrop-filter:blur(4px)}
    .dialog-close{position:absolute;right:15px;top:13px;border:0;background:transparent;font-size:26px;line-height:1;padding:7px}
    dialog h2{font-size:34px;margin:9px 25px 22px 0}
    dialog p,dialog li{font-size:14px;color:var(--muted);line-height:1.85}
    dialog h3{font-size:22px;margin:25px 0 10px}
    dialog ul{padding-left:20px}
    dialog .btn{margin-top:22px}
    .dialog-kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
    @media(min-width:1450px){.hero{padding-top:78px;padding-bottom:78px}}
    @media(max-width:1100px){
      .wrap{width:calc(100% - 60px)}.nav{gap:17px}.nav>a{font-size:12px}.brand-tag{font-size:8px}.hero-grid{gap:40px}.hero h1{font-size:66px}.hero-photo{height:510px}.hero-note{left:-20px}.roundel{right:-12px}.impact-grid{gap:50px}.resource-grid{gap:55px}.join-box{gap:40px;padding:40px}.hero-actions{gap:17px}.hero-actions .text-link{font-size:12px}.quote-card{padding:32px}blockquote{font-size:28px}.belief{font-size:17px}
    }
    @media(max-width:880px){
      .header-inner{height:75px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);padding:20px 30px;flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav>a{padding:12px;font-size:15px}.nav .btn{margin:8px 0 0}.hero-grid{gap:32px}.hero h1{font-size:55px}.hero-photo{height:455px}.hero-note{padding:14px;max-width:207px}.hero-note p{font-size:18px}.roundel{width:94px;height:94px}.roundel span{font-size:7px}.hero-actions{align-items:start;flex-direction:column;gap:18px}.hero-copy>p{font-size:14px}.belief-inner{flex-wrap:wrap;justify-content:center;padding:22px 0;gap:20px 30px}.belief-inner>p{max-width:none;flex-basis:100%;text-align:center}.program{padding:23px 20px}.program h3{font-size:24px}.section-head{gap:30px}.section-head>p{max-width:300px}.impact-grid{gap:35px}.impact h2{font-size:40px}.impact-visual img{height:445px}.story-grid{grid-template-columns:1.15fr 1fr}.quote-card{padding:27px}.quote-bottom{font-size:11px}.join-box{gap:30px;padding:33px}.join-copy h2{font-size:40px}.match-form{padding:23px}.faq-grid{gap:45px}.newsletter{gap:35px}.footer-top{grid-template-columns:1.4fr 1fr 1fr}.footer-top>div:last-child{grid-column:1/-1;display:flex;gap:25px;align-items:center}.footer-top>div:last-child .footer-heading{margin-bottom:0}.socials{margin-top:0}
    }
    @media(max-width:640px){
      .wrap{width:calc(100% - 40px)}.announcement{font-size:9px;padding:9px 12px}.announcement a{margin-left:6px}.brand-name{font-size:24px}.brand img{width:38px;height:38px}.hero{padding:38px 0 37px}.hero-grid{grid-template-columns:1fr;gap:31px}.hero h1{font-size:clamp(51px,12.6vw,70px);max-width:480px}.eyebrow{font-size:10px;margin-bottom:18px}.hero-copy>p{max-width:390px;margin:22px 0}.hero-actions{flex-direction:row;align-items:center;gap:23px}.btn{font-size:12px;padding:13px 18px}.hero-proof{margin-top:25px}.hero-art{padding:0 8px}.hero-photo{height:395px;border-radius:100px 5px 5px 5px}.photo-shade{inset:0 8px;border-radius:100px 5px 5px 5px}.roundel{top:-13px;right:0}.hero-note{left:0;bottom:79px}.photo-caption{left:30px;bottom:22px}.belief-inner{gap:18px}.belief{font-size:14px;gap:7px}.belief .icon{width:20px;height:20px}.belief:last-child{display:none}.section{padding:55px 0}.section-head{display:block;margin-bottom:26px}.section-head h2{font-size:38px}.section-head>p{max-width:none;margin-top:21px}.section-head>.text-link{margin-top:22px}.program-grid{grid-template-columns:1fr;gap:14px}.program{min-height:auto;padding:25px}.program-top{margin-bottom:20px}.program h3{font-size:29px}.program p{font-size:14px;margin:14px 0 20px}.about-bar{grid-template-columns:1fr;gap:17px;margin-top:28px}.about-bar p{font-size:13px}.impact{padding:45px 0}.impact-grid{grid-template-columns:1fr;gap:34px}.impact-visual{order:2}.impact-visual img{height:295px}.impact h2{font-size:41px}.stats{gap:22px}.stat strong{font-size:39px}.story-grid{grid-template-columns:1fr}.story-image{height:235px}.story-body{padding:25px}.story-body h3{font-size:29px}.quote-card{padding:31px}blockquote{font-size:28px}.resources{padding:49px 0}.resource-grid{grid-template-columns:1fr;gap:17px}.resource-intro h2{font-size:39px}.resource-intro p{max-width:none}.resource-list{margin-top:10px}.resource-item{gap:17px}.resource-info h3{font-size:21px}.join-section{padding-bottom:52px}.join-box{grid-template-columns:1fr;gap:17px;padding:28px 21px}.join-copy h2{font-size:39px}.join-copy>p{font-size:13px}.match-form{padding:22px 18px}.faq{padding-bottom:50px}.faq-grid{grid-template-columns:1fr;gap:20px}.faq h2{font-size:33px}.faq-intro p{margin-bottom:0}.newsletter{grid-template-columns:1fr;gap:22px;padding:29px 0;margin-bottom:34px}.newsletter h3{font-size:27px}.email-row .btn{padding-inline:14px;gap:8px}.email-row .icon{display:none}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.footer-brand>p{max-width:330px}.footer-top>div:last-child{display:block}.footer-top>div:last-child .footer-heading{margin-bottom:12px}.socials{margin-top:15px}.footer-bottom{flex-direction:column;gap:12px}dialog{padding:29px 24px}dialog h2{font-size:29px}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
    <symbol id="arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></symbol>
    <symbol id="north" viewBox="0 0 24 24"><path d="M6 18 18 6M6 6h12v12"/></symbol>
    <symbol id="people" viewBox="0 0 24 24"><circle cx="9" cy="7" r="3"/><path d="M3 20v-3a6 6 0 0 1 12 0v3M16 4a3 3 0 0 1 0 6M18 13a5 5 0 0 1 3 4v3"/></symbol>
    <symbol id="home" viewBox="0 0 24 24"><path d="m3 10 9-7 9 7M5 9v12h14V9M10 21v-7h4v7"/></symbol>
    <symbol id="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></symbol>
    <symbol id="sprout" viewBox="0 0 24 24"><path d="M12 22V11M12 15C4 15 3 9 3 6c6 0 9 3 9 9ZM12 11c0-6 4-9 9-9 0 6-3 9-9 9Z"/></symbol>
    <symbol id="voice" viewBox="0 0 24 24"><path d="m3 9 15-5v16L3 15V9ZM6 16l2 6h4l-2-5M21 8v8M6 8v8"/></symbol>
    <symbol id="book" viewBox="0 0 24 24"><path d="M12 5v16M3 3c4-1 7 0 9 2 2-2 5-3 9-2v16c-4-1-7 0-9 2-2-2-5-3-9-2V3Z"/></symbol>
    <symbol id="check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></symbol>
    <symbol id="menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
  </svg>

  <a class="skip" href="#main">Skip to content</a>
  <div class="announcement">Small actions. Shared possibilities. <a href="#join">Find your place in the movement ↗</a></div>
  <header>
    <div class="wrap header-inner">
      <a class="brand" href="#" aria-label="Commonkind home">
        <img src="https://placehold.co/88x88/23483d/f7f5ee?text=ck.&amp;font=lora" width="43" height="43" alt="Commonkind logo">
        <span><span class="brand-name">commonkind</span><span class="brand-tag">A little closer. A lot stronger.</span></span>
      </a>
      <button class="menu-toggle" aria-label="Open navigation" aria-expanded="false" aria-controls="primary-nav"><svg class="icon"><use href="#menu"/></svg></button>
      <nav class="nav" id="primary-nav" aria-label="Primary navigation">
        <a href="#about">About</a>
        <a href="#work">Our work</a>
        <a href="#impact">Impact</a>
        <a href="#stories">Stories</a>
        <a href="#resources">Resources</a>
        <a href="#join" class="btn btn-green">Join the movement <svg class="icon"><use href="#arrow"/></svg></a>
      </nav>
    </div>
  </header>

  <main id="main">
    <section class="hero" aria-labelledby="hero-title">
      <div class="wrap hero-grid">
        <div class="hero-copy">
          <div class="eyebrow">Rooted in community. Built for change.</div>
          <h1 id="hero-title">A fairer future<br>starts on<br><em>your street.</em></h1>
          <p>Good things happen when neighbors come together. We turn everyday care into collective action—for communities where everyone belongs and has a say.</p>
          <div class="hero-actions">
            <a href="#join" class="btn btn-green">Get involved <svg class="icon"><use href="#arrow"/></svg></a>
            <a href="#work" class="text-link">See what we do <svg class="icon"><use href="#north"/></svg></a>
          </div>
          <div class="hero-proof">
            <div class="avatars" aria-hidden="true">
              <img src="https://i.pravatar.cc/72?u=commonkind-jules" width="34" height="34" alt="">
              <img src="https://i.pravatar.cc/72?u=commonkind-maya" width="34" height="34" alt="">
              <img src="https://i.pravatar.cc/72?u=commonkind-eli" width="34" height="34" alt="">
              <img src="https://i.pravatar.cc/72?u=commonkind-sam" width="34" height="34" alt="">
            </div>
            <p><strong>2,400+ neighbors. One shared purpose.</strong><br>And there’s a place here for you.</p>
          </div>
        </div>
        <div class="hero-art">
          <img class="hero-photo" src="https://picsum.photos/id/1067/900/1100" width="900" height="1100" alt="An everyday urban streetscape, the starting point for neighborhood change" fetchpriority="high">
          <div class="photo-shade"></div>
          <div class="roundel" aria-label="People make the difference"><span>PEOPLE MAKE</span><b>✳</b><span>THE DIFFERENCE</span></div>
          <div class="hero-note"><div class="note-top">The power of together</div><p>Big change.<br>Local beginnings.</p></div>
          <div class="photo-caption"><span>Our neighborhoods. Our future.</span>LET’S BUILD SOMETHING BETTER.</div>
        </div>
      </div>
    </section>

    <div class="belief-strip">
      <div class="wrap belief-inner">
        <p>Different experiences.<br>A common set of beliefs.</p>
        <div class="belief"><svg class="icon"><use href="#people"/></svg>Led by our communities</div>
        <div class="belief"><svg class="icon"><use href="#home"/></svg>Belonging, without barriers</div>
        <div class="belief"><svg class="icon"><use href="#sprout"/></svg>Change that takes root</div>
      </div>
    </div>

    <section class="section" id="work" aria-labelledby="work-title">
      <div class="wrap">
        <div class="section-head">
          <div><div class="eyebrow">What we’re here to do</div><h2 id="work-title">Stronger connections.<br>Lasting change.</h2></div>
          <p>A thriving community isn’t built for people. It’s built with them. We connect local knowledge, practical support, and people power to tackle the issues closest to home.</p>
        </div>
        <div class="program-grid">
          <article class="program">
            <div class="program-top"><span class="program-icon"><svg class="icon"><use href="#people"/></svg></span><span class="program-number">01 / CONNECT</span></div>
            <h3>Make room for everyone.</h3>
            <p>Shared meals, neighborhood circles, and cultural gatherings bring people across generations and backgrounds together. We create welcoming spaces where being heard is the beginning—not the exception.</p>
            <a href="#join" class="text-link" data-interest="connection">Find your community <svg class="icon"><use href="#arrow"/></svg></a>
          </article>
          <article class="program">
            <div class="program-top"><span class="program-icon"><svg class="icon"><use href="#voice"/></svg></span><span class="program-number">02 / ADVOCATE</span></div>
            <h3>Turn voices into influence.</h3>
            <p>From housing access to safer public spaces, we help residents shape the decisions that shape their lives. Our nonpartisan advocacy turns lived experience into clear priorities for systemic change.</p>
            <a href="#join" class="text-link" data-interest="advocacy">Take action locally <svg class="icon"><use href="#arrow"/></svg></a>
          </article>
          <article class="program">
            <div class="program-top"><span class="program-icon"><svg class="icon"><use href="#sprout"/></svg></span><span class="program-number">03 / EQUIP</span></div>
            <h3>Give good ideas a start.</h3>
            <p>A little support can go a long way. Through organizer training, accessible toolkits, and small neighborhood grants, we give local leaders the confidence and resources to turn “what if” into “what’s next.”</p>
            <a href="#resources" class="text-link">Explore the resources <svg class="icon"><use href="#arrow"/></svg></a>
          </article>
        </div>
        <div class="about-bar" id="about">
          <div><div class="eyebrow">Meet Commonkind</div><h3>Neighbors first.<br>Always.</h3></div>
          <div>
            <p>We began in 2019 around a borrowed table, with a simple question: what could our neighborhood become if more people had a seat at it? Today, Commonkind is an independent, community-led organization supporting resident groups across the Greater Portland area.</p>
            <p>We listen before we act. Residents set our priorities, local partners help us deliver, and we share what we learn along the way. We believe collective action works best when the people most affected by an issue lead the conversation.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="impact" id="impact" aria-labelledby="impact-title">
      <div class="wrap impact-grid">
        <div class="impact-visual">
          <img src="https://picsum.photos/id/1018/850/800" width="850" height="800" loading="lazy" alt="Open green landscape illustrating the shared places we work to protect">
          <div class="impact-label">A healthier place to live. A shared responsibility.</div>
        </div>
        <div class="impact-copy">
          <div class="eyebrow">Local action. Real impact.</div>
          <h2 id="impact-title">Not just a moment.<br>A growing movement.</h2>
          <p>Progress looks like a first-time speaker at a council meeting. A community garden with an open gate. A resident-led awareness campaign that becomes a funded priority. Here’s what we made possible together in 2025.</p>
          <div class="stats">
            <div class="stat"><strong>2,400+</strong><span>neighbors taking part</span></div>
            <div class="stat"><strong>32</strong><span>resident-led projects supported</span></div>
            <div class="stat"><strong>$86k</strong><span>invested in neighborhood ideas</span></div>
            <div class="stat"><strong>8</strong><span>community priorities adopted</span></div>
          </div>
          <button class="text-link link-button" data-modal="impact">Read our 2025 impact review <svg class="icon"><use href="#arrow"/></svg></button>
          <p class="impact-footnote">Annual reporting period: January–December 2025. Participation includes in-person and online programs.</p>
        </div>
      </div>
    </section>

    <section class="section" id="stories" aria-labelledby="stories-title">
      <div class="wrap">
        <div class="section-head">
          <div><div class="eyebrow">The people behind the progress</div><h2 id="stories-title">Change has a familiar face.</h2></div>
          <a href="#join" class="text-link">Be part of the next story <svg class="icon"><use href="#north"/></svg></a>
        </div>
        <div class="story-grid">
          <article class="story-feature">
            <div class="story-image">
              <img src="https://picsum.photos/id/103/900/480" width="900" height="480" loading="lazy" alt="A green outdoor space that reflects the possibilities of community stewardship">
              <span class="tag">Community-led spaces</span>
            </div>
            <div class="story-body">
              <div class="story-meta">FIELD NOTES &nbsp;·&nbsp; 5 MIN READ</div>
              <h3>From an overlooked corner to a place to belong.</h3>
              <p>When a group of Eastbank neighbors imagined a gathering place on an unused plot, they didn’t start with a blueprint. They started by listening. Today, their pocket garden is growing much more than vegetables.</p>
              <button class="text-link link-button" data-modal="story">Meet the neighbors behind it <svg class="icon"><use href="#arrow"/></svg></button>
            </div>
          </article>
          <aside class="quote-card" aria-label="A neighbor's experience">
            <div>
              <div class="quote-mark" aria-hidden="true">“</div>
              <blockquote>I used to think change was something other people made. Now I know it can start with me—and the people next door.</blockquote>
            </div>
            <div>
              <div class="quote-person">
                <img src="https://i.pravatar.cc/100?u=commonkind-maya" width="46" height="46" loading="lazy" alt="Maya, neighborhood circle organizer">
                <div><strong>Maya R.</strong><span>Neighbor. Volunteer. First-time organizer.</span></div>
              </div>
              <p class="quote-bottom">Maya joined one neighborhood conversation in 2024. Today, she helps host a monthly circle where new residents and longtime neighbors find common ground.</p>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <section class="resources" id="resources" aria-labelledby="resources-title">
      <div class="wrap resource-grid">
        <div class="resource-intro">
          <div class="eyebrow">The resource corner</div>
          <h2 id="resources-title">Good intentions.<br>Practical next steps.</h2>
          <p>You don’t need to have all the answers to make a difference. Our free, plain-language guides help you bring people together, navigate local decisions, and build momentum that lasts.</p>
          <p>Made with community organizers. Designed to be shared. Start with the guide that meets you where you are.</p>
          <a href="mailto:resources@commonkind.example?subject=Accessible%20resource%20request" class="text-link">Need another format? Ask us <svg class="icon"><use href="#arrow"/></svg></a>
        </div>
        <div class="resource-list">
          <button class="resource-item" data-modal="conversation">
            <span class="resource-cover"><svg class="icon"><use href="#people"/></svg></span>
            <span class="resource-info"><span>Organizer toolkit · 10 min read</span><h3>Start a neighborhood conversation</h3><p>A simple framework for listening, gathering, and getting started.</p></span>
            <svg class="icon"><use href="#north"/></svg>
          </button>
          <button class="resource-item" data-modal="policy">
            <span class="resource-cover"><svg class="icon"><use href="#voice"/></svg></span>
            <span class="resource-info"><span>Advocacy guide · 8 min read</span><h3>Your voice at the council table</h3><p>Understand the process. Prepare your story. Be heard.</p></span>
            <svg class="icon"><use href="#north"/></svg>
          </button>
          <button class="resource-item" data-modal="campaign">
            <span class="resource-cover"><svg class="icon"><use href="#book"/></svg></span>
            <span class="resource-info"><span>Campaign starter · 12 min read</span><h3>Turn awareness into action</h3><p>Build a thoughtful campaign around an issue you care about.</p></span>
            <svg class="icon"><use href="#north"/></svg>
          </button>
        </div>
      </div>
    </section>

    <section class="join-section" id="join" aria-labelledby="join-title">
      <div class="wrap join-box">
        <div class="join-copy">
          <div class="eyebrow">There’s no small way to show up</div>
          <h2 id="join-title">Your time.<br>Your strengths.<br>Our shared future.</h2>
          <p>Have ten minutes or a whole afternoon? Love meeting people, or prefer working behind the scenes? There’s more than one way to contribute.</p>
          <p>Tell us what matters to you and we’ll suggest a meaningful first step. No application, no perfect résumé—just you.</p>
          <p class="join-reassurance"><svg class="icon"><use href="#check"/></svg>Free to join. Open to everyone. Always.</p>
        </div>
        <form class="match-form" id="match-form">
          <h3>Find your way to help</h3>
          <div class="field">
            <label for="interest">I care most about…</label>
            <select id="interest" name="interest">
              <option value="connection">Bringing neighbors together</option>
              <option value="advocacy">Making local decisions fairer</option>
              <option value="spaces">Creating better shared spaces</option>
            </select>
          </div>
          <div class="field">
            <label for="time">I can give…</label>
            <select id="time" name="time">
              <option value="short">About 15 minutes, to start</option>
              <option value="medium">An hour or two each month</option>
              <option value="long">A few hours each week</option>
            </select>
          </div>
          <button class="btn btn-green" type="submit">Find my next step <svg class="icon"><use href="#arrow"/></svg></button>
          <div id="match-result" class="match-result" role="status" aria-live="polite" hidden></div>
        </form>
      </div>
    </section>

    <section class="faq" aria-labelledby="faq-title">
      <div class="wrap faq-grid">
        <div class="faq-intro">
          <div class="eyebrow">A few things to know</div>
          <h2 id="faq-title">Come as you are.</h2>
          <p>Still have a question?<br><a class="text-link" href="mailto:hello@commonkind.example">Let’s talk <svg class="icon"><use href="#arrow"/></svg></a></p>
        </div>
        <div>
          <details>
            <summary>Do I need experience to get involved?</summary>
            <p>Not at all. Most of our volunteers started with a little curiosity and a willingness to listen. We offer a friendly introduction, clear guidance, and a named organizer you can turn to. You choose your level of commitment, and you can change it whenever you need.</p>
          </details>
          <details>
            <summary>Is Commonkind a political organization?</summary>
            <p>We are independent and nonpartisan. We advocate for community priorities and help residents participate in public decisions, but we do not support or oppose political candidates. People with different perspectives are welcome; respect, inclusion, and the dignity of our neighbors are non-negotiable.</p>
          </details>
          <details>
            <summary>Can I participate if I don’t live nearby?</summary>
            <p>Our in-person programs focus on Greater Portland, but our guides are available to everyone. Remote volunteers can help with research, accessible communications, and resource editing. Use the matching tool above, then tell our team where you’re based so we can explore an appropriate role.</p>
          </details>
          <details>
            <summary>How do you make activities accessible?</summary>
            <p>We prioritize step-free venues, clear event information, and a range of ways to participate. Interpretation, travel support, and alternative resource formats can be arranged depending on the activity. Contact us before attending to discuss what you need; you never have to share a diagnosis to request support.</p>
          </details>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="wrap">
      <div class="newsletter">
        <div><h3>A little good in your inbox.</h3><p>Local stories, useful resources, and ways to show up. One thoughtful update a month.</p></div>
        <form id="newsletter-form">
          <label for="email">Your email address</label>
          <div class="email-row">
            <input type="email" id="email" name="email" placeholder="you@example.com" autocomplete="email" required maxlength="254">
            <button type="submit" class="btn btn-lime">Get updates <svg class="icon"><use href="#arrow"/></svg></button>
          </div>
          <p class="form-note" id="newsletter-note" aria-live="polite">Opens an email request for you to send. No spam. Leave anytime.</p>
        </form>
      </div>
      <div class="footer-top">
        <div class="footer-brand">
          <a class="brand" href="#"><span class="brand-name">commonkind<span style="color:var(--lime)">✳</span></span></a>
          <p>A little closer. A lot stronger.<br>Building a fairer future, one neighborhood at a time.</p>
        </div>
        <div>
          <h2 class="footer-heading">Explore</h2>
          <div class="footer-links"><a href="#about">About Commonkind</a><a href="#work">Our work</a><a href="#impact">Our impact</a><a href="#stories">Community stories</a></div>
        </div>
        <div>
          <h2 class="footer-heading">Make a difference</h2>
          <div class="footer-links"><a href="#join">Get involved</a><a href="#resources">Free resources</a><a href="mailto:partners@commonkind.example">Partner with us</a><a href="mailto:hello@commonkind.example?subject=Share%20a%20community%20story">Share your story</a></div>
        </div>
        <div>
          <h2 class="footer-heading">Say hello</h2>
          <address class="footer-contact"><a href="mailto:hello@commonkind.example">hello@commonkind.example</a><br>148 Juniper Lane, Suite 200<br>Portland, OR 97214</address>
          <div class="socials"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Instagram, opens in a new tab">Instagram ↗</a><a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn, opens in a new tab">LinkedIn ↗</a></div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>© <span id="year">2026</span> Commonkind. Made for a more connected world.</p>
        <div><button class="link-button" data-modal="privacy">Privacy</button><button class="link-button" data-modal="terms">Terms</button><a href="mailto:access@commonkind.example">Accessibility</a></div>
      </div>
    </div>
  </footer>

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

  <script>
    const navToggle = document.querySelector('.menu-toggle');
    const nav = document.querySelector('.nav');
    function closeNav() {
      nav.classList.remove('open');
      navToggle.setAttribute('aria-expanded', 'false');
      navToggle.setAttribute('aria-label', 'Open navigation');
    }
    navToggle.addEventListener('click', () => {
      const open = nav.classList.toggle('open');
      navToggle.setAttribute('aria-expanded', String(open));
      navToggle.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
    });
    nav.querySelectorAll('a').forEach(link => link.addEventListener('click', closeNav));
    document.addEventListener('keydown', event => {
      if (event.key === 'Escape' && nav.classList.contains('open')) {
        closeNav();
        navToggle.focus();
      }
    });
    document.getElementById('year').textContent = new Date().getFullYear();

    const articles = {
      conversation: {
        kicker: 'Free organizer toolkit',
        title: 'Start a neighborhood conversation',
        body: '<p>A useful first gathering doesn’t need a stage or a long agenda. It needs a clear invitation, a comfortable place, and enough space for everyone to be heard.</p><h3>1. Make the invitation specific</h3><p>Invite six to ten neighbors to a 45-minute conversation about one local question. Say who is hosting, what participation involves, and that no experience is needed. Ask privately about access needs and offer a phone or written option.</p><h3>2. Listen before solving</h3><p>Start with: “What helps you feel at home here?” Then ask: “What makes daily life harder?” Give each person uninterrupted time. Agree not to share names, photographs, or personal stories without permission.</p><h3>3. Choose one next step</h3><p>Look for a shared concern rather than forcing complete agreement. Pick a small, achievable action, name a willing point person, and set a check-in date. Send a short summary that people can correct.</p><h3>A 45-minute agenda</h3><ul><li>5 minutes: welcome, introductions, and shared ground rules.</li><li>20 minutes: listen to each person’s experience.</li><li>15 minutes: identify a common theme and one next action.</li><li>5 minutes: agree how to stay in touch, with permission.</li></ul>'
      },
      policy: {
        kicker: 'Free advocacy guide',
        title: 'Your voice at the council table',
        body: '<p>Your lived experience is relevant evidence. Public testimony can help decision-makers understand who a proposal affects and what a better outcome would look like.</p><h3>Before the meeting</h3><p>Check your council’s official website for the agenda, registration deadline, speaking limit, and written-comment options. Rules vary by jurisdiction. Request interpretation or accommodations early and read the proposal itself, not only its headline.</p><h3>Build a clear, short statement</h3><ul><li>Introduce yourself and your connection to the issue.</li><li>Describe one specific experience, sharing only what feels safe.</li><li>Explain the change you want and who it would benefit.</li><li>End with one concrete request, such as funding an access review.</li></ul><h3>After you speak</h3><p>Send your statement to the appropriate clerk, track the decision, and share an accurate update with neighbors. A first hearing is often the start of a longer process. Keep a record of commitments and the dates when progress will be reviewed.</p><p>This guide provides general civic participation information, not legal advice.</p>'
      },
      campaign: {
        kicker: 'Free campaign starter',
        title: 'Turn awareness into action',
        body: '<p>An effective awareness campaign does more than attract attention. It helps a defined group understand an issue and take a useful, achievable action.</p><h3>Start with the community</h3><p>Ask people directly affected by the issue what they want to change. Agree on a shared goal and decide together how stories and images can be used. Consent should be informed, specific, and easy to withdraw.</p><h3>Write your campaign in one sentence</h3><p>“We want [decision-maker or group] to [specific action] by [date], so that [community benefit].” If the action is unclear, narrow the campaign before creating materials.</p><h3>Make participation easy</h3><ul><li>Use plain language, readable type, captions, and image descriptions.</li><li>Offer one primary action, with a low-bandwidth or offline alternative.</li><li>Check every claim and link to reliable sources.</li><li>Provide contact information for questions and corrections.</li></ul><h3>Measure what matters</h3><p>Track completed actions, meaningful conversations, and policy commitments—not just impressions. Ask whose voices are missing, adjust your approach, and report back to the community that made the campaign possible.</p>'
      },
      impact: {
        kicker: '2025 annual impact review',
        title: 'Progress we can point to.',
        body: '<p>Between January and December 2025, Commonkind supported 32 resident-led projects through small grants, organizer coaching, and practical coordination. Together, they received $86,000 in direct project funding.</p><h3>From participation to policy</h3><p>Eight resident priorities were included in adopted local plans or funding decisions. These included accessible seating, clearer public consultation materials, and support for shared neighborhood spaces. Adoption is a milestone—not proof that implementation is complete. Our groups continue to track delivery.</p><h3>How we count</h3><p>Our 2,400+ participation figure combines program registration records and organizer attendance reports, with repeat participants removed where records allow. Project counts include initiatives that received a grant or at least three coaching sessions. Funding totals reflect disbursements, not pledges.</p><h3>What comes next</h3><p>In 2026, we are prioritizing access support, multilingual organizing resources, and better follow-up with first-time participants. We are also improving our evaluation so residents can tell us what changed in their daily lives—not just how many activities took place.</p>'
      },
      story: {
        kicker: 'Field notes · Eastbank',
        title: 'A place to grow, together.',
        body: '<p>For years, neighbors walked past a small unused plot and imagined different possibilities. A few wanted planting beds. Others wanted somewhere to sit, or a safe place for an after-school conversation. The turning point came when they stopped guessing and started asking.</p><h3>Listening was the first project</h3><p>With help from a Commonkind organizer, residents held three informal conversations and delivered a short paper survey. They learned that level paths and comfortable seating mattered just as much as growing space. A local partner helped them secure permission to use the site.</p><h3>A small grant. A shared plan.</h3><p>A neighborhood grant paid for materials, raised beds, and tools. Volunteers worked in short, flexible shifts, with planning and phone outreach roles for people who couldn’t join physically. Decisions were written down and shared so the project didn’t depend on a single organizer.</p><h3>The next season</h3><p>Today, the group has a simple maintenance rota and an open monthly gathering. The garden is still evolving, but its most important feature is already in place: neighbors who know how to listen, make decisions, and build something together.</p><p>Have an overlooked space in your neighborhood? Start with a conversation—not a finished plan.</p>'
      },
      privacy: {
        kicker: 'Your information',
        title: 'Privacy, in plain language.',
        body: '<p>The volunteer matching tool runs in your browser. Your choices are not sent to a server or stored by this page. Newsletter and contact actions open your email application; no email is sent until you choose to send it.</p><h3>When you contact us</h3><p>Share only the information needed for your request. Email messages may include your address, name, and any details you choose to provide. You can request an update, removal, or an end to correspondence by emailing hello@commonkind.example.</p><h3>External services</h3><p>This page loads fonts and placeholder images from Google Fonts, Picsum, Placehold, and Pravatar. Those providers receive ordinary connection information, including your IP address, under their own policies. Social links take you to external platforms. This page does not set advertising cookies or use analytics trackers.</p>'
      },
      terms: {
        kicker: 'Using this website',
        title: 'A shared foundation.',
        body: '<p>Our resources offer general community-organizing information. They are not legal, financial, or professional advice. Check local procedures and consult qualified support when your situation requires it.</p><h3>Share with care</h3><p>You may share and adapt our original guide text for noncommercial community use with attribution to Commonkind. Images, fonts, and third-party materials remain subject to their respective licenses. Do not imply that Commonkind endorses your group or campaign without permission.</p><h3>A note about this site</h3><p>Commonkind is a fictional demonstration organization. Program descriptions, impact figures, addresses, and personal stories are illustrative. Images are placeholders, and the reserved .example email addresses are not live contact channels.</p>'
      }
    };

    const dialog = document.getElementById('info-dialog');
    const content = document.getElementById('dialog-content');
    let activeArticle = '';
    document.querySelectorAll('[data-modal]').forEach(button => {
      button.addEventListener('click', () => {
        activeArticle = button.dataset.modal;
        const article = articles[activeArticle];
        const downloadable = ['conversation', 'policy', 'campaign', 'impact'].includes(activeArticle);
        content.innerHTML = '<div class="dialog-kicker">' + article.kicker + '</div><h2 id="dialog-title">' + article.title + '</h2>' + article.body + (downloadable ? '<button type="button" class="btn btn-green" id="download-guide">Save a text copy ↓</button>' : '');
        if (downloadable) document.getElementById('download-guide').addEventListener('click', downloadArticle);
        dialog.showModal();
        dialog.scrollTop = 0;
      });
    });
    document.querySelector('.dialog-close').addEventListener('click', () => dialog.close());
    dialog.addEventListener('click', event => {
      if (event.target === dialog) {
        const rect = dialog.getBoundingClientRect();
        if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
      }
    });
    function downloadArticle() {
      const article = articles[activeArticle];
      const text = article.body.replace(/<\/(p|h3|li)>/g, '\n\n').replace(/<li>/g, '• ').replace(/<[^>]*>/g, '');
      const blob = new Blob(['COMMONKIND\n' + article.title + '\n\n' + text + '\n\nCommonkind is a fictional demonstration organization.'], {type:'text/plain;charset=utf-8'});
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'commonkind-' + activeArticle + '.txt';
      document.body.appendChild(link);
      link.click();
      link.remove();
      setTimeout(() => URL.revokeObjectURL(url), 1000);
    }

    const matches = {
      connection: {
        short: ['Start with one invitation', 'Reach out to a neighbor you don’t know well. Ask what they enjoy about the area and what they would love to see change. Our conversation toolkit gives you a few welcoming prompts.', 'conversation'],
        medium: ['Help host a neighborhood circle', 'Bring your listening skills to a monthly gathering. You could welcome new arrivals, prepare conversation prompts, or help make the space accessible. Ask our team about a supported first session.'],
        long: ['Become a community connector', 'Help a local group stay connected through regular check-ins, outreach, and small gatherings. We suggest starting with organizer training and co-hosting alongside an experienced neighbor.']
      },
      advocacy: {
        short: ['Find the next decision that matters', 'Spend 15 minutes on your council’s official agenda page. Choose one item that affects your neighborhood and note the public comment deadline. Our guide will help you prepare a clear response.', 'policy'],
        medium: ['Make room for resident voices', 'Help a neighborhood group track meeting dates, summarize proposals in plain language, or collect questions for local decision-makers. Ask about a research or meeting-support role.'],
        long: ['Support a resident-led campaign', 'Work alongside residents to define a practical goal, plan inclusive outreach, and follow up on commitments. Our team can discuss training and a role that suits your experience.']
      },
      spaces: {
        short: ['Notice what your shared space needs', 'Take a short walk or reflect on a place you use regularly. Note one barrier—such as missing seating or unclear signage—and ask a neighbor about their experience before proposing a solution.', 'conversation'],
        medium: ['Join a shared-space project', 'Offer a couple of hours to planning, planting, or a neighborhood access review. There are useful roles on-site and from home. Contact us to discuss your interests and access needs.'],
        long: ['Help an idea take root', 'Support a resident team with scheduling, budgeting, or coordinating volunteers for a community space. Start with a conversation about the neighborhood’s priorities and the support you need.']
      }
    };
    const matchForm = document.getElementById('match-form');
    const result = document.getElementById('match-result');
    matchForm.addEventListener('submit', event => {
      event.preventDefault();
      const interest = document.getElementById('interest').value;
      const time = document.getElementById('time').value;
      const match = matches[interest][time];
      result.hidden = false;
      result.replaceChildren();
      const heading = document.createElement('h4');
      heading.textContent = match[0];
      const description = document.createElement('p');
      description.textContent = match[1];
      const action = document.createElement(match[2] ? 'button' : 'a');
      action.className = 'text-link link-button';
      if (match[2]) {
        action.type = 'button';
        action.textContent = 'Open the free guide ↗';
        action.addEventListener('click', () => document.querySelector('[data-modal="' + match[2] + '"]').click());
      } else {
        action.textContent = 'Start a conversation with our team ↗';
        action.href = 'mailto:volunteer@commonkind.example?subject=' + encodeURIComponent('Getting involved: ' + match[0]) + '&body=' + encodeURIComponent('Hello Commonkind,\n\nI tried the volunteer finder and would like to learn more about this role: ' + match[0] + '.\n\nMy location:\nMy availability:\nAny access needs I would like to share:\n\nThank you!');
      }
      result.append(heading, description, action);
    });
    matchForm.querySelectorAll('select').forEach(select => select.addEventListener('change', () => { result.hidden = true; }));
    document.querySelectorAll('[data-interest]').forEach(link => link.addEventListener('click', () => {
      document.getElementById('interest').value = link.dataset.interest;
      result.hidden = true;
    }));
    document.getElementById('newsletter-form').addEventListener('submit', event => {
      event.preventDefault();
      const email = document.getElementById('email').value.trim();
      const body = 'Hello Commonkind,\n\nPlease add ' + email + ' to your monthly community updates. I understand I can unsubscribe by replying to an update.\n\nThank you!';
      window.location.href = 'mailto:updates@commonkind.example?subject=' + encodeURIComponent('Monthly community updates request') + '&body=' + encodeURIComponent(body);
      document.getElementById('newsletter-note').textContent = 'Send the draft in your email app to request updates. Nothing has been submitted on this page.';
    });
  </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:56:50.345Z",
  "url": "https://benchmark.aimac.invalid/dcc72c6898650d4acca835dd3f5c06a3ff9443a86d0fbce67bc1af3e4f38ff73.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "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": []
    },
    {
      "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": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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=\"Commonkind home\">",
          "target": [
            "a[aria-label=\"Commonkind 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=\"Commonkind home\">",
          "target": [
            "a[aria-label=\"Commonkind home\"]"
          ]
        }
      ]
    },
    {
      "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": "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;width:0;height:0;overflow:hidden\" aria-hidden=\"true\">",
          "target": [
            "svg[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=\"Commonkind home\">",
          "target": [
            "a[aria-label=\"Commonkind home\"]"
          ]
        }
      ]
    },
    {
      "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=\"Commonkind home\">",
          "target": [
            "a[aria-label=\"Commonkind 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=\"Commonkind home\">",
          "target": [
            "a[aria-label=\"Commonkind 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 type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" required=\"\" maxlength=\"254\">",
          "target": [
            "#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(--lime)\">\u2733</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 link-button\" data-modal=\"impact\">Read our 2025 impact review <svg class=\"icon\"><use href=\"#arrow\"></use></svg></button>",
          "target": [
            "button[data-modal=\"impact\"]"
          ]
        }
      ]
    },
    {
      "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\">A fairer future<br>starts on<br><em>your street.</em></h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2 id=\"work-title\">Stronger connections.<br>Lasting change.</h2>",
                  "target": [
                    "#work-title"
                  ]
                },
                {
                  "html": "<h3>Make room for everyone.</h3>",
                  "target": [
                    ".program:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Turn voices into influence.</h3>",
                  "target": [
                    ".program:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Give good ideas a start.</h3>",
                  "target": [
                    ".program:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Neighbors first.<br>Always.</h3>",
                  "target": [
                    "#about > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"impact-title\">Not just a moment.<br>A growing movement.</h2>",
                  "target": [
                    "#impact-title"
                  ]
                },
                {
                  "html": "<h2 id=\"stories-title\">Change has a familiar face.</h2>",
                  "target": [
                    "#stories-title"
                  ]
                },
                {
                  "html": "<h3>From an overlooked corner to a place to belong.</h3>",
                  "target": [
                    ".story-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"resources-title\">Good intentions.<br>Practical next steps.</h2>",
                  "target": [
                    "#resources-title"
                  ]
                },
                {
                  "html": "<h3>Start a neighborhood conversation</h3>",
                  "target": [
                    "button[data-modal=\"conversation\"] > .resource-info > h3"
                  ]
                },
                {
                  "html": "<h3>Your voice at the council table</h3>",
                  "target": [
                    "button[data-modal=\"policy\"] > .resource-info > h3"
                  ]
                },
                {
                  "html": "<h3>Turn awareness into action</h3>",
                  "target": [
                    "button[data-modal=\"campaign\"] > .resource-info > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"join-title\">Your time.<br>Your strengths.<br>Our shared future.</h2>",
                  "target": [
                    "#join-title"
                  ]
                },
                {
                  "html": "<h3>Find your way to help</h3>",
                  "target": [
                    "#match-form > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Come as you are.</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h3>A little good in your inbox.</h3>",
                  "target": [
                    ".newsletter > div > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"footer-heading\">Explore</h2>",
                  "target": [
                    "div:nth-child(2) > .footer-heading"
                  ]
                },
                {
                  "html": "<h2 class=\"footer-heading\">Make a difference</h2>",
                  "target": [
                    "div:nth-child(3) > .footer-heading"
                  ]
                },
                {
                  "html": "<h2 class=\"footer-heading\">Say hello</h2>",
                  "target": [
                    "div:nth-child(4) > .footer-heading"
                  ]
                }
              ],
              "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": "#f1f1df",
                "bgColor": "#23483d",
                "contrastRatio": 8.9,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 8.9"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"announcement\">Small actions. Shared possibilities. <a href=\"#join\">Find your place in the movement \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": "primary-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 class=\"nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-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 for=\"interest\">I care most about\u2026</label>",
                  "target": [
                    "label[for=\"interest\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"interest\" name=\"interest\">\n              <option value=\"connection\">Bringing neighbors together</option>\n              <option value=\"advocacy\">Making local decisions fairer</option>\n              <option value=\"spaces\">Creating better shared spaces</option>\n            </select>",
          "target": [
            "#interest"
          ]
        }
      ]
    },
    {
      "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/88x88/23483d/f7f5ee?text=ck.&amp;font=lora\" width=\"43\" height=\"43\" alt=\"Commonkind logo\">",
          "target": [
            "img[width=\"43\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Your email address"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"email\">Your email address</label>",
                  "target": [
                    "label[for=\"email\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" required=\"\" maxlength=\"254\">",
          "target": [
            "#email"
          ]
        }
      ]
    },
    {
      "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\">Small actions. Shared possibilities. <a href=\"#join\">Find your place in the movement \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\">Small actions. Shared possibilities. <a href=\"#join\">Find your place in the movement \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=\"#join\">Find your place in the movement \u2197</a>",
          "target": [
            ".announcement > a[href$=\"#join\"]"
          ]
        }
      ]
    },
    {
      "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": "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/88x88/23483d/f7f5ee?text=ck.&amp;font=lora\" width=\"43\" height=\"43\" alt=\"Commonkind logo\">",
          "target": [
            "img[width=\"43\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "I care most about\u2026"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"interest\">I care most about\u2026</label>",
                  "target": [
                    "label[for=\"interest\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"interest\" name=\"interest\">\n              <option value=\"connection\">Bringing neighbors together</option>\n              <option value=\"advocacy\">Making local decisions fairer</option>\n              <option value=\"spaces\">Creating better shared spaces</option>\n            </select>",
          "target": [
            "#interest"
          ]
        }
      ]
    },
    {
      "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>Do I need experience to get involved?</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": 137.7,
                "height": 50.4
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (137.7px by 50.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=\"roundel\" aria-label=\"People make the difference\"><span>PEOPLE MAKE</span><b>\u2733</b><span>THE DIFFERENCE</span></div>",
          "target": [
            ".roundel"
          ],
          "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": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": "bgOverlap",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element's background color could not be determined because it is overlapped by another element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"photo-caption\"><span>Our neighborhoods. Our future.</span>LET\u2019S BUILD SOMETHING BETTER.</div>",
          "target": [
            ".photo-caption"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because it is overlapped by another element"
        }
      ]
    }
  ],
  "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": "#667167",
                "bgColor": "#eeeee3",
                "contrastRatio": 4.35,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program\">",
                  "target": [
                    ".program:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.35 (foreground color: #667167, background color: #eeeee3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"program-number\">01 / CONNECT</span>",
          "target": [
            ".program:nth-child(1) > .program-top > .program-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.35 (foreground color: #667167, background color: #eeeee3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#667167",
                "bgColor": "#f2e9dd",
                "contrastRatio": 4.23,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program\">",
                  "target": [
                    ".program:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.23 (foreground color: #667167, background color: #f2e9dd, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"program-number\">02 / ADVOCATE</span>",
          "target": [
            ".program:nth-child(2) > .program-top > .program-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.23 (foreground color: #667167, background color: #f2e9dd, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#667167",
                "bgColor": "#e7ece3",
                "contrastRatio": 4.24,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program\">",
                  "target": [
                    ".program:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.24 (foreground color: #667167, background color: #e7ece3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"program-number\">03 / EQUIP</span>",
          "target": [
            ".program:nth-child(3) > .program-top > .program-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.24 (foreground color: #667167, background color: #e7ece3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#9eb1a5",
                "bgColor": "#23483d",
                "contrastRatio": 4.49,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"impact\" id=\"impact\" aria-labelledby=\"impact-title\">",
                  "target": [
                    "#impact"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.49 (foreground color: #9eb1a5, background color: #23483d, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"impact-footnote\">Annual reporting period: January\u2013December 2025. Participation includes in-person and online programs.</p>",
          "target": [
            ".impact-footnote"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.49 (foreground color: #9eb1a5, background color: #23483d, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#667167",
                "bgColor": "#e7ebdc",
                "contrastRatio": 4.19,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<aside class=\"quote-card\" aria-label=\"A neighbor's experience\">",
                  "target": [
                    "aside"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.19 (foreground color: #667167, background color: #e7ebdc, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Neighbor. Volunteer. First-time organizer.</span>",
          "target": [
            ".quote-person > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #667167, background color: #e7ebdc, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607052",
                "bgColor": "#e7ebdc",
                "contrastRatio": 4.39,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<aside class=\"quote-card\" aria-label=\"A neighbor's experience\">",
                  "target": [
                    "aside"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.39 (foreground color: #607052, background color: #e7ebdc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"quote-bottom\">Maya joined one neighborhood conversation in 2024. Today, she helps host a monthly circle where new residents and longtime neighbors find common ground.</p>",
          "target": [
            ".quote-bottom"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.39 (foreground color: #607052, background color: #e7ebdc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#62705d",
                "bgColor": "#e8ebdc",
                "contrastRatio": 4.34,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"wrap join-box\">",
                  "target": [
                    ".join-box"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.34 (foreground color: #62705d, background color: #e8ebdc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Have ten minutes or a whole afternoon? Love meeting people, or prefer working behind the scenes? There\u2019s more than one way to contribute.</p>",
          "target": [
            ".join-copy > p:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.34 (foreground color: #62705d, background color: #e8ebdc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#62705d",
                "bgColor": "#e8ebdc",
                "contrastRatio": 4.34,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"wrap join-box\">",
                  "target": [
                    ".join-box"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.34 (foreground color: #62705d, background color: #e8ebdc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Tell us what matters to you and we\u2019ll suggest a meaningful first step. No application, no perfect r\u00e9sum\u00e9\u2014just you.</p>",
          "target": [
            ".join-copy > p:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.34 (foreground color: #62705d, background color: #e8ebdc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#62705d",
                "bgColor": "#e8ebdc",
                "contrastRatio": 4.34,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"wrap join-box\">",
                  "target": [
                    ".join-box"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.34 (foreground color: #62705d, background color: #e8ebdc, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"join-reassurance\"><svg class=\"icon\"><use href=\"#check\"></use></svg>Free to join. Open to everyone. Always.</p>",
          "target": [
            ".join-reassurance"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.34 (foreground color: #62705d, background color: #e8ebdc, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5513
      },
      {
        "y": 576,
        "height": 5513
      },
      {
        "y": 1152,
        "height": 5513
      },
      {
        "y": 1728,
        "height": 5513
      },
      {
        "y": 2304,
        "height": 5513
      },
      {
        "y": 2880,
        "height": 5513
      },
      {
        "y": 3456,
        "height": 5513
      },
      {
        "y": 4032,
        "height": 5513
      },
      {
        "y": 4608,
        "height": 5513
      },
      {
        "y": 4793,
        "height": 5513
      }
    ],
    "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 "Society" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Society"
- Description: Social issues, advocacy, cultural organizations, and community initiatives.

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

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "About", "Resources", "Join".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Society" category. Consider themes similar to: "Policy Impact", "Resource Center", "Success Stories".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "collective action", "awareness campaign", "systemic change".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Involved", "Take Action", "Spread Awareness".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Society" sector. Ideas similar but not limited to: "impact calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "community impact", "success stories", "movement updates".
-   **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.