SpaceXAI Grok 4.7 – Law Government and Politics
via xAI · Generated
- AIMAC Debt 3.85
- Cost $0.07
- Total Violations 7
- HTML Size 34 KB
- Em Dashes 4
Screenshot
View Live Page
Accessibility Issues Found
7 Serious
-
color-contrast serious 7 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p class="eyebrow">Voter information</p>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meridian Public Counsel | Nonpartisan civic law and voter guidance</title>
<meta name="description" content="Meridian Public Counsel offers nonpartisan voter information, public-law explainers, and civic engagement resources for residents, advocates, and local institutions.">
<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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--ink: #142033;
--navy: #1b2d4a;
--navy-deep: #0e1828;
--copper: #b pen;
--copper: #b pen;
--copper: #b pen;
--gold: #c4a15a;
--gold-deep: #9a7a38;
--cream: #f6f1e7;
--paper: #fffdf9;
--mist: #e7e2d6;
--slate: #5c6778;
--line: #d8d1c3;
--ok: #1f6b4a;
--shadow: 0 18px 40px rgba(14, 24, 40, 0.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--cream);
font-family: "Source Sans 3", "Segoe UI", sans-serif;
font-size: 18px;
line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow {
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 700;
color: var(--gold-deep);
margin: 0 0 0.6rem;
}
h1, h2, h3, h4 { font-family: "Libre Baskerville", Georgia, serif; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 0.8rem; }
h3 { font-size: 1.35rem; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
border: 0;
cursor: pointer;
text-decoration: none;
padding: 0.85rem 1.25rem;
border-radius: 4px;
font-weight: 700;
letter-spacing: 0.01em;
font-family: inherit;
font-size: 1rem;
}
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: #d4b56d; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #243a5e; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45); }
.btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
header {
background: var(--navy-deep);
color: #fff;
position: sticky;
top: 0;
z-index: 20;
border-bottom: 3px solid var(--gold);
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0.85rem 0 0.7rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: #fff; }
.brand img { width: 56px; height: 56px; border-radius: 4px; }
.brand strong { display: block; font-family: "Libre Baskerville", serif; font-size: 1.2rem; }
.brand span { display: block; color: #d7c7a0; font-size: 0.86rem; max-width: 340px; line-height: 1.3; }
nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
nav a { color: #f4efe4; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
nav a:hover { color: var(--gold); }
.menu-btn { display: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 0.45rem 0.7rem; border-radius: 4px; }
.hero {
background:
linear-gradient(100deg, rgba(14,24,40,0.88) 0%, rgba(14,24,40,0.55) 55%, rgba(14,24,40,0.25) 100%),
url("https://picsum.photos/1600/900?grayscale") center/cover no-repeat;
color: #fff;
padding: 5.5rem 0 4.5rem;
}
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 2rem; align-items: end; }
.hero p.lead { font-size: 1.2rem; max-width: 640px; color: #efe8da; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-card {
background: rgba(255,253,249,0.96);
color: var(--ink);
padding: 1.3rem 1.3rem 1.1rem;
border-radius: 8px;
box-shadow: var(--shadow);
}
.hero-card strong { font-family: "Libre Baskerville", serif; display: block; margin-bottom: 0.4rem; }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--navy); color: #fff; }
.stat { padding: 1.3rem 1rem; border-right: 1px solid rgba(255,255,255,0.12); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: "Libre Baskerville", serif; font-size: 1.6rem; color: var(--gold); }
.stat span { font-size: 0.92rem; color: #e6dfd1; }
section { padding: 4.5rem 0; }
.section-head { max-width: 740px; margin-bottom: 1.8rem; }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.4rem; align-items: center; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.panel img { width: 100%; height: 320px; object-fit: cover; }
.panel-body, .card, .finder, .faq, .side-note { padding: 1.3rem 1.35rem; }
.checklist { list-style: none; padding: 0; margin: 0.6rem 0 1.1rem; }
.checklist li { padding: 0.45rem 0 0.45rem 1.5rem; position: relative; }
.checklist li:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); position: absolute; left: 0; top: 0.85rem; }
.grid-3, .grid-2 { display: grid; gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1.4fr 0.8fr; }
.card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
}
.card img.cover { width: calc(100% + 2.7rem); margin: -1.3rem -1.35rem 1rem; height: 170px; object-fit: cover; }
.tag { display: inline-block; background: #efe6d4; color: var(--navy); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 3px; }
.analysis { background: #efe8da; }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
.side-note { background: var(--navy-deep); color: #f4efe6; border-radius: 10px; margin-bottom: 1rem; }
.side-note h3, .side-note a { color: #fff; }
.side-note a { font-weight: 700; }
.win { border-bottom: 1px solid rgba(255,255,255,0.12); padding: 0.7rem 0; }
.win:last-child { border-bottom: 0; }
.finder { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.7rem; margin: 1rem 0; }
label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.3rem; }
input, select, textarea {
width: 100%;
border: 1px solid #cfc6b6;
background: #fff;
border-radius: 4px;
padding: 0.7rem 0.75rem;
font: inherit;
color: var(--ink);
}
.result { border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 1rem; }
.rep {
display: grid;
grid-template-columns: 72px 1fr;
gap: 0.9rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--mist);
}
.rep img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.muted { color: var(--slate); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
blockquote {
margin: 0;
background: var(--paper);
border-top: 4px solid var(--gold);
padding: 1.2rem;
border-radius: 0 8px 8px 8px;
box-shadow: var(--shadow);
}
blockquote p { font-family: "Libre Baskerville", serif; font-size: 1.02rem; }
.person { display: flex; gap: 0.7rem; align-items: center; margin-top: 1rem; }
.person img { width: 46px; height: 46px; border-radius: 50%; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 0.7rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 0.7rem 0 0.2rem; }
.events { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.2rem; }
.event { display: grid; grid-template-columns: 88px 1fr; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.datebox { background: var(--navy); color: #fff; text-align: center; border-radius: 6px; padding: 0.55rem 0.3rem; }
.datebox b { display: block; font-size: 1.3rem; font-family: "Libre Baskerville", serif; }
.donate-band {
background: var(--navy);
color: #fff;
border-radius: 14px;
padding: 2rem;
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 1.5rem;
align-items: center;
}
.amounts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0 1rem; }
.amounts button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; padding: 0.45rem 0.7rem; cursor: pointer; font-weight: 700; }
.amounts button.active, .amounts button:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
footer { background: var(--navy-deep); color: #d9d2c4; padding: 3rem 0 1.2rem; }
.footgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.4rem; }
footer a { color: #efe8da; text-decoration: none; }
footer h4 { color: #fff; margin-bottom: 0.6rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin: 0.35rem 0; }
.legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 1.6rem; padding-top: 0.9rem; font-size: 0.9rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.note { font-size: 0.92rem; color: var(--slate); }
@media (max-width: 900px) {
.hero-grid, .split, .grid-3, .grid-2, .layout, .quotes, .events, .donate-band, .footgrid, .form-row, .statrow { grid-template-columns: 1fr; }
.stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.menu-btn { display: block; }
nav { display: none; width: 100%; padding-bottom: 0.8rem; }
nav.open { display: flex; flex-direction: column; }
.topbar { flex-wrap: wrap; }
}
</style>
</head>
<body>
<header>
<div class="wrap">
<div class="topbar">
<a class="brand" href="#top">
<img src="https://placehold.co/112x112/1b2d4a/c4a15a?text=MPC&font=playfair+display" alt="Meridian Public Counsel logo">
<div>
<strong>Meridian Public Counsel</strong>
<span>Nonpartisan guidance for civic life, public law, and democratic participation.</span>
</div>
</a>
<button class="menu-btn" aria-expanded="false" aria-controls="primary-nav">Menu</button>
<nav id="primary-nav" aria-label="Primary">
<a href="#voter">Voter Information</a>
<a href="#legal">Legal Resources</a>
<a href="#analysis">Political Analysis</a>
<a href="#finder">Find Your Office</a>
<a href="#volunteer">Volunteer</a>
<a href="#events">Events</a>
<a href="#donate">Donate</a>
</nav>
</div>
</div>
</header>
<main id="top">
<section class="hero">
<div class="wrap hero-grid">
<div>
<p class="eyebrow">Law, government, and civic engagement</p>
<h1>Public power works better when the public can read the fine print.</h1>
<p class="lead">Meridian Public Counsel helps residents, neighborhood groups, and local institutions understand elections, administrative procedure, and the practical limits of government authority. We publish plain-language briefings, host nonpartisan briefings, and train volunteers who make public process usable.</p>
<div class="hero-actions">
<a class="btn btn-gold" href="#finder">Find Resources</a>
<a class="btn btn-ghost" href="#donate">Donate</a>
<a class="btn btn-ghost" href="#subscribe">Subscribe</a>
</div>
</div>
<aside class="hero-card">
<strong>This week at the counsel desk</strong>
<p>Registration deadlines in three partner counties close Friday. Our voter desk is answering questions about provisional ballots, ID rules, and how to cure a rejected mail ballot before certification.</p>
<p class="note">Nonpartisan. No candidate endorsements. No paid lobbying for private clients.</p>
<a class="btn btn-navy" href="#voter">Review voter deadlines</a>
</aside>
</div>
</section>
<div class="statrow">
<div class="wrap" style="display:contents">
<div class="stat"><b>48</b><span>county election guides updated this cycle</span></div>
<div class="stat"><b>12k</b><span>residents reached through clinics and briefings</span></div>
<div class="stat"><b>86</b><span>public-comment templates used by civic groups</span></div>
<div class="stat"><b>0</b><span>candidate endorsements, by charter</span></div>
</div>
</div>
<section id="voter">
<div class="wrap split">
<div>
<p class="eyebrow">Voter information</p>
<h2>Know the rules before you reach the polling place.</h2>
<p>Election administration is local, technical, and easy to misread. A statewide statute may set the outer boundary, while a county board decides early-vote hours, ballot-drop locations, and the exact cure process for a signature mismatch. Meridian’s voter desk translates those layers into county-specific checklists so a first-time voter and a seasoned poll worker are working from the same facts.</p>
<p>We track registration windows, residency proofs, accessibility accommodations, and the distinction between a provisional ballot and a regular ballot. When a jurisdiction changes its polling-place map or adopts a new voter-ID interpretation, we publish a dated note rather than letting last cycle’s flyer circulate. Accuracy is a civic service; rumor is not.</p>
<ul class="checklist">
<li>Confirm registration status and party affiliation rules before the cutoff, not on election morning.</li>
<li>Understand mail-ballot deadlines: postmark, receipt, and cure are three different clocks.</li>
<li>Request language assistance or curbside voting in advance when your county requires notice.</li>
<li>Report barriers—long lines, missing materials, intimidation—through official channels we list by county.</li>
</ul>
<a class="btn btn-navy" href="#finder">Find Resources</a>
</div>
<figure class="panel">
<img src="https://picsum.photos/900/640" alt="Residents reviewing printed civic materials at a community table">
<figcaption class="panel-body muted">Field briefings pair a local election clerk’s published calendar with Meridian’s plain-language annotations.</figcaption>
</figure>
</div>
</section>
<section id="legal" style="background:#fffdf9; border-top:1px solid var(--line); border-bottom:1px solid var(--line);">
<div class="wrap">
<div class="section-head">
<p class="eyebrow">Legal resources</p>
<h2>Public law, explained without the mystique.</h2>
<p>Government decisions are rarely a single dramatic vote. They move through notice, comment, hearing, findings, and sometimes litigation. Our legal desk does not represent private parties in court. We explain due process, open-meetings rules, public-records practice, and the difference between a regulation, an ordinance, and an executive directive so communities can participate before a record is closed.</p>
</div>
<div class="grid-3">
<article class="card">
<img class="cover" src="https://picsum.photos/700/420?grayscale" alt="Courthouse steps in soft daylight">
<span class="tag">Due process</span>
<h3>Hearings that actually hear you</h3>
<p>Administrative hearings follow their own evidence rules. We outline how to request a continuance, what counts as a timely objection, and why a decision that skips required notice can be vulnerable on appeal. The goal is participation that builds a record, not a speech that disappears from the minutes.</p>
<a href="#analysis">Read the procedure note</a>
</article>
<article class="card">
<img class="cover" src="https://picsum.photos/701/420" alt="Stacks of public documents on a oak table">
<span class="tag">Public records</span>
<h3>Ask for the file, not the rumor</h3>
<p>A well-drafted records request names the office, the date range, and the record type. We show how exemptions for deliberative material, personnel files, and ongoing investigations usually work, and when a partial release with a privilege log is the realistic outcome rather than a full denial.</p>
<a href="#subscribe">Subscribe for request templates</a>
</article>
<article class="card">
<img class="cover" src="https://picsum.photos/702/420?blur=1" alt="City hall corridor">
<span class="tag">Open government</span>
<h3>When a meeting must be public</h3>
<p>Closed sessions are narrow. Our primers cover agenda posting, remote participation, and what a resident can do if a body appears to decide policy off the record. We also explain lobbying disclosure so neighbors can see who is paid to shape a zoning text or procurement rule.</p>
<a href="#events">Join a records clinic</a>
</article>
</div>
</div>
</section>
<section id="analysis" class="analysis">
<div class="wrap layout">
<div>
<p class="eyebrow">Political analysis</p>
<h2>Institutional analysis, not campaign theater.</h2>
<p>Meridian studies how power moves through institutions: committee jurisdiction, appropriations riders, administrative guidance, and the quiet work of lobbying. We do not score candidates or predict horse races. We map who must act, what statute constrains them, and which procedural lever is actually available to the public this quarter.</p>
<p>A recent briefing on municipal broadband examined franchise authority, pole-attachment disputes, and the litigation risk if a council adopts a buildout ordinance without a fiscal note. Another memo traced how a state ethics commission’s advisory opinions interact with local gift rules—useful for school boards that receive vendor hospitality and are unsure where courtesy ends and a reportable benefit begins.</p>
<p>Readers get context, citations to primary sources, and a short “what a resident can do” box. Where the law is unsettled, we say so. Political analysis that pretends certainty is just another form of advocacy, and our charter keeps those lanes separate.</p>
<div class="grid-3" style="margin-top:1.2rem">
<article class="card">
<h3>Committee map</h3>
<p class="muted">Which standing committee holds the bill, who schedules the hearing, and what amendment deadline actually matters.</p>
</article>
<article class="card">
<h3>Rulemaking watch</h3>
<p class="muted">Proposed rules, comment windows, and whether an agency is using guidance to avoid notice-and-comment.</p>
</article>
<article class="card">
<h3>Litigation lens</h3>
<p class="muted">When a dispute is likely to move from council chambers to court, and what standing usually requires.</p>
</article>
</div>
</div>
<aside>
<div class="side-note">
<h3>Advocacy wins</h3>
<div class="win"><strong>Notice restored.</strong><p>A transit board republished a fare hearing after our memo showed the original posting missed the statutory window.</p></div>
<div class="win"><strong>Records released.</strong><p>A housing authority produced redacted inspection logs after a clinic helped tenants narrow an overbroad request.</p></div>
<div class="win"><strong>Comment counted.</strong><p>Fourteen neighborhood groups filed coordinated, on-time comments that the planning staff cited in findings.</p></div>
</div>
<div class="card">
<h3>Trending issues</h3>
<p>Ballot-cure timelines, school-board executive sessions, and disclosure rules for paid lobbying around data-center zoning.</p>
<a class="btn btn-outline" href="#subscribe">Subscribe</a>
</div>
</aside>
</div>
</section>
<section id="finder">
<div class="wrap">
<div class="section-head">
<p class="eyebrow">Representative finder</p>
<h2>Match a civic question to the office that can act on it.</h2>
<p>Many residents write the most famous official when a county clerk, hearing examiner, or legislative aide is the person who can actually move the file. Use this desk tool to see sample contacts for common issues. It is an educational directory of fictional partner offices used in our training scenarios—not a live government database.</p>
</div>
<div class="finder">
<form id="rep-form">
<div class="form-row">
<div>
<label for="region">Region</label>
<select id="region" name="region">
<option value="harbor">Harbor County</option>
<option value="ridge">Ridge District</option>
<option value="capital">Capital Ward</option>
</select>
</div>
<div>
<label for="issue">Issue</label>
<select id="issue" name="issue">
<option value="voting">Voting and ballots</option>
<option value="records">Public records</option>
<option value="land">Land use and hearings</option>
<option value="ethics">Ethics and lobbying</option>
</select>
</div>
<div style="align-self:end">
<button class="btn btn-navy" type="submit">Find Resources</button>
</div>
</div>
</form>
<div class="result" id="rep-result" aria-live="polite"></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="section-head">
<p class="eyebrow">From the field</p>
<h2>People who used the process, not a shortcut.</h2>
</div>
<div class="quotes">
<blockquote>
<p>“The clinic did not tell us who to support. It showed our tenant association how to build a record before the housing board voted on inspection staffing.”</p>
<div class="person">
<img src="https://i.pravatar.cc/96?u=amira-sol" alt="">
<div><strong>Amira Solano</strong><br><span class="muted">Tenant association secretary</span></div>
</div>
</blockquote>
<blockquote>
<p>“I thought a rejected mail ballot was final. Meridian’s cure checklist got my mother’s ballot counted, and the clerk’s office confirmed the steps matched their own notice.”</p>
<div class="person">
<img src="https://i.pravatar.cc/96?u=jonah-reed" alt="">
<div><strong>Jonah Reed</strong><br><span class="muted">First-time caregiver voter</span></div>
</div>
</blockquote>
<blockquote>
<p>“Our small-city attorney used their open-meetings primer to retrain the council. Fewer closed sessions, cleaner minutes, less risk of litigation later.”</p>
<div class="person">
<img src="https://i.pravatar.cc/96?u=priya-nunez" alt="">
<div><strong>Priya Nuñez</strong><br><span class="muted">Municipal clerk</span></div>
</div>
</blockquote>
</div>
</div>
</section>
<section id="events" style="background:#fffdf9; border-top:1px solid var(--line);">
<div class="wrap events">
<div>
<p class="eyebrow">Events</p>
<h2>Briefings, clinics, and hearing prep.</h2>
<p>Every session is nonpartisan and open to residents, students, and public employees attending in a personal capacity. Materials cite statutes and agency guidance. We do not host candidate forums or fundraising for campaigns.</p>
<article class="event">
<div class="datebox"><b>12</b>May</div>
<div>
<h3>Mail-ballot cure workshop</h3>
<p class="muted">Harbor County library, 6:00 p.m. Bring a sample rejection notice. Volunteers will walk through signatures, ID copies, and the deadline to return a cure form.</p>
</div>
</article>
<article class="event">
<div class="datebox"><b>21</b>May</div>
<div>
<h3>Public comment lab</h3>
<p class="muted">Ridge District hall annex. Practice a three-minute statement that addresses the criteria in the staff report rather than repeating a slogan.</p>
</div>
</article>
<article class="event">
<div class="datebox"><b>04</b>Jun</div>
<div>
<h3>Lobbying disclosure breakfast</h3>
<p class="muted">For neighborhood chairs and local reporters. How to read a disclosure filing and what it does not reveal.</p>
</div>
</article>
</div>
<div class="card" id="volunteer">
<img class="cover" src="https://picsum.photos/640/400" alt="Volunteers assembling civic information packets">
<h3>Volunteer with the counsel desk</h3>
<p>We need bilingual greeters, law students comfortable with administrative procedure, and neighbors who can staff a registration table without steering voters toward a party. Training covers neutrality, privacy, and when to escalate a question to counsel.</p>
<p>Shifts are three hours. You will never be asked to collect campaign data or to argue a partisan position. If a visitor wants candidate advice, we point them to official voter guides and stop there.</p>
<a class="btn btn-gold" href="#subscribe">Volunteer</a>
</div>
</div>
</section>
<section id="faq">
<div class="wrap" style="display:grid; grid-template-columns: 0.8fr 1.2fr; gap:2rem;">
<div>
<p class="eyebrow">Questions</p>
<h2>Straight answers about our role.</h2>
<p>Meridian is an independent civic institute. We are not a law firm, a political party, or a government office. Educational materials are not legal advice for your specific case. If you need representation in litigation, we can suggest how to find a licensed attorney or a legal-aid provider.</p>
</div>
<div class="faq">
<details open>
<summary>Do you endorse candidates or ballot measures?</summary>
<p>No. Our charter prohibits endorsements, independent expenditures, and coordinated campaign activity. Analysis may describe the legal effect of a measure without recommending a vote.</p>
</details>
<details>
<summary>Can you represent me in court?</summary>
<p>No. We explain procedure, including how due process and exhaustion of administrative remedies often work, but we do not enter appearances or draft filings for private litigation.</p>
</details>
<details>
<summary>Is lobbying something you do?</summary>
<p>Staff do not lobby for hire. We teach residents how lobbying disclosure works and how to distinguish a citizen comment from paid advocacy. If we ever testify, it is in our own name, on process reforms, and disclosed on this site.</p>
</details>
<details>
<summary>How do you handle personal information?</summary>
<p>Volunteer signups and newsletter addresses are used only for Meridian communications. We do not sell lists, and we do not share them with campaigns. See our privacy note in the footer.</p>
</details>
</div>
</div>
</section>
<section id="donate">
<div class="wrap">
<div class="donate-band">
<div>
<p class="eyebrow" style="color:#e6d3a4">Support the desk</p>
<h2>Fund explanations that stay free at the library table.</h2>
<p>Dues from members, foundation grants, and small donations keep voter guides and records clinics free of candidate money. A gift supports translation, printing, and the staff time required to check a statute twice before it goes on a flyer.</p>
<div class="amounts" id="amounts">
<button type="button" data-amt="25">$25</button>
<button type="button" data-amt="50" class="active">$50</button>
<button type="button" data-amt="100">$100</button>
<button type="button" data-amt="250">$250</button>
</div>
<a class="btn btn-gold" id="donate-btn" href="#subscribe">Donate $50</a>
</div>
<form id="subscribe">
<label for="email">Subscribe to the civic brief</label>
<input id="email" type="email" placeholder="you@example.org" required>
<label for="interest" style="margin-top:0.7rem">I want updates about</label>
<select id="interest">
<option>Voter deadlines</option>
<option>Legal resource clinics</option>
<option>Political analysis memos</option>
<option>Volunteer shifts</option>
</select>
<button class="btn btn-gold" style="margin-top:0.8rem" type="submit">Subscribe</button>
<p id="sub-msg" class="note" style="color:#e6dfd1"></p>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap footgrid">
<div>
<h4>Meridian Public Counsel</h4>
<p>418 Assembly Row, Suite 200<br>Harbor City, HC 04118</p>
<p>Desk: (207) 555-0148<br>records@meridianpublic.example</p>
</div>
<div>
<h4>Explore</h4>
<ul>
<li><a href="#voter">Voter Information</a></li>
<li><a href="#legal">Legal Resources</a></li>
<li><a href="#analysis">Political Analysis</a></li>
<li><a href="#volunteer">Volunteer</a></li>
</ul>
</div>
<div>
<h4>Institute</h4>
<ul>
<li><a href="#events">Events</a></li>
<li><a href="#donate">Donate</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#subscribe">Subscribe</a></li>
</ul>
</div>
<div>
<h4>Connect</h4>
<ul>
<li><a href="#top">Civic Brief newsletter</a></li>
<li><a href="#top">Public Square notes</a></li>
<li><a href="#top">Hearing Room audio</a></li>
<li><a href="#privacy">Privacy</a></li>
<li><a href="#terms">Terms</a></li>
</ul>
</div>
</div>
<div class="wrap legal">
<span id="privacy">© 2026 Meridian Public Counsel. Educational materials are not legal advice.</span>
<span id="terms">Privacy · Terms · Nonpartisan charter · Accessibility</span>
</div>
</footer>
<script>
const directory = {
harbor: {
voting: { name: "Elena Voss", role: "Harbor County Elections Supervisor", note: "Handles registration, provisional ballots, and mail-ballot cure. Ask for the dated notice, not a verbal exception.", avatar: "elena-voss" },
records: { name: "Marcus Adeyemi", role: "County Records Officer", note: "Accepts public-records requests for clerk, sheriff civil process, and election administration files.", avatar: "marcus-adeyemi" },
land: { name: "Helen Cho", role: "Planning Hearing Examiner", note: "Reviews zoning appeals. Comments must address the criteria in the staff report to enter the findings.", avatar: "helen-cho" },
ethics: { name: "Owen Briggs", role: "County Ethics Clerk", note: "Files gift and lobbying disclosures for county officials and paid advocates appearing before boards.", avatar: "owen-briggs" }
},
ridge: {
voting: { name: "Sofia Rahman", role: "Ridge District Polling Coordinator", note: "Manages early-vote sites and accessibility requests. Curbside voting needs a same-day call to the site lead.", avatar: "sofia-rahman" },
records: { name: "Jonah Pike", role: "District Public Information Officer", note: "Coordinates records across school and public-works departments. Narrow the date range to avoid a fee estimate.", avatar: "jonah-pike" },
land: { name: "Rita Lang", role: "Board of Adjustment Clerk", note: "Variance hearings require notice to abutters. Late exhibits may be excluded if opponents lack time to respond.", avatar: "rita-lang" },
ethics: { name: "Chris Daley", role: "Ethics Commission Analyst", note: "Issues advisory opinions on gifts, recusal, and whether a consultant’s outreach counts as lobbying.", avatar: "chris-daley" }
},
capital: {
voting: { name: "Amelia Grant", role: "Capital Ward Election Liaison", note: "Tracks ward polling places and language assistance. ID questions should be checked against the current clerk bulletin.", avatar: "amelia-grant" },
records: { name: "David Okonkwo", role: "City Clerk Records Desk", note: "Council packets, minutes, and closed-session logs. Some drafts remain deliberative until a final action.", avatar: "david-okonkwo" },
land: { name: "Nora Feldman", role: "Zoning Administrator", note: "Interprets the ordinance before a project reaches council. A written determination can be appealed on a short clock.", avatar: "nora-feldman" },
ethics: { name: "Luis Ortega", role: "Legislative Ethics Counsel", note: "Advises on recusal and lobbying registration for people paid to influence ordinances.", avatar: "luis-ortega" }
}
};
function renderRep() {
const region = document.getElementById("region").value;
const issue = document.getElementById("issue").value;
const person = directory[region][issue];
document.getElementById("rep-result").innerHTML =
'<div class="rep"><img src="https://i.pravatar.cc/144?u=' + person.avatar + '" alt=""><div><strong>' + person.name + '</strong><div class="muted">' + person.role + '</div><p>' + person.note + '</p><p class="note">Training contact only. For a live matter, use your jurisdiction’s official website and confirm deadlines in writing.</p></div></div>';
}
document.getElementById("rep-form").addEventListener("submit", function (e) {
e.preventDefault();
renderRep();
});
renderRep();
document.querySelectorAll("#amounts button").forEach(function (btn) {
btn.addEventListener("click", function () {
document.querySelectorAll("#amounts button").forEach(function (b) { b.classList.remove("active"); });
btn.classList.add("active");
document.getElementById("donate-btn").textContent = "Donate $" + btn.dataset.amt;
});
});
document.getElementById("subscribe").addEventListener("submit", function (e) {
e.preventDefault();
const email = document.getElementById("email").value;
document.getElementById("sub-msg").textContent = "You are on the list, " + email + ". The next civic brief goes out Tuesday.";
e.target.reset();
});
const menuBtn = document.querySelector(".menu-btn");
const nav = document.getElementById("primary-nav");
menuBtn.addEventListener("click", function () {
const open = nav.classList.toggle("open");
menuBtn.setAttribute("aria-expanded", open ? "true" : "false");
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:04:16.457Z",
"url": "https://benchmark.aimac.invalid/898abed2a178676bb97d287431c77e30de81622002abf065ea054d87f8fa545e.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-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-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": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<nav id=\"primary-nav\" aria-label=\"Primary\">",
"target": [
"#primary-nav"
]
}
]
},
{
"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": "<nav id=\"primary-nav\" aria-label=\"Primary\">",
"target": [
"#primary-nav"
]
}
]
},
{
"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-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": "<nav id=\"primary-nav\" aria-label=\"Primary\">",
"target": [
"#primary-nav"
]
}
]
},
{
"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": "<nav id=\"primary-nav\" aria-label=\"Primary\">",
"target": [
"#primary-nav"
]
}
]
},
{
"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": "<nav id=\"primary-nav\" aria-label=\"Primary\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div class=\"wrap\" style=\"display:contents\">",
"target": [
".statrow > .wrap"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn btn-navy\" type=\"submit\">Find Resources</button>",
"target": [
".btn-navy[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>Public power works better when the public can read the fine print.</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Know the rules before you reach the polling place.</h2>",
"target": [
".split > div > h2"
]
},
{
"html": "<h2>Public law, explained without the mystique.</h2>",
"target": [
"#legal > .wrap > .section-head > h2"
]
},
{
"html": "<h3>Hearings that actually hear you</h3>",
"target": [
".wrap > .grid-3 > .card:nth-child(1) > h3"
]
},
{
"html": "<h3>Ask for the file, not the rumor</h3>",
"target": [
".wrap > .grid-3 > .card:nth-child(2) > h3"
]
},
{
"html": "<h3>When a meeting must be public</h3>",
"target": [
".wrap > .grid-3 > .card:nth-child(3) > h3"
]
},
{
"html": "<h2>Institutional analysis, not campaign theater.</h2>",
"target": [
".layout > div > h2"
]
},
{
"html": "<h3>Committee map</h3>",
"target": [
".layout > div > .grid-3 > .card:nth-child(1) > h3"
]
},
{
"html": "<h3>Rulemaking watch</h3>",
"target": [
".layout > div > .grid-3 > .card:nth-child(2) > h3"
]
},
{
"html": "<h3>Litigation lens</h3>",
"target": [
".layout > div > .grid-3 > .card:nth-child(3) > h3"
]
},
{
"html": "<h3>Advocacy wins</h3>",
"target": [
".side-note > h3"
]
},
{
"html": "<h3>Trending issues</h3>",
"target": [
"aside > .card > h3"
]
},
{
"html": "<h2>Match a civic question to the office that can act on it.</h2>",
"target": [
"#finder > .wrap > .section-head > h2"
]
},
{
"html": "<h2>People who used the process, not a shortcut.</h2>",
"target": [
"section:nth-child(7) > .wrap > .section-head > h2"
]
},
{
"html": "<h2>Briefings, clinics, and hearing prep.</h2>",
"target": [
".events > div:nth-child(1) > h2"
]
},
{
"html": "<h3>Mail-ballot cure workshop</h3>",
"target": [
".event:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Public comment lab</h3>",
"target": [
".event:nth-child(5) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Lobbying disclosure breakfast</h3>",
"target": [
".event:nth-child(6) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Volunteer with the counsel desk</h3>",
"target": [
"#volunteer > h3"
]
},
{
"html": "<h2>Straight answers about our role.</h2>",
"target": [
"#faq > .wrap > div:nth-child(1) > h2"
]
},
{
"html": "<h2>Fund explanations that stay free at the library table.</h2>",
"target": [
".donate-band > div > h2"
]
},
{
"html": "<h4>Meridian Public Counsel</h4>",
"target": [
"div:nth-child(1) > h4"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
"div:nth-child(2) > h4"
]
},
{
"html": "<h4>Institute</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4>Connect</h4>",
"target": [
"div:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"top\">",
"target": [
"#top"
]
}
],
"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": "#ffffff",
"bgColor": "#0e1828",
"contrastRatio": 17.79,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 17.79"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<strong>Meridian Public Counsel</strong>",
"target": [
".brand > div > strong"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav id=\"primary-nav\" aria-label=\"Primary\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"region\">Region</label>",
"target": [
"label[for=\"region\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"region\" name=\"region\">\n <option value=\"harbor\">Harbor County</option>\n <option value=\"ridge\">Ridge District</option>\n <option value=\"capital\">Capital Ward</option>\n </select>",
"target": [
"#region"
]
}
]
},
{
"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/112x112/1b2d4a/c4a15a?text=MPC&font=playfair+display\" alt=\"Meridian Public Counsel logo\">",
"target": [
"img[alt=\"Meridian Public Counsel 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": "explicit-label",
"data": {
"explicitLabel": "Subscribe to the civic brief"
},
"relatedNodes": [
{
"html": "<label for=\"email\">Subscribe to the civic brief</label>",
"target": [
"label[for=\"email\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"email\" type=\"email\" placeholder=\"you@example.org\" required=\"\">",
"target": [
"#email"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<aside class=\"hero-card\">",
"target": [
".hero-card"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"btn btn-navy\" href=\"#voter\">Review voter deadlines</a>",
"target": [
".btn-navy.btn[href$=\"#voter\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\">",
"target": [
".brand"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"checklist\">",
"target": [
".checklist"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li>Confirm registration status and party affiliation rules before the cutoff, not on election morning.</li>",
"target": [
".checklist > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/112x112/1b2d4a/c4a15a?text=MPC&font=playfair+display\" alt=\"Meridian Public Counsel logo\">",
"target": [
"img[alt=\"Meridian Public Counsel logo\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Region"
},
"relatedNodes": [
{
"html": "<label for=\"region\">Region</label>",
"target": [
"label[for=\"region\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"region\" name=\"region\">\n <option value=\"harbor\">Harbor County</option>\n <option value=\"ridge\">Ridge District</option>\n <option value=\"capital\">Capital Ward</option>\n </select>",
"target": [
"#region"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>Do you endorse candidates or ballot measures?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 409.6,
"height": 67.5
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (409.6px by 67.5px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\">",
"target": [
".brand"
]
}
]
}
],
"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": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Law, government, and civic engagement</p>",
"target": [
".hero-grid > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"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": "#9a7a38",
"bgColor": "#f6f1e7",
"contrastRatio": 3.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Voter information</p>",
"target": [
".split > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9a7a38",
"bgColor": "#fffdf9",
"contrastRatio": 3.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"legal\" style=\"background:#fffdf9; border-top:1px solid var(--line); border-bottom:1px solid var(--line);\">",
"target": [
"#legal"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #9a7a38, background color: #fffdf9, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Legal resources</p>",
"target": [
"#legal > .wrap > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #9a7a38, background color: #fffdf9, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9a7a38",
"bgColor": "#efe8da",
"contrastRatio": 3.3,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"analysis\" class=\"analysis\">",
"target": [
"#analysis"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.3 (foreground color: #9a7a38, background color: #efe8da, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Political analysis</p>",
"target": [
".layout > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.3 (foreground color: #9a7a38, background color: #efe8da, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9a7a38",
"bgColor": "#f6f1e7",
"contrastRatio": 3.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Representative finder</p>",
"target": [
"#finder > .wrap > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9a7a38",
"bgColor": "#f6f1e7",
"contrastRatio": 3.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">From the field</p>",
"target": [
"section:nth-child(7) > .wrap > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9a7a38",
"bgColor": "#fffdf9",
"contrastRatio": 3.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"events\" style=\"background:#fffdf9; border-top:1px solid var(--line);\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.96 (foreground color: #9a7a38, background color: #fffdf9, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Events</p>",
"target": [
".events > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.96 (foreground color: #9a7a38, background color: #fffdf9, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9a7a38",
"bgColor": "#f6f1e7",
"contrastRatio": 3.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Questions</p>",
"target": [
"#faq > .wrap > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.57 (foreground color: #9a7a38, background color: #f6f1e7, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7641
},
{
"y": 576,
"height": 7641
},
{
"y": 1152,
"height": 7641
},
{
"y": 1728,
"height": 7641
},
{
"y": 2304,
"height": 7641
},
{
"y": 2880,
"height": 7641
},
{
"y": 3456,
"height": 7641
},
{
"y": 4032,
"height": 7641
},
{
"y": 4608,
"height": 7641
},
{
"y": 5184,
"height": 7641
},
{
"y": 5760,
"height": 7641
},
{
"y": 6336,
"height": 7641
},
{
"y": 6912,
"height": 7641
},
{
"y": 6921,
"height": 7641
}
],
"scans": 15,
"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: "Volunteer", "Events", "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", "Legal Resources", "Political Analysis".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "lobbying", "litigation", "due process".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Donate", "Find Resources", "Subscribe".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Law, Government, & Politics" sector. Ideas similar but not limited to: "representative finder".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "research reports", "advocacy wins", "trending issues".
- **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.