Qwen Qwen3.8 Max (0902) – Society
via Alibaba · Generated
- AIMAC Debt 5.14
- Cost $0.18
- Total Violations 27
- HTML Size 71 KB
- Em Dashes 44
Screenshot
View Live Page
Accessibility Issues Found
27 Serious
-
color-contrast serious 27 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a class="btn btn--verm btn--sm" href="#join">Donate Now</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.0">
<title>Commonweal Coalition — The Common Good Is a Group Project</title>
<meta name="description" content="Commonweal is a civic coalition of 120+ tenant unions, cultural collectives and mutual aid networks organizing for housing, honest policy and radical inclusion across nine cities.">
<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=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--paper:#F4EFE3; --paper-2:#ECE4D2; --card:#FBF8F0;
--ink:#14231C; --ink-soft:#3E4C44;
--green:#1C4A38; --green-2:#2C6B51;
--verm:#D8491B; --verm-2:#B33A13;
--gold:#E0A427;
--line:rgba(20,35,28,.18); --line-soft:rgba(20,35,28,.1);
--cream-line:rgba(244,239,227,.22);
--shadow:6px 6px 0 rgba(20,35,28,.9);
--ff-disp:"Fraunces",Georgia,serif;
--ff-body:"Public Sans",system-ui,sans-serif;
--ff-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--ff-body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--verm);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--verm);outline-offset:3px}
.wrap{width:min(1220px,92vw);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1rem;z-index:200;font-family:var(--ff-mono)}
.skip:focus{left:1rem;top:1rem}
/* grain overlay */
.grain{position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ============ type helpers ============ */
.eyebrow{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--verm);display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.h-disp{font-family:var(--ff-disp);font-weight:600;line-height:1.04;letter-spacing:-.01em;font-optical-sizing:auto}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;margin-bottom:.8rem}
.sec-head .h-disp{font-size:clamp(2rem,4.2vw,3.3rem)}
.sec-no{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.18em;color:var(--ink-soft)}
.lede{max-width:62ch;color:var(--ink-soft);font-size:1.05rem}
.rule{border:none;border-top:1px solid var(--line);margin:1.4rem 0 0}
/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.35rem;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;border-radius:2px}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:none;box-shadow:none}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--verm{background:var(--verm);border-color:var(--verm-2);color:#FFF7EC}
.btn--verm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn--ghost{background:transparent}
.btn--sm{padding:.55rem .95rem;font-size:.7rem}
.chip{display:inline-block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;padding:.28rem .6rem;border-radius:2px}
.chip--verm{color:var(--verm)}
.chip--green{color:var(--green-2)}
.chip--gold{color:#8A6410}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* ============ top bar + header ============ */
.topbar{background:var(--ink);color:#D9D2BF;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0}
.topbar .dot{color:var(--verm)}
header.site{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 12px 30px -18px rgba(20,35,28,.45)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand svg{flex:none}
.brand-name{font-family:var(--ff-disp);font-weight:800;font-size:1.45rem;letter-spacing:-.01em;line-height:1}
.brand-tag{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav-links a{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--verm);transition:width .25s ease}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.9rem}
.burger{display:none;background:none;border:1.5px solid var(--ink);padding:.5rem .65rem;border-radius:2px;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em}
.mobile-menu{display:none;border-top:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;padding:1rem 0 1.4rem}
.mobile-menu a{display:block;padding:.7rem 0;font-family:var(--ff-mono);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px dashed var(--line-soft)}
/* ============ hero ============ */
.hero{position:relative;padding:4.2rem 0 3.2rem;background:
radial-gradient(700px 380px at 85% 8%, rgba(224,164,39,.16), transparent 60%),
repeating-linear-gradient(0deg, transparent 0 34px, rgba(20,35,28,.035) 34px 35px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero .eyebrow{margin-bottom:1.4rem}
.hero-h{font-family:var(--ff-disp);font-weight:560;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.02em}
.hero-h .it{font-style:italic;font-weight:400;color:var(--green)}
.hero-h .mark{background:linear-gradient(transparent 58%, rgba(216,73,27,.28) 58%)}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:block;transform:translateY(115%);animation:lineUp 1s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes lineUp{to{transform:translateY(0)}}
.hero-sub{margin-top:1.6rem;max-width:52ch;color:var(--ink-soft);font-size:1.06rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-meta{display:flex;gap:2.2rem;margin-top:2.6rem;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hero-meta b{display:block;font-size:1.5rem;font-family:var(--ff-disp);font-weight:600;color:var(--ink);letter-spacing:0}
/* postcard collage */
.collage{position:relative;min-height:560px}
.postcard{position:absolute;background:var(--card);border:1px solid var(--line);padding:.7rem .7rem 0;box-shadow:14px 18px 34px -18px rgba(20,35,28,.5);transform:rotate(var(--r));transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;will-change:transform}
.postcard:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:18px 26px 44px -18px rgba(20,35,28,.55);z-index:6}
.postcard figcaption{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:.55rem .2rem .6rem;display:flex;justify-content:space-between;gap:.5rem}
.tint{background:var(--green);overflow:hidden}
.tint--verm{background:var(--verm-2)}
.tint--gold{background:#9A7116}
.tint img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(1.04);mix-blend-mode:multiply}
.kenburns img{animation:breathe 16s ease-in-out infinite alternate;transform-origin:center}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.09) translateX(-1.5%)}}
.pc-1{top:0;right:4%;width:min(340px,58%);--r:2.5deg;z-index:3}
.pc-2{top:36%;left:0;width:min(280px,48%);--r:-4deg;z-index:4}
.pc-3{bottom:0;right:0;width:min(260px,44%);--r:3deg;z-index:2}
.stamp{position:absolute;top:-28px;left:6%;z-index:7;width:128px;height:128px;color:var(--verm);animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stat-strip{margin-top:3.4rem;border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.stat-strip>div{padding:1.3rem 1.4rem;border-left:1px solid var(--line)}
.stat-strip>div:first-child{border-left:none}
.stat-strip b{font-family:var(--ff-disp);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.3rem);display:block;line-height:1}
.stat-strip span{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
/* ============ ticker ============ */
.ticker{background:var(--ink);color:#E9E2CE;overflow:hidden;border-block:1px solid var(--ink)}
.ticker-track{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;align-items:center;white-space:nowrap;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:.75rem 0}
.ticker-set span{padding:0 1.6rem;display:flex;align-items:center;gap:1.6rem}
.ticker-set i{font-style:normal;color:var(--gold)}
@keyframes tick{to{transform:translateX(-50%)}}
/* ============ sections general ============ */
section{position:relative}
.pad{padding:5.5rem 0}
.pad-t{padding-top:5.5rem}
.band-paper2{background:var(--paper-2)}
.band-ink{background:var(--ink);color:#EDE7D5}
.band-ink .eyebrow{color:var(--gold)}
.band-ink .lede{color:#B9C0B4}
.band-green{background:var(--green);color:#F1ECDC}
.band-green .eyebrow{color:var(--gold)}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:var(--card);margin-top:2.6rem}
.pillar{padding:1.9rem 1.6rem 2.1rem;border-left:1px solid var(--line);position:relative;transition:background .3s}
.pillar:first-child{border-left:none}
.pillar:hover{background:#FFFDF6}
.pillar .no{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;color:var(--verm)}
.pillar h3{font-family:var(--ff-disp);font-weight:600;font-size:1.35rem;margin:.7rem 0 .6rem}
.pillar p{font-size:.92rem;color:var(--ink-soft)}
.pillar svg{margin-bottom:.2rem}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start;margin-top:2.8rem}
.pull{border-left:3px solid var(--verm);padding-left:1.4rem;font-family:var(--ff-disp);font-style:italic;font-size:1.28rem;line-height:1.4;color:var(--green)}
.pull cite{display:block;margin-top:.9rem;font-style:normal;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
/* campaigns */
.camp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
.camp{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.camp:hover{transform:translateY(-6px);box-shadow:10px 12px 0 rgba(20,35,28,.14)}
.camp-img{aspect-ratio:3/2}
.camp-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.camp-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.camp h3{font-family:var(--ff-disp);font-weight:600;font-size:1.45rem;line-height:1.15}
.camp p{font-size:.93rem;color:var(--ink-soft)}
.camp-meta{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.bar{height:8px;background:rgba(20,35,28,.12);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--verm);border-radius:99px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.bar-fill--green{background:var(--green-2)}
.bar-fill--gold{background:var(--gold)}
.bar-num{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;margin-top:.4rem;color:var(--ink-soft)}
.camp .btn{margin-top:auto;align-self:flex-start}
/* policy sticky two-column */
.policy-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start;margin-top:2.4rem}
.policy-sticky{position:sticky;top:110px}
.policy-sticky .big{font-family:var(--ff-disp);font-weight:600;font-size:clamp(3.4rem,6vw,5.2rem);line-height:.95;color:var(--verm)}
.policy-sticky p{color:#C4CBBE;margin-top:1.2rem;max-width:40ch}
.timeline{border-left:1px solid var(--cream-line);padding-left:2.2rem;display:flex;flex-direction:column;gap:2.6rem}
.t-item{position:relative}
.t-item::before{content:"";position:absolute;left:-2.55rem;top:.45rem;width:11px;height:11px;background:var(--gold);border:2px solid var(--ink);border-radius:50%}
.t-year{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.2em;color:var(--gold)}
.t-item h4{font-family:var(--ff-disp);font-weight:600;font-size:1.4rem;margin:.35rem 0 .5rem;color:#F5F0E0}
.t-item p{font-size:.94rem;color:#B9C0B4;max-width:56ch}
.t-stat{display:inline-block;margin-top:.7rem;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(224,164,39,.5);color:var(--gold);padding:.3rem .7rem}
/* rep locator */
.locator-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start;margin-top:2.4rem}
.loc-form{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
.loc-form input{flex:1;min-width:180px;font-family:var(--ff-mono);font-size:1rem;letter-spacing:.2em;padding:.9rem 1.1rem;background:var(--card);border:1.5px solid var(--ink);border-radius:2px;color:var(--ink)}
.loc-form input.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.loc-err{color:var(--verm);font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;margin-top:.7rem;min-height:1.2em}
.loc-note{margin-top:1.8rem;font-size:.85rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:1.2rem}
.loc-count{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verm);margin-top:1rem}
.rep-results{display:flex;flex-direction:column;gap:1.1rem;min-height:320px}
.rep-empty{border:1.5px dashed var(--line);padding:3rem 2rem;text-align:center;font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rep-card{background:var(--card);border:1px solid var(--line);padding:1.3rem 1.4rem;display:grid;grid-template-columns:64px 1fr;gap:1.1rem;animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rep-card img{width:64px;height:64px;border-radius:50%;border:2px solid var(--green);object-fit:cover}
.rep-card .chip{margin-bottom:.4rem}
.rep-card h4{font-family:var(--ff-disp);font-weight:600;font-size:1.2rem}
.rep-card .role{font-size:.85rem;color:var(--ink-soft)}
.rep-card .contact{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.08em;color:var(--ink-soft);margin-top:.4rem}
.rep-actions{grid-column:1/-1;display:flex;gap:.7rem;flex-wrap:wrap;border-top:1px dashed var(--line-soft);padding-top:.9rem}
.issue-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ballot-card{background:var(--green);color:#F1ECDC;border:none;display:block;padding:1.4rem 1.5rem;animation:cardIn .5s both;animation-delay:var(--d,0s)}
.ballot-card h4{color:#fff;font-family:var(--ff-disp);font-size:1.15rem;margin-bottom:.3rem}
.ballot-card p{font-size:.85rem;color:#CFE0D3}
/* news */
.news-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;margin-top:2.6rem}
.feature{border:1px solid var(--line);background:var(--card)}
.feature .tint{aspect-ratio:16/9}
.feature-body{padding:1.7rem 1.8rem 1.9rem}
.news-meta{display:flex;gap:.9rem;align-items:center;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.feature h3{font-family:var(--ff-disp);font-weight:600;font-size:1.7rem;line-height:1.15;margin-bottom:.7rem}
.feature p{color:var(--ink-soft);font-size:.95rem}
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:86px 1fr;gap:1.2rem;padding:1.35rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s,padding-left .25s}
.news-item:hover{background:rgba(224,164,39,.1);padding-left:.7rem}
.news-date{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;color:var(--verm);text-transform:uppercase;line-height:1.5}
.news-item h4{font-family:var(--ff-disp);font-weight:600;font-size:1.12rem;line-height:1.25}
.news-item p{font-size:.85rem;color:var(--ink-soft);margin-top:.3rem}
.news-more{margin-top:1.6rem}
/* voices */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.8rem}
.voice{background:var(--card);border:1px solid var(--line);padding:2rem 1.7rem 1.7rem;position:relative;transform:rotate(var(--r,0deg));transition:transform .35s ease,box-shadow .35s ease}
.voice:hover{transform:rotate(0) translateY(-6px);box-shadow:8px 10px 0 rgba(20,35,28,.12)}
.voice::before{content:"“";position:absolute;top:-.35rem;left:1.1rem;font-family:var(--ff-disp);font-size:4.2rem;color:var(--verm);line-height:1}
.voice blockquote{font-family:var(--ff-disp);font-style:italic;font-size:1.08rem;line-height:1.5;color:var(--ink)}
.voice-foot{display:flex;align-items:center;gap:.85rem;margin-top:1.4rem;border-top:1px dashed var(--line);padding-top:1.1rem}
.voice-foot img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.voice-foot b{display:block;font-size:.9rem}
.voice-foot span{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
/* resources + volunteer */
.rv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;margin-top:2.6rem}
.guides{border-top:1px solid var(--cream-line)}
.guide{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.4rem;align-items:baseline;padding:1.25rem .4rem;border-bottom:1px solid var(--cream-line);text-decoration:none;color:inherit;transition:background .25s,padding-left .25s}
.guide:hover{background:rgba(241,236,220,.06);padding-left:.9rem}
.guide h4{font-family:var(--ff-disp);font-weight:560;font-size:1.18rem}
.guide p{grid-column:1/-1;font-size:.86rem;color:#AFBBAE;max-width:56ch}
.guide .fmt{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.spotlight{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.spotlight .tint{aspect-ratio:5/4}
.spotlight-body{padding:1.7rem 1.7rem 1.9rem}
.spotlight h3{font-family:var(--ff-disp);font-weight:600;font-size:1.5rem}
.spotlight .role{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verm);margin:.4rem 0 .8rem;display:block}
.spotlight p{font-size:.93rem;color:var(--ink-soft)}
.vol-roles{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
.vol-roles .chip{color:var(--green-2);background:rgba(44,107,81,.08)}
/* FAQ */
.faq{max-width:820px;margin:2.6rem auto 0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;text-align:left;padding:1.35rem .2rem;font-family:var(--ff-disp);font-weight:600;font-size:1.18rem;color:var(--ink)}
.faq-q .pm{font-family:var(--ff-mono);font-size:1.2rem;color:var(--verm);transition:transform .3s;flex:none}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.faq-a div{padding:0 .2rem 1.5rem;color:var(--ink-soft);font-size:.95rem;max-width:64ch}
/* join */
.join{background:var(--verm);color:#FFF6EC;position:relative;overflow:hidden}
.join::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 26px,rgba(255,255,255,.045) 26px 27px);pointer-events:none}
.join .wrap{position:relative;z-index:1}
.join-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.join h2{font-family:var(--ff-disp);font-weight:600;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.05}
.join h2 em{font-style:italic;font-weight:400}
.join p{margin-top:1.2rem;color:#FFE3CC;max-width:52ch}
.sig-counter{margin-top:1.8rem;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#FFD9B8}
.sig-counter b{display:block;font-family:var(--ff-disp);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:600;color:#fff;letter-spacing:0}
.join-card{background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:10px 10px 0 rgba(20,35,28,.35);padding:2rem 1.9rem}
.join-card h3{font-family:var(--ff-disp);font-weight:600;font-size:1.35rem;margin-bottom:1.2rem}
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.field input{width:100%;padding:.8rem 1rem;border:1.5px solid var(--ink);background:#fff;border-radius:2px;font:inherit;font-size:.95rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--ink-soft);margin:1.1rem 0 1.3rem}
.check input{margin-top:.25rem;accent-color:var(--verm)}
.join-success{display:none;text-align:center;padding:1.5rem 0}
.join-success.show{display:block;animation:cardIn .5s both}
.join-success .mark-ok{width:62px;height:62px;margin:0 auto 1rem;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:1.6rem}
.join-success h3{font-family:var(--ff-disp);font-size:1.5rem;margin-bottom:.5rem}
.join-success p{font-size:.9rem;color:var(--ink-soft)}
/* footer */
footer{background:var(--ink);color:#B9C0B4;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.6rem;padding:4.2rem 0 3rem}
.foot-brand .brand-name{color:#F4EFE3}
.foot-brand p{margin-top:1rem;max-width:34ch;font-size:.88rem}
footer h5{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
footer ul{list-style:none}
footer li{margin-bottom:.6rem}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:#F4EFE3}
.foot-contact p{font-family:var(--ff-mono);font-size:.75rem;line-height:2}
.socials{display:flex;gap:.7rem;margin-top:1.2rem}
.socials a{width:38px;height:38px;border:1px solid rgba(244,239,227,.3);display:grid;place-items:center;border-radius:50%;transition:background .25s,transform .25s}
.socials a:hover{background:var(--verm);border-color:var(--verm);transform:translateY(-3px)}
.foot-bottom{border-top:1px solid rgba(244,239,227,.14);padding:1.4rem 0;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#7E8A80}
.foot-bottom a{color:inherit}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);background:var(--ink);color:var(--paper);font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;padding:.9rem 1.4rem;border-radius:2px;z-index:120;transition:transform .45s cubic-bezier(.2,.7,.2,1);box-shadow:0 14px 34px rgba(0,0,0,.35);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
/* responsive */
@media(max-width:1024px){
.nav-links{display:none}
.burger{display:inline-block}
.hero-grid,.about-grid,.policy-grid,.locator-grid,.news-grid,.rv-grid,.join-grid{grid-template-columns:1fr}
.policy-sticky{position:static}
.pillars{grid-template-columns:1fr 1fr}
.pillar:nth-child(odd){border-left:none}
.pillar{border-top:1px solid var(--line)}
.pillar:nth-child(-n+2){border-top:none}
.camp-grid{grid-template-columns:1fr 1fr}
.voices{grid-template-columns:1fr}
.voice{--r:0deg!important}
.collage{min-height:480px;max-width:560px}
.stat-strip{grid-template-columns:1fr 1fr}
.stat-strip>div{border-top:1px solid var(--line)}
.stat-strip>div:nth-child(-n+2){border-top:none}
.stat-strip>div:nth-child(odd){border-left:none}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.camp-grid{grid-template-columns:1fr}
.pillars{grid-template-columns:1fr}
.pillar{border-left:none!important;border-top:1px solid var(--line)!important}
.pillar:first-child{border-top:none!important}
.foot-grid{grid-template-columns:1fr}
.topbar .wrap{justify-content:center}
.topbar .hide-s{display:none}
.collage{min-height:420px}
}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.line>span{transform:none}
.ticker{overflow-x:auto}
.ticker-track{animation:none;width:auto}
.reveal{opacity:1;transform:none}
.kenburns img{animation:none}
}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<div class="grain" aria-hidden="true"></div>
<!-- top strip -->
<div class="topbar">
<div class="wrap">
<span><span class="dot">◆</span> Est. 2016 · 42 chapters · 9 cities</span>
<span class="hide-s">A 501(c)(3) + 501(c)(4) civic coalition</span>
<span><span class="dot">◆</span> Next action: Town Hall, Thu 7PM</span>
</div>
</div>
<!-- header -->
<header class="site" id="siteHeader">
<div class="wrap navbar">
<a class="brand" href="#top" aria-label="Commonweal Coalition home">
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" aria-hidden="true">
<circle cx="15" cy="21" r="11" stroke="#1C4A38" stroke-width="2.6"/>
<circle cx="27" cy="21" r="11" stroke="#D8491B" stroke-width="2.6"/>
<circle cx="21" cy="13" r="11" stroke="#E0A427" stroke-width="2.6"/>
</svg>
<span>
<span class="brand-name">Commonweal</span><br>
<span class="brand-tag">Collective action for the common good</span>
</span>
</a>
<nav aria-label="Primary">
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#campaigns">Campaigns</a></li>
<li><a href="#policy">Policy Impact</a></li>
<li><a href="#news">Movement News</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#volunteer">Volunteer</a></li>
<li><a href="#join">Join</a></li>
</ul>
</nav>
<div class="nav-right">
<a class="btn btn--verm btn--sm" href="#join">Donate Now</a>
<button class="burger" id="burger" aria-expanded="false" aria-controls="mobileMenu">Menu ≡</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="wrap">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#campaigns">Campaigns</a></li>
<li><a href="#policy">Policy Impact</a></li>
<li><a href="#news">Movement News</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#volunteer">Volunteer</a></li>
<li><a href="#join">Join</a></li>
</ul>
</div>
</div>
</header>
<main id="main">
<!-- ================= HERO ================= -->
<section class="hero" id="top">
<div class="wrap">
<div class="hero-grid">
<div>
<span class="eyebrow scramble" data-text="Field Report No. 47 · Fall 2025">Field Report No. 47 · Fall 2025</span>
<h1 class="hero-h">
<span class="line"><span style="--d:.05s">The <span class="it">common good</span></span></span>
<span class="line"><span style="--d:.18s">is a group project.</span></span>
<span class="line"><span style="--d:.31s"><span class="mark">Come build it.</span></span></span>
</h1>
<p class="hero-sub">Commonweal is a coalition of 120+ tenant unions, cultural collectives, mutual aid networks and neighborhood assemblies. We organize for housing justice, honest policy, and radical inclusion — one ward, one ballot, one shared meal at a time.</p>
<div class="hero-ctas">
<a class="btn btn--verm" href="#join">Get Involved →</a>
<a class="btn btn--ghost" href="#locate">Find Your Representative</a>
</div>
<div class="hero-meta">
<span><b data-count="38214">0</b>Members & allies</span>
<span><b data-count="214">0</b>Policy wins since 2016</span>
<span><b data-count="42">0</b>Active chapters</span>
</div>
</div>
<div class="collage" aria-hidden="false">
<svg class="stamp" viewBox="0 0 128 128" aria-hidden="true">
<defs><path id="cir" d="M64,64 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0"/></defs>
<circle cx="64" cy="64" r="61" fill="none" stroke="currentColor" stroke-width="1.4"/>
<circle cx="64" cy="64" r="31" fill="none" stroke="currentColor" stroke-width="1.4"/>
<text font-family="IBM Plex Mono, monospace" font-size="10.5" letter-spacing="2.5" fill="currentColor">
<textPath href="#cir">COMMONWEAL COALITION ★ EST. 2016 ★ PEOPLE POWER ★ </textPath>
</text>
<text x="64" y="70" text-anchor="middle" font-size="20" fill="currentColor">✊</text>
</svg>
<figure class="postcard pc-1 kenburns">
<div class="tint"><img src="https://picsum.photos/seed/housing-march/680/500" alt="Members marching for housing justice" width="680" height="500" loading="eager"></div>
<figcaption><span>Homes Guarantee march</span><span>Ward 6 · Apr ’25</span></figcaption>
</figure>
<figure class="postcard pc-2">
<div class="tint tint--verm"><img src="https://picsum.photos/seed/town-hall-meeting/560/380" alt="Community members at a town hall meeting" width="560" height="380" loading="lazy"></div>
<figcaption><span>Transit town hall</span><span>Feb ’25</span></figcaption>
</figure>
<figure class="postcard pc-3">
<div class="tint tint--gold"><img src="https://picsum.photos/seed/community-mural/520/380" alt="Volunteers painting a neighborhood mural" width="520" height="380" loading="lazy"></div>
<figcaption><span>Mural brigade</span><span>Northside</span></figcaption>
</figure>
</div>
</div>
<div class="stat-strip reveal">
<div><b data-count="120" data-suffix="+">0</b><span>Partner organizations</span></div>
<div><b data-count="310" data-suffix="K">0</b><span>Meals served this year</span></div>
<div><b data-count="18500">0</b><span>Voters registered</span></div>
<div><b data-count="8" data-suffix=".4M" data-prefix="$">0</b><span>Participatory budget won</span></div>
</div>
</div>
</section>
<!-- ticker -->
<div class="ticker" aria-label="Live campaign updates">
<div class="ticker-track">
<div class="ticker-set">
<span><i>◆</i> Prop H signature drive: 12,408 of 15,000 collected</span>
<span><i>◆</i> Fair Transit Now heads to committee vote Nov 12</span>
<span><i>◆</i> Thursday 7PM — Transit Equity Town Hall, Northside Branch</span>
<span><i>◆</i> 200 Youth Civics Fellows named for the fall cohort</span>
<span><i>◆</i> Mutual aid log: 31,000 meals & counting</span>
</div>
<div class="ticker-set" aria-hidden="true">
<span><i>◆</i> Prop H signature drive: 12,408 of 15,000 collected</span>
<span><i>◆</i> Fair Transit Now heads to committee vote Nov 12</span>
<span><i>◆</i> Thursday 7PM — Transit Equity Town Hall, Northside Branch</span>
<span><i>◆</i> 200 Youth Civics Fellows named for the fall cohort</span>
<span><i>◆</i> Mutual aid log: 31,000 meals & counting</span>
</div>
</div>
</div>
<!-- ================= ABOUT / PILLARS ================= -->
<section class="pad" id="about">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">01 / Who we are</span>
<h2 class="h-disp">Four fights, one coalition.</h2>
</div>
<p class="lede reveal" style="--d:.1s">We believe social issues are solved where policy meets culture meets care. Since 2016, Commonweal has built durable infrastructure for collective action — pairing base-building and direct service with rigorous advocacy, so wins at city hall are backed by power in the neighborhood.</p>
<div class="pillars">
<article class="pillar reveal" style="--d:0s">
<span class="no">P—01</span>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" stroke="#D8491B" stroke-width="2"><path d="M3 14 15 4l12 10"/><path d="M6 13v13h18V13"/><path d="M12 26v-8h6v8"/></svg>
<h3>Housing Justice</h3>
<p>Eviction defense, rent stabilization, and community land trusts. We treat housing as infrastructure for belonging — and organize tenants block by block until the law agrees.</p>
</article>
<article class="pillar reveal" style="--d:.08s">
<span class="no">P—02</span>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" stroke="#D8491B" stroke-width="2"><rect x="4" y="6" width="22" height="16"/><path d="M4 11h22M9 16h7m3 0h2"/></svg>
<h3>Democratic Participation</h3>
<p>Registration drives, language access, participatory budgeting, and watchdog reporting. Democracy is a practice, not a spectator sport — and every barrier to it is removable.</p>
</article>
<article class="pillar reveal" style="--d:.16s">
<span class="no">P—03</span>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" stroke="#D8491B" stroke-width="2"><circle cx="15" cy="9" r="4"/><path d="M4 26c1.5-6 6-8 11-8s9.5 2 11 8"/></svg>
<h3>Cultural Equity</h3>
<p>Public art, archives, and neighborhood storytelling fund the imagination of a city. We fight for cultural budgets and for the artists and elders who keep memory alive.</p>
</article>
<article class="pillar reveal" style="--d:.24s">
<span class="no">P—04</span>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" stroke="#D8491B" stroke-width="2"><path d="M15 25s-9-5.6-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.4-9 12-9 12z"/></svg>
<h3>Mutual Aid & Care</h3>
<p>Food distribution, bail funds, and neighbor-to-neighbor support. Direct service meets urgent need today while coalition building changes the conditions that create it tomorrow.</p>
</article>
</div>
<div class="about-grid">
<div class="reveal">
<p style="margin-bottom:1.1rem">Every chapter of Commonweal is member-governed, dues-funded, and politically independent. Our decision-making runs on consent, not charisma: campaign priorities are nominated from the ground up, debated in open assemblies, and ratified by member vote. That slow, deliberate way of working is the point — it is how inclusion becomes structure rather than slogan.</p>
<p>When a tenant union in Ward 6 needs backup at a zoning hearing, a cultural collective three wards over shows up. When a mutual aid kitchen runs short, the transit coalition delivers. This is coalition building as daily discipline, and it is why our wins survive election cycles.</p>
</div>
<blockquote class="pull reveal" style="--d:.15s">
“We stopped asking for a seat at the table and started building longer tables. Forty-two of them, in nine cities.”
<cite>— Amara Diallo, Founding Director</cite>
</blockquote>
</div>
</div>
</section>
<!-- ================= CAMPAIGNS ================= -->
<section class="pad band-paper2" id="campaigns">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">02 / Campaign Updates</span>
<h2 class="h-disp">What we’re pushing right now.</h2>
</div>
<p class="lede reveal" style="--d:.1s">Three active campaigns, each led by the people closest to the problem. Progress below is updated weekly by our field teams — signatures, co-sponsors, and shifts in public opinion all count.</p>
<div class="camp-grid">
<article class="camp reveal" style="--d:0s">
<div class="camp-img tint kenburns"><img src="https://picsum.photos/seed/homes-guarantee/720/480" alt="Supporters collecting signatures for the Homes Guarantee petition" loading="lazy"></div>
<div class="camp-body">
<div class="camp-top"><span class="chip chip--verm">Signature drive</span><span class="camp-meta">Est. Feb ’25</span></div>
<h3>Prop H: Homes Guarantee</h3>
<p>A ballot measure to fund 4,000 permanently affordable homes through a vacant-property surcharge. Led by the Eastside Tenants Union with 34 coalition partners, 61 neighborhood canvass teams, and a door-knock goal of 90,000 conversations before January.</p>
<div>
<div class="bar"><div class="bar-fill" style="--w:83%" data-bar="83"></div></div>
<div class="bar-num"><span><b>12,408</b> / 15,000 signatures</span><span>83%</span></div>
</div>
<a class="btn btn--ink btn--sm" href="#join">Add Your Name</a>
</div>
</article>
<article class="camp reveal" style="--d:.1s">
<div class="camp-img tint tint--gold kenburns"><img src="https://picsum.photos/seed/fair-transit/720/480" alt="Riders waiting at a city bus stop" loading="lazy"></div>
<div class="camp-body">
<div class="camp-top"><span class="chip chip--gold">In committee</span><span class="camp-meta">Vote Nov 12</span></div>
<h3>Fair Transit Now</h3>
<p>Restoring night-service on six bus lines that carry 78% shift workers, capping fares for low-income riders, and creating a rider-led oversight board. We’ve secured 9 of 15 council co-sponsors — three more votes and this ordinance passes.</p>
<div>
<div class="bar"><div class="bar-fill bar-fill--gold" style="--w:60%" data-bar="60"></div></div>
<div class="bar-num"><span><b>9</b> / 15 council co-sponsors</span><span>60%</span></div>
</div>
<a class="btn btn--ink btn--sm" href="#locate">Call Your Councilor</a>
</div>
</article>
<article class="camp reveal" style="--d:.2s">
<div class="camp-img tint tint--verm kenburns"><img src="https://picsum.photos/seed/open-polls/720/480" alt="Volunteers greeting voters outside a polling place" loading="lazy"></div>
<div class="camp-body">
<div class="camp-top"><span class="chip chip--green">Active</span><span class="camp-meta">Season 4</span></div>
<h3>Open Polls Project</h3>
<p>Our year-round election infrastructure: 18,500 new voter registrations, ballot guides in 11 languages, poll-worker recruitment, and a hotline that resolved 940 voting questions last cycle. Early voting access is the current frontier.</p>
<div>
<div class="bar"><div class="bar-fill bar-fill--green" style="--w:74%" data-bar="74"></div></div>
<div class="bar-num"><span><b>18,500</b> / 25,000 registrations</span><span>74%</span></div>
</div>
<a class="btn btn--ink btn--sm" href="#volunteer">Register Voters</a>
</div>
</article>
</div>
</div>
</section>
<!-- ================= POLICY IMPACT ================= -->
<section class="pad band-ink" id="policy">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">03 / Policy Impact</span>
<h2 class="h-disp" style="color:#F5F0E0">Policy, moved by people.</h2>
</div>
<div class="policy-grid">
<div class="policy-sticky reveal">
<div class="big" data-count="214">0</div>
<p style="font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.4rem">Ordinances, amendments & charters won since 2016</p>
<p>Legislation doesn’t pass because it’s right. It passes because organized people make it inevitable. Every entry on this timeline began with a living-room meeting, a stack of clipboards, and a coalition that refused to be outlasted.</p>
<p>Below is a sample of what durable, inclusive advocacy compounds into — measured not in press releases but in evictions prevented, ballots cast, and wages paid.</p>
<a class="btn btn--sm" style="border-color:#F5F0E0;color:#F5F0E0;margin-top:1.6rem" href="#join">Download 2025 Impact Report</a>
</div>
<div class="timeline">
<div class="t-item reveal">
<span class="t-year">2019</span>
<h4>Right to Counsel passes, 12–3</h4>
<p>After 14 months of testimony from 300 tenants, the city guaranteed legal representation in eviction court. Judges now see lawyers on both sides — and families stay housed.</p>
<span class="t-stat">Evictions down 31% in two years</span>
</div>
<div class="t-item reveal" style="--d:.05s">
<span class="t-year">2021</span>
<h4>Participatory budgeting made permanent</h4>
<p>Residents now directly allocate a share of the capital budget every spring. Our coalition wrote the equity rules: ballots in 11 languages, youth voting from age 14.</p>
<span class="t-stat">$8.4M allocated by residents to date</span>
</div>
<div class="t-item reveal" style="--d:.05s">
<span class="t-year">2022</span>
<h4>Community Land Trust charter approved</h4>
<p>Working with three cultural organizations and two credit unions, we secured public land for a permanently affordable trust — removing homes from speculation for good.</p>
<span class="t-stat">412 homes taken off the speculative market</span>
</div>
<div class="t-item reveal" style="--d:.05s">
<span class="t-year">2023</span>
<h4>Fair Workweek for retail workers</h4>
<p>A two-year campaign alongside retail employees ended on-call scheduling chaos: two weeks’ notice, predictable-hours pay, and a first-in-the-region enforcement office.</p>
<span class="t-stat">40,000 workers covered</span>
</div>
<div class="t-item reveal" style="--d:.05s">
<span class="t-year">2024</span>
<h4>Language Access Ordinance</h4>
<p>City services, ballots, and emergency alerts now reach residents in the eleven most-spoken local languages — drafted with translators, elders, and deaf advocates at the table.</p>
<span class="t-stat">Service requests up 22% in underserved wards</span>
</div>
<div class="t-item reveal" style="--d:.05s">
<span class="t-year">2025</span>
<h4>Childcare subsidy expansion</h4>
<p>Our care-economy coalition — parents, providers, and pediatric nurses — won a sliding-scale subsidy that treats childcare as public infrastructure, not a private luxury.</p>
<span class="t-stat">Waitlist reduced 57% in its first year</span>
</div>
</div>
</div>
</div>
</section>
<!-- ================= REPRESENTATIVE LOCATOR ================= -->
<section class="pad" id="locate">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">04 / Civic Tool</span>
<h2 class="h-disp">Who holds the pen on your block?</h2>
</div>
<div class="locator-grid">
<div class="reveal">
<p class="lede">Advocacy works best when it’s pointed. Enter your ZIP code and we’ll match you to your council member, your state representative, and the issues your neighbors say matter most — plus a call script written by our policy team this week.</p>
<form class="loc-form" id="locForm" novalidate>
<label class="skip" for="zipInput">ZIP code</label>
<input type="text" id="zipInput" inputmode="numeric" maxlength="5" placeholder="ZIP CODE — try 60647" autocomplete="postal-code">
<button type="submit" class="btn btn--verm">Locate →</button>
</form>
<div class="loc-err" id="locErr" role="alert" aria-live="polite"></div>
<div class="loc-count" id="locCount">1,284 neighbors looked up their reps this week</div>
<div class="loc-note">
<strong style="font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase">Data stewardship</strong><br>
District maps and office contacts are verified monthly by a team of 60 volunteers. Last full audit: October 2025. Spot an error? Report it and a human will reply within 48 hours.
</div>
</div>
<div class="rep-results reveal" id="repResults" style="--d:.15s" aria-live="polite">
<div class="rep-empty">Your district profile will appear here.<br>◆ ◆ ◆</div>
</div>
</div>
</div>
</section>
<!-- ================= MOVEMENT NEWS ================= -->
<section class="pad band-paper2" id="news">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">05 / Movement News</span>
<h2 class="h-disp">Dispatches from the field.</h2>
</div>
<div class="news-grid">
<article class="feature reveal">
<div class="tint kenburns"><img src="https://picsum.photos/seed/rent-board-victory/960/540" alt="Celebrating members after the rent stabilization board vote" loading="lazy"></div>
<div class="feature-body">
<div class="news-meta"><span class="chip chip--verm">Organizing</span><span>Oct 28, 2025</span><span>6 min read</span></div>
<h3>Tenants win the city’s first rent-stabilization board in a generation</h3>
<p>After a 90-minute public comment session that ran past midnight — 114 speakers, most of them first-timers recruited through our door-knock teams — the council voted 11–4 to establish an elected rent board with real enforcement teeth. Organizers credit the win to a simple discipline: every meeting was child-friendly, translated live, and followed by food.</p>
<a class="btn btn--sm" style="margin-top:1.3rem" href="#join">Read the Full Dispatch</a>
</div>
</article>
<div class="reveal" style="--d:.12s">
<div class="news-list">
<a class="news-item" href="#news">
<span class="news-date">Oct 21<br>2025</span>
<span>
<span class="chip chip--gold" style="margin-bottom:.4rem">Strategy</span>
<h4>Inside our coalition map: how 120 groups share one theory of change</h4>
<p>The annual alignment retreat, explained — from conflict protocols to shared win metrics.</p>
</span>
</a>
<a class="news-item" href="#news">
<span class="news-date">Oct 14<br>2025</span>
<span>
<span class="chip chip--green" style="margin-bottom:.4rem">Culture</span>
<h4>Youth Civics Fellows name their fall cohort of 200</h4>
<p>The largest class yet, with stipends, mentorship, and guaranteed seats on two city commissions.</p>
</span>
</a>
<a class="news-item" href="#news">
<span class="news-date">Oct 7<br>2025</span>
<span>
<span class="chip chip--verm" style="margin-bottom:.4rem">Field Notes</span>
<h4>Mutual aid log: what 31,000 meals taught us about dignity</h4>
<p>Our kitchen coordinators on why care work is organizing work, not a substitute for it.</p>
</span>
</a>
<a class="news-item" href="#news">
<span class="news-date">Sep 30<br>2025</span>
<span>
<span class="chip chip--gold" style="margin-bottom:.4rem">Policy</span>
<h4>Explainer: how to read a city budget like an organizer</h4>
<p>Line items are moral documents. A guided walkthrough of this year’s $2.1B proposal.</p>
</span>
</a>
</div>
<a class="btn btn--ghost btn--sm news-more" href="#news">All Dispatches →</a>
</div>
</div>
</div>
</section>
<!-- ================= VOICES ================= -->
<section class="pad">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">06 / Voices</span>
<h2 class="h-disp">In their own words.</h2>
</div>
<div class="voices">
<figure class="voice reveal" style="--r:-1.4deg">
<blockquote>I came to one eviction-defense training because a neighbor asked me to. Two years later I’ve testified at city hall twice and helped 40 families stay housed. Commonweal didn’t give me a cause — it gave me a crew.</blockquote>
<figcaption class="voice-foot">
<img src="https://i.pravatar.cc/96?u=marisol-ward6" alt="Portrait of Marisol O.">
<span><b>Marisol O.</b><span>Tenant organizer · Ward 6</span></span>
</figcaption>
</figure>
<figure class="voice reveal" style="--r:1.2deg;--d:.12s">
<blockquote>Coalition building is mostly unglamorous: sharing credit, translating agendas, splitting the pizza budget fairly. But when our transit campaign needed backup, nine organizations moved as one. That leverage is built, not borrowed.</blockquote>
<figcaption class="voice-foot">
<img src="https://i.pravatar.cc/96?u=dev-chapter" alt="Portrait of Dev P.">
<span><b>Dev P.</b><span>Chapter lead · Riverside</span></span>
</figcaption>
</figure>
<figure class="voice reveal" style="--r:-0.8deg;--d:.24s">
<blockquote>I marched in 1974 and I canvass today with the same pins on my jacket. What’s changed is the infrastructure — a young person can join on a Tuesday and be trained by Thursday. Inclusion here isn’t a flyer; it’s a ramp, a translator, and a ride.</blockquote>
<figcaption class="voice-foot">
<img src="https://i.pravatar.cc/96?u=ruth-elder" alt="Portrait of Ruth A.">
<span><b>Ruth A.</b><span>Elder volunteer · Northside</span></span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ================= RESOURCES + VOLUNTEER ================= -->
<section class="pad band-green" id="resources">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-no">07 / Field Notes & People</span>
<h2 class="h-disp" style="color:#F5F0E0">Tools for the work, credit for the workers.</h2>
</div>
<p class="lede reveal" style="--d:.08s">Everything we learn gets written down and given away. Our resource library is free, field-tested, and available in 11 languages — because shared knowledge is how movements scale without burning people out.</p>
<div class="rv-grid">
<div class="reveal">
<div class="guides">
<a class="guide" href="#resources">
<h4>Canvassing 101: Doors, Dignity & Data</h4>
<span class="fmt">PDF · 24 pg</span>
<p>Our complete door-knock curriculum — scripts, safety protocols, de-escalation, and how to log conversations so every knock builds lasting power.</p>
</a>
<a class="guide" href="#resources">
<h4>Tenant Rights Wallet Card — 2025 Edition</h4>
<span class="fmt">Print-ready</span>
<p>Two-sided, pocket-sized, attorney-reviewed. What to say when the landlord calls, when the notice arrives, and when to call the hotline.</p>
</a>
<a class="guide" href="#resources">
<h4>Meeting-in-a-Box: Facilitation for Real People</h4>
<span class="fmt">Toolkit</span>
<p>Agendas, timers, childcare checklists, and consent-based decision templates so your first assembly runs like your fortieth.</p>
</a>
<a class="guide" href="#resources">
<h4>Budget Reading 101</h4>
<span class="fmt">Video · 6 eps</span>
<p>Follow our policy team through a real municipal budget, line by line, until capital funds stop feeling like a foreign language.</p>
</a>
<a class="guide" href="#resources">
<h4>Know Your Ward: Redistricting Explainer</h4>
<span class="fmt">Guide + Map</span>
<p>Why your district lines changed, who drew them, and the three public comment windows where your testimony actually moves the map.</p>
</a>
</div>
</div>
<aside class="spotlight reveal" style="--d:.15s" id="volunteer">
<div class="tint tint--verm"><img src="https://picsum.photos/seed/organizer-portrait/640/520" alt="Organizer Anaya Torres coordinating volunteers" loading="lazy"></div>
<div class="spotlight-body">
<span class="chip chip--verm">Organizer Spotlight</span>
<h3 style="margin-top:.8rem">Anaya Torres</h3>
<span class="role">Volunteer Coordinator · Northside Chapter</span>
<p>Anaya turned a folding table outside the laundromat into the chapter’s busiest signup station: 1,900 new members in eighteen months. Her rule is simple — every newcomer gets a task, a buddy, and a meal within their first week. “People don’t stay for the mission,” she says. “They stay because someone learned their name.”</p>
<div class="vol-roles">
<span class="chip">Canvasser</span>
<span class="chip">Phone bank host</span>
<span class="chip">Poll worker</span>
<span class="chip">Translator</span>
<span class="chip">Kitchen crew</span>
<span class="chip">Data steward</span>
</div>
<div style="display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem">
<a class="btn btn--verm btn--sm" href="#join">Sign Up to Volunteer</a>
<a class="btn btn--ghost btn--sm" href="#volunteer">Nominate an Organizer</a>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- ================= FAQ ================= -->
<section class="pad">
<div class="wrap">
<div class="sec-head reveal" style="justify-content:center;text-align:center">
<span class="sec-no" style="width:100%">08 / Questions</span>
<h2 class="h-disp">Before you knock on our door.</h2>
</div>
<div class="faq reveal" style="--d:.1s">
<div class="faq-item">
<button class="faq-q" aria-expanded="false"><span>What does membership cost?</span><span class="pm">+</span></button>
<div class="faq-a"><div>Membership runs on a sliding scale from $0 to $5 per month, chosen by you, never verified. Nobody has ever been turned away for lack of funds — and members at every tier hold identical voting rights. Dues currently cover roughly 40% of our operating budget; the rest comes from small-dollar donors and foundation partners who sign our independence pledge.</div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false"><span>Is my donation tax-deductible?</span><span class="pm">+</span></button>
<div class="faq-a"><div>It depends on which fund you give to. Gifts to the Commonweal Foundation, our 501(c)(3), are tax-deductible to the full extent of the law and support education, research, and mutual aid. Gifts to the Commonweal Action Fund, our 501(c)(4), are not deductible but directly fund advocacy and ballot campaigns. Every receipt clearly labels the fund — and where your money went.</div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false"><span>How much time does volunteering actually take?</span><span class="pm">+</span></button>
<div class="faq-a"><div>As little as two hours a month. Most volunteers join a recurring shift — a Saturday canvass, a weekday phone bank, a monthly kitchen service — but we also have fully remote roles in translation, data entry, and design. Burnout is an organizing problem, so we cap shifts, rotate leads, and treat rest as part of the plan.</div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false"><span>Can my organization join as a partner?</span><span class="pm">+</span></button>
<div class="faq-a"><div>Yes. Tenant unions, cultural organizations, faith communities, labor locals, and mutual aid groups can apply for partnership. The process takes about six weeks: a conversation with your chapter council, a shared-values review, and ratification by member vote. Partner organizations gain access to our tools, training, legal clinic, and co-campaign funding.</div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false"><span>How do you decide which campaigns to take on?</span><span class="pm">+</span></button>
<div class="faq-a"><div>Campaigns are nominated by members and scored openly on four criteria: breadth of impact, likelihood of winning, strength of coalition, and whether the people most affected are leading. Shortlisted campaigns go to a full member vote each February and September. We say no often — on purpose — so that every commitment we make gets staffed, funded, and finished.</div></div>
</div>
</div>
</div>
</section>
<!-- ================= JOIN ================= -->
<section class="pad join" id="join">
<div class="wrap">
<div class="join-grid">
<div class="reveal">
<span class="eyebrow scramble" data-text="The 2025 People’s Agenda" style="color:#FFD9B8">The 2025 People’s Agenda</span>
<h2 style="margin-top:1rem">Add your name to the <em>2025 People’s Agenda.</em></h2>
<p>One signature places you inside a coalition of thirty-eight thousand: you’ll receive this month’s action calendar, an invite to your nearest chapter assembly, and a call script for the vote that matters most this season. No spam, no list-selling, ever.</p>
<div class="sig-counter"><b id="sigCount" data-count="38412">0</b>Supporters signed this year</div>
</div>
<div class="join-card reveal" style="--d:.15s">
<form id="joinForm" novalidate>
<h3>Register my support</h3>
<div class="field">
<label for="jName">Full name</label>
<input type="text" id="jName" autocomplete="name" placeholder="Jordan Rivera">
</div>
<div class="field">
<label for="jEmail">Email</label>
<input type="email" id="jEmail" autocomplete="email" placeholder="you@neighborhood.org">
</div>
<div class="field">
<label for="jZip">ZIP code</label>
<input type="text" id="jZip" inputmode="numeric" maxlength="5" placeholder="60647">
</div>
<label class="check"><input type="checkbox" id="jPropH" checked><span>Also count me as a supporter of <strong>Prop H: Homes Guarantee</strong>.</span></label>
<button type="submit" class="btn btn--verm" style="width:100%;justify-content:center">Register →</button>
<p style="font-size:.68rem;color:var(--ink-soft);margin-top:.9rem;font-family:var(--ff-mono)">By joining you agree to our community agreement & code of conduct.</p>
</form>
<div class="join-success" id="joinSuccess">
<div class="mark-ok">✓</div>
<h3>You’re in. Welcome to the coalition.</h3>
<p>Check your inbox for your chapter’s next assembly and this month’s action calendar. Someone from your ward will reach out within the week — that’s how we do welcome.</p>
<a class="btn btn--ink btn--sm" style="margin-top:1.2rem" href="#locate">Find Your Representative →</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ================= FOOTER ================= -->
<footer>
<div class="wrap">
<div class="foot-grid">
<div class="foot-brand">
<a class="brand" href="#top" style="text-decoration:none">
<svg width="36" height="36" viewBox="0 0 42 42" fill="none" aria-hidden="true">
<circle cx="15" cy="21" r="11" stroke="#2C6B51" stroke-width="2.6"/>
<circle cx="27" cy="21" r="11" stroke="#D8491B" stroke-width="2.6"/>
<circle cx="21" cy="13" r="11" stroke="#E0A427" stroke-width="2.6"/>
</svg>
<span><span class="brand-name">Commonweal</span><br><span class="brand-tag" style="color:#8C978C">Collective action for the common good</span></span>
</a>
<p>A civic coalition of tenant unions, cultural collectives, mutual aid networks and neighborhood assemblies organizing across nine cities since 2016.</p>
<div class="socials">
<a href="#" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F4EFE3" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="#F4EFE3"/></svg></a>
<a href="#" aria-label="Bluesky"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F4EFE3" stroke-width="2"><path d="M12 10c-1.5-3-4.5-6-7-6-2 0-2 4 0 7 2.5 3.5 7 3 7 3s4.5.5 7-3c2-3 2-7 0-7-2.5 0-5.5 3-7 6z"/></svg></a>
<a href="#" aria-label="YouTube"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F4EFE3" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="4"/><path d="M10 9.5v5l5-2.5z" fill="#F4EFE3"/></svg></a>
<a href="#" aria-label="Newsletter"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F4EFE3" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6L22 7"/></svg></a>
</div>
</div>
<div>
<h5>Programs</h5>
<ul>
<li><a href="#campaigns">Homes Guarantee</a></li>
<li><a href="#campaigns">Fair Transit Now</a></li>
<li><a href="#campaigns">Open Polls Project</a></li>
<li><a href="#policy">Policy Lab</a></li>
<li><a href="#resources">Mutual Aid Network</a></li>
</ul>
</div>
<div>
<h5>Get Involved</h5>
<ul>
<li><a href="#join">Become a Member</a></li>
<li><a href="#volunteer">Volunteer</a></li>
<li><a href="#locate">Find Your Rep</a></li>
<li><a href="#resources">Resource Library</a></li>
<li><a href="#join">Donate Now</a></li>
</ul>
</div>
<div class="foot-contact">
<h5>Commonweal HQ</h5>
<p>1127 Assembly Street, Suite 400<br>Harborview, ST 60647<br>(555) 014-2025<br>hello@commonweal.org<br>Hotline: (555) 014-HELP</p>
</div>
</div>
<div class="foot-bottom">
<span>© 2025 The Commonweal Coalition · EIN 84-2057719 · Paid for by people, not PACs</span>
<span><a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Accessibility</a> · <a href="#">Financials</a></span>
</div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
(function(){
"use strict";
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* header shadow */
const header = document.getElementById('siteHeader');
addEventListener('scroll', ()=> header.classList.toggle('scrolled', scrollY > 8), {passive:true});
/* mobile menu */
const burger = document.getElementById('burger'), mMenu = document.getElementById('mobileMenu');
burger.addEventListener('click', ()=>{
const open = mMenu.classList.toggle('open');
burger.setAttribute('aria-expanded', open);
burger.textContent = open ? 'Close ✕' : 'Menu ≡';
});
mMenu.querySelectorAll('a').forEach(a=>a.addEventListener('click', ()=>{
mMenu.classList.remove('open'); burger.setAttribute('aria-expanded','false'); burger.textContent='Menu ≡';
}));
/* reveal on scroll */
const io = new IntersectionObserver(entries=>{
entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
},{threshold:.12});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* count-up */
function fmt(n){ return Math.round(n).toLocaleString('en-US'); }
function countUp(el){
const target = parseFloat(el.dataset.count);
const pre = el.dataset.prefix||'', suf = el.dataset.suffix||'';
if(reduced){ el.textContent = pre + fmt(target) + suf; return; }
const dur = 1400, t0 = performance.now();
(function tick(t){
const p = Math.min((t-t0)/dur,1), e = 1-Math.pow(1-p,3);
el.textContent = pre + fmt(target*e) + suf;
if(p<1) requestAnimationFrame(tick);
})(t0);
}
const cio = new IntersectionObserver(es=>{
es.forEach(e=>{ if(e.isIntersecting){ countUp(e.target); cio.unobserve(e.target);} });
},{threshold:.4});
document.querySelectorAll('[data-count]').forEach(el=>cio.observe(el));
/* scramble decode */
function scramble(el){
const final = el.dataset.text || el.textContent;
if(reduced){ el.textContent = final; return; }
const glyphs='▓▒░#%&$*+=<>—';
let frame=0; const total=final.length*2.4;
(function step(){
frame++;
const done = Math.floor((frame/total)*final.length);
let out='';
for(let i=0;i<final.length;i++){
out += i<done ? final[i] : (final[i]===' '?' ':glyphs[Math.floor(Math.random()*glyphs.length)]);
}
el.textContent=out;
if(done<final.length) requestAnimationFrame(step); else el.textContent=final;
})();
}
const sio = new IntersectionObserver(es=>{
es.forEach(e=>{ if(e.isIntersecting){ scramble(e.target); sio.unobserve(e.target);} });
},{threshold:.6});
document.querySelectorAll('.scramble').forEach(el=>sio.observe(el));
/* progress bars */
const bio = new IntersectionObserver(es=>{
es.forEach(e=>{ if(e.isIntersecting){ e.target.style.width = e.target.dataset.bar+'%'; bio.unobserve(e.target);} });
},{threshold:.5});
document.querySelectorAll('[data-bar]').forEach(el=>{ el.style.width='0%'; bio.observe(el); });
/* toast */
const toast = document.getElementById('toast'); let toastT;
function showToast(msg){
toast.textContent = msg; toast.classList.add('show');
clearTimeout(toastT); toastT=setTimeout(()=>toast.classList.remove('show'), 3200);
}
/* ===== rep locator ===== */
const reps = [
['Alicia Reyes','Housing & Land Use'],['Marcus Thorne','Budget & Finance'],['Dana Okafor','Transit & Mobility'],
['Priya Raman','Parks & Public Space'],['Sam Kowalski','Education & Youth'],['Grace Liu','Health & Human Services'],
['Terrence Boyd','Public Safety Reform'],['Marisol Vega','Housing & Land Use'],['Hank Whitfield','Budget & Finance'],
['Imani Brooks','Cultural Affairs'],['Peter Novak','Transit & Mobility'],['Rosa Delgado','Small Business & Labor'],
['Ken Yamada','Education & Youth'],['Faye Abdallah','Health & Human Services']
];
const stateReps = ['Rep. Jo Lindqvist','Rep. Omar Haddad','Rep. Celeste Moreau','Rep. David Osei','Rep. Trudy Vance','Rep. Leo Ferreira','Rep. Ana Sofia Cruz'];
const issues = ['Rent stabilization','Bus frequency','Language access','Park funding','Childcare deserts','Sidewalk repair','Poll transparency','Library hours'];
const avatars = ['i.pravatar.cc/96?u=rep-a','i.pravatar.cc/96?u=rep-b','i.pravatar.cc/96?u=rep-c','i.pravatar.cc/96?u=rep-d'];
const digitSum = s=>[...s].reduce((a,c)=>a+(+c),0);
const locForm=document.getElementById('locForm'), zipInput=document.getElementById('zipInput'),
locErr=document.getElementById('locErr'), repResults=document.getElementById('repResults'),
locCount=document.getElementById('locCount');
let lookups=1284;
locForm.addEventListener('submit', ev=>{
ev.preventDefault();
const z=zipInput.value.trim();
if(!/^\d{5}$/.test(z)){
locErr.textContent='Please enter a 5-digit ZIP code (e.g., 60647).';
zipInput.classList.remove('shake'); void zipInput.offsetWidth; zipInput.classList.add('shake');
return;
}
locErr.textContent='';
const sum=digitSum(z), ward=(sum%14)+1, rep=reps[ward-1];
const sr=stateReps[sum%stateReps.length];
const election = (parseInt(z,10)%2===0)?'Tuesday, March 3, 2026':'Tuesday, November 3, 2026';
const poll = ['Northside Branch Library','Riverside Community Center','Union Hall B','Grand Ave Firehouse — Community Room'][sum%4];
const picked=[issues[sum%8],issues[(sum+3)%8],issues[(sum+5)%8]];
const d1=Math.abs(parseInt(z[0],10)+2)+2, d2=Math.abs(parseInt(z[4],10)+4)+3;
repResults.innerHTML = `
<div class="rep-card" style="--d:0s">
<img src="${avatars[ward%4]}" alt="Portrait of ${rep[0]}">
<div>
<span class="chip chip--verm">City Council · Ward ${ward}</span>
<h4>${rep[0]}</h4>
<p class="role">Committee on ${rep[1]} · Term ends 2027 · Sided with tenants on 7 of 9 votes this session</p>
<p class="contact">OFFICE (555) 014-0${ward}${d1} · ward${ward}@cityhall.gov · Office hours Thu 4–6PM</p>
</div>
<div class="rep-actions">
<button class="btn btn--verm btn--sm" data-toast="Call script sent — phone it in before Friday’s session!">Get Call Script</button>
<button class="btn btn--ghost btn--sm" data-toast="Voter guide on its way to ${rep[0]}'s office. Nice pressure.">Send Voter Guide</button>
</div>
</div>
<div class="rep-card" style="--d:.12s">
<img src="${avatars[(ward+1)%4]}" alt="Portrait of ${sr}">
<div>
<span class="chip chip--green">State House · District ${d1}${d2}</span>
<h4>${sr}</h4>
<p class="role">Housing Committee · Co-sponsor of the statewide rent-stabilization framework</p>
<p class="contact">CAPITOL (555) 014-7${d2}${d1} · Rep${sr.split(' ')[1].toLowerCase()}@leg.gov</p>
</div>
<div class="rep-actions">
<button class="btn btn--verm btn--sm" data-toast="Email template copied — personalize and send.">Email Template</button>
</div>
</div>
<div class="ballot-card" style="--d:.24s">
<h4>Your ward’s priority issues this season</h4>
<div class="issue-chips" style="margin:.7rem 0 1rem">
${picked.map(i=>`<span class="chip" style="color:#F1ECDC;border-color:rgba(241,236,220,.5)">${i}</span>`).join('')}
</div>
<p>Next election: <strong style="color:#fff">${election}</strong><br>Polling place: ${poll} · Early voting opens 14 days prior.</p>
</div>`;
repResults.querySelectorAll('[data-toast]').forEach(b=>b.addEventListener('click',()=>showToast(b.dataset.toast)));
lookups++; locCount.textContent = lookups.toLocaleString()+' neighbors looked up their reps this week';
showToast('District matched — Ward '+ward+', ZIP '+z+'.');
});
/* ===== FAQ accordion ===== */
document.querySelectorAll('.faq-item').forEach(item=>{
const q=item.querySelector('.faq-q'), a=item.querySelector('.faq-a');
q.addEventListener('click', ()=>{
const open=item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(o=>{
o.classList.remove('open'); o.querySelector('.faq-a').style.maxHeight=null;
o.querySelector('.faq-q').setAttribute('aria-expanded','false');
});
if(!open){
item.classList.add('open');
a.style.maxHeight=a.scrollHeight+'px';
q.setAttribute('aria-expanded','true');
}
});
});
/* ===== join form ===== */
const joinForm=document.getElementById('joinForm'), joinSuccess=document.getElementById('joinSuccess'),
sigEl=document.getElementById('sigCount');
let sigs=38412;
joinForm.addEventListener('submit', ev=>{
ev.preventDefault();
const name=document.getElementById('jName').value.trim(),
email=document.getElementById('jEmail').value.trim(),
zip=document.getElementById('jZip').value.trim();
if(!name || !email.includes('@') || !/^\d{5}$/.test(zip)){
showToast('Please fill in your name, a valid email, and a 5-digit ZIP.');
return;
}
sigs++; sigEl.textContent=sigs.toLocaleString();
joinForm.style.display='none'; joinSuccess.classList.add('show');
showToast('Signature #'+sigs.toLocaleString()+' registered. Welcome, '+name.split(' ')[0]+'!');
});
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:01:31.787Z",
"url": "https://benchmark.aimac.invalid/821904ab6a71a82ab5af26462a8defabff1eb7340d9865a2044dc14505c59684.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Commonweal Coalition home\">",
"target": [
"a[aria-label=\"Commonweal Coalition home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Commonweal Coalition home\">",
"target": [
"a[aria-label=\"Commonweal Coalition 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=\"loc-err\" id=\"locErr\" role=\"alert\" aria-live=\"polite\"></div>",
"target": [
"#locErr"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"grain\" aria-hidden=\"true\"></div>",
"target": [
".grain"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Commonweal Coalition home\">",
"target": [
"a[aria-label=\"Commonweal Coalition 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=\"loc-err\" id=\"locErr\" role=\"alert\" aria-live=\"polite\"></div>",
"target": [
"#locErr"
]
}
]
},
{
"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=\"loc-err\" id=\"locErr\" role=\"alert\" aria-live=\"polite\"></div>",
"target": [
"#locErr"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Commonweal Coalition home\">",
"target": [
"a[aria-label=\"Commonweal Coalition home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Commonweal Coalition home\">",
"target": [
"a[aria-label=\"Commonweal Coalition home\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"text\" id=\"zipInput\" inputmode=\"numeric\" maxlength=\"5\" placeholder=\"ZIP CODE \u2014 try 60647\" autocomplete=\"postal-code\">",
"target": [
"#zipInput"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span style=\"--d:.05s\">The <span class=\"it\">common good</span></span>",
"target": [
".line:nth-child(1) > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\" class=\"btn btn--verm\">Locate \u2192</button>",
"target": [
"#locForm > .btn--verm[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 class=\"hero-h\">",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"h-disp\">Four fights, one coalition.</h2>",
"target": [
"#about > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h3>Housing Justice</h3>",
"target": [
".pillar:nth-child(1) > h3"
]
},
{
"html": "<h3>Democratic Participation</h3>",
"target": [
".pillar:nth-child(2) > h3"
]
},
{
"html": "<h3>Cultural Equity</h3>",
"target": [
".pillar:nth-child(3) > h3"
]
},
{
"html": "<h3>Mutual Aid & Care</h3>",
"target": [
".pillar:nth-child(4) > h3"
]
},
{
"html": "<h2 class=\"h-disp\">What we\u2019re pushing right now.</h2>",
"target": [
"#campaigns > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h3>Prop H: Homes Guarantee</h3>",
"target": [
".camp:nth-child(1) > .camp-body > h3"
]
},
{
"html": "<h3>Fair Transit Now</h3>",
"target": [
".camp:nth-child(2) > .camp-body > h3"
]
},
{
"html": "<h3>Open Polls Project</h3>",
"target": [
".camp:nth-child(3) > .camp-body > h3"
]
},
{
"html": "<h2 class=\"h-disp\" style=\"color:#F5F0E0\">Policy, moved by people.</h2>",
"target": [
"#policy > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h4>Right to Counsel passes, 12\u20133</h4>",
"target": [
".t-item.reveal:nth-child(1) > h4"
]
},
{
"html": "<h4>Participatory budgeting made permanent</h4>",
"target": [
".t-item.reveal:nth-child(2) > h4"
]
},
{
"html": "<h4>Community Land Trust charter approved</h4>",
"target": [
".t-item.reveal:nth-child(3) > h4"
]
},
{
"html": "<h4>Fair Workweek for retail workers</h4>",
"target": [
".t-item.reveal:nth-child(4) > h4"
]
},
{
"html": "<h4>Language Access Ordinance</h4>",
"target": [
".t-item.reveal:nth-child(5) > h4"
]
},
{
"html": "<h4>Childcare subsidy expansion</h4>",
"target": [
".t-item.reveal:nth-child(6) > h4"
]
},
{
"html": "<h2 class=\"h-disp\">Who holds the pen on your block?</h2>",
"target": [
"#locate > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h2 class=\"h-disp\">Dispatches from the field.</h2>",
"target": [
"#news > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h3>Tenants win the city\u2019s first rent-stabilization board in a generation</h3>",
"target": [
".feature-body > h3"
]
},
{
"html": "<h4>Inside our coalition map: how 120 groups share one theory of change</h4>",
"target": [
".news-item[href$=\"#news\"]:nth-child(1) > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Youth Civics Fellows name their fall cohort of 200</h4>",
"target": [
".news-item[href$=\"#news\"]:nth-child(2) > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Mutual aid log: what 31,000 meals taught us about dignity</h4>",
"target": [
".news-item[href$=\"#news\"]:nth-child(3) > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Explainer: how to read a city budget like an organizer</h4>",
"target": [
".news-item[href$=\"#news\"]:nth-child(4) > span:nth-child(2) > h4"
]
},
{
"html": "<h2 class=\"h-disp\">In their own words.</h2>",
"target": [
".pad:nth-child(8) > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h2 class=\"h-disp\" style=\"color:#F5F0E0\">Tools for the work, credit for the workers.</h2>",
"target": [
"#resources > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h4>Canvassing 101: Doors, Dignity & Data</h4>",
"target": [
".guide[href$=\"#resources\"]:nth-child(1) > h4"
]
},
{
"html": "<h4>Tenant Rights Wallet Card \u2014 2025 Edition</h4>",
"target": [
".guide[href$=\"#resources\"]:nth-child(2) > h4"
]
},
{
"html": "<h4>Meeting-in-a-Box: Facilitation for Real People</h4>",
"target": [
".guide[href$=\"#resources\"]:nth-child(3) > h4"
]
},
{
"html": "<h4>Budget Reading 101</h4>",
"target": [
".guide[href$=\"#resources\"]:nth-child(4) > h4"
]
},
{
"html": "<h4>Know Your Ward: Redistricting Explainer</h4>",
"target": [
".guide[href$=\"#resources\"]:nth-child(5) > h4"
]
},
{
"html": "<h3 style=\"margin-top:.8rem\">Anaya Torres</h3>",
"target": [
".spotlight-body > h3"
]
},
{
"html": "<h2 class=\"h-disp\">Before you knock on our door.</h2>",
"target": [
".pad:nth-child(10) > .wrap > .sec-head.reveal > .h-disp"
]
},
{
"html": "<h2 style=\"margin-top:1rem\">Add your name to the <em>2025 People\u2019s Agenda.</em></h2>",
"target": [
".join-grid > .reveal:nth-child(1) > h2"
]
},
{
"html": "<h3>Register my support</h3>",
"target": [
"#joinForm > h3"
]
},
{
"html": "<h5>Programs</h5>",
"target": [
"div:nth-child(2) > h5"
]
},
{
"html": "<h5>Get Involved</h5>",
"target": [
"div:nth-child(3) > h5"
]
},
{
"html": "<h5>Commonweal HQ</h5>",
"target": [
".foot-contact > h5"
]
}
],
"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": "#d9d2bf",
"bgColor": "#14231c",
"contrastRatio": 10.81,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.81"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span><span class=\"dot\">\u25c6</span> Est. 2016 \u00b7 42 chapters \u00b7 9 cities</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": "mobileMenu",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"mobile-menu\" id=\"mobileMenu\">",
"target": [
"#mobileMenu"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"skip\" for=\"zipInput\">ZIP code</label>",
"target": [
"label[for=\"zipInput\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"zipInput\" inputmode=\"numeric\" maxlength=\"5\" placeholder=\"ZIP CODE \u2014 try 60647\" autocomplete=\"postal-code\">",
"target": [
"#zipInput"
]
}
]
},
{
"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://picsum.photos/seed/housing-march/680/500\" alt=\"Members marching for housing justice\" width=\"680\" height=\"500\" loading=\"eager\">",
"target": [
"img[width=\"680\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"skip\" for=\"zipInput\">ZIP code</label>",
"target": [
"label[for=\"zipInput\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"zipInput\" inputmode=\"numeric\" maxlength=\"5\" placeholder=\"ZIP CODE \u2014 try 60647\" autocomplete=\"postal-code\">",
"target": [
"#zipInput"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
"a[href$=\"#main\"]"
]
}
]
},
{
"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 class=\"nav-links\">",
"target": [
".nav-links"
]
}
]
},
{
"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": [
".nav-links > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://picsum.photos/seed/housing-march/680/500\" alt=\"Members marching for housing justice\" width=\"680\" height=\"500\" loading=\"eager\">",
"target": [
"img[width=\"680\"]"
]
}
]
},
{
"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": 180.5,
"height": 49.6
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (180.5px by 49.6px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
"a[href$=\"#main\"]"
]
}
]
}
],
"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=\"ticker\" aria-label=\"Live campaign updates\">",
"target": [
".ticker"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"dot\">\u25c6</span>",
"target": [
"span:nth-child(1) > .dot"
],
"failureSummary": "Fix any of the following:\n Element content contains only non-text characters"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ec",
"bgColor": "#d8491b",
"contrastRatio": 4.04,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a class=\"btn btn--verm btn--sm\" href=\"#join\">Donate Now</a>",
"target": [
".nav-right > .btn--verm.btn--sm[href$=\"#join\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"btn btn--verm btn--sm\" href=\"#join\">Donate Now</a>",
"target": [
".nav-right > .btn--verm.btn--sm[href$=\"#join\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ec",
"bgColor": "#d8491b",
"contrastRatio": 4.04,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a class=\"btn btn--verm\" href=\"#join\">Get Involved \u2192</a>",
"target": [
".hero-ctas > .btn--verm.btn[href$=\"#join\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"btn btn--verm\" href=\"#join\">Get Involved \u2192</a>",
"target": [
".hero-ctas > .btn--verm.btn[href$=\"#join\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pillars\">",
"target": [
".pillars"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"no\">P\u201401</span>",
"target": [
".pillar:nth-child(1) > .no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pillars\">",
"target": [
".pillars"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"no\">P\u201402</span>",
"target": [
".pillar:nth-child(2) > .no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pillars\">",
"target": [
".pillars"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"no\">P\u201403</span>",
"target": [
".pillar:nth-child(3) > .no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pillars\">",
"target": [
".pillars"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"no\">P\u201404</span>",
"target": [
".pillar:nth-child(4) > .no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"camp reveal in\" style=\"--d:0s\">",
"target": [
".camp:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"chip chip--verm\">Signature drive</span>",
"target": [
".camp-top > .chip--verm.chip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#3e4c44",
"bgColor": "#14231c",
"contrastRatio": 1.8,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-ink\" id=\"policy\">",
"target": [
"#policy"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #3e4c44, background color: #14231c, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"sec-no\">03 / Policy Impact</span>",
"target": [
"#policy > .wrap > .sec-head.in.reveal > .sec-no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #3e4c44, background color: #14231c, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f0e0",
"bgColor": "#fbf8f0",
"contrastRatio": 1.07,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a class=\"btn btn--sm\" style=\"border-color:#F5F0E0;color:#F5F0E0;margin-top:1.6rem\" href=\"#join\">Download 2025 Impact Report</a>",
"target": [
".policy-sticky > .btn--sm.btn[href$=\"#join\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.07 (foreground color: #f5f0e0, background color: #fbf8f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"btn btn--sm\" style=\"border-color:#F5F0E0;color:#F5F0E0;margin-top:1.6rem\" href=\"#join\">Download 2025 Impact Report</a>",
"target": [
".policy-sticky > .btn--sm.btn[href$=\"#join\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.07 (foreground color: #f5f0e0, background color: #fbf8f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ec",
"bgColor": "#d8491b",
"contrastRatio": 4.04,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"btn btn--verm\">Locate \u2192</button>",
"target": [
"#locForm > .btn--verm[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"btn btn--verm\">Locate \u2192</button>",
"target": [
"#locForm > .btn--verm[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#f4efe3",
"contrastRatio": 3.74,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.74 (foreground color: #d8491b, background color: #f4efe3, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"loc-count\" id=\"locCount\">1,284 neighbors looked up their reps this week</div>",
"target": [
"#locCount"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.74 (foreground color: #d8491b, background color: #f4efe3, font size: 7.9pt (10.56px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"feature reveal in\">",
"target": [
".feature"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"chip chip--verm\">Organizing</span>",
"target": [
".news-meta > .chip--verm.chip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#ece4d2",
"contrastRatio": 3.39,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"news-date\">Oct 21<br>2025</span>",
"target": [
".news-item[href$=\"#news\"]:nth-child(1) > .news-date"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a6410",
"bgColor": "#ece4d2",
"contrastRatio": 4.24,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.24 (foreground color: #8a6410, background color: #ece4d2, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"chip chip--gold\" style=\"margin-bottom:.4rem\">Strategy</span>",
"target": [
".news-item[href$=\"#news\"]:nth-child(1) > span:nth-child(2) > .chip--gold.chip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.24 (foreground color: #8a6410, background color: #ece4d2, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#ece4d2",
"contrastRatio": 3.39,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"news-date\">Oct 14<br>2025</span>",
"target": [
".news-item[href$=\"#news\"]:nth-child(2) > .news-date"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#ece4d2",
"contrastRatio": 3.39,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"news-date\">Oct 7<br>2025</span>",
"target": [
".news-item[href$=\"#news\"]:nth-child(3) > .news-date"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#ece4d2",
"contrastRatio": 3.39,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"chip chip--verm\" style=\"margin-bottom:.4rem\">Field Notes</span>",
"target": [
"span:nth-child(2) > .chip--verm.chip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#ece4d2",
"contrastRatio": 3.39,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"news-date\">Sep 30<br>2025</span>",
"target": [
".news-item[href$=\"#news\"]:nth-child(4) > .news-date"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #d8491b, background color: #ece4d2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a6410",
"bgColor": "#ece4d2",
"contrastRatio": 4.24,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-paper2\" id=\"news\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.24 (foreground color: #8a6410, background color: #ece4d2, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"chip chip--gold\" style=\"margin-bottom:.4rem\">Policy</span>",
"target": [
".news-item[href$=\"#news\"]:nth-child(4) > span:nth-child(2) > .chip--gold.chip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.24 (foreground color: #8a6410, background color: #ece4d2, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#3e4c44",
"bgColor": "#1c4a38",
"contrastRatio": 1.11,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-green\" id=\"resources\">",
"target": [
"#resources"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"sec-no\">07 / Field Notes & People</span>",
"target": [
"#resources > .wrap > .sec-head.in.reveal > .sec-no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#3e4c44",
"bgColor": "#1c4a38",
"contrastRatio": 1.11,
"fontSize": "12.6pt (16.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-green\" id=\"resources\">",
"target": [
"#resources"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede reveal in\" style=\"--d:.08s\">Everything we learn gets written down and given away. Our resource library is free, field-tested, and available in 11 languages \u2014 because shared knowledge is how movements scale without burning people out.</p>",
"target": [
"#resources > .wrap > .lede.in"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"spotlight reveal in\" style=\"--d:.15s\" id=\"volunteer\">",
"target": [
"#volunteer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"chip chip--verm\">Organizer Spotlight</span>",
"target": [
".spotlight-body > .chip--verm.chip"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8491b",
"bgColor": "#fbf8f0",
"contrastRatio": 4.04,
"fontSize": "7.7pt (10.24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"spotlight reveal in\" style=\"--d:.15s\" id=\"volunteer\">",
"target": [
"#volunteer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"role\">Volunteer Coordinator \u00b7 Northside Chapter</span>",
"target": [
".role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #d8491b, background color: #fbf8f0, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ec",
"bgColor": "#d8491b",
"contrastRatio": 4.04,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a class=\"btn btn--verm btn--sm\" href=\"#join\">Sign Up to Volunteer</a>",
"target": [
"div:nth-child(6) > .btn--verm.btn--sm[href$=\"#join\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"btn btn--verm btn--sm\" href=\"#join\">Sign Up to Volunteer</a>",
"target": [
"div:nth-child(6) > .btn--verm.btn--sm[href$=\"#join\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.04 (foreground color: #fff7ec, background color: #d8491b, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#3e4c44",
"bgColor": "#14231c",
"contrastRatio": 1.8,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-ink\" id=\"policy\">",
"target": [
"#policy"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #3e4c44, background color: #14231c, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"sec-no\">03 / Policy Impact</span>",
"target": [
"#policy > .wrap > .sec-head.reveal.in > .sec-no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #3e4c44, background color: #14231c, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#3e4c44",
"bgColor": "#1c4a38",
"contrastRatio": 1.11,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-green\" id=\"resources\">",
"target": [
"#resources"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"sec-no\">07 / Field Notes & People</span>",
"target": [
"#resources > .wrap > .sec-head.reveal.in > .sec-no"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#3e4c44",
"bgColor": "#1c4a38",
"contrastRatio": 1.11,
"fontSize": "12.6pt (16.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"pad band-green\" id=\"resources\">",
"target": [
"#resources"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lede reveal in\" style=\"--d:.08s\">Everything we learn gets written down and given away. Our resource library is free, field-tested, and available in 11 languages \u2014 because shared knowledge is how movements scale without burning people out.</p>",
"target": [
"#resources > .wrap > .lede"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.11 (foreground color: #3e4c44, background color: #1c4a38, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 10066
},
{
"y": 576,
"height": 10066
},
{
"y": 1152,
"height": 10066
},
{
"y": 1728,
"height": 10066
},
{
"y": 2304,
"height": 10066
},
{
"y": 2880,
"height": 10066
},
{
"y": 3456,
"height": 10066
},
{
"y": 4032,
"height": 10066
},
{
"y": 4608,
"height": 10066
},
{
"y": 5184,
"height": 10066
},
{
"y": 5760,
"height": 10066
},
{
"y": 6336,
"height": 10066
},
{
"y": 6912,
"height": 10066
},
{
"y": 7488,
"height": 10066
},
{
"y": 8064,
"height": 10066
},
{
"y": 8640,
"height": 10066
},
{
"y": 9216,
"height": 10066
},
{
"y": 9346,
"height": 10066
}
],
"scans": 19,
"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: "Resources", "Join", "Volunteer".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Society" category. Consider themes similar to: "Policy Impact", "Movement News", "Campaign Updates".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "coalition building", "collective action", "inclusion".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Register", "Donate Now", "Get Involved".
- **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: "representative locator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "resource guides", "success stories", "activist spotlights".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.