OpenAI GPT 6 Luna – Law Government and Politics
via Azure · Generated
- AIMAC Debt 4.64
- Cost $0.006
- Total Violations 16
- HTML Size 40 KB
- Em Dashes 7
Screenshot
View Live Page
Accessibility Issues Found
16 Serious
-
color-contrast serious 16 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="brand-tagline">Understand the law. Shape what comes next.</span>
Artifacts
View Generated HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#142b3a">
<meta name="description" content="Civic Ledger makes law and public policy easier to understand—and civic participation easier to put into practice.">
<title>Civic Ledger — Understand the law. Shape what comes next.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap" rel="stylesheet">
<style>
:root {
--ink: #142b3a;
--ink-soft: #40515d;
--paper: #f7f5ef;
--white: #fffefa;
--line: #deded5;
--teal: #176c66;
--teal-dark: #10554f;
--lime: #d9e9a8;
--coral: #e27e61;
--muted: #707b7f;
--serif: "Newsreader", Georgia, serif;
--sans: "DM Sans", Arial, sans-serif;
--content: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--white);
font-family: var(--sans);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #e27e61; outline-offset: 4px; }
.wrap { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--teal); font-size: .75rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 23px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: clamp(3.15rem, 6.5vw, 5.8rem); max-width: 750px; margin: 20px 0 22px; }
h2 { font-size: clamp(2.45rem, 4vw, 3.65rem); margin-bottom: 18px; }
h3 { font-size: 1.25rem; }
.section-intro { max-width: 670px; color: var(--ink-soft); font-size: 1.08rem; }
.btn {
display: inline-flex; justify-content: center; align-items: center; gap: 11px;
min-height: 50px; padding: 0 21px; border: 1px solid transparent;
border-radius: 3px; background: var(--teal); color: white;
font-weight: 700; text-decoration: none; transition: .2s ease;
}
.btn:hover { background: var(--teal-dark); transform: translateY(-1px); }
.btn-light { background: var(--lime); color: var(--ink); }
.btn-light:hover { background: #cde18e; color: var(--ink); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,.55); color: white; }
.btn-outline:hover { background: white; color: var(--ink); }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--teal); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.arrow { font-size: 1.2em; line-height: 1; }
/* Header */
.utility-bar { background: var(--ink); color: #d8e1dd; font-size: .77rem; }
.utility-inner { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.utility-inner p { margin: 0; }
.utility-inner a { text-decoration: none; }
.utility-inner a:hover { color: white; }
.site-header { position: relative; z-index: 5; background: var(--white); border-bottom: 1px solid #eeede7; }
.header-main { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 48px; height: 48px; border-radius: 50%; }
.brand-name { display: block; font-size: 1.16rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; }
.brand-tagline { display: block; color: var(--muted); font-size: .68rem; margin-top: 4px; letter-spacing: .015em; }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 31px); }
.main-nav a { color: var(--ink-soft); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--teal); }
.main-nav .nav-donate { padding: 10px 16px; background: var(--ink); color: white; border-radius: 3px; }
.main-nav .nav-donate:hover { background: var(--teal); color: white; }
.menu-toggle { display: none; border: 1px solid var(--line); background: white; border-radius: 3px; width: 44px; height: 42px; color: var(--ink); cursor: pointer; }
/* Hero */
.hero { background: var(--paper); overflow: hidden; }
.hero-grid { min-height: 595px; display: grid; grid-template-columns: 1fr .91fr; align-items: center; gap: 54px; padding-block: 58px; }
.hero-copy { padding: 16px 0 24px; }
.hero h1 span { color: var(--teal); }
.hero-copy > p { max-width: 600px; color: var(--ink-soft); font-size: 1.14rem; margin-bottom: 28px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }
.hero-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .78rem; margin-top: 24px; }
.hero-note svg { flex: 0 0 auto; color: var(--teal); }
.hero-visual { position: relative; min-height: 465px; }
.hero-photo { width: 100%; height: 465px; object-fit: cover; border-radius: 3px; }
.photo-caption {
position: absolute; left: -28px; bottom: 28px; width: min(330px, 85%);
padding: 21px 23px; background: var(--white); box-shadow: 0 12px 36px #1026321c;
}
.photo-caption strong { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.photo-caption span { display: block; color: var(--muted); font-size: .8rem; margin-top: 8px; }
.photo-caption .caption-mark { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--coral); }
/* Trust strip */
.trust-strip { border-bottom: 1px solid var(--line); }
.trust-inner { min-height: 105px; display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); align-items: center; gap: 30px; }
.trust-heading { color: var(--muted); font-size: .78rem; line-height: 1.5; max-width: 160px; }
.trust-stat { padding-left: 26px; border-left: 1px solid var(--line); }
.trust-stat strong { display: block; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; line-height: 1.2; }
.trust-stat span { color: var(--muted); font-size: .77rem; }
/* Intro */
.mission { padding: 112px 0 106px; }
.mission-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 100px; align-items: start; }
.mission-copy p { color: var(--ink-soft); font-size: 1.04rem; }
.mission-copy p + p { margin-top: 17px; }
.mission-note { margin-top: 25px; padding: 21px 23px; border-left: 3px solid var(--coral); background: var(--paper); color: var(--ink-soft); font-size: .9rem; }
.mission-note strong { color: var(--ink); }
/* Resources */
.resources { padding: 99px 0 106px; background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 41px; }
.section-heading .section-intro { margin-bottom: 0; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.resource-card { display: flex; flex-direction: column; min-height: 350px; padding: 29px 28px 26px; background: var(--white); border: 1px solid #e9e8e1; transition: transform .2s, box-shadow .2s; }
.resource-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px #142b3a0d; }
.card-icon { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 25px; color: var(--teal); background: #e5efeb; border-radius: 50%; }
.resource-card h3 { margin-bottom: 12px; }
.resource-card p { color: var(--ink-soft); font-size: .91rem; margin-bottom: 22px; }
.resource-card .text-link { margin-top: auto; font-size: .88rem; }
/* Legislation tracker */
.tracker-section { padding: 104px 0 112px; }
.tracker-top { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 34px; }
.tracker-top .section-intro { margin-bottom: 0; }
.tracker-wrap { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.tracker-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
.tracker-tools p { margin: 0; font-size: .82rem; color: var(--muted); }
.search-box { position: relative; width: min(310px, 100%); }
.search-box svg { position: absolute; top: 12px; left: 13px; color: var(--muted); }
.search-box input { width: 100%; height: 42px; padding: 0 13px 0 40px; border: 1px solid #d9dcd5; border-radius: 3px; color: var(--ink); background: white; }
.bill-list { background: var(--white); }
.bill-row { display: grid; grid-template-columns: 105px 1fr 155px 130px; align-items: center; gap: 22px; padding: 22px; border-bottom: 1px solid var(--line); }
.bill-row:last-child { border-bottom: 0; }
.bill-id { color: var(--teal); font-size: .77rem; font-weight: 700; letter-spacing: .04em; }
.bill-title { font-weight: 700; line-height: 1.35; }
.bill-title small { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; font-weight: 400; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d8a74a; }
.status.review::before { background: var(--teal); }
.status.passed::before { background: #769b5c; }
.bill-row .text-link { font-size: .83rem; }
.tracker-foot { display: flex; justify-content: space-between; gap: 20px; padding: 19px 22px; border-top: 1px solid var(--line); background: #fbfaf6; }
.tracker-foot p { margin: 0; color: var(--muted); font-size: .75rem; max-width: 680px; }
.empty-state { display: none; padding: 28px 22px; color: var(--muted); }
/* Voter feature */
.voter-section { background: var(--ink); color: white; }
.voter-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 510px; }
.voter-photo-wrap { position: relative; min-height: 510px; }
.voter-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voter-photo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #142b3a50, transparent 48%); }
.voter-content { display: flex; flex-direction: column; justify-content: center; padding: 76px clamp(38px, 7vw, 105px); }
.voter-content .eyebrow { color: var(--lime); }
.voter-content h2 { margin-top: 19px; }
.voter-content p { color: #d3dddc; font-size: .98rem; }
.voter-content p + p { margin-top: 10px; }
.voter-content .btn { align-self: flex-start; margin-top: 17px; }
/* Advocacy */
.action-section { padding: 104px 0; }
.action-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 75px; }
.action-photo { width: 100%; height: 430px; object-fit: cover; }
.action-copy p { color: var(--ink-soft); }
.action-copy .action-lead { font-family: var(--serif); color: var(--ink); font-size: 1.45rem; line-height: 1.35; }
.action-copy .btn { margin-top: 10px; }
.action-aside { display: flex; gap: 15px; padding-top: 23px; margin-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.action-aside strong { color: var(--ink); white-space: nowrap; }
/* Testimonial */
.quote-section { padding: 75px 0; background: var(--lime); }
.quote-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
blockquote { margin: 0; max-width: 850px; }
blockquote p { font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.22; letter-spacing: -.02em; margin-bottom: 20px; }
blockquote footer { font-size: .82rem; color: var(--ink-soft); }
.quote-mark { font-family: var(--serif); color: #93ad64; font-size: 8rem; line-height: .7; }
/* FAQ and newsletter */
.closing-section { padding: 105px 0; }
.closing-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 100px; }
.faq-list { margin-top: 30px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 19px 35px 19px 0; cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 3px; top: 14px; color: var(--teal); font-size: 1.5rem; font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { max-width: 650px; margin: -2px 0 20px; color: var(--ink-soft); font-size: .9rem; }
.newsletter { padding: 31px; background: var(--paper); align-self: start; }
.newsletter h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; margin-bottom: 12px; }
.newsletter p { color: var(--ink-soft); font-size: .89rem; }
.newsletter form { display: flex; gap: 8px; margin-top: 21px; }
.newsletter input { min-width: 0; flex: 1; height: 48px; padding: 0 12px; border: 1px solid #d8d9d0; border-radius: 3px; background: white; }
.newsletter button { min-height: 48px; padding-inline: 15px; border: 0; border-radius: 3px; background: var(--teal); color: white; font-weight: 700; cursor: pointer; }
.newsletter button:hover { background: var(--teal-dark); }
.form-note { min-height: 20px; margin: 10px 0 0 !important; color: var(--teal) !important; font-size: .78rem !important; }
.privacy-note { margin-top: 13px; color: var(--muted) !important; font-size: .73rem !important; }
/* Footer */
.site-footer { padding: 57px 0 24px; background: var(--ink); color: white; }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 43px; }
.footer-brand { max-width: 290px; }
.footer-brand .brand-name { color: white; }
.footer-brand .brand-tagline { color: #b9c5c4; }
.footer-brand p { margin-top: 19px; color: #b9c5c4; font-size: .83rem; }
.footer-col h3 { margin: 2px 0 17px; color: white; font-size: .77rem; letter-spacing: .11em; text-transform: uppercase; }
.footer-col a, .footer-col address { display: block; margin: 9px 0; color: #c4cecb; font-size: .82rem; font-style: normal; text-decoration: none; }
.footer-col a:hover { color: var(--lime); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid #ffffff26; color: #aebbb9; font-size: .73rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: white; }
@media (max-width: 940px) {
.main-nav { gap: 15px; }
.main-nav a { font-size: .8rem; }
.hero-grid { gap: 35px; }
.mission-grid { gap: 55px; }
.bill-row { grid-template-columns: 82px 1fr 130px 110px; gap: 13px; }
.action-grid { gap: 45px; }
.closing-grid { gap: 55px; }
}
@media (max-width: 760px) {
.wrap { width: min(100% - 36px, var(--content)); }
.utility-inner { justify-content: center; text-align: center; }
.utility-inner .utility-secondary { display: none; }
.header-main { min-height: 73px; }
.menu-toggle { display: inline-grid; place-items: center; }
.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 22px 22px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 12px 18px #142b3a12; }
.main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.main-nav a { padding: 12px 4px; border-bottom: 1px solid #eeede7; font-size: .92rem; }
.main-nav .nav-donate { text-align: center; margin-top: 11px; border: 0; }
.hero-grid { grid-template-columns: 1fr; padding-block: 55px 40px; gap: 25px; }
.hero-copy { padding: 0; }
h1 { font-size: clamp(3rem, 12vw, 4.4rem); }
.hero-visual { min-height: 350px; margin-left: 12px; }
.hero-photo { height: 350px; }
.photo-caption { left: -12px; bottom: 16px; padding: 16px 18px; }
.trust-inner { grid-template-columns: 1fr 1fr; padding-block: 20px; gap: 18px; }
.trust-heading { max-width: none; }
.trust-stat { padding-left: 15px; }
.trust-stat strong { font-size: 1.35rem; }
.mission, .resources, .tracker-section, .action-section, .closing-section { padding-block: 75px; }
.mission-grid, .action-grid, .closing-grid { grid-template-columns: 1fr; gap: 34px; }
.mission-grid { gap: 20px; }
.section-heading, .tracker-top { display: block; }
.section-heading .section-intro, .tracker-top .section-intro { margin-top: 12px; }
.section-heading .text-link { margin-top: 16px; }
.resource-grid { grid-template-columns: 1fr; gap: 12px; }
.resource-card { min-height: 0; padding: 24px; }
.card-icon { margin-bottom: 17px; }
.tracker-tools { align-items: stretch; flex-direction: column; }
.search-box { width: 100%; }
.bill-row { grid-template-columns: 72px 1fr; gap: 9px 14px; padding: 17px; }
.bill-row .status { grid-column: 2; }
.bill-row .text-link { grid-column: 2; }
.bill-title { grid-column: 2; }
.bill-id { grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
.tracker-foot { flex-direction: column; }
.voter-grid { grid-template-columns: 1fr; }
.voter-photo-wrap { min-height: 310px; }
.voter-photo { position: absolute; }
.voter-content { padding: 57px 24px 65px; }
.action-photo { height: 320px; }
.quote-section { padding: 55px 0; }
.quote-inner { grid-template-columns: 1fr; gap: 8px; }
.quote-mark { display: none; }
.newsletter { padding: 25px; }
.footer-main { grid-template-columns: 1fr 1fr; gap: 29px 25px; }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 430px) {
.brand-tagline { max-width: 210px; font-size: .61rem; }
.hero-actions { align-items: stretch; flex-direction: column; }
.hero-actions .btn { width: 100%; }
.hero-note { align-items: flex-start; }
.trust-inner { gap: 16px 10px; }
.trust-stat span { font-size: .7rem; }
.newsletter form { flex-direction: column; }
.newsletter button { width: 100%; }
.footer-main { gap: 25px 16px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<div class="utility-bar">
<div class="wrap utility-inner">
<p>Independent. Nonpartisan. Built for the public good.</p>
<p class="utility-secondary"><a href="#contact">Questions? Talk with our team →</a></p>
</div>
</div>
<header class="site-header">
<div class="wrap header-main">
<a class="brand" href="#home" aria-label="Civic Ledger home">
<img src="https://placehold.co/96x96/176c66/ffffff?text=CL&font=montserrat" alt="Civic Ledger logo">
<span>
<span class="brand-name">Civic Ledger</span>
<span class="brand-tagline">Understand the law. Shape what comes next.</span>
</span>
</a>
<button class="menu-toggle" type="button" aria-label="Open navigation menu" aria-expanded="false" aria-controls="primary-navigation">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<nav class="main-nav" id="primary-navigation" aria-label="Primary navigation">
<a href="#legal-aid">Legal Aid</a>
<a href="#research">Research</a>
<a href="#voter-guide">Voter Guide</a>
<a href="#tracker">Policy Tracker</a>
<a href="#about">About</a>
<a class="nav-donate" href="#donate">Donate</a>
</nav>
</div>
</header>
<main id="home">
<section class="hero" aria-labelledby="hero-title">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="eyebrow">A clearer view of civic life</span>
<h1 id="hero-title">The law belongs to <span>all of us.</span></h1>
<p>Good decisions start with clear information. We make the laws, policies, and public processes shaping your community easier to understand—and easier to influence.</p>
<div class="hero-actions">
<a class="btn" href="#research">Explore the issues <span class="arrow" aria-hidden="true">↗</span></a>
<a class="btn btn-light" href="#legal-aid">Find legal support</a>
</div>
<div class="hero-note">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3 4.5 6v5.2c0 4.7 3.2 8.1 7.5 9.8 4.3-1.7 7.5-5.1 7.5-9.8V6L12 3Z" stroke="currentColor" stroke-width="1.7"/><path d="m8.8 12 2.1 2.1 4.4-4.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
Nonpartisan information. Practical tools. A stronger public voice.
</div>
</div>
<div class="hero-visual">
<img class="hero-photo" src="https://picsum.photos/900/900?grayscale" alt="Neighbors gathering around a table to discuss issues affecting their community">
<div class="photo-caption">
<span class="caption-mark" aria-hidden="true"></span>
<strong>Democracy works better when everyone can take part.</strong>
<span>Knowledge is a public resource. We make it useful.</span>
</div>
</div>
</div>
</section>
<section class="trust-strip" aria-label="Our reach">
<div class="wrap trust-inner">
<div class="trust-heading">Practical information, made for real life.</div>
<div class="trust-stat"><strong>48 states</strong><span>covered by our civic guides</span></div>
<div class="trust-stat"><strong>120+</strong><span>plain-language explainers</span></div>
<div class="trust-stat"><strong>Nonpartisan</strong><span>by design, in every issue</span></div>
</div>
</section>
<section class="mission" id="about" aria-labelledby="mission-title">
<div class="wrap mission-grid">
<div>
<span class="eyebrow">Our public-interest mission</span>
<h2 id="mission-title">Less legal fog.<br>More public voice.</h2>
</div>
<div class="mission-copy">
<p>Rules written in statute and decisions made in public meetings shape everyday life—from a renter’s rights to the quality of the air in a neighborhood. But the path from policy to personal impact is often difficult to see. Civic Ledger is an independent public-interest organization working to make that path clearer.</p>
<p>Our researchers and community partners translate complex legal and policy questions into reliable, accessible resources. We connect people with trusted legal help, explain how decisions are made, and give residents practical ways to make their voices heard.</p>
<div class="mission-note"><strong>Our standard:</strong> evidence-led analysis, transparent sourcing, and a clear distinction between legal information and legal advice. We don’t tell you what to think—we help you ask better questions.</div>
</div>
</div>
</section>
<section class="resources" id="research" aria-labelledby="resources-title">
<div class="wrap">
<div class="section-heading">
<div>
<span class="eyebrow">Start with what you need</span>
<h2 id="resources-title">Useful knowledge.<br>Real-world next steps.</h2>
<p class="section-intro">Whether you’re facing a legal question, following a bill, or preparing to vote, find clear information built to help you move forward.</p>
</div>
<a class="text-link" href="#tracker">Browse all resources <span class="arrow" aria-hidden="true">→</span></a>
</div>
<div class="resource-grid">
<article class="resource-card" id="legal-aid">
<div class="card-icon" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3v17M5 7h14M7 7l-4 7h8L7 7Zm10 0-4 7h8l-4-7ZM8 21h8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Legal help, without the guesswork</h3>
<p>Understand common civil legal issues and find local organizations offering free or low-cost support. Start with tenant rights, family resources, benefits, and consumer protection.</p>
<a class="text-link" href="#legal-aid-directory">Find legal aid <span class="arrow" aria-hidden="true">→</span></a>
</article>
<article class="resource-card">
<div class="card-icon" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 4.5h14v16H5zM8 8h8M8 12h8M8 16h5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Policy, explained</h3>
<p>Get beyond the headline with carefully sourced analysis of proposed legislation, agency rules, and public decisions. We explain what a measure says, who it affects, and what happens next.</p>
<a class="text-link" href="#tracker">Explore policy research <span class="arrow" aria-hidden="true">→</span></a>
</article>
<article class="resource-card">
<div class="card-icon" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 20V9l8-5 8 5v11M8 20v-7h8v7M3 20h18M8 9h.01M12 9h.01M16 9h.01" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Make your voice count</h3>
<p>Learn how a local hearing works, when to contact an elected official, and how to submit a useful public comment. Small, informed actions can shape a public record.</p>
<a class="text-link" href="#take-action">Find your next step <span class="arrow" aria-hidden="true">→</span></a>
</article>
</div>
</div>
</section>
<section class="tracker-section" id="tracker" aria-labelledby="tracker-title">
<div class="wrap">
<div class="tracker-top">
<div>
<span class="eyebrow">Follow the decisions that matter</span>
<h2 id="tracker-title">The public policy tracker</h2>
<p class="section-intro">A useful bill tracker should tell you more than a bill number. See what a proposal aims to do, where it stands, and what questions deserve attention.</p>
</div>
<a class="text-link" href="#research">How we evaluate legislation <span class="arrow" aria-hidden="true">→</span></a>
</div>
<div class="tracker-wrap">
<div class="tracker-tools">
<p><strong>Sample watchlist</strong> · Updated weekly during legislative sessions</p>
<label class="search-box">
<span class="sr-only" hidden>Search the policy tracker</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="10.8" cy="10.8" r="6.3" stroke="currentColor" stroke-width="1.7"/><path d="m15.5 15.5 4.2 4.2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
<input type="search" id="bill-search" placeholder="Search topic or bill…" aria-label="Search bills by topic or bill number">
</label>
</div>
<div class="bill-list" id="bill-list">
<article class="bill-row" data-search="housing stability act hb 214 renter eviction notice tenant housing">
<div class="bill-id">HB 214</div>
<div class="bill-title">Housing Stability and Fair Notice Act<small>Housing · Extends notice periods before certain eviction proceedings.</small></div>
<div><span class="status review">Committee review</span></div>
<a class="text-link" href="#research">Read brief <span class="arrow" aria-hidden="true">→</span></a>
</article>
<article class="bill-row" data-search="clean water access act sb 88 environment water public health">
<div class="bill-id">SB 88</div>
<div class="bill-title">Clean Water Access and Reporting Act<small>Environment · Establishes public reporting for water quality grants.</small></div>
<div><span class="status">Public hearing</span></div>
<a class="text-link" href="#research">Read brief <span class="arrow" aria-hidden="true">→</span></a>
</article>
<article class="bill-row" data-search="language access in public services hb 361 accessibility translation government">
<div class="bill-id">HB 361</div>
<div class="bill-title">Language Access in Public Services Act<small>Access to government · Sets translation standards for key services.</small></div>
<div><span class="status passed">Passed committee</span></div>
<a class="text-link" href="#research">Read brief <span class="arrow" aria-hidden="true">→</span></a>
</article>
<p class="empty-state" id="empty-state">No measures match that search. Try another topic or bill number.</p>
</div>
<div class="tracker-foot">
<p>Illustrative examples for demonstration. Legislative status and summaries should always be verified against official government sources; our briefs are informational, not legal advice.</p>
<a class="text-link" href="#contact">See our sourcing standards <span class="arrow" aria-hidden="true">→</span></a>
</div>
</div>
</div>
</section>
<section class="voter-section" id="voter-guide" aria-labelledby="voter-title">
<div class="voter-grid">
<div class="voter-photo-wrap">
<img class="voter-photo" src="https://picsum.photos/1000/800?grayscale&blur=1" alt="A civic volunteer helping a neighbor learn about local elections">
</div>
<div class="voter-content">
<span class="eyebrow">A more confident trip to the ballot box</span>
<h2 id="voter-title">Your vote. Your community. Your call.</h2>
<p>Reliable voter information should be easy to find and straightforward to use. Our nonpartisan voter guides walk through registration, important dates, ballot access, and the offices on your ballot—without telling you how to vote.</p>
<p>Election rules can vary by state and change from one cycle to the next. We link to official election offices so you can confirm deadlines and make a plan with confidence.</p>
<a class="btn btn-light" href="#voter-resources">Get your voter guide <span class="arrow" aria-hidden="true">↗</span></a>
</div>
</div>
</section>
<section class="action-section" id="take-action" aria-labelledby="action-title">
<div class="wrap action-grid">
<img class="action-photo" src="https://picsum.photos/850/700?grayscale&blur=1" alt="Community advocates meeting together to support a local public-interest campaign">
<div class="action-copy">
<span class="eyebrow">From informed to involved</span>
<h2 id="action-title">Make public decisions more public.</h2>
<p class="action-lead">A stronger civic culture isn’t built in a single day. It grows whenever people show up, ask for clarity, and bring their neighbors into the conversation.</p>
<p>We help people turn concern into constructive advocacy. Learn how to write a focused public comment, prepare for a town hall, or organize a respectful conversation with decision-makers. Our action guides include practical templates, participation tips, and context so your next step is grounded in facts.</p>
<p>Current community campaign: support accessible meeting notices and plain-language summaries for local public hearings. When the process is easier to understand, more people can take part.</p>
<a class="btn" href="#petition">Sign the public access petition <span class="arrow" aria-hidden="true">↗</span></a>
<div class="action-aside"><strong>Advocacy, thoughtfully.</strong><span>We disclose our policy positions, distinguish analysis from campaigning, and make space for civil disagreement.</span></div>
</div>
</div>
</section>
<section class="quote-section" aria-label="Community testimonial">
<div class="wrap quote-inner">
<blockquote>
<p>“For the first time, I understood what the proposed rule actually changed—and how to submit a comment that would be part of the record.”</p>
<footer><strong>Marisol R.</strong> · Community workshop participant</footer>
</blockquote>
<div class="quote-mark" aria-hidden="true">“</div>
</div>
</section>
<section class="closing-section" id="contact">
<div class="wrap closing-grid">
<div>
<span class="eyebrow">A few things people ask</span>
<h2>Clear answers build trust.</h2>
<p class="section-intro">We want our work to be useful, transparent, and easy to question. Here are a few basics about Civic Ledger.</p>
<div class="faq-list">
<details>
<summary>Does Civic Ledger provide legal advice?</summary>
<p>No. We provide general legal information and connect visitors with independent legal aid organizations. Our materials are not a substitute for advice from a qualified attorney familiar with your circumstances.</p>
</details>
<details>
<summary>Is your research affiliated with a political party?</summary>
<p>No. Civic Ledger is nonpartisan and independent. We evaluate public policy using published methods and reliable sources, and we do not endorse candidates or political parties.</p>
</details>
<details>
<summary>How do you keep your information current?</summary>
<p>Our team reviews key resources on a regular schedule and flags information that may change, such as deadlines, statutes, and bill status. We cite original sources so readers can verify important details.</p>
</details>
</div>
</div>
<aside class="newsletter" aria-labelledby="newsletter-title">
<span class="eyebrow">The Civic Brief</span>
<h3 id="newsletter-title">Understand what’s changing.</h3>
<p>A concise, thoughtful email on the policies, legal developments, and civic tools worth your attention. Delivered twice a month.</p>
<form id="newsletter-form">
<label class="sr-only" for="email-address" hidden>Email address</label>
<input type="email" id="email-address" name="email" placeholder="Your email address" autocomplete="email" required>
<button type="submit">Sign me up</button>
</form>
<p class="form-note" id="form-note" aria-live="polite"></p>
<p class="privacy-note">We respect your inbox. Unsubscribe any time. Read our <a href="#privacy">privacy policy</a>.</p>
</aside>
</div>
</section>
</main>
<footer class="site-footer" id="donate">
<div class="wrap">
<div class="footer-main">
<div class="footer-brand">
<a class="brand" href="#home">
<img src="https://placehold.co/96x96/176c66/ffffff?text=CL&font=montserrat" alt="">
<span>
<span class="brand-name">Civic Ledger</span>
<span class="brand-tagline">Understand the law. Shape what comes next.</span>
</span>
</a>
<p>Independent civic information for a more informed, more inclusive public life.</p>
<a class="btn btn-light" href="#donate">Support public-interest work <span class="arrow" aria-hidden="true">→</span></a>
</div>
<div class="footer-col">
<h3>Explore</h3>
<a href="#legal-aid">Legal aid resources</a>
<a href="#research">Policy research</a>
<a href="#tracker">Legislation tracker</a>
<a href="#voter-guide">Voter information</a>
</div>
<div class="footer-col">
<h3>Get involved</h3>
<a href="#take-action">Take action</a>
<a href="#petition">Sign the petition</a>
<a href="#donate">Donate</a>
<a href="#contact">Partner with us</a>
</div>
<div class="footer-col" id="legal-aid-directory">
<h3>Contact</h3>
<address>1200 K Street NW, Suite 410<br>Washington, DC 20005</address>
<a href="mailto:hello@civicledger.org">hello@civicledger.org</a>
<a href="tel:+12025550184">(202) 555-0184</a>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram ↗</a>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="current-year">2025</span> Civic Ledger. All rights reserved.</span>
<div class="footer-legal">
<a id="privacy" href="#privacy">Privacy</a>
<a href="#terms">Terms of use</a>
<a href="#accessibility">Accessibility</a>
<a href="#contact">Source notes</a>
</div>
</div>
</div>
</footer>
<script>
const menuButton = document.querySelector(".menu-toggle");
const navigation = document.querySelector("#primary-navigation");
menuButton.addEventListener("click", () => {
const isOpen = menuButton.getAttribute("aria-expanded") === "true";
menuButton.setAttribute("aria-expanded", String(!isOpen));
menuButton.setAttribute("aria-label", isOpen ? "Open navigation menu" : "Close navigation menu");
navigation.classList.toggle("is-open", !isOpen);
});
navigation.addEventListener("click", (event) => {
if (event.target.closest("a")) {
navigation.classList.remove("is-open");
menuButton.setAttribute("aria-expanded", "false");
menuButton.setAttribute("aria-label", "Open navigation menu");
}
});
const billSearch = document.querySelector("#bill-search");
const billRows = [...document.querySelectorAll(".bill-row")];
const emptyState = document.querySelector("#empty-state");
billSearch.addEventListener("input", () => {
const query = billSearch.value.trim().toLowerCase();
let visibleCount = 0;
billRows.forEach((row) => {
const matches = row.dataset.search.includes(query);
row.hidden = !matches;
if (matches) visibleCount++;
});
emptyState.style.display = visibleCount ? "none" : "block";
});
document.querySelector("#newsletter-form").addEventListener("submit", (event) => {
event.preventDefault();
const email = document.querySelector("#email-address");
if (!email.checkValidity()) {
email.reportValidity();
return;
}
document.querySelector("#form-note").textContent = "Thanks for joining us. Please check your inbox to confirm your subscription.";
email.value = "";
});
document.querySelector("#current-year").textContent = new Date().getFullYear();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:57:11.538Z",
"url": "https://benchmark.aimac.invalid/43f3c12969322e742aeb7ea7bda8d55de41a794b38ee39e6e99690328b02baf3.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Civic Ledger home\">",
"target": [
"a[aria-label=\"Civic Ledger 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=\"#home\" aria-label=\"Civic Ledger home\">",
"target": [
"a[aria-label=\"Civic Ledger home\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 7h16M4 12h16M4 17h16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n </svg>",
"target": [
"svg[width=\"22\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"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=\"#home\" aria-label=\"Civic Ledger home\">",
"target": [
"a[aria-label=\"Civic Ledger home\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Civic Ledger home\">",
"target": [
"a[aria-label=\"Civic Ledger 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=\"#home\" aria-label=\"Civic Ledger home\">",
"target": [
"a[aria-label=\"Civic Ledger home\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"email\" id=\"email-address\" name=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#email-address"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\">Sign me up</button>",
"target": [
"button[type=\"submit\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 id=\"hero-title\">The law belongs to <span>all of us.</span></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"mission-title\">Less legal fog.<br>More public voice.</h2>",
"target": [
"#mission-title"
]
},
{
"html": "<h2 id=\"resources-title\">Useful knowledge.<br>Real-world next steps.</h2>",
"target": [
"#resources-title"
]
},
{
"html": "<h3>Legal help, without the guesswork</h3>",
"target": [
"#legal-aid > h3"
]
},
{
"html": "<h3>Policy, explained</h3>",
"target": [
".resource-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Make your voice count</h3>",
"target": [
".resource-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"tracker-title\">The public policy tracker</h2>",
"target": [
"#tracker-title"
]
},
{
"html": "<h2 id=\"voter-title\">Your vote. Your community. Your call.</h2>",
"target": [
"#voter-title"
]
},
{
"html": "<h2 id=\"action-title\">Make public decisions more public.</h2>",
"target": [
"#action-title"
]
},
{
"html": "<h2>Clear answers build trust.</h2>",
"target": [
".closing-grid > div > h2"
]
},
{
"html": "<h3 id=\"newsletter-title\">Understand what\u2019s changing.</h3>",
"target": [
"#newsletter-title"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
".footer-col:nth-child(2) > h3"
]
},
{
"html": "<h3>Get involved</h3>",
"target": [
".footer-col:nth-child(3) > h3"
]
},
{
"html": "<h3>Contact</h3>",
"target": [
"#legal-aid-directory > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"home\">",
"target": [
"#home"
]
}
],
"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": "#d8e1dd",
"bgColor": "#142b3a",
"contrastRatio": 10.95,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.95"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<p>Independent. Nonpartisan. Built for the public good.</p>",
"target": [
".utility-inner > p: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-navigation",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"primary-navigation\" aria-label=\"Primary navigation\">",
"target": [
"#primary-navigation"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"search-box\">",
"target": [
".search-box"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"search\" id=\"bill-search\" placeholder=\"Search topic or bill\u2026\" aria-label=\"Search bills by topic or bill number\">",
"target": [
"#bill-search"
]
}
]
},
{
"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/96x96/176c66/ffffff?text=CL&font=montserrat\" alt=\"Civic Ledger logo\">",
"target": [
"img[alt=\"Civic Ledger logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": {
"implicitLabel": "Search bills by topic or bill number"
},
"relatedNodes": [
{
"html": "<label class=\"search-box\">",
"target": [
".search-box"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"search\" id=\"bill-search\" placeholder=\"Search topic or bill\u2026\" aria-label=\"Search bills by topic or bill number\">",
"target": [
"#bill-search"
]
}
]
},
{
"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 class=\"action-copy\">",
"target": [
".action-copy"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"btn\" href=\"#petition\">Sign the public access petition <span class=\"arrow\" aria-hidden=\"true\">\u2197</span></a>",
"target": [
".btn[href$=\"#petition\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#contact\">Questions? Talk with our team \u2192</a>",
"target": [
".utility-secondary > a[href$=\"#contact\"]"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/96x96/176c66/ffffff?text=CL&font=montserrat\" alt=\"Civic Ledger logo\">",
"target": [
"img[alt=\"Civic Ledger logo\"]"
]
}
]
},
{
"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>Does Civic Ledger provide legal advice?</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-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#contact\">Questions? Talk with our team \u2192</a>",
"target": [
".utility-secondary > a[href$=\"#contact\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"arrow\" aria-hidden=\"true\">\u2192</span>",
"target": [
".section-heading > .text-link[href$=\"#tracker\"] > .arrow[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": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\">",
"target": [
"header"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tagline\">Understand the law. Shape what comes next.</span>",
"target": [
"a[aria-label=\"Civic Ledger home\"] > span > .brand-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#f7f5ef",
"contrastRatio": 3.98,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"hero-note\">",
"target": [
".hero-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"photo-caption\">\n <span class=\"caption-mark\" aria-hidden=\"true\"></span>\n <strong>Democracy works better when everyone can take part.</strong>\n <span>Knowledge is a public resource. We make it useful.</span>\n </div>",
"target": [
".photo-caption"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Knowledge is a public resource. We make it useful.</span>",
"target": [
"span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"trust-heading\">Practical information, made for real life.</div>",
"target": [
".trust-heading"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>covered by our civic guides</span>",
"target": [
".trust-stat:nth-child(2) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>plain-language explainers</span>",
"target": [
".trust-stat:nth-child(3) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>by design, in every issue</span>",
"target": [
".trust-stat:nth-child(4) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#f7f5ef",
"contrastRatio": 3.98,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"tracker-tools\">",
"target": [
".tracker-tools"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p><strong>Sample watchlist</strong> \u00b7 Updated weekly during legislative sessions</p>",
"target": [
".tracker-tools > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#f7f5ef",
"contrastRatio": 3.98,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"tracker-tools\">",
"target": [
".tracker-tools"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 9.8pt (13.12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>Sample watchlist</strong>",
"target": [
"p > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 9.8pt (13.12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bill-list\" id=\"bill-list\">",
"target": [
"#bill-list"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Housing \u00b7 Extends notice periods before certain eviction proceedings.</small>",
"target": [
".bill-row:nth-child(1) > .bill-title > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bill-list\" id=\"bill-list\">",
"target": [
"#bill-list"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Environment \u00b7 Establishes public reporting for water quality grants.</small>",
"target": [
".bill-row:nth-child(2) > .bill-title > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bill-list\" id=\"bill-list\">",
"target": [
"#bill-list"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Access to government \u00b7 Sets translation standards for key services.</small>",
"target": [
".bill-row:nth-child(3) > .bill-title > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fbfaf6",
"contrastRatio": 4.16,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"tracker-foot\">",
"target": [
".tracker-foot"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #707b7f, background color: #fbfaf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Illustrative examples for demonstration. Legislative status and summaries should always be verified against official government sources; our briefs are informational, not legal advice.</p>",
"target": [
".tracker-foot > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #707b7f, background color: #fbfaf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#fffefa",
"contrastRatio": 4.3,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>We disclose our policy positions, distinguish analysis from campaigning, and make space for civil disagreement.</span>",
"target": [
".action-aside > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #707b7f, background color: #fffefa, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#f7f5ef",
"contrastRatio": 3.98,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
"aside"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"privacy-note\">We respect your inbox. Unsubscribe any time. Read our <a href=\"#privacy\">privacy policy</a>.</p>",
"target": [
".privacy-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#707b7f",
"bgColor": "#f7f5ef",
"contrastRatio": 3.98,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
"aside"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#privacy\">privacy policy</a>",
"target": [
".privacy-note > a[href$=\"#privacy\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #707b7f, background color: #f7f5ef, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5835
},
{
"y": 576,
"height": 5835
},
{
"y": 1152,
"height": 5835
},
{
"y": 1728,
"height": 5835
},
{
"y": 2304,
"height": 5835
},
{
"y": 2880,
"height": 5835
},
{
"y": 3456,
"height": 5835
},
{
"y": 4032,
"height": 5835
},
{
"y": 4608,
"height": 5835
},
{
"y": 5115,
"height": 5835
}
],
"scans": 11,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "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: "Legal Aid", "Research", "Donate".
- **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: "Voter Information", "Policy Analysis", "Public Interest".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "civic participation", "advocacy", "statute".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Sign Petition", "Take Action", "Join Advocacy".
- **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: "legislation tracker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "legal resources", "policy updates", "research reports".
- **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.