Anthropic Claude Sonnet 5.5 – Society
via Anthropic · Generated
- AIMAC Debt 5.56
- Cost $0.25
- Total Violations 42
- HTML Size 56 KB
- Em Dashes 11
Screenshot
View Live Page
Accessibility Issues Found
42 Serious
-
color-contrast serious 42 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#join" class="join">Join</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kindred Commons — Neighbors building power, together.</title>
<meta name="description" content="Kindred Commons is a grassroots, member-powered organization advancing housing justice, civic participation, and community care through collective action.">
<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;500;700&family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,800&display=swap" rel="stylesheet">
<style>
:root{
--forest:#1d4636;
--forest-dark:#12301f;
--clay:#c8553d;
--clay-dark:#a8412c;
--sun:#f2b84b;
--cream:#f8f2e7;
--paper:#fffdf8;
--ink:#23201c;
--muted:#645f57;
--line:#e3d9c7;
--radius:18px;
--shadow:0 12px 34px rgba(29,70,54,.12);
--max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.15;color:var(--forest-dark);letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
p+p{margin-top:1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:96px 0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}
.lead{font-size:1.15rem;color:var(--muted);max-width:660px}
.section-head{margin-bottom:48px}
.section-head.center{text-align:center}
.section-head.center .lead{margin:16px auto 0}
.section-head h2{max-width:760px}
.section-head.center h2{margin:0 auto}
.section-head .lead{margin-top:16px}
.skip{position:absolute;left:-999px;top:8px;background:var(--forest);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 8px 20px rgba(200,85,61,.3)}
.btn-primary:hover{background:var(--clay-dark)}
.btn-outline{border-color:var(--forest);color:var(--forest);background:transparent}
.btn-outline:hover{background:var(--forest);color:#fff}
.btn-light{background:var(--paper);color:var(--forest-dark)}
.btn-light:hover{background:var(--sun)}
.btn-sm{padding:10px 20px;font-size:.92rem}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
/* Top strip + header */
.topbar{background:var(--forest-dark);color:#e9e2d0;font-size:.88rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:var(--sun);font-weight:700;text-decoration:none}
.topbar a:hover{text-decoration:underline}
header.site{background:rgba(248,242,231,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:54px;height:54px;border-radius:14px}
.brand-text strong{display:block;font-family:'Fraunces',serif;font-size:1.35rem;color:var(--forest-dark);line-height:1.1}
.brand-text span{font-size:.82rem;color:var(--muted)}
nav ul{display:flex;gap:6px;list-style:none;align-items:center}
nav a{text-decoration:none;font-weight:500;padding:9px 14px;border-radius:999px;font-size:.98rem;transition:background .2s}
nav a:hover{background:rgba(29,70,54,.09)}
nav a.join{background:var(--clay);color:#fff;font-weight:700;margin-left:8px}
nav a.join:hover{background:var(--clay-dark)}
.menu-btn{display:none;background:none;border:2px solid var(--forest);border-radius:10px;padding:8px 12px;font:inherit;font-weight:700;color:var(--forest);cursor:pointer}
/* Hero */
.hero{padding:70px 0 90px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-180px;top:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(242,184,75,.45),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.hero h1 em{font-style:normal;color:var(--clay)}
.hero p.lead{margin:22px 0 32px;font-size:1.22rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:36px;color:var(--muted);font-size:.95rem}
.avatars{display:flex}
.avatars img{width:44px;height:44px;border-radius:50%;border:3px solid var(--cream);margin-left:-12px}
.avatars img:first-child{margin-left:0}
.hero-visual{position:relative}
.hero-visual .main{border-radius:200px 200px 28px 28px;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow)}
.float-card{position:absolute;background:var(--paper);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center}
.float-card.a{left:-30px;bottom:60px}
.float-card.b{right:-12px;top:70px;flex-direction:column;align-items:flex-start;gap:2px}
.float-card .num{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:800;color:var(--clay);line-height:1}
.float-card small{color:var(--muted);font-size:.82rem}
.dot{width:12px;height:12px;border-radius:50%;background:#3fae6a;box-shadow:0 0 0 6px rgba(63,174,106,.2)}
/* Stats band */
.stats{background:var(--forest);color:#fff;padding:56px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stats .n{font-family:'Fraunces',serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;color:var(--sun)}
.stats p{color:#d6e2da;font-size:.98rem;margin-top:2px}
/* About / Mission */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mission-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mission-imgs img{border-radius:var(--radius);width:100%;object-fit:cover;box-shadow:var(--shadow)}
.mission-imgs img:first-child{aspect-ratio:3/4}
.mission-imgs img:last-child{aspect-ratio:3/4;margin-top:40px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.values div{border-left:4px solid var(--clay);padding-left:14px}
.values strong{display:block;font-family:'Fraunces',serif;font-size:1.1rem;color:var(--forest-dark)}
.values span{color:var(--muted);font-size:.95rem}
/* Feature grid */
.bg-paper{background:var(--paper)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feature{background:var(--cream);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feature img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature .body{padding:26px;display:flex;flex-direction:column;flex:1}
.feature .tag{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.feature p{color:var(--muted);margin:10px 0 18px;font-size:.98rem}
.feature a.more{margin-top:auto;font-weight:700;color:var(--forest);text-decoration:none}
.feature a.more:hover{color:var(--clay)}
/* News + sidebar */
.news-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.story-lead{display:grid;grid-template-columns:1fr;background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-bottom:28px}
.story-lead img{width:100%;aspect-ratio:16/8;object-fit:cover}
.story-lead .body{padding:30px}
.meta{font-size:.85rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.meta .pill{background:rgba(200,85,61,.12);color:var(--clay-dark);padding:2px 10px;border-radius:999px;font-weight:700}
.story-lead h3{font-size:1.7rem;margin-bottom:12px}
.story-list{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.story{background:var(--paper);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}
.story img{width:100%;aspect-ratio:16/10;object-fit:cover}
.story .body{padding:20px 22px 24px}
.story h3{font-size:1.15rem;margin-bottom:8px}
.story p{color:var(--muted);font-size:.95rem}
.timeline{margin-top:36px;background:var(--forest-dark);color:#e8e1d0;border-radius:var(--radius);padding:30px}
.timeline h3{color:#fff;margin-bottom:18px}
.timeline ol{list-style:none;border-left:2px solid rgba(255,255,255,.25);padding-left:22px}
.timeline li{position:relative;padding-bottom:18px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-29px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--sun)}
.timeline b{color:var(--sun);display:block;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
aside.sidebar{position:sticky;top:110px;display:grid;gap:24px}
.widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.widget h3{font-size:1.15rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--sun)}
.spot{text-align:center}
.spot img{width:110px;height:110px;border-radius:50%;margin:0 auto 14px;border:4px solid var(--sun)}
.spot h4{font-size:1.15rem}
.spot small{color:var(--clay-dark);font-weight:700}
.spot p{font-size:.94rem;color:var(--muted);margin-top:10px}
.mini-list{list-style:none;display:grid;gap:16px}
.mini-list li{display:flex;gap:12px;font-size:.94rem}
.mini-list .ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--forest);color:var(--sun);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.mini-list strong{display:block;color:var(--forest-dark);line-height:1.3}
.mini-list span{color:var(--muted);font-size:.85rem}
.widget.dark{background:var(--clay);border-color:var(--clay);color:#fff}
.widget.dark h3{color:#fff;border-color:rgba(255,255,255,.4)}
.widget.dark p{font-size:.95rem;margin-bottom:16px}
/* Calculator */
.calc{background:linear-gradient(135deg,var(--forest-dark),var(--forest));color:#fff;position:relative;overflow:hidden}
.calc h2{color:#fff}
.calc .lead{color:#cfdcd4}
.calc .eyebrow{color:var(--sun)}
.calc-card{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper);border-radius:28px;overflow:hidden;color:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.calc-inputs{padding:40px}
.calc-inputs h3{margin-bottom:6px}
.calc-inputs>p{color:var(--muted);font-size:.95rem;margin-bottom:26px}
.slider{margin-bottom:26px}
.slider label{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px;color:var(--forest-dark)}
.slider label output{color:var(--clay);font-family:'Fraunces',serif;font-size:1.15rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(to right,var(--clay) var(--p,30%),var(--line) var(--p,30%));outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--clay);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--clay);cursor:pointer}
.slider small{display:block;color:var(--muted);margin-top:6px;font-size:.84rem}
.calc-out{background:var(--cream);padding:40px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.out-row{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);padding:16px 20px;border-radius:16px}
.out-row .big{font-family:'Fraunces',serif;font-weight:800;font-size:2.2rem;color:var(--forest);min-width:110px;line-height:1}
.out-row span{color:var(--muted);font-size:.95rem;line-height:1.4}
.calc-note{font-size:.8rem;color:var(--muted)}
/* Advocacy actions */
.actions-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.action-list{display:grid;gap:18px}
.action{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
.action .num{width:52px;height:52px;border-radius:14px;background:var(--sun);color:var(--forest-dark);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:800;font-size:1.3rem}
.action h3{font-size:1.1rem}
.action p{font-size:.93rem;color:var(--muted);margin-top:4px}
.petition{background:var(--forest);color:#fff;border-radius:24px;padding:36px;position:sticky;top:110px}
.petition h3{color:#fff;font-size:1.6rem;margin-bottom:12px}
.petition p{color:#d6e2da;font-size:.97rem}
.progress{margin:22px 0 8px;height:12px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--sun);border-radius:99px;transition:width .8s ease}
.prog-meta{display:flex;justify-content:space-between;font-size:.9rem;color:#d6e2da;margin-bottom:22px}
.prog-meta b{color:#fff}
.petition form{display:grid;gap:12px}
.petition input[type=text],.petition input[type=email]{padding:14px 16px;border-radius:12px;border:2px solid transparent;font:inherit;width:100%;background:#fff}
.petition input:focus{outline:none;border-color:var(--sun)}
.petition .check{display:flex;gap:10px;font-size:.85rem;color:#d6e2da;align-items:flex-start}
.petition .check input{margin-top:4px;accent-color:var(--sun)}
.form-msg{margin-top:12px;font-weight:700;color:var(--sun);min-height:1.4em;font-size:.95rem}
/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.testi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative}
.testi::before{content:"“";position:absolute;top:6px;right:22px;font-family:'Fraunces',serif;font-size:5.5rem;color:var(--sun);line-height:1}
.testi blockquote{font-size:1.02rem;margin-bottom:22px;position:relative}
.testi .who{display:flex;align-items:center;gap:14px}
.testi .who img{width:54px;height:54px;border-radius:50%}
.testi .who strong{display:block;color:var(--forest-dark)}
.testi .who span{font-size:.86rem;color:var(--muted)}
/* Resources */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.res{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:transform .25s,border-color .25s}
.res:hover{transform:translateY(-5px);border-color:var(--clay)}
.res .ic{width:50px;height:50px;border-radius:14px;background:var(--forest);color:var(--sun);display:grid;place-items:center;font-size:1.4rem}
.res h3{font-size:1.1rem}
.res p{font-size:.92rem;color:var(--muted)}
.res .fmt{margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
/* FAQ */
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq-layout img{border-radius:var(--radius);margin-top:30px;width:100%;aspect-ratio:4/3;object-fit:cover}
details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;color:var(--forest-dark);display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:1.3rem;color:var(--clay);transition:transform .25s,background .25s}
details[open] summary::after{transform:rotate(45deg);background:var(--sun)}
details .ans{padding:0 24px 22px;color:var(--muted)}
/* Join CTA */
.join-cta{padding:0 0 96px}
.join-box{background:var(--clay);color:#fff;border-radius:32px;padding:64px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.join-box::after{content:"";position:absolute;right:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:rgba(242,184,75,.35)}
.join-box h2{color:#fff;margin-bottom:16px}
.join-box p{color:#fde9e3}
.join-form{background:var(--paper);color:var(--ink);padding:30px;border-radius:20px;display:grid;gap:14px;position:relative;z-index:1}
.join-form h3{font-size:1.2rem}
.join-form input[type=text],.join-form input[type=email],.join-form select{padding:13px 15px;border-radius:12px;border:2px solid var(--line);font:inherit;width:100%;background:#fff}
.join-form input:focus,.join-form select:focus{outline:none;border-color:var(--forest)}
.join-form .form-msg{color:var(--forest);margin:0}
/* Footer */
footer{background:var(--forest-dark);color:#cdd8d0;padding:72px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
footer h4{color:#fff;font-size:1.05rem;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{text-decoration:none;color:#cdd8d0}
footer a:hover{color:var(--sun)}
footer .brand strong{color:#fff}
footer .brand span{color:#a9bbb0}
footer address{font-style:normal;display:grid;gap:8px;font-size:.96rem}
.foot-about p{margin-top:16px;font-size:.95rem;max-width:340px}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-weight:700;font-size:.85rem;transition:background .2s,transform .2s}
.social a:hover{background:var(--sun);color:var(--forest-dark);transform:translateY(-3px)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.88rem}
.foot-bottom nav{display:flex;gap:20px}
/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
/* Responsive */
@media (max-width:1020px){
.hero-grid,.mission-grid,.actions-grid,.faq-layout,.join-box,.calc-card,.news-layout{grid-template-columns:1fr}
.feature-grid,.testi-grid{grid-template-columns:1fr 1fr}
.res-grid{grid-template-columns:1fr 1fr}
.stats-grid{grid-template-columns:1fr 1fr}
.foot-grid{grid-template-columns:1fr 1fr}
aside.sidebar,.petition{position:static}
aside.sidebar{grid-template-columns:1fr 1fr}
.hero-visual{max-width:520px;margin:0 auto}
.float-card.a{left:-6px}
}
@media (max-width:820px){
.menu-btn{display:block}
nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);display:none;padding:14px 24px 22px}
nav.open{display:block}
nav ul{flex-direction:column;align-items:stretch}
nav a{display:block;padding:12px 14px}
nav a.join{margin:8px 0 0;text-align:center}
}
@media (max-width:640px){
section{padding:68px 0}
.feature-grid,.testi-grid,.res-grid,.story-list,.foot-grid,aside.sidebar,.values{grid-template-columns:1fr}
.join-box{padding:36px 24px}
.calc-inputs,.calc-out{padding:28px 22px}
.action{grid-template-columns:auto 1fr}
.action .btn{grid-column:1/-1;justify-content:center}
.brand-text span{display:none}
.float-card.b{right:4px}
.out-row .big{min-width:90px;font-size:1.8rem}
}
</style>
</head>
<body>
<a href="#main" class="skip">Skip to main content</a>
<div class="topbar">
<div class="wrap">
<span>🏘️ Tenant Protection Ordinance vote is on March 18 — <a href="#actions">Add your voice →</a></span>
<span>Member-powered since 2011 · 501(c)(3) nonprofit</span>
</div>
</div>
<header class="site">
<div class="nav-row">
<a href="#top" class="brand" aria-label="Kindred Commons home">
<img src="https://placehold.co/108x108/1d4636/f2b84b?text=KC&font=lora" alt="Kindred Commons logo" width="54" height="54">
<div class="brand-text">
<strong>Kindred Commons</strong>
<span>Neighbors building power, together.</span>
</div>
</a>
<button class="menu-btn" aria-expanded="false" aria-controls="primary-nav">Menu</button>
<nav id="primary-nav" aria-label="Primary">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#grassroots">Grassroots</a></li>
<li><a href="#news">News</a></li>
<li><a href="#impact">Impact</a></li>
<li><a href="#actions">Take Action</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#join" class="join">Join</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<div id="top"></div>
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div>
<span class="eyebrow">Community power · Collective action</span>
<h1>Strong neighborhoods are <em>built by neighbors.</em></h1>
<p class="lead">Kindred Commons is a member-led organization that turns everyday care into lasting change — from tenant organizing and voter engagement to mutual aid and youth leadership. Across 38 neighborhoods, 14,000 members are proving that a community that shows up together can't be ignored.</p>
<div class="hero-actions">
<a href="#join" class="btn btn-primary">Stand With Us</a>
<a href="#impact" class="btn btn-outline">See Your Impact</a>
</div>
<div class="hero-proof">
<div class="avatars">
<img src="https://i.pravatar.cc/88?u=kc-hero-1" alt="" width="44" height="44">
<img src="https://i.pravatar.cc/88?u=kc-hero-2" alt="" width="44" height="44">
<img src="https://i.pravatar.cc/88?u=kc-hero-3" alt="" width="44" height="44">
<img src="https://i.pravatar.cc/88?u=kc-hero-4" alt="" width="44" height="44">
</div>
<span><strong>412 neighbors</strong> joined in the last 30 days.</span>
</div>
</div>
<div class="hero-visual">
<img class="main" src="https://picsum.photos/760/950?random=11" alt="Community members gathered at a neighborhood rally" width="760" height="950">
<div class="float-card b"><span class="num">92%</span><small>of our campaigns are<br>led by local residents</small></div>
<div class="float-card a"><span class="dot"></span><div><strong>Live now</strong><br><small>7 neighborhood meetings this week</small></div></div>
</div>
</div>
</section>
<!-- STATS -->
<div class="stats">
<div class="wrap stats-grid">
<div><div class="n" data-count="14200" data-suffix="+">0</div><p>Active members</p></div>
<div><div class="n" data-count="38">0</div><p>Neighborhood chapters</p></div>
<div><div class="n" data-count="3150" data-suffix="">0</div><p>Households protected from displacement</p></div>
<div><div class="n" data-count="26">0</div><p>Policy wins since 2011</p></div>
</div>
</div>
<!-- ABOUT -->
<section id="about">
<div class="wrap mission-grid">
<div class="reveal">
<span class="eyebrow">Who we are</span>
<h2>A movement that starts at the kitchen table.</h2>
<p style="margin-top:20px">In 2011, a handful of renters on Alder Street gathered in a laundromat after a rent hike threatened to push out half their building. They didn't have lawyers or lobbyists — they had each other, a clipboard, and a shared belief that people closest to a problem are closest to the solution. That meeting became Kindred Commons.</p>
<p>Today we are a non-partisan, member-governed organization working across housing, civic participation, public health, and cultural life. Every campaign we run is chosen by members, shaped by those most affected, and measured by whether real people's lives become more secure, more connected, and more powerful.</p>
<div class="values">
<div><strong>Empowerment first</strong><span>We build leaders, not followers.</span></div>
<div><strong>Radical inclusion</strong><span>Every language, age, and background belongs.</span></div>
<div><strong>Collective care</strong><span>Mutual aid is the foundation of power.</span></div>
<div><strong>Transparent action</strong><span>Open books, open meetings, open doors.</span></div>
</div>
</div>
<div class="mission-imgs reveal">
<img src="https://picsum.photos/480/640?random=21" alt="Volunteers organizing donations at a community center" width="480" height="640" loading="lazy">
<img src="https://picsum.photos/480/640?random=22" alt="Neighbors sharing a meal at a block party" width="480" height="640" loading="lazy">
</div>
</div>
</section>
<!-- GRASSROOTS -->
<section id="grassroots" class="bg-paper">
<div class="wrap">
<div class="section-head center reveal">
<span class="eyebrow">Grassroots efforts</span>
<h2>Real change is organized block by block.</h2>
<p class="lead">Our programs are designed to move people from isolation to leadership. Whether you have an hour a month or a full weekend, there's a meaningful role for you in the work ahead.</p>
</div>
<div class="feature-grid">
<article class="feature reveal">
<img src="https://picsum.photos/640/400?random=31" alt="Tenants meeting in a community hall" width="640" height="400" loading="lazy">
<div class="body">
<span class="tag">Housing justice</span>
<h3>Tenant Power Networks</h3>
<p>We train residents to form building-level associations, document unsafe conditions, and negotiate collectively with landlords. Since 2019, these networks have stopped 640 unjust evictions and won over $4.2M in repairs and rent relief.</p>
<a href="#join" class="more">Organize your building →</a>
</div>
</article>
<article class="feature reveal">
<img src="https://picsum.photos/640/400?random=32" alt="Volunteer knocking on a door during a voter outreach drive" width="640" height="400" loading="lazy">
<div class="body">
<span class="tag">Civic participation</span>
<h3>Every Voice Counts</h3>
<p>Our trained canvassers hold neighbor-to-neighbor conversations in eleven languages, helping people register, understand ballot measures, and show up at local hearings. Last cycle, turnout in our target precincts rose 19 points.</p>
<a href="#join" class="more">Join a canvass team →</a>
</div>
</article>
<article class="feature reveal">
<img src="https://picsum.photos/640/400?random=33" alt="Volunteers packing groceries for neighbors" width="640" height="400" loading="lazy">
<div class="body">
<span class="tag">Mutual aid</span>
<h3>The Neighbor Pantry Project</h3>
<p>A dignified, no-questions-asked pantry and delivery network run entirely by volunteers. We move 11,000 meals a month and use every pickup as a chance to connect families with rights clinics and organizing opportunities.</p>
<a href="#join" class="more">Volunteer a shift →</a>
</div>
</article>
<article class="feature reveal">
<img src="https://picsum.photos/640/400?random=34" alt="Young people painting a community mural" width="640" height="400" loading="lazy">
<div class="body">
<span class="tag">Culture & youth</span>
<h3>Commons Voices Fellowship</h3>
<p>A paid, year-long leadership program where young people ages 15–24 learn storytelling, media, and public speaking while leading campaigns on issues they care about—from safer streets to climate resilience.</p>
<a href="#resources" class="more">Meet the fellows →</a>
</div>
</article>
<article class="feature reveal">
<img src="https://picsum.photos/640/400?random=35" alt="Community health workers at a neighborhood clinic day" width="640" height="400" loading="lazy">
<div class="body">
<span class="tag">Public health</span>
<h3>Care Circles</h3>
<p>Peer-led neighborhood groups that combine health education, mental wellness check-ins, and advocacy for accessible local clinics. Circle facilitators are trained community health workers drawn from the neighborhoods they serve.</p>
<a href="#join" class="more">Find a circle →</a>
</div>
</article>
<article class="feature reveal">
<img src="https://picsum.photos/640/400?random=36" alt="Elders sharing oral histories at a library" width="640" height="400" loading="lazy">
<div class="body">
<span class="tag">Heritage</span>
<h3>Living Archive</h3>
<p>An oral-history initiative that records, preserves, and publishes the stories of long-time residents. These testimonies anchor our cultural preservation campaigns and remind decision-makers whose neighborhoods these truly are.</p>
<a href="#resources" class="more">Listen & contribute →</a>
</div>
</article>
</div>
</div>
</section>
<!-- NEWS + SIDEBAR -->
<section id="news">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow">Campaign updates & news</span>
<h2>What the movement is doing right now.</h2>
<p class="lead">Wins, setbacks, and next steps — shared openly so every member can see where we stand and where we need you most.</p>
</div>
<div class="news-layout">
<div>
<article class="story-lead reveal">
<img src="https://picsum.photos/1000/500?random=41" alt="Crowd outside city hall holding signs in support of tenant protections" width="1000" height="500" loading="lazy">
<div class="body">
<div class="meta"><span class="pill">Campaign update</span><span>February 21</span><span>6 min read</span></div>
<h3>Tenant Protection Ordinance clears committee after 600 residents testify</h3>
<p>After eight months of door-knocking, petition drives, and packed hearings, the proposed Tenant Protection Ordinance advanced out of the Housing Committee on a 5–2 vote. The measure would cap annual rent increases, require just-cause for eviction, and fund a right-to-counsel program for low-income renters.</p>
<p>The full council votes March 18. Members have signed up for 120 volunteer shifts so far, but we need at least 200 neighbors in the chamber and thousands more contacting their representatives. <a href="#actions" style="color:var(--clay-dark);font-weight:700">Find your action →</a></p>
</div>
</article>
<div class="story-list">
<article class="story reveal">
<img src="https://picsum.photos/520/325?random=42" alt="Volunteers at a voter registration table" width="520" height="325" loading="lazy">
<div class="body">
<div class="meta"><span class="pill">Civic</span><span>Feb 14</span></div>
<h3>2,300 new voters registered in eight weeks</h3>
<p>Our Every Voice Counts teams exceeded their winter goal by 38%, led largely by first-time volunteers under 30.</p>
</div>
</article>
<article class="story reveal">
<img src="https://picsum.photos/520/325?random=43" alt="Community garden with raised beds" width="520" height="325" loading="lazy">
<div class="body">
<div class="meta"><span class="pill">Win</span><span>Feb 06</span></div>
<h3>Eastside community garden saved from sale</h3>
<p>After a 90-day campaign, the city agreed to permanently designate the Marigold Lot as protected public green space.</p>
</div>
</article>
<article class="story reveal">
<img src="https://picsum.photos/520/325?random=44" alt="Panel discussion at a public forum" width="520" height="325" loading="lazy">
<div class="body">
<div class="meta"><span class="pill">Event recap</span><span>Jan 29</span></div>
<h3>"Who Gets to Stay?" forum draws 800 attendees</h3>
<p>Residents, economists, and faith leaders explored displacement and shared community-driven solutions in a standing-room-only event.</p>
</div>
</article>
<article class="story reveal">
<img src="https://picsum.photos/520/325?random=45" alt="Students at a youth leadership workshop" width="520" height="325" loading="lazy">
<div class="body">
<div class="meta"><span class="pill">Youth</span><span>Jan 17</span></div>
<h3>Applications open for the 2025 Commons Voices cohort</h3>
<p>Twenty paid fellowship spots are available for young organizers, storytellers, and artists. Applications close April 1.</p>
</div>
</article>
</div>
<div class="timeline reveal">
<h3>Road to March 18: campaign timeline</h3>
<ol>
<li><b>Feb 28</b>Neighborhood phone-bank night — 14 locations citywide</li>
<li><b>Mar 04</b>Rights-and-testimony training: how to speak at a public hearing</li>
<li><b>Mar 11</b>Faith & business allies press conference at Alder Street Plaza</li>
<li><b>Mar 18</b>Council vote — rally begins at 4:30 PM, steps of City Hall</li>
</ol>
</div>
</div>
<aside class="sidebar" aria-label="Sidebar">
<div class="widget spot reveal">
<h3 style="text-align:left">Activist spotlight</h3>
<img src="https://i.pravatar.cc/220?u=kc-spotlight-maria" alt="Portrait of Maria Delgado" width="110" height="110" loading="lazy">
<h4>Maria Delgado</h4>
<small>Tenant leader · Alder Court</small>
<p>A home health aide and mother of three, Maria organized all 72 units of her building to win a landmark repair agreement. Today she trains new tenant leaders across the east side.</p>
</div>
<div class="widget reveal">
<h3>Success stories</h3>
<ul class="mini-list">
<li><div class="ico">✓</div><div><strong>Bus Line 14 service restored</strong><span>After 1,900 rider signatures</span></div></li>
<li><div class="ico">✓</div><div><strong>$1.1M for youth programs</strong><span>Secured in the city budget</span></div></li>
<li><div class="ico">✓</div><div><strong>Language access ordinance</strong><span>Now in effect at all city offices</span></div></li>
</ul>
</div>
<div class="widget reveal">
<h3>Movement updates</h3>
<ul class="mini-list">
<li><div class="ico">7</div><div><strong>New chapters launched</strong><span>Since September</span></div></li>
<li><div class="ico">2k</div><div><strong>Volunteer hours this month</strong><span>A record for winter</span></div></li>
<li><div class="ico">11</div><div><strong>Languages supported</strong><span>Interpretation at every meeting</span></div></li>
</ul>
</div>
<div class="widget dark reveal">
<h3>Get the weekly briefing</h3>
<p>One short email every Friday: wins, events, and the single most useful thing you can do.</p>
<a href="#join" class="btn btn-light btn-sm">Subscribe</a>
</div>
</aside>
</div>
</div>
</section>
<!-- IMPACT CALCULATOR -->
<section id="impact" class="calc">
<div class="wrap">
<div class="section-head center reveal">
<span class="eyebrow">Impact calculator</span>
<h2>See what your time and support can do.</h2>
<p class="lead">Small commitments multiply when they're organized. Slide the controls to estimate your yearly contribution to our shared work.</p>
</div>
<div class="calc-card reveal">
<div class="calc-inputs">
<h3>Build your pledge</h3>
<p>Choose what feels sustainable. Consistent action beats one-time heroics.</p>
<div class="slider">
<label for="hours">Volunteer hours per month <output id="hoursOut">6</output></label>
<input type="range" id="hours" min="0" max="40" value="6">
<small>Canvassing, phone banking, pantry shifts, or event support.</small>
</div>
<div class="slider">
<label for="gift">Monthly gift (USD) <output id="giftOut">$20</output></label>
<input type="range" id="gift" min="0" max="250" step="5" value="20">
<small>Funds legal clinics, interpreters, and organizer training.</small>
</div>
<div class="slider">
<label for="friends">Friends you'll invite to act <output id="friendsOut">3</output></label>
<input type="range" id="friends" min="0" max="25" value="3">
<small>Movements grow through personal invitations.</small>
</div>
</div>
<div class="calc-out" aria-live="polite">
<div class="out-row"><div class="big" id="outReached">0</div><span><strong>neighbors reached</strong> through conversations, outreach, and your network each year</span></div>
<div class="out-row"><div class="big" id="outHouseholds">0</div><span><strong>households supported</strong> with free tenant-rights consultations and resources</span></div>
<div class="out-row"><div class="big" id="outMeals">0</div><span><strong>meals</strong> delivered through the Neighbor Pantry Project</span></div>
<p class="calc-note">Estimates are illustrative, based on Kindred Commons' 2024 program averages.</p>
<a href="#join" class="btn btn-primary" style="align-self:flex-start">Make This Pledge</a>
</div>
</div>
</div>
</section>
<!-- ADVOCACY ACTIONS -->
<section id="actions">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow">Advocacy actions</span>
<h2>Five ways to take action this week.</h2>
<p class="lead">Decisions are made by those who show up. These are the highest-leverage steps for the Tenant Protection Ordinance campaign — pick one, finish it, and then pass it on.</p>
</div>
<div class="actions-grid">
<div class="action-list">
<div class="action reveal">
<div class="num">1</div>
<div><h3>Sign the community petition</h3><p>Add your name and tell council members that housing security is non-negotiable.</p></div>
<a href="#petition" class="btn btn-outline btn-sm">Sign</a>
</div>
<div class="action reveal">
<div class="num">2</div>
<div><h3>Join a phone-bank night</h3><p>No experience needed. We provide scripts, training, and snacks. Two hours changes minds.</p></div>
<a href="#join" class="btn btn-outline btn-sm">Volunteer</a>
</div>
<div class="action reveal">
<div class="num">3</div>
<div><h3>Testify at the hearing</h3><p>Your story is the most powerful evidence. We'll help you prepare a two-minute statement.</p></div>
<a href="#join" class="btn btn-outline btn-sm">Speak Up</a>
</div>
<div class="action reveal">
<div class="num">4</div>
<div><h3>Spread awareness online</h3><p>Download our shareable toolkit with graphics, captions, and fact sheets in 6 languages.</p></div>
<a href="#resources" class="btn btn-outline btn-sm">Get Kit</a>
</div>
<div class="action reveal">
<div class="num">5</div>
<div><h3>Host a living-room meeting</h3><p>Invite 8–10 neighbors for conversation. We'll send a facilitator and a discussion guide.</p></div>
<a href="#join" class="btn btn-outline btn-sm">Host</a>
</div>
</div>
<div class="petition reveal" id="petition">
<span class="eyebrow" style="color:var(--sun)">Petition</span>
<h3>Protect every renter. Pass the Tenant Protection Ordinance.</h3>
<p>Rents have climbed 31% in five years while wages have barely moved. Add your name to show council members this is a community-wide priority.</p>
<div class="progress" role="progressbar" aria-label="Petition progress" aria-valuemin="0" aria-valuemax="10000" aria-valuenow="7412"><span id="progBar"></span></div>
<div class="prog-meta"><span><b id="sigCount">7,412</b> signatures</span><span>Goal: 10,000</span></div>
<form id="petitionForm" novalidate>
<input type="text" id="pName" placeholder="Full name" aria-label="Full name" required>
<input type="email" id="pEmail" placeholder="Email address" aria-label="Email address" required>
<label class="check"><input type="checkbox" checked> <span>Keep me posted about this campaign and how to help.</span></label>
<button type="submit" class="btn btn-primary" style="justify-content:center">Add My Name</button>
<div class="form-msg" id="petMsg" role="status"></div>
</form>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="bg-paper">
<div class="wrap">
<div class="section-head center reveal">
<span class="eyebrow">Member voices</span>
<h2>People-powered, in their own words.</h2>
<p class="lead">Behind every statistic is a neighbor who decided not to wait for change — and found a community ready to stand beside them.</p>
</div>
<div class="testi-grid">
<figure class="testi reveal">
<blockquote>“I thought I was the only one in my building afraid to ask for repairs. Within three months, we had a tenants' association, a lawyer on call, and a new boiler. Kindred Commons taught me that fear shrinks when you organize.”</blockquote>
<figcaption class="who"><img src="https://i.pravatar.cc/108?u=kc-testi-1" alt="Portrait of Daniel Okafor" width="54" height="54" loading="lazy"><div><strong>Daniel Okafor</strong><span>Tenant leader, Eastgate</span></div></figcaption>
</figure>
<figure class="testi reveal">
<blockquote>“As a high-school student, I didn't think anyone would listen to me. The fellowship gave me training, mentorship, and a microphone. This spring I presented our youth transit proposal to the city council—and they adopted two of our ideas.”</blockquote>
<figcaption class="who"><img src="https://i.pravatar.cc/108?u=kc-testi-2" alt="Portrait of Priya Raman" width="54" height="54" loading="lazy"><div><strong>Priya Raman</strong><span>Commons Voices Fellow, age 17</span></div></figcaption>
</figure>
<figure class="testi reveal">
<blockquote>“I started volunteering at the pantry on Saturdays just to give back. Now I coordinate 60 volunteers and sit on the leadership council. It's the most meaningful work I've ever done, and I'm retired!”</blockquote>
<figcaption class="who"><img src="https://i.pravatar.cc/108?u=kc-testi-3" alt="Portrait of Walter Briggs" width="54" height="54" loading="lazy"><div><strong>Walter Briggs</strong><span>Pantry coordinator, Northside</span></div></figcaption>
</figure>
</div>
</div>
</section>
<!-- RESOURCES -->
<section id="resources">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow">Resources</span>
<h2>Tools to organize, learn, and spread the word.</h2>
<p class="lead">Every guide here is free, written with and for community members, and available in multiple languages. Use them, remix them, and share them widely.</p>
</div>
<div class="res-grid">
<a href="#resources" class="res reveal"><div class="ic">📘</div><h3>Know Your Tenant Rights</h3><p>A plain-language guide covering notices, repairs, deposits, and what to do if you receive an eviction letter.</p><span class="fmt">PDF · 6 languages</span></a>
<a href="#resources" class="res reveal"><div class="ic">🧭</div><h3>Organizer's Starter Kit</h3><p>Step-by-step playbooks for hosting meetings, mapping power, recruiting volunteers, and running a winnable campaign.</p><span class="fmt">Toolkit · Free</span></a>
<a href="#resources" class="res reveal"><div class="ic">📣</div><h3>Spread Awareness Toolkit</h3><p>Ready-to-share graphics, social captions, op-ed templates, and talking points to amplify our campaigns.</p><span class="fmt">Media pack · ZIP</span></a>
<a href="#resources" class="res reveal"><div class="ic">🎧</div><h3>The Commons Podcast</h3><p>Conversations with organizers, elders, and policymakers about how everyday people are changing their cities.</p><span class="fmt">Audio · 48 episodes</span></a>
</div>
</div>
</section>
<!-- FAQ -->
<section class="bg-paper">
<div class="wrap faq-layout">
<div class="reveal">
<span class="eyebrow">Questions, answered</span>
<h2>New to community organizing?</h2>
<p class="lead" style="margin-top:16px">You don't need experience, credentials, or a lot of free time. Here are the questions we hear most from first-time members.</p>
<img src="https://picsum.photos/640/480?random=51" alt="Volunteers smiling together after a neighborhood cleanup" width="640" height="480" loading="lazy">
</div>
<div class="reveal" id="faq">
<details open>
<summary>Do I need experience to get involved?</summary>
<div class="ans">Not at all. Most of our leaders started as first-time volunteers. Every new member gets a welcome call, a short orientation, and a mentor who helps you find a role that fits your skills, schedule, and interests.</div>
</details>
<details>
<summary>Is Kindred Commons partisan?</summary>
<div class="ans">No. We are a non-partisan 501(c)(3) organization. We never endorse candidates, but we do advocate for policies that advance our members' priorities, and we hold elected officials of every party accountable.</div>
</details>
<details>
<summary>How are campaigns chosen?</summary>
<div class="ans">Campaigns are chosen democratically. Each year, members vote at neighborhood assemblies and through our online platform. A campaign must be driven by those directly affected, winnable within 24 months, and aligned with our values.</div>
</details>
<details>
<summary>Where do donations go?</summary>
<div class="ans">82 cents of every dollar goes directly to programs: legal clinics, interpreter services, organizer stipends, and pantry operations. Our audited financials and annual impact report are published openly each spring.</div>
</details>
<details>
<summary>Can I start a chapter in my neighborhood?</summary>
<div class="ans">Yes. If you can gather ten neighbors who share a concern, we'll provide training, funding for your first event, and ongoing coaching. Many of our chapters started in living rooms, churches, and community gardens.</div>
</details>
<details>
<summary>Is my information kept private?</summary>
<div class="ans">Absolutely. We never sell or share member data. Sensitive information such as immigration or housing status is shared only with your explicit permission and is accessible only to a small team of trained staff.</div>
</details>
</div>
</div>
</section>
<!-- JOIN -->
<section id="join" class="join-cta" style="padding-top:96px">
<div class="wrap">
<div class="join-box reveal">
<div style="position:relative;z-index:1">
<span class="eyebrow" style="color:var(--sun)">Join the movement</span>
<h2>Your neighbors are waiting for you.</h2>
<p>Becoming a member takes less than two minutes. You'll receive a welcome call, invitations to nearby events, and the chance to help shape the priorities of a growing, people-powered community.</p>
<p>Membership is free. Whether you volunteer, donate, or simply spread the word, you're part of the solution. Together, we are building a society where everyone belongs and everyone has a say.</p>
</div>
<form class="join-form" id="joinForm" novalidate>
<h3>Become a member</h3>
<input type="text" id="jName" placeholder="Full name" aria-label="Full name" required>
<input type="email" id="jEmail" placeholder="Email address" aria-label="Email address" required>
<select id="jInterest" aria-label="How would you like to get involved?">
<option>Volunteer on campaigns</option>
<option>Host a living-room meeting</option>
<option>Join the pantry team</option>
<option>Support with a donation</option>
<option>Just keep me informed</option>
</select>
<button class="btn btn-primary" type="submit" style="justify-content:center">Stand With Us</button>
<div class="form-msg" id="joinMsg" role="status"></div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="foot-grid">
<div class="foot-about">
<a href="#top" class="brand">
<img src="https://placehold.co/108x108/f2b84b/12301f?text=KC&font=lora" alt="Kindred Commons logo" width="54" height="54" loading="lazy">
<div class="brand-text"><strong>Kindred Commons</strong><span>Neighbors building power, together.</span></div>
</a>
<p>A non-partisan, member-led organization advancing housing justice, civic participation, and community care through collective action.</p>
<div class="social" aria-label="Social media">
<a href="#" aria-label="Facebook">f</a>
<a href="#" aria-label="Instagram">ig</a>
<a href="#" aria-label="X">X</a>
<a href="#" aria-label="YouTube">▶</a>
<a href="#" aria-label="LinkedIn">in</a>
</div>
</div>
<div>
<h4>Explore</h4>
<ul>
<li><a href="#about">About us</a></li>
<li><a href="#grassroots">Grassroots programs</a></li>
<li><a href="#news">News</a></li>
<li><a href="#impact">Impact calculator</a></li>
<li><a href="#actions">Take action</a></li>
</ul>
</div>
<div>
<h4>Get involved</h4>
<ul>
<li><a href="#join">Join</a></li>
<li><a href="#join">Volunteer</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#join">Donate</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<address>
<span>218 Alder Street, Suite 4<br>Riverton, OR 97205</span>
<a href="tel:+15035550147">(503) 555-0147</a>
<a href="mailto:hello@kindredcommons.org">hello@kindredcommons.org</a>
<span>Mon–Fri · 9am–6pm</span>
</address>
</div>
</div>
<div class="foot-bottom">
<span>© <span id="year">2025</span> Kindred Commons. All rights reserved. EIN 00-0000000.</span>
<nav aria-label="Legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Accessibility</a>
</nav>
</div>
</div>
</footer>
<script>
(function(){
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Mobile nav
var btn = document.querySelector('.menu-btn'), nav = document.getElementById('primary-nav');
btn.addEventListener('click', function(){
var open = nav.classList.toggle('open');
btn.setAttribute('aria-expanded', open);
});
nav.querySelectorAll('a').forEach(function(a){
a.addEventListener('click', function(){ nav.classList.remove('open'); btn.setAttribute('aria-expanded','false'); });
});
// Reveal on scroll
var reveals = document.querySelectorAll('.reveal');
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(e){ if (e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
}, {threshold:.12});
reveals.forEach(function(el){ io.observe(el); });
} else { reveals.forEach(function(el){ el.classList.add('in'); }); }
// Count-up stats
function fmt(n){ return n.toLocaleString('en-US'); }
var counters = document.querySelectorAll('[data-count]');
function runCount(el){
var target = +el.dataset.count, suffix = el.dataset.suffix || '', start = null, dur = 1600;
function step(ts){
if(!start) start = ts;
var p = Math.min((ts-start)/dur,1), eased = 1-Math.pow(1-p,3);
el.textContent = fmt(Math.round(target*eased)) + (p===1?suffix:'');
if(p<1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
if ('IntersectionObserver' in window) {
var co = new IntersectionObserver(function(entries){
entries.forEach(function(e){ if(e.isIntersecting){ runCount(e.target); co.unobserve(e.target); } });
}, {threshold:.5});
counters.forEach(function(c){ co.observe(c); });
} else { counters.forEach(function(c){ c.textContent = fmt(+c.dataset.count) + (c.dataset.suffix||''); }); }
// Impact calculator
var hours = document.getElementById('hours'), gift = document.getElementById('gift'), friends = document.getElementById('friends');
var cur = {reached:0, households:0, meals:0};
function fill(r){ r.style.setProperty('--p', ((r.value - r.min)/(r.max - r.min)*100) + '%'); }
function animateTo(id, key, target){
var el = document.getElementById(id), from = cur[key], start = null, dur = 500;
cur[key] = target;
function step(ts){
if(!start) start = ts;
var p = Math.min((ts-start)/dur,1);
el.textContent = fmt(Math.round(from + (target-from)*p));
if(p<1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
function calc(){
var h = +hours.value, g = +gift.value, f = +friends.value;
document.getElementById('hoursOut').textContent = h;
document.getElementById('giftOut').textContent = '$' + g;
document.getElementById('friendsOut').textContent = f;
[hours,gift,friends].forEach(fill);
var yearHours = h*12;
var reached = yearHours*4 + f*24 + Math.round(g*12/10);
var households = Math.round(g*12/35 + yearHours/18);
var meals = Math.round(g*12/0.9*0.5 + yearHours*6);
animateTo('outReached','reached',reached);
animateTo('outHouseholds','households',households);
animateTo('outMeals','meals',meals);
}
[hours,gift,friends].forEach(function(r){ r.addEventListener('input', calc); });
calc();
// Petition
var sigs = 7412, goal = 10000;
var bar = document.getElementById('progBar'), sigEl = document.getElementById('sigCount'), prog = document.querySelector('.progress');
function updateBar(){ bar.style.width = Math.min(sigs/goal*100,100) + '%'; sigEl.textContent = fmt(sigs); prog.setAttribute('aria-valuenow', sigs); }
setTimeout(updateBar, 400);
function validEmail(v){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
document.getElementById('petitionForm').addEventListener('submit', function(e){
e.preventDefault();
var n = document.getElementById('pName').value.trim(), m = document.getElementById('pEmail').value.trim(), msg = document.getElementById('petMsg');
if(!n || !validEmail(m)){ msg.textContent = 'Please enter your name and a valid email.'; return; }
sigs++; updateBar();
msg.textContent = 'Thank you, ' + n.split(' ')[0] + '! You are signature #' + fmt(sigs) + '.';
this.reset();
});
// Join form
document.getElementById('joinForm').addEventListener('submit', function(e){
e.preventDefault();
var n = document.getElementById('jName').value.trim(), m = document.getElementById('jEmail').value.trim(), msg = document.getElementById('joinMsg');
if(!n || !validEmail(m)){ msg.style.color = '#a8412c'; msg.textContent = 'Please enter your name and a valid email.'; return; }
msg.style.color = ''; msg.textContent = 'Welcome to the Commons, ' + n.split(' ')[0] + '! Check your inbox for next steps.';
this.reset();
});
// FAQ: one open at a time
var items = document.querySelectorAll('#faq details');
items.forEach(function(d){
d.addEventListener('toggle', function(){
if(d.open) items.forEach(function(o){ if(o!==d) o.open = false; });
});
});
})();
</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:52:59.248Z",
"url": "https://benchmark.aimac.invalid/13ee41ead0a555f96a329045ccad7c022abde759244e6a87c69d65f13c16e9c4.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-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "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 href=\"#top\" class=\"brand\" aria-label=\"Kindred Commons home\">",
"target": [
"a[aria-label=\"Kindred Commons 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 href=\"#top\" class=\"brand\" aria-label=\"Kindred Commons home\">",
"target": [
"a[aria-label=\"Kindred Commons home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"progress\" role=\"progressbar\" aria-label=\"Petition progress\" aria-valuemin=\"0\" aria-valuemax=\"10000\" aria-valuenow=\"7412\"><span id=\"progBar\" style=\"width: 74.12%;\"></span></div>",
"target": [
".progress"
]
}
]
},
{
"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-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": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"progress\" role=\"progressbar\" aria-label=\"Petition progress\" aria-valuemin=\"0\" aria-valuemax=\"10000\" aria-valuenow=\"7412\"><span id=\"progBar\" style=\"width: 74.12%;\"></span></div>",
"target": [
".progress"
]
}
]
},
{
"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 href=\"#top\" class=\"brand\" aria-label=\"Kindred Commons home\">",
"target": [
"a[aria-label=\"Kindred Commons home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"progress\" role=\"progressbar\" aria-label=\"Petition progress\" aria-valuemin=\"0\" aria-valuemax=\"10000\" aria-valuenow=\"7412\"><span id=\"progBar\" style=\"width: 74.12%;\"></span></div>",
"target": [
".progress"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"progress\" role=\"progressbar\" aria-label=\"Petition progress\" aria-valuemin=\"0\" aria-valuemax=\"10000\" aria-valuenow=\"7412\"><span id=\"progBar\" style=\"width: 74.12%;\"></span></div>",
"target": [
".progress"
]
}
]
},
{
"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 href=\"#top\" class=\"brand\" aria-label=\"Kindred Commons home\">",
"target": [
"a[aria-label=\"Kindred Commons 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 href=\"#top\" class=\"brand\" aria-label=\"Kindred Commons home\">",
"target": [
"a[aria-label=\"Kindred Commons home\"]"
]
}
]
},
{
"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": "<section id=\"join\" class=\"join-cta\" style=\"padding-top:96px\">",
"target": [
"#join"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\" class=\"btn btn-primary\" style=\"justify-content:center\">Add My Name</button>",
"target": [
"#petitionForm > button[type=\"submit\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Strong neighborhoods are <em>built by neighbors.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>A movement that starts at the kitchen table.</h2>",
"target": [
".mission-grid > .reveal:nth-child(1) > h2"
]
},
{
"html": "<h2>Real change is organized block by block.</h2>",
"target": [
"#grassroots > .wrap > .center.section-head.reveal > h2"
]
},
{
"html": "<h3>Tenant Power Networks</h3>",
"target": [
".feature:nth-child(1) > .body > h3"
]
},
{
"html": "<h3>Every Voice Counts</h3>",
"target": [
".feature:nth-child(2) > .body > h3"
]
},
{
"html": "<h3>The Neighbor Pantry Project</h3>",
"target": [
".feature:nth-child(3) > .body > h3"
]
},
{
"html": "<h3>Commons Voices Fellowship</h3>",
"target": [
".feature:nth-child(4) > .body > h3"
]
},
{
"html": "<h3>Care Circles</h3>",
"target": [
".feature:nth-child(5) > .body > h3"
]
},
{
"html": "<h3>Living Archive</h3>",
"target": [
".feature:nth-child(6) > .body > h3"
]
},
{
"html": "<h2>What the movement is doing right now.</h2>",
"target": [
"#news > .wrap > .section-head.reveal > h2"
]
},
{
"html": "<h3>Tenant Protection Ordinance clears committee after 600 residents testify</h3>",
"target": [
".story-lead > .body > h3"
]
},
{
"html": "<h3>2,300 new voters registered in eight weeks</h3>",
"target": [
".story:nth-child(1) > .body > h3"
]
},
{
"html": "<h3>Eastside community garden saved from sale</h3>",
"target": [
".story:nth-child(2) > .body > h3"
]
},
{
"html": "<h3>\"Who Gets to Stay?\" forum draws 800 attendees</h3>",
"target": [
".story:nth-child(3) > .body > h3"
]
},
{
"html": "<h3>Applications open for the 2025 Commons Voices cohort</h3>",
"target": [
".story:nth-child(4) > .body > h3"
]
},
{
"html": "<h3>Road to March 18: campaign timeline</h3>",
"target": [
".timeline > h3"
]
},
{
"html": "<h3 style=\"text-align:left\">Activist spotlight</h3>",
"target": [
".spot > h3"
]
},
{
"html": "<h4>Maria Delgado</h4>",
"target": [
".spot > h4"
]
},
{
"html": "<h3>Success stories</h3>",
"target": [
".widget.reveal:nth-child(2) > h3"
]
},
{
"html": "<h3>Movement updates</h3>",
"target": [
".widget.reveal:nth-child(3) > h3"
]
},
{
"html": "<h3>Get the weekly briefing</h3>",
"target": [
".dark > h3"
]
},
{
"html": "<h2>See what your time and support can do.</h2>",
"target": [
"#impact > .wrap > .center.section-head.reveal > h2"
]
},
{
"html": "<h3>Build your pledge</h3>",
"target": [
".calc-inputs > h3"
]
},
{
"html": "<h2>Five ways to take action this week.</h2>",
"target": [
"#actions > .wrap > .section-head.reveal > h2"
]
},
{
"html": "<h3>Sign the community petition</h3>",
"target": [
".action.reveal:nth-child(1) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Join a phone-bank night</h3>",
"target": [
".action.reveal:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Testify at the hearing</h3>",
"target": [
".action.reveal:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Spread awareness online</h3>",
"target": [
".action.reveal:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Host a living-room meeting</h3>",
"target": [
".action.reveal:nth-child(5) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Protect every renter. Pass the Tenant Protection Ordinance.</h3>",
"target": [
"#petition > h3"
]
},
{
"html": "<h2>People-powered, in their own words.</h2>",
"target": [
".bg-paper:nth-child(9) > .wrap > .center.section-head.reveal > h2"
]
},
{
"html": "<h2>Tools to organize, learn, and spread the word.</h2>",
"target": [
"#resources > .wrap > .section-head.reveal > h2"
]
},
{
"html": "<h3>Know Your Tenant Rights</h3>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(1) > h3"
]
},
{
"html": "<h3>Organizer's Starter Kit</h3>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(2) > h3"
]
},
{
"html": "<h3>Spread Awareness Toolkit</h3>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(3) > h3"
]
},
{
"html": "<h3>The Commons Podcast</h3>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(4) > h3"
]
},
{
"html": "<h2>New to community organizing?</h2>",
"target": [
".faq-layout > .reveal:nth-child(1) > h2"
]
},
{
"html": "<h2>Your neighbors are waiting for you.</h2>",
"target": [
".join-box > div > h2"
]
},
{
"html": "<h3>Become a member</h3>",
"target": [
"#joinForm > h3"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
"div:nth-child(2) > h4"
]
},
{
"html": "<h4>Get involved</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact</h4>",
"target": [
"div:nth-child(4) > h4"
]
}
],
"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": "#e9e2d0",
"bgColor": "#12301f",
"contrastRatio": 11.07,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.07"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>\ud83c\udfd8\ufe0f Tenant Protection Ordinance vote is on March 18 \u2014 <a href=\"#actions\">Add your voice \u2192</a></span>",
"target": [
".wrap > span:nth-child(1)"
]
}
]
},
{
"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 id=\"primary-nav\" aria-label=\"Primary\">",
"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=\"hours\">Volunteer hours per month <output id=\"hoursOut\">6</output></label>",
"target": [
"label[for=\"hours\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"range\" id=\"hours\" min=\"0\" max=\"40\" value=\"6\" style=\"--p: 15%;\">",
"target": [
"#hours"
]
}
]
},
{
"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/108x108/1d4636/f2b84b?text=KC&font=lora\" alt=\"Kindred Commons logo\" width=\"54\" height=\"54\">",
"target": [
"a[aria-label=\"Kindred Commons home\"] > img[alt=\"Kindred Commons logo\"][width=\"54\"][height=\"54\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"hours\">Volunteer hours per month <output id=\"hoursOut\">6</output></label>",
"target": [
"label[for=\"hours\"]"
]
}
],
"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": "<input type=\"range\" id=\"hours\" min=\"0\" max=\"40\" value=\"6\" style=\"--p: 15%;\">",
"target": [
"#hours"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span>\ud83c\udfd8\ufe0f Tenant Protection Ordinance vote is on March 18 \u2014 <a href=\"#actions\">Add your voice \u2192</a></span>",
"target": [
".wrap > span:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#actions\">Add your voice \u2192</a>",
"target": [
"span:nth-child(1) > a[href$=\"#actions\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#main\" class=\"skip\">Skip to main content</a>",
"target": [
".skip"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
"#primary-nav > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#about\">About</a></li>",
"target": [
"#primary-nav > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"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/108x108/1d4636/f2b84b?text=KC&font=lora\" alt=\"Kindred Commons logo\" width=\"54\" height=\"54\">",
"target": [
"a[aria-label=\"Kindred Commons home\"] > img[alt=\"Kindred Commons logo\"][width=\"54\"][height=\"54\"]"
]
}
]
},
{
"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": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"jInterest\" aria-label=\"How would you like to get involved?\">",
"target": [
"#jInterest"
]
}
]
},
{
"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[open=\"\"] > 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": 195.5,
"height": 48
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (195.5px by 48px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#main\" class=\"skip\">Skip to main 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=\"social\" aria-label=\"Social media\">",
"target": [
".social"
],
"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": {
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": "pseudoContent",
"expectedContrastRatio": "4.5:1"
},
"relatedNodes": [
{
"html": "<section class=\"hero\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Community power \u00b7 Collective action</span>",
"target": [
".hero-grid > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo 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": "#ffffff",
"bgColor": "#c8553d",
"contrastRatio": 4.35,
"fontSize": "11.8pt (15.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#join\" class=\"join\">Join</a>",
"target": [
".join"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 11.8pt (15.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#join\" class=\"join\">Join</a>",
"target": [
".join"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 11.8pt (15.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Who we are</span>",
"target": [
".in.reveal:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Who we are</span>",
"target": [
".mission-grid > .in.reveal:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"grassroots\" class=\"bg-paper\">",
"target": [
"#grassroots"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Grassroots efforts</span>",
"target": [
".center.section-head.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature.in:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Housing justice</span>",
"target": [
".feature.in:nth-child(1) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature.in:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Civic participation</span>",
"target": [
".feature.in:nth-child(2) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature.in:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Mutual aid</span>",
"target": [
".feature.in:nth-child(3) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature.in:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Culture & youth</span>",
"target": [
".feature.in:nth-child(4) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature.in:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Public health</span>",
"target": [
".feature.in:nth-child(5) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature.in:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Heritage</span>",
"target": [
".feature.in:nth-child(6) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Campaign updates & news</span>",
"target": [
"#news > .wrap > .section-head.in.reveal > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Housing justice</span>",
"target": [
".feature:nth-child(1) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Civic participation</span>",
"target": [
".feature:nth-child(2) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Mutual aid</span>",
"target": [
".feature:nth-child(3) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Culture & youth</span>",
"target": [
".feature:nth-child(4) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Public health</span>",
"target": [
".feature:nth-child(5) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Heritage</span>",
"target": [
".feature:nth-child(6) > .body > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c8553d",
"contrastRatio": 4.35,
"fontSize": "13.8pt (18.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget dark reveal in\">\n <h3>Get the weekly briefing</h3>\n <p>One short email every Friday: wins, events, and the single most useful thing you can do.</p>\n <a href=\"#join\" class=\"btn btn-light btn-sm\">Subscribe</a>\n </div>",
"target": [
".dark"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 13.8pt (18.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Get the weekly briefing</h3>",
"target": [
".dark > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 13.8pt (18.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c8553d",
"contrastRatio": 4.35,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget dark reveal in\">\n <h3>Get the weekly briefing</h3>\n <p>One short email every Friday: wins, events, and the single most useful thing you can do.</p>\n <a href=\"#join\" class=\"btn btn-light btn-sm\">Subscribe</a>\n </div>",
"target": [
".dark"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>One short email every Friday: wins, events, and the single most useful thing you can do.</p>",
"target": [
".dark > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"grassroots\" class=\"bg-paper\">",
"target": [
"#grassroots"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Grassroots efforts</span>",
"target": [
"#grassroots > .wrap > .center.section-head.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "13.8pt (18.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"calc-card reveal in\">",
"target": [
".calc-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 13.8pt (18.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<output id=\"giftOut\">$20</output>",
"target": [
"#giftOut"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 13.8pt (18.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c8553d",
"contrastRatio": 4.35,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#join\" class=\"btn btn-primary\" style=\"align-self:flex-start\">Make This Pledge</a>",
"target": [
".calc-out > .btn-primary.btn[href$=\"#join\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#join\" class=\"btn btn-primary\" style=\"align-self:flex-start\">Make This Pledge</a>",
"target": [
".calc-out > .btn-primary.btn[href$=\"#join\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Advocacy actions</span>",
"target": [
"#actions > .wrap > .section-head.in.reveal > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c8553d",
"contrastRatio": 4.35,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"btn btn-primary\" style=\"justify-content:center\">Add My Name</button>",
"target": [
"#petitionForm > button[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"btn btn-primary\" style=\"justify-content:center\">Add My Name</button>",
"target": [
"#petitionForm > button[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #ffffff, background color: #c8553d, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-paper\">",
"target": [
".bg-paper:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Member voices</span>",
"target": [
".bg-paper:nth-child(9) > .wrap > .center.section-head.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Resources</span>",
"target": [
"#resources > .wrap > .section-head.in.reveal > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83d\udcd8</div><h3>Know Your Tenant Rights</h3><p>A plain-language guide covering notices, repairs, deposits, and what to do if you receive an eviction letter.</p><span class=\"fmt\">PDF \u00b7 6 languages</span></a>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">PDF \u00b7 6 languages</span>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(1) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83e\udded</div><h3>Organizer's Starter Kit</h3><p>Step-by-step playbooks for hosting meetings, mapping power, recruiting volunteers, and running a winnable campaign.</p><span class=\"fmt\">Toolkit \u00b7 Free</span></a>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">Toolkit \u00b7 Free</span>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(2) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83d\udce3</div><h3>Spread Awareness Toolkit</h3><p>Ready-to-share graphics, social captions, op-ed templates, and talking points to amplify our campaigns.</p><span class=\"fmt\">Media pack \u00b7 ZIP</span></a>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">Media pack \u00b7 ZIP</span>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(3) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83c\udfa7</div><h3>The Commons Podcast</h3><p>Conversations with organizers, elders, and policymakers about how everyday people are changing their cities.</p><span class=\"fmt\">Audio \u00b7 48 episodes</span></a>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">Audio \u00b7 48 episodes</span>",
"target": [
".res.in[href$=\"#resources\"]:nth-child(4) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-paper\">",
"target": [
".bg-paper:nth-child(11)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Questions, answered</span>",
"target": [
".faq-layout > .in.reveal:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Who we are</span>",
"target": [
".mission-grid > .reveal.in:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"grassroots\" class=\"bg-paper\">",
"target": [
"#grassroots"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Grassroots efforts</span>",
"target": [
"#grassroots > .wrap > .center.section-head.reveal > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Campaign updates & news</span>",
"target": [
"#news > .wrap > .section-head.reveal.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Advocacy actions</span>",
"target": [
"#actions > .wrap > .section-head.reveal.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-paper\">",
"target": [
".bg-paper:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Member voices</span>",
"target": [
".bg-paper:nth-child(9) > .wrap > .center.section-head.reveal > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Resources</span>",
"target": [
"#resources > .wrap > .section-head.reveal.in > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83d\udcd8</div><h3>Know Your Tenant Rights</h3><p>A plain-language guide covering notices, repairs, deposits, and what to do if you receive an eviction letter.</p><span class=\"fmt\">PDF \u00b7 6 languages</span></a>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">PDF \u00b7 6 languages</span>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(1) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83e\udded</div><h3>Organizer's Starter Kit</h3><p>Step-by-step playbooks for hosting meetings, mapping power, recruiting volunteers, and running a winnable campaign.</p><span class=\"fmt\">Toolkit \u00b7 Free</span></a>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">Toolkit \u00b7 Free</span>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(2) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83d\udce3</div><h3>Spread Awareness Toolkit</h3><p>Ready-to-share graphics, social captions, op-ed templates, and talking points to amplify our campaigns.</p><span class=\"fmt\">Media pack \u00b7 ZIP</span></a>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">Media pack \u00b7 ZIP</span>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(3) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#f8f2e7",
"contrastRatio": 3.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#resources\" class=\"res reveal in\"><div class=\"ic\">\ud83c\udfa7</div><h3>The Commons Podcast</h3><p>Conversations with organizers, elders, and policymakers about how everyday people are changing their cities.</p><span class=\"fmt\">Audio \u00b7 48 episodes</span></a>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"fmt\">Audio \u00b7 48 episodes</span>",
"target": [
".res.reveal[href$=\"#resources\"]:nth-child(4) > .fmt"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c8553d, background color: #f8f2e7, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8553d",
"bgColor": "#fffdf8",
"contrastRatio": 4.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-paper\">",
"target": [
".bg-paper:nth-child(11)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Questions, answered</span>",
"target": [
".faq-layout > .reveal.in:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #c8553d, background color: #fffdf8, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 13038
},
{
"y": 576,
"height": 13038
},
{
"y": 1152,
"height": 13038
},
{
"y": 1728,
"height": 13038
},
{
"y": 2304,
"height": 13038
},
{
"y": 2880,
"height": 13038
},
{
"y": 3456,
"height": 13038
},
{
"y": 4032,
"height": 13038
},
{
"y": 4608,
"height": 13038
},
{
"y": 5184,
"height": 13038
},
{
"y": 5760,
"height": 13038
},
{
"y": 6336,
"height": 13038
},
{
"y": 6912,
"height": 13038
},
{
"y": 7488,
"height": 13038
},
{
"y": 8064,
"height": 13038
},
{
"y": 8640,
"height": 13038
},
{
"y": 9216,
"height": 13038
},
{
"y": 9792,
"height": 13038
},
{
"y": 10368,
"height": 13038
},
{
"y": 10944,
"height": 13038
},
{
"y": 11520,
"height": 13038
},
{
"y": 12096,
"height": 13038
},
{
"y": 12318,
"height": 13038
}
],
"scans": 24,
"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: "News", "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: "Grassroots Efforts", "Campaign Updates", "Advocacy Actions".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "collective action", "empowerment", "grassroots".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Volunteer", "Stand With Us", "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: "success stories", "activist spotlights", "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.