OpenAI GPT 6.1 Sol Pro – Law Government and Politics
via OpenAI · Generated
- AIMAC Debt 3.32
- Cost $0.35
- Total Violations 4
- HTML Size 47 KB
- Em Dashes 6
Screenshot
View Live Page
Accessibility Issues Found
4 Serious
-
color-contrast serious 4 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p class="eyebrow">Your voice belongs here</p>
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">
<meta name="description" content="Commonwell Civic connects people with clear legal information, practical advocacy tools, and trustworthy pathways to civic participation.">
<meta name="theme-color" content="#142f36">
<title>Commonwell Civic — Understand your rights. Shape your community.</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{--ink:#142f36;--muted:#5c6a69;--paper:#f8f7f1;--white:#fff;--line:#dcded5;--orange:#c44b25;--light:#eeeee4;--green:#d9e7db;--serif:"Libre Caslon Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input,select,textarea{touch-action:manipulation}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
::selection{background:#f0c0aa}
.wrap{max-width:1240px;margin:auto;padding:0 40px}
.skip{position:fixed;top:-70px;left:20px;background:white;padding:12px;z-index:100}
.skip:focus{top:12px}
.utility{background:var(--ink);color:#e3eae3;font-size:11px;letter-spacing:.06em}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px}
.utility span:first-child:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#d5b880;margin-right:9px}
header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:94px}
.brand{display:flex;gap:11px;align-items:center;flex-shrink:0}
.brand img{height:43px;width:43px;border-radius:50%}
.brand-name{font-size:22px;font-weight:700;letter-spacing:-.8px;line-height:1.1}
.brand-tag{font-size:9px;letter-spacing:.1em;color:var(--muted);margin-top:5px}
nav{display:flex;align-items:center;gap:23px}
nav a{font-size:12px;font-weight:600}
nav a:hover{color:var(--orange)}
.nav-contact{padding:11px 16px;border:1px solid var(--ink)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:8px 13px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin:0 0 19px}
.eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.06}
h1{font-size:clamp(60px,6.3vw,84px);margin-bottom:24px}
h2{font-size:clamp(38px,4.2vw,54px);margin-bottom:18px}
h3{font-size:20px;line-height:1.3;letter-spacing:-.4px}
.lead{font-size:16px;line-height:1.8;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid var(--ink);background:var(--ink);color:white;font-size:12px;font-weight:600;padding:15px 21px;transition:background .2s,transform .2s}
.btn:hover{background:#264851;transform:translateY(-2px)}
.btn.orange{background:var(--orange);border-color:var(--orange)}
.btn.orange:hover{background:#a43b1b}
.btn.outline{background:transparent;color:var(--ink)}
.btn.outline:hover{background:var(--light)}
.text-link{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:3px}
.text-link:hover{color:var(--orange);border-color:var(--orange)}
.hero{padding:62px 0 46px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}
.hero .eyebrow{color:var(--orange)}
.hero-copy{padding-bottom:15px}
.hero-copy .lead{max-width:440px;margin-bottom:29px}
.hero-actions{display:flex;gap:23px;align-items:center;flex-wrap:wrap}
.hero-note{font-size:11px;color:var(--muted);margin:23px 0 0}
.hero-visual{position:relative;min-height:490px;background:#ccd1c5;overflow:hidden}
.hero-visual>img{width:100%;height:490px;object-fit:cover;filter:grayscale(1);opacity:.35}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(20,47,54,.8));pointer-events:none}
.building{position:absolute;width:91%;height:70%;top:3%;left:4%;color:var(--ink);opacity:.94;z-index:1}
.image-label{position:absolute;z-index:2;left:26px;top:24px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;border:1px solid #142f3670;padding:5px 9px;background:#f8f7f180}
.visual-caption{position:absolute;bottom:27px;left:29px;right:29px;z-index:2;color:white}
.visual-caption .small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#dce5d9}
.visual-caption p{font-family:var(--serif);font-size:37px;line-height:1.1;max-width:330px;margin:10px 0 17px}
.visual-caption a{font-size:11px;display:flex;justify-content:space-between;border-top:1px solid #ffffff55;padding-top:14px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:42px}
.principle{padding:24px 28px;display:flex;gap:16px;align-items:flex-start;border-right:1px solid var(--line)}
.principle:first-child{padding-left:0}
.principle:last-child{border-right:0}
.principle .number{color:var(--orange);font-family:var(--serif);font-size:29px;line-height:1.2}
.principle strong{display:block;font-size:12px;margin-bottom:4px}
.principle p{font-size:11px;color:var(--muted);margin:0}
section.section{padding:76px 0}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px}
.section-head h2{margin-bottom:0}
.section-head>p{max-width:365px;color:var(--muted);font-size:13px;margin-bottom:5px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}
.resource-card{background:white;border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.icon{width:43px;height:43px;background:var(--light);display:grid;place-items:center;margin-bottom:30px}
.icon svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.5}
.resource-card p{font-size:13px;color:var(--muted)}
.resource-card .text-link{margin-top:auto}
.resource-card h3{max-width:240px}
.resource-note{font-size:11px;color:var(--muted);border-left:2px solid var(--orange);padding-left:13px;margin:24px 0 0}
.finder-section{background:var(--ink);color:white;padding:54px 0}
.finder-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.finder-section h2{font-size:46px}
.finder-section p{font-size:13px;color:#c0cfcd}
.finder-section .eyebrow{color:#e6bd91}
.finder-box{background:#ffffff09;border:1px solid #ffffff30;padding:25px}
label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}
input,select,textarea{border:1px solid var(--line);border-radius:0;padding:12px;background:white;color:var(--ink);width:100%}
.finder-row{display:flex;gap:9px}
.finder-row select{flex:1;min-width:0}
.finder-box .btn{white-space:nowrap}
.finder-box .help{font-size:10px;margin:12px 0 0}
.finder-result{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff30}
.finder-result a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.finder-result ul{padding-left:19px;font-size:12px}
.advocacy-grid{display:grid;grid-template-columns:.95fr 1fr;gap:70px;align-items:center}
.advocacy-photo{position:relative}
.advocacy-photo img{display:block;width:100%;height:440px;object-fit:cover;filter:saturate(.55)}
.photo-stamp{position:absolute;bottom:-21px;right:22px;background:var(--orange);color:#fff;padding:20px 26px;max-width:220px}
.photo-stamp strong{display:block;font-family:var(--serif);font-size:31px;font-weight:400}
.photo-stamp span{font-size:11px}
.advocacy-copy .lead{font-size:14px}
.check-list{list-style:none;padding:0;margin:23px 0 29px}
.check-list li{font-size:12px;padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.check-list li:before{content:"↗";color:var(--orange)}
.updates{background:var(--light)}
.updates-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:25px}
.filter{border:1px solid #cbd0c4;background:none;padding:8px 15px;font-size:11px;color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}
.update-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid #d9dcd0;padding:25px}
.update-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.06em;text-transform:uppercase;gap:10px;color:var(--muted);margin-bottom:27px}
.update-meta .tag{color:var(--orange);font-weight:700}
.update-card h3{font-family:var(--serif);font-size:29px;font-weight:400;line-height:1.15}
.update-card p{font-size:12px;color:var(--muted)}
.update-card .text-link{margin-top:auto;align-self:flex-start}
.editorial-note{font-size:10px;color:var(--muted);margin:19px 0 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.about-grid .lead{font-size:14px}
.quote-card{background:#e6eadf;padding:35px;align-self:start}
.quote-mark{font-family:var(--serif);color:var(--orange);font-size:65px;line-height:.8}
blockquote{margin:10px 0 26px;font-family:var(--serif);font-size:29px;line-height:1.3}
.quote-person{display:flex;align-items:center;gap:12px;font-size:11px}
.quote-person img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.quote-person strong{display:block;font-size:12px}
.faq{margin-top:53px;border-top:1px solid var(--line);padding-top:33px;display:grid;grid-template-columns:.65fr 1.35fr;gap:70px}
.faq h3{font-family:var(--serif);font-size:33px;font-weight:400}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-size:13px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:18px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:20px;line-height:1}
details[open] summary:after{content:"−"}
details p{font-size:12px;color:var(--muted);margin:14px 25px 0 0}
.contact{background:#e8d9c7;padding:47px 0}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.contact h2{font-size:43px;margin-bottom:10px}
.contact p{font-size:13px;max-width:570px;margin:0;color:#485954}
footer{background:var(--ink);color:#edf0e8;padding:49px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:65px}
footer .brand-tag{color:#c2cfca}
footer p{font-size:11px;color:#bdcbc7;max-width:325px;margin:20px 0 0}
footer h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:15px}
footer ul{padding:0;list-style:none;margin:0}
footer li{font-size:11px;margin-bottom:9px}
footer a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid #ffffff25;margin-top:35px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#b8c5c0;font-size:10px}
.footer-bottom div{display:flex;gap:22px}
.socials{display:flex;gap:17px;margin-top:19px;font-size:11px}
dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);width:min(600px,calc(100% - 32px));max-height:85vh;padding:35px}
dialog::backdrop{background:#0c252caa;backdrop-filter:blur(3px)}
.dialog-top{display:flex;justify-content:space-between;align-items:start;gap:20px}
dialog h2{font-size:37px}
.close-dialog{background:transparent;border:1px solid var(--line);font-size:20px;padding:0 9px}
dialog p,dialog li{font-size:13px;color:var(--muted)}
dialog a:not(.btn){text-decoration:underline}
.dialog-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.status{font-size:12px;margin-top:12px}
[hidden]{display:none!important}
@media(min-width:1450px){.wrap{max-width:1350px}.hero-grid{gap:85px}.hero-visual,.hero-visual>img{height:530px}}
@media(max-width:1050px){.wrap{padding:0 26px}nav{gap:14px}nav a{font-size:11px}.brand-name{font-size:20px}.brand-tag{font-size:8px}.hero-grid{gap:35px}h1{font-size:65px}.finder-grid,.advocacy-grid,.about-grid{gap:40px}.resource-card{padding:23px}.footer-grid{gap:35px}}
@media(max-width:800px){.menu-toggle{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:18px 26px;box-shadow:0 10px 20px #142f3615;flex-direction:column;align-items:stretch}nav.open{display:flex}nav a{padding:9px;font-size:14px}.header-inner{min-height:79px}.hero-grid,.finder-grid,.advocacy-grid,.about-grid{grid-template-columns:1fr}.hero{padding-top:40px}.hero-copy .lead{max-width:580px}h1{font-size:68px}.hero-visual,.hero-visual>img{height:420px;min-height:0}.principle{padding:19px 15px}.cards{grid-template-columns:1fr}.resource-card{padding:25px}.resource-card .icon{margin-bottom:20px}.resource-card h3{max-width:none}.section-head{align-items:start;flex-direction:column;gap:19px}.section-head>p{max-width:600px}.section{padding:55px 0!important}.finder-grid{gap:23px}.advocacy-grid{gap:52px}.advocacy-photo img{height:360px}.faq{gap:25px;grid-template-columns:1fr}.contact-inner{align-items:start;flex-direction:column;gap:23px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:480px){.wrap{padding:0 21px}.utility .wrap{min-height:31px;font-size:9px}.utility .utility-right{display:none}h1{font-size:58px}.hero-grid{gap:28px}.hero-actions{gap:18px}.hero-visual,.hero-visual>img{height:360px}.visual-caption p{font-size:32px}.principles{grid-template-columns:1fr;margin-top:28px}.principle,.principle:first-child{padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}.principle:last-child{border-bottom:0}.finder-section h2{font-size:39px}.finder-box{padding:19px}.finder-row{flex-direction:column}.footer-grid{gap:30px}.footer-bottom{flex-direction:column}.quote-card{padding:26px}dialog{padding:24px}.brand-tag{letter-spacing:.05em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<div class="utility">
<div class="wrap"><span>Independent. Nonpartisan. For the public good.</span><span class="utility-right">Better information. Stronger communities.</span></div>
</div>
<header>
<div class="wrap header-inner">
<a class="brand" href="#" aria-label="Commonwell Civic home">
<img src="https://placehold.co/86x86/142f36/f8f7f1?text=C.&font=lora" alt="Commonwell Civic logo" width="43" height="43">
<div><div class="brand-name">commonwell<span style="color:var(--orange)">.</span></div><div class="brand-tag">UNDERSTAND YOUR RIGHTS. SHAPE YOUR COMMUNITY.</div></div>
</a>
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-nav">Menu <span aria-hidden="true">☰</span></button>
<nav id="primary-nav" aria-label="Primary navigation">
<a href="#about">Our mission</a>
<a href="#resources">Resources</a>
<a href="#advocacy">Advocacy</a>
<a href="#updates">Policy briefings</a>
<a href="#finder">Find your officials</a>
<a href="#contact" class="nav-contact">Contact ↗</a>
</nav>
</div>
</header>
<main id="main">
<section class="hero wrap" aria-labelledby="hero-title">
<div class="hero-grid">
<div class="hero-copy">
<p class="eyebrow">Your voice belongs here</p>
<h1 id="hero-title">Public life.<br>Made <span style="color:var(--orange)">personal.</span></h1>
<p class="lead">Understand the laws that affect you. Connect with the people who represent you. Take an informed next step toward a stronger community.</p>
<div class="hero-actions">
<a class="btn orange" href="#resources">Explore your resources <span aria-hidden="true">↗</span></a>
<a class="text-link" href="#finder">Make your voice heard <span aria-hidden="true">→</span></a>
</div>
<p class="hero-note">Clear guidance. Public sources. No partisan agenda.</p>
</div>
<div class="hero-visual">
<img src="https://picsum.photos/seed/commonwell-landscape/900/1000?grayscale" alt="" width="900" height="1000" fetchpriority="high">
<span class="image-label">The common ground</span>
<svg class="building" viewBox="0 0 500 360" aria-hidden="true">
<g fill="currentColor">
<path d="M60 158 250 64 440 158Z"/><path d="M79 165h342v17H79z"/>
<path d="M86 302h328v16H86zM67 324h366v14H67zM46 344h408v14H46z"/>
<path d="M101 190h35v105h-35zM167 190h35v105h-35zM233 190h35v105h-35zM299 190h35v105h-35zM365 190h35v105h-35z"/>
<path d="M94 182h49v10H94zM160 182h49v10h-49zM226 182h49v10h-49zM292 182h49v10h-49zM358 182h49v10h-49z"/>
<path d="M247 20h5v46h-5zM252 22h43l-10 12 10 12h-43z"/>
</g>
<path d="m104 147 146-71 146 71Z" fill="none" stroke="#f8f7f1" stroke-width="2" opacity=".4"/>
</svg>
<div class="visual-caption">
<span class="small">Knowledge is a civic tool</span>
<p>A more informed public.<br>A more accountable future.</p>
<a href="#about">Discover the Commonwell approach <span aria-hidden="true">↗</span></a>
</div>
</div>
</div>
<div class="principles">
<div class="principle"><span class="number">01</span><div><strong>Know where you stand</strong><p>Practical guidance on rights and public processes.</p></div></div>
<div class="principle"><span class="number">02</span><div><strong>Understand what’s changing</strong><p>Context that connects policy to everyday life.</p></div></div>
<div class="principle"><span class="number">03</span><div><strong>Turn understanding into action</strong><p>Useful tools for meaningful civic participation.</p></div></div>
</div>
</section>
<section id="resources" class="section wrap" aria-labelledby="resources-title">
<div class="section-head">
<div><p class="eyebrow">The public toolkit</p><h2 id="resources-title">Start with what matters to you.</h2></div>
<p>The law shouldn’t feel like a closed door. Find plain-language starting points, trusted public resources, and practical questions to ask before you act.</p>
</div>
<div class="cards">
<article class="resource-card">
<div class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v17M5 20h14M4 7h16M6 7l-4 7h8L6 7Zm12 0-4 7h8l-4-7Z"/></svg></div>
<h3>Your rights &<br>legal pathways</h3>
<p>Learn how due process, notice requirements, and access to counsel can shape your options. Our starting guide helps you organize documents, identify deadlines, and find qualified legal assistance.</p>
<p>For housing, benefits, or other civil matters, the right next step depends on your location and circumstances—not a one-size-fits-all answer.</p>
<button class="text-link" data-guide="rights">Find legal help <span aria-hidden="true">↗</span></button>
</article>
<article class="resource-card">
<div class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9 12 3l9 6M5 10v10h14V10M9 20v-7h6v7M2 21h20"/></svg></div>
<h3>Government,<br>without the guesswork</h3>
<p>Understand which decisions happen at the local, state, and federal levels. Learn how public meetings, agency rulemaking, and legislative committees create opportunities for public input.</p>
<p>Start with the decision-maker’s authority, then use an official agenda or docket to learn when and how to participate.</p>
<button class="text-link" data-guide="government">Navigate the process <span aria-hidden="true">↗</span></button>
</article>
<article class="resource-card">
<div class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 10h16v11H4zM8 10V7h8v3M9 3l6 3-3 6-6-3Z"/><path d="M9 15h6"/></svg></div>
<h3>Voting &<br>civic participation</h3>
<p>Check registration requirements, understand voting options, and locate official election information. Election rules and deadlines vary by state, so verify details directly with your election office.</p>
<p>Participation continues after Election Day: attend a hearing, serve on a public board, or help a neighbor access reliable information.</p>
<button class="text-link" data-guide="voting">Build your civic checklist <span aria-hidden="true">↗</span></button>
</article>
</div>
<p class="resource-note">Information, not legal advice. Commonwell does not provide legal representation. If you face a deadline or immediate legal risk, contact a licensed attorney or local legal aid provider.</p>
</section>
<section id="finder" class="finder-section" aria-labelledby="finder-title">
<div class="wrap finder-grid">
<div>
<p class="eyebrow">From concern to conversation</p>
<h2 id="finder-title">Find the people<br>who represent you.</h2>
<p>Your elected officials work for your community. Choose your state to reach official directories, identify the right office, and start a constructive conversation about an issue that matters.</p>
</div>
<form class="finder-box" id="finder-form">
<label for="state">Where do you live?</label>
<div class="finder-row">
<select id="state" name="state" required><option value="">Select your state or D.C.</option></select>
<button type="submit" class="btn orange">Find officials <span aria-hidden="true">→</span></button>
</div>
<p class="help">No address collected. Official directories may ask for your address to match your district.</p>
<div id="finder-result" class="finder-result" aria-live="polite" hidden></div>
</form>
</div>
</section>
<section id="advocacy" class="section wrap" aria-labelledby="advocacy-title">
<div class="advocacy-grid">
<div class="advocacy-photo">
<img src="https://picsum.photos/seed/commonwell-community/800/700" alt="Illustrative photograph for the community advocacy program" width="800" height="700" loading="lazy">
<div class="photo-stamp"><strong>Local voices.<br>Lasting change.</strong><span>Start where you live.</span></div>
</div>
<div class="advocacy-copy">
<p class="eyebrow">Community advocacy</p>
<h2 id="advocacy-title">You don’t need to be an expert to make a difference.</h2>
<p class="lead">Effective advocacy starts with listening. Define the problem with the people most affected, gather credible evidence, and choose a clear, achievable request. A thoughtful public comment can be more useful than a hundred identical messages.</p>
<p class="lead">Whether you’re organizing neighbors or meeting with a legislative aide, our approach emphasizes respectful dialogue, transparent lobbying, and accountability. Check applicable registration and disclosure rules before speaking on behalf of an organization.</p>
<ul class="check-list">
<li>Identify the office with authority to address your concern.</li>
<li>Pair a lived experience with reliable, locally relevant evidence.</li>
<li>Make a specific request—and plan a follow-up.</li>
</ul>
<button class="btn" data-guide="advocacy">Build your advocacy plan <span aria-hidden="true">↗</span></button>
</div>
</div>
</section>
<section id="updates" class="section updates" aria-labelledby="updates-title">
<div class="wrap">
<div class="section-head">
<div><p class="eyebrow">Policy, in perspective</p><h2 id="updates-title">Follow the process.<br>Not just the headlines.</h2></div>
<p>Our evergreen briefings explain how to evaluate legislative updates and proposed rules. Know what has changed, what hasn’t, and where your input fits.</p>
</div>
<div class="updates-tools" role="group" aria-label="Filter policy briefings">
<button class="filter" data-filter="all" aria-pressed="true">All briefings</button>
<button class="filter" data-filter="legislation" aria-pressed="false">Legislation</button>
<button class="filter" data-filter="public-input" aria-pressed="false">Public input</button>
<button class="filter" data-filter="local" aria-pressed="false">Local government</button>
</div>
<div class="cards" id="briefing-cards">
<article class="update-card" data-category="legislation">
<div class="update-meta"><span class="tag">Legislation</span><span>5-minute guide</span></div>
<h3>A bill is not a law.<br>Here’s what to watch.</h3>
<p>Introduction, committee action, floor votes, and executive approval are distinct steps. Learn to check a bill’s status, compare amended text, and avoid treating a proposal as settled policy.</p>
<button class="text-link" data-guide="bills">Read the briefing <span aria-hidden="true">↗</span></button>
</article>
<article class="update-card" data-category="public-input">
<div class="update-meta"><span class="tag">Public input</span><span>4-minute guide</span></div>
<h3>Make your public<br>comment count.</h3>
<p>An agency’s comment period is an opportunity to contribute evidence and practical experience. Identify the docket, respond to the proposal, and submit before the published deadline.</p>
<button class="text-link" data-guide="comments">Read the briefing <span aria-hidden="true">↗</span></button>
</article>
<article class="update-card" data-category="local">
<div class="update-meta"><span class="tag">Local government</span><span>6-minute guide</span></div>
<h3>Your local budget<br>is a public priority list.</h3>
<p>Budgets shape services, infrastructure, and neighborhood investment. Understand the difference between a proposed and adopted budget, then find the hearings where priorities are discussed.</p>
<button class="text-link" data-guide="budget">Read the briefing <span aria-hidden="true">↗</span></button>
</article>
</div>
<p class="editorial-note" id="filter-status" aria-live="polite">Showing 3 evergreen briefings. These explain public processes; they are not live legislative tracking or jurisdiction-specific advice.</p>
</div>
</section>
<section id="about" class="section wrap" aria-labelledby="about-title">
<div class="about-grid">
<div>
<p class="eyebrow">The Commonwell principle</p>
<h2 id="about-title">Public knowledge<br>is a public good.</h2>
<p class="lead">Commonwell Civic is built around a simple idea: people should be able to understand the systems that shape their lives. We bring legal literacy, government process, and community advocacy into one accessible starting point.</p>
<p class="lead">Our nonpartisan approach separates explanation from endorsement. We prioritize official sources, acknowledge jurisdictional differences, and encourage readers to verify important details before acting. We don’t endorse candidates or provide individualized legal advice.</p>
<a class="text-link" href="#contact">Talk to our team <span aria-hidden="true">↗</span></a>
</div>
<aside class="quote-card" aria-label="Our guiding belief">
<span class="quote-mark" aria-hidden="true">“</span>
<blockquote>A healthy democracy isn’t a spectator sport. It works better when more people understand how to take part.</blockquote>
<div class="quote-person">
<img src="https://i.pravatar.cc/100?u=commonwell-editor" alt="" width="42" height="42" loading="lazy">
<div><strong>The Commonwell editorial team</strong><span>Our founding commitment</span></div>
</div>
</aside>
</div>
<div class="faq">
<div><p class="eyebrow">A few useful answers</p><h3>Clarity comes first.</h3><p style="font-size:13px;color:var(--muted)">Know what our resources can do—and when you need a different kind of support.</p></div>
<div>
<details><summary>Is Commonwell a law firm?</summary><p>No. Commonwell is an educational civic resource, not a law firm. Reading our material or contacting us does not create an attorney-client relationship. A licensed attorney can advise you on your facts, rights, and deadlines.</p></details>
<details><summary>Do you support a political party or candidate?</summary><p>No. Our focus is civic literacy and access to public processes. We explain how to participate without endorsing parties or candidates, and we direct readers to official sources for verification.</p></details>
<details><summary>How do I know which representative to contact?</summary><p>Start with who has authority over the issue. City or county offices often handle local services; state officials address state laws and agencies; federal representatives address federal policy. Use our directory tool above, then ask the office to confirm that your concern falls within its responsibility.</p></details>
<details><summary>Can I share these resources with my community?</summary><p>Yes—please share links with neighbors, classrooms, and community groups. Preserve the context and legal-information disclaimer, and encourage readers to consult the linked official sources. Contact our team for questions about reuse or adapted materials.</p></details>
</div>
</div>
</section>
<section id="contact" class="contact" aria-labelledby="contact-title">
<div class="wrap contact-inner">
<div><p class="eyebrow">Keep the conversation going</p><h2 id="contact-title">What’s on your community’s mind?</h2><p>Suggest a resource, flag something that needs a clearer explanation, or ask about a community workshop. Please don’t send confidential documents or sensitive legal information.</p></div>
<a class="btn" href="mailto:hello@commonwell.example">Contact our team <span aria-hidden="true">↗</span></a>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="#"><img src="https://placehold.co/86x86/f8f7f1/142f36?text=C.&font=lora" alt="Commonwell Civic logo" width="43" height="43" loading="lazy"><div><div class="brand-name">commonwell.</div><div class="brand-tag">UNDERSTAND YOUR RIGHTS. SHAPE YOUR COMMUNITY.</div></div></a>
<p>A clearer path to legal information, government accountability, and everyday civic participation.</p>
<div class="socials" aria-label="Social sharing"><button class="text-link" id="share-site" style="color:inherit;border-color:#b8c5c0;background:none">Share Commonwell ↗</button><a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcommonwell.example" target="_blank" rel="noopener noreferrer" aria-label="Share Commonwell on LinkedIn (opens a new tab)">LinkedIn ↗</a></div>
</div>
<div><h3>Find your way</h3><ul><li><a href="#resources">Legal & civic resources</a></li><li><a href="#advocacy">Community advocacy</a></li><li><a href="#updates">Policy briefings</a></li><li><a href="#finder">Representative directories</a></li><li><a href="#about">Our mission</a></li></ul></div>
<div><h3>Get in touch</h3><ul><li><a href="mailto:hello@commonwell.example">hello@commonwell.example</a></li><li><a href="tel:+12025550148">(202) 555-0148</a></li><li>120 Civic Way, Suite 400<br>Washington, DC 20001</li><li>Monday–Friday · 9 am–5 pm ET</li></ul></div>
</div>
<div class="footer-bottom"><span>© <span id="year">2026</span> Commonwell Civic. All rights reserved.</span><div><a href="#privacy" data-guide="privacy">Privacy</a><a href="#terms" data-guide="terms">Terms</a><a href="#accessibility" data-guide="accessibility">Accessibility</a></div></div>
<p style="max-width:none;font-size:10px;margin-top:14px">Commonwell Civic is a fictional demonstration organization. Contact details and imagery are illustrative; links to external public resources are real.</p>
</div>
</footer>
<dialog id="guide-dialog" aria-labelledby="dialog-title">
<div class="dialog-top"><h2 id="dialog-title"></h2><button class="close-dialog" aria-label="Close resource dialog">×</button></div>
<div id="dialog-body"></div>
<div class="dialog-actions"><button class="btn outline" id="share-guide">Share this guide <span aria-hidden="true">↗</span></button><button class="btn" id="done-dialog">Done</button></div>
<p id="share-status" class="status" aria-live="polite"></p>
</dialog>
<script>
const states = [
['AL','Alabama'],['AK','Alaska'],['AZ','Arizona'],['AR','Arkansas'],['CA','California'],['CO','Colorado'],['CT','Connecticut'],['DE','Delaware'],['DC','District of Columbia'],['FL','Florida'],['GA','Georgia'],['HI','Hawaii'],['ID','Idaho'],['IL','Illinois'],['IN','Indiana'],['IA','Iowa'],['KS','Kansas'],['KY','Kentucky'],['LA','Louisiana'],['ME','Maine'],['MD','Maryland'],['MA','Massachusetts'],['MI','Michigan'],['MN','Minnesota'],['MS','Mississippi'],['MO','Missouri'],['MT','Montana'],['NE','Nebraska'],['NV','Nevada'],['NH','New Hampshire'],['NJ','New Jersey'],['NM','New Mexico'],['NY','New York'],['NC','North Carolina'],['ND','North Dakota'],['OH','Ohio'],['OK','Oklahoma'],['OR','Oregon'],['PA','Pennsylvania'],['RI','Rhode Island'],['SC','South Carolina'],['SD','South Dakota'],['TN','Tennessee'],['TX','Texas'],['UT','Utah'],['VT','Vermont'],['VA','Virginia'],['WA','Washington'],['WV','West Virginia'],['WI','Wisconsin'],['WY','Wyoming']
];
const stateSelect = document.getElementById('state');
states.forEach(([code,name]) => stateSelect.add(new Option(name,code)));
document.getElementById('finder-form').addEventListener('submit',e=>{
e.preventDefault();
const name=stateSelect.selectedOptions[0].textContent;
const result=document.getElementById('finder-result');
result.hidden=false;
result.innerHTML=`<strong>Your next steps in ${name}</strong><p>Use these official tools to match your address to your elected officials. Choose ${name} in the directory where prompted.</p><ul><li><a href="https://www.house.gov/representatives/find-your-representative" target="_blank" rel="noopener noreferrer">Find your U.S. House representative ↗</a></li><li><a href="https://www.senate.gov/senators/senators-contact.htm" target="_blank" rel="noopener noreferrer">Find your U.S. senators by state ↗</a></li><li><a href="https://www.usa.gov/elected-officials" target="_blank" rel="noopener noreferrer">Find state and local officials ↗</a></li></ul><p class="help">${stateSelect.value==='DC'?'D.C. is represented by a non-voting House delegate and has no U.S. senators. ':''}These links open in a new tab. Confirm your district before contacting an office.</p>`;
});
const menu=document.querySelector('.menu-toggle'),nav=document.getElementById('primary-nav');
menu.addEventListener('click',()=>{const open=menu.getAttribute('aria-expanded')!=='true';menu.setAttribute('aria-expanded',open);nav.classList.toggle('open',open)});
nav.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{nav.classList.remove('open');menu.setAttribute('aria-expanded','false')}));
document.querySelectorAll('.filter').forEach(button=>button.addEventListener('click',()=>{
document.querySelectorAll('.filter').forEach(b=>b.setAttribute('aria-pressed',b===button));
let count=0;
document.querySelectorAll('.update-card').forEach(card=>{card.hidden=button.dataset.filter!=='all'&&card.dataset.category!==button.dataset.filter;if(!card.hidden)count++});
document.getElementById('filter-status').textContent=`Showing ${count} evergreen briefing${count===1?'':'s'}. These explain public processes; they are not live legislative tracking or jurisdiction-specific advice.`;
}));
const guides={
rights:{title:'Find the right legal help',body:'<p>If you have a court notice, agency decision, or eviction document, read it carefully and note every deadline. Keep the notice, relevant correspondence, and a short timeline together. Do not assume that asking for help pauses a deadline.</p><p>Legal aid programs may offer civil legal assistance based on income, location, and the type of problem. Ask about eligibility, scope of service, and any costs. For criminal charges, ask the court about appointed counsel if you cannot afford a lawyer.</p><p><a href="https://www.lsc.gov/about-lsc/what-legal-aid/i-need-legal-help" target="_blank" rel="noopener noreferrer">Find a Legal Services Corporation-funded legal aid provider ↗</a></p><p>This is general information, not legal advice. For urgent matters, contact a licensed attorney or your local legal aid office promptly.</p>'},
government:{title:'Find the right public process',body:'<p>Write down the decision you want to understand and identify the institution responsible. A city ordinance, state statute, and federal regulation follow different procedures and affect different areas of authority.</p><ol><li>Locate the official government website, agenda, or docket.</li><li>Check meeting dates, comment rules, and accessibility arrangements.</li><li>Read the relevant proposal and supporting documents.</li><li>Confirm submission instructions with the clerk or agency.</li></ol><p><a href="https://www.usa.gov/state-local-governments" target="_blank" rel="noopener noreferrer">Find state and local government websites ↗</a></p>'},
voting:{title:'Your civic participation checklist',body:'<p>Start with your state or local election office—not a social media post. Confirm your registration, applicable identification requirements, polling location, and deadlines. Eligibility and voting options differ by jurisdiction.</p><ol><li>Check registration status and update your address if needed.</li><li>Review official early, absentee, or mail voting options.</li><li>Make a plan for transportation and any accessibility needs.</li><li>Save the election office’s contact information for questions.</li></ol><p><a href="https://www.vote.gov/" target="_blank" rel="noopener noreferrer">Find official voter registration information at Vote.gov ↗</a></p>'},
advocacy:{title:'Build a practical advocacy plan',body:'<p>Begin with one specific outcome. “Improve our neighborhood” is a goal; “add a pedestrian safety review to the next committee agenda” is a request an office can evaluate.</p><ol><li><strong>Listen:</strong> speak with people directly affected and ask permission before sharing their stories.</li><li><strong>Research:</strong> check the relevant policy, decision-maker, and public record.</li><li><strong>Prepare:</strong> pair a brief personal explanation with credible evidence and a specific ask.</li><li><strong>Follow up:</strong> record the response, confirm next steps, and thank the staff member.</li></ol><p>If you are engaging in lobbying for an organization, check the relevant jurisdiction’s registration, disclosure, and ethics requirements. Rules can depend on compensation, activities, and spending.</p><p><a href="#finder" id="dialog-finder-link">Contact your representative using our directory tool →</a></p>'},
bills:{title:'A bill is not a law',body:'<p>A bill’s introduction starts a process; it does not change the law. Committee referral, hearings, amendments, and votes may change or stop a proposal. Legislative procedures differ across jurisdictions.</p><p>At the federal level, both chambers generally must pass identical text before a bill goes to the president. Check the actions tab, current text, and related bills rather than relying solely on a summary or headline.</p><p>Even an enacted law may have a future effective date or require agency implementation. Read those provisions before concluding that a new rule applies today.</p><p><a href="https://www.congress.gov/" target="_blank" rel="noopener noreferrer">Research federal bill text and status on Congress.gov ↗</a></p>'},
comments:{title:'Make your public comment count',body:'<p>Locate the official docket and read the proposed rule, agency questions, and submission instructions. A useful comment explains how a specific provision may work in practice and offers evidence or a concrete alternative.</p><p>Focus on substance rather than message volume. If you cite a study, identify the source and explain its relevance. Check the deadline and save the submission confirmation.</p><p>Comments may become part of a public record. Avoid including unnecessary personal, medical, or confidential information, and review the agency’s privacy notice before submitting.</p><p><a href="https://www.regulations.gov/" target="_blank" rel="noopener noreferrer">Explore federal rulemaking dockets on Regulations.gov ↗</a></p>'},
budget:{title:'Read your local budget',body:'<p>Find the current proposed budget, the adopted budget, and the public hearing schedule on your city or county’s official website. Look at both operating expenses and capital investments; they may follow separate planning cycles.</p><p>Compare proposed spending with the prior year, but check whether figures are adjusted for one-time funding or changes in accounting. Ask which funds are restricted and which decisions remain open to public input.</p><p>When speaking at a hearing, name the program or budget line, explain the community impact, and make a specific request. Follow your clerk’s rules for registration, speaking time, and written submissions.</p><p><a href="https://www.usa.gov/state-local-governments" target="_blank" rel="noopener noreferrer">Locate your local government’s official website ↗</a></p>'},
privacy:{title:'Privacy at a glance',body:'<p>This demonstration page does not ask for your name, address, or payment details. The representative directory processes your state selection in your browser; it is not submitted to a Commonwell server. There are no analytics or advertising scripts on this page.</p><p>Images and fonts load from third-party services, which receive ordinary network information such as your IP address. External sites have their own privacy practices. Email is handled by your email provider; do not send sensitive information to the illustrative contact address.</p>'},
terms:{title:'Using this resource',body:'<p>Commonwell Civic is a fictional demonstration website. Its content is general educational information, not legal advice, a professional service, or a guarantee of eligibility or outcomes.</p><p>Verify laws, deadlines, and procedures with the relevant official source or a qualified professional. External links are provided for convenience and do not imply a relationship with the linked organization. Contact details and people shown are illustrative.</p>'},
accessibility:{title:'Access for everyone',body:'<p>This page supports keyboard navigation, visible focus indicators, descriptive form labels, native expandable answers, and reduced-motion preferences. The layout adapts to small screens and enlarged text.</p><p>Our commitment is to make civic information understandable and usable. For an accessible public meeting or an accommodation, contact the relevant government office directly. External resources may have different accessibility features.</p>'}
};
const dialog=document.getElementById('guide-dialog');
let activeGuide='';
function openGuide(key){
if(!guides[key])return;
activeGuide=key;
document.getElementById('dialog-title').textContent=guides[key].title;
document.getElementById('dialog-body').innerHTML=guides[key].body;
document.getElementById('share-status').textContent='';
dialog.showModal();
const finderLink=document.getElementById('dialog-finder-link');
if(finderLink)finderLink.addEventListener('click',()=>dialog.close());
}
document.querySelectorAll('[data-guide]').forEach(el=>el.addEventListener('click',e=>{e.preventDefault();openGuide(el.dataset.guide)}));
document.querySelector('.close-dialog').addEventListener('click',()=>dialog.close());
document.getElementById('done-dialog').addEventListener('click',()=>dialog.close());
dialog.addEventListener('click',e=>{if(e.target===dialog){const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close()}});
async function share(title,url,status){
try{
if(navigator.share){await navigator.share({title,url});return}
if(navigator.clipboard&&window.isSecureContext){await navigator.clipboard.writeText(url);if(status)status.textContent='Link copied. Paste it into a message to share.';else openShareFallback(url,true)}
else openShareFallback(url,false);
}catch(error){if(error.name!=='AbortError'){if(status)status.textContent='Sharing is unavailable. Copy the page address from your browser instead.';else openShareFallback(url,false)}}
}
function openShareFallback(url,copied){
document.getElementById('dialog-title').textContent=copied?'Link copied':'Share Commonwell';
document.getElementById('dialog-body').innerHTML='<p>Share a clearer starting point for civic participation with your community.</p>';
const field=document.createElement('input');field.value=url;field.readOnly=true;field.setAttribute('aria-label','Link to share');document.getElementById('dialog-body').append(field);
document.getElementById('share-status').textContent=copied?'Paste the copied link into a message.':'Select and copy this link to share.';
activeGuide='';if(!dialog.open)dialog.showModal();
}
document.getElementById('share-guide').addEventListener('click',()=>{const url=new URL(location.href);url.hash=activeGuide?'guide-'+activeGuide:'';share(activeGuide?guides[activeGuide].title:'Commonwell Civic',url.href,document.getElementById('share-status'))});
document.getElementById('share-site').addEventListener('click',()=>{const url=new URL(location.href);url.hash='';share('Commonwell Civic',url.href)});
document.getElementById('year').textContent=new Date().getFullYear();
const requestedGuide=location.hash.replace('#guide-','');
if(location.hash.startsWith('#guide-')&&guides[requestedGuide])openGuide(requestedGuide);
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:58:39.859Z",
"url": "https://benchmark.aimac.invalid/b6f7102c50a90e4e9f7ccdcc6b9156b5cd5c9adbbcb1675daa5ca42157770b03.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": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Commonwell Civic home\">",
"target": [
"a[aria-label=\"Commonwell Civic home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Commonwell Civic home\">",
"target": [
"a[aria-label=\"Commonwell Civic 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=\"updates-tools\" role=\"group\" aria-label=\"Filter policy briefings\">",
"target": [
".updates-tools"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span aria-hidden=\"true\">\u2630</span>",
"target": [
".menu-toggle > span[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Commonwell Civic home\">",
"target": [
"a[aria-label=\"Commonwell Civic 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=\"updates-tools\" role=\"group\" aria-label=\"Filter policy briefings\">",
"target": [
".updates-tools"
]
}
]
},
{
"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=\"updates-tools\" role=\"group\" aria-label=\"Filter policy briefings\">",
"target": [
".updates-tools"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Commonwell Civic home\">",
"target": [
"a[aria-label=\"Commonwell Civic home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Commonwell Civic home\">",
"target": [
"a[aria-label=\"Commonwell Civic home\"]"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span style=\"color:var(--orange)\">.</span>",
"target": [
".brand-name > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"text-link\" data-guide=\"rights\">Find legal help <span aria-hidden=\"true\">\u2197</span></button>",
"target": [
"button[data-guide=\"rights\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 id=\"hero-title\">Public life.<br>Made <span style=\"color:var(--orange)\">personal.</span></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"resources-title\">Start with what matters to you.</h2>",
"target": [
"#resources-title"
]
},
{
"html": "<h3>Your rights &<br>legal pathways</h3>",
"target": [
".resource-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Government,<br>without the guesswork</h3>",
"target": [
".resource-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Voting &<br>civic participation</h3>",
"target": [
".resource-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"finder-title\">Find the people<br>who represent you.</h2>",
"target": [
"#finder-title"
]
},
{
"html": "<h2 id=\"advocacy-title\">You don\u2019t need to be an expert to make a difference.</h2>",
"target": [
"#advocacy-title"
]
},
{
"html": "<h2 id=\"updates-title\">Follow the process.<br>Not just the headlines.</h2>",
"target": [
"#updates-title"
]
},
{
"html": "<h3>A bill is not a law.<br>Here\u2019s what to watch.</h3>",
"target": [
"article[data-category=\"legislation\"] > h3"
]
},
{
"html": "<h3>Make your public<br>comment count.</h3>",
"target": [
"article[data-category=\"public-input\"] > h3"
]
},
{
"html": "<h3>Your local budget<br>is a public priority list.</h3>",
"target": [
"article[data-category=\"local\"] > h3"
]
},
{
"html": "<h2 id=\"about-title\">Public knowledge<br>is a public good.</h2>",
"target": [
"#about-title"
]
},
{
"html": "<h3>Clarity comes first.</h3>",
"target": [
"div:nth-child(1) > h3"
]
},
{
"html": "<h2 id=\"contact-title\">What\u2019s on your community\u2019s mind?</h2>",
"target": [
"#contact-title"
]
},
{
"html": "<h3>Find your way</h3>",
"target": [
"div:nth-child(2) > h3"
]
},
{
"html": "<h3>Get in touch</h3>",
"target": [
"div:nth-child(3) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e3eae3",
"bgColor": "#142f36",
"contrastRatio": 11.5,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.5"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>Independent. Nonpartisan. For the public good.</span>",
"target": [
".wrap > span:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav id=\"primary-nav\" aria-label=\"Primary navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"state\">Where do you live?</label>",
"target": [
"label"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"state\" name=\"state\" required=\"\">",
"target": [
"#state"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/86x86/142f36/f8f7f1?text=C.&font=lora\" alt=\"Commonwell Civic logo\" width=\"43\" height=\"43\">",
"target": [
"a[aria-label=\"Commonwell Civic home\"] > img[alt=\"Commonwell Civic logo\"][width=\"43\"][height=\"43\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div>",
"target": [
".about-grid > div"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"text-link\" href=\"#contact\">Talk to our team <span aria-hidden=\"true\">\u2197</span></a>",
"target": [
".text-link[href$=\"#contact\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"check-list\">\n <li>Identify the office with authority to address your concern.</li>\n <li>Pair a lived experience with reliable, locally relevant evidence.</li>\n <li>Make a specific request\u2014and plan a follow-up.</li>\n </ul>",
"target": [
".check-list"
]
}
]
},
{
"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>Identify the office with authority to address your concern.</li>",
"target": [
".check-list > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/86x86/142f36/f8f7f1?text=C.&font=lora\" alt=\"Commonwell Civic logo\" width=\"43\" height=\"43\">",
"target": [
"a[aria-label=\"Commonwell Civic home\"] > img[alt=\"Commonwell Civic logo\"][width=\"43\"][height=\"43\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Where do you live?"
},
"relatedNodes": [
{
"html": "<label for=\"state\">Where do you live?</label>",
"target": [
"label"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"state\" name=\"state\" required=\"\">",
"target": [
"#state"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>Is Commonwell a law firm?</summary>",
"target": [
"details:nth-child(1) > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 130.6,
"height": 48.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (130.6px by 48.8px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"socials\" aria-label=\"Social sharing\">",
"target": [
".socials"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span aria-hidden=\"true\">\u2192</span>",
"target": [
".text-link[href$=\"#finder\"] > span[aria-hidden=\"true\"]"
],
"failureSummary": "Fix any of the following:\n Element content contains only non-text characters"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c44b25",
"bgColor": "#f8f7f1",
"contrastRatio": 4.46,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Your voice belongs here</p>",
"target": [
".hero-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c44b25",
"bgColor": "#f8f7f1",
"contrastRatio": 4.46,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"update-card\" data-category=\"legislation\">",
"target": [
"article[data-category=\"legislation\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Legislation</span>",
"target": [
"article[data-category=\"legislation\"] > .update-meta > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c44b25",
"bgColor": "#f8f7f1",
"contrastRatio": 4.46,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"update-card\" data-category=\"public-input\">",
"target": [
"article[data-category=\"public-input\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Public input</span>",
"target": [
"article[data-category=\"public-input\"] > .update-meta > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c44b25",
"bgColor": "#f8f7f1",
"contrastRatio": 4.46,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"update-card\" data-category=\"local\">",
"target": [
"article[data-category=\"local\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Local government</span>",
"target": [
"article[data-category=\"local\"] > .update-meta > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #c44b25, background color: #f8f7f1, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 4794
},
{
"y": 576,
"height": 4794
},
{
"y": 1152,
"height": 4794
},
{
"y": 1728,
"height": 4794
},
{
"y": 2304,
"height": 4794
},
{
"y": 2880,
"height": 4794
},
{
"y": 3456,
"height": 4794
},
{
"y": 4032,
"height": 4794
},
{
"y": 4074,
"height": 4794
}
],
"scans": 10,
"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 "Law, Government, & Politics" 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: "Law, Government, & Politics"
- Description: Legal information, political organizations, government affairs, and civic engagement resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Law, Government, & Politics" 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", "Contact", "Advocacy".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Law, Government, & Politics" category. Consider themes similar to: "Legal Resources", "Community Advocacy", "Legislative Updates".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "lobbying", "due process", "civic participation".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Contact Representative", "Donate", "Share".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Law, Government, & Politics" sector. Ideas similar but not limited to: "representative finder".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "trending issues", "community events", "legal resources".
- **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.