Upstage Solar Pro 4 – Law Government and Politics
via Upstage · Generated
- AIMAC Debt 8.28
- Cost $0.002
- Total Violations 20
- HTML Size 76 KB
- Em Dashes 20
Screenshot
View Live Page
Accessibility Issues Found
20 Serious
-
color-contrast serious 17 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#">Privacy Policy</a> -
link-in-text-block serious 3 instances
Links must be distinguishable without relying on color
Example HTML
<a href="#">Take action →</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Civic Foundations – Empowering Communities Through Law & Democracy</title>
<meta name="description" content="Civic Foundations provides legal information, policy analysis, and civic engagement resources to empower communities, protect civil liberties, and strengthen democratic participation.">
<style>
/* ====== RESET & BASE ====== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary: #1a3a5c;
--primary-light: #2a5a8c;
--accent: #c8a45c;
--accent-hover: #d4b46c;
--dark: #0f2440;
--light: #f7f8fa;
--gray-100: #eef0f3;
--gray-200: #dde0e5;
--gray-600: #6b7280;
--gray-800: #374151;
--white: #ffffff;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.13);
--radius: 10px;
--radius-lg: 18px;
--maxw: 1240px;
--nav-h: 76px;
}
html {
scroll-behavior: smooth;
font-size: 17px;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: var(--gray-800);
background: var(--light);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
font-family: 'Segoe UI', system-ui, sans-serif;
color: var(--dark);
line-height: 1.25;
font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin-bottom: 1.2rem; }
a {
color: var(--primary-light);
text-decoration: none;
transition: color 0.2s;
}
a:hover { color: var(--accent); }
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
}
/* ====== BUTTONS ====== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
text-align: center;
justify-content: center;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-primary {
background: var(--accent);
color: var(--dark);
}
.btn-primary:hover {
background: var(--accent-hover);
color: var(--dark);
}
.btn-outline {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-outline:hover {
background: var(--white);
color: var(--primary);
}
.btn-dark {
background: var(--primary);
color: var(--white);
}
.btn-dark:hover {
background: var(--primary-light);
color: var(--white);
}
.btn-sm {
padding: 9px 20px;
font-size: 0.85rem;
}
/* ====== HEADER ====== */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-h);
background: rgba(15, 36, 64, 0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background 0.3s;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: 16px;
}
.logo-link {
display: flex;
align-items: center;
gap: 12px;
color: var(--white);
text-decoration: none;
}
.logo-link:hover { color: var(--white); }
.logo-img {
width: 42px;
height: 42px;
background: var(--accent);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark);
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -0.5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-text .name {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.3px;
}
.logo-text .tagline {
font-size: 0.68rem;
color: rgba(255,255,255,0.6);
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 500;
}
.nav-links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.82);
padding: 8px 16px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
background: rgba(255,255,255,0.1);
color: var(--white);
}
.nav-cta {
background: var(--accent) !important;
color: var(--dark) !important;
padding: 8px 20px !important;
font-weight: 600 !important;
}
.nav-cta:hover {
background: var(--accent-hover) !important;
color: var(--dark) !important;
}
/* Mobile menu toggle */
.menu-toggle {
display: none;
background: none;
border: none;
color: var(--white);
font-size: 1.5rem;
cursor: pointer;
padding: 4px;
}
/* ====== HERO ====== */
.hero {
padding-top: calc(var(--nav-h) + 60px);
padding-bottom: 80px;
background:
linear-gradient(135deg, rgba(15,36,64,0.92), rgba(26,58,92,0.88)),
url('https://placehold.co/1600x900/0f2440/1a3a5c?text=Democracy+in+Action&font=playfair+display');
background-size: cover;
background-position: center 30%;
background-attachment: fixed;
color: var(--white);
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(200,164,92,0.12), transparent 70%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
}
.hero h1 {
color: var(--white);
margin-bottom: 18px;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hero .lead {
font-size: 1.18rem;
color: rgba(255,255,255,0.85);
max-width: 640px;
margin: 0 auto 32px;
line-height: 1.65;
}
.hero-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
color: rgba(255,255,255,0.75);
font-size: 0.88rem;
}
.hero-stats .stat {
text-align: center;
}
.hero-stats .stat .num {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--accent);
letter-spacing: -0.5px;
}
/* ====== SECTION COMMON ====== */
section {
padding: 88px 0;
}
.section-label {
display: inline-block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1.8px;
color: var(--accent);
font-weight: 600;
margin-bottom: 10px;
}
.section-head {
max-width: 680px;
margin-bottom: 52px;
}
.section-head p {
color: var(--gray-600);
font-size: 1.05rem;
margin-top: 12px;
}
/* ====== ADVOCACY / FEATURES GRID ====== */
#advocacy {
background: var(--white);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.feature-card {
background: var(--light);
border-radius: var(--radius);
padding: 36px 30px 30px;
border: 1px solid var(--gray-200);
transition: transform 0.2s, box-shadow 0.25s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent);
}
.feature-icon {
width: 52px;
height: 52px;
background: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 1.4rem;
margin-bottom: 18px;
}
.feature-card h3 {
margin-bottom: 10px;
color: var(--dark);
}
.feature-card p {
color: var(--gray-600);
font-size: 0.95rem;
margin-bottom: 0;
}
.feature-card .card-link {
display: inline-block;
margin-top: 16px;
font-weight: 600;
font-size: 0.9rem;
color: var(--primary-light);
}
.feature-card .card-link:hover {
color: var(--accent);
}
/* ====== ABOUT / TWO-COLUMN ====== */
#about {
background: var(--gray-100);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.about-img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.about-text h2 {
margin-bottom: 16px;
}
.about-text p {
color: var(--gray-600);
margin-bottom: 1rem;
}
.about-text .highlight {
background: rgba(200,164,92,0.12);
border-left: 3px solid var(--accent);
padding: 16px 22px;
border-radius: 0 8px 8px 0;
margin: 20px 0;
font-style: italic;
color: var(--gray-800);
}
.about-text .btn {
margin-top: 10px;
}
/* ====== RESEARCH / POLICY ====== */
#research {
background: var(--white);
}
.research-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: start;
}
.research-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.research-item {
display: flex;
gap: 16px;
padding: 20px 24px;
background: var(--light);
border-radius: var(--radius);
border-left: 4px solid var(--accent);
transition: background 0.2s, transform 0.2s;
cursor: default;
}
.research-item:hover {
background: var(--gray-100);
transform: translateX(4px);
}
.research-item .r-number {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary);
min-width: 36px;
line-height: 1;
}
.research-item h4 {
font-size: 1.05rem;
margin-bottom: 4px;
color: var(--dark);
}
.research-item p {
font-size: 0.9rem;
color: var(--gray-600);
margin-bottom: 0;
}
.research-side {
background: var(--dark);
color: var(--white);
border-radius: var(--radius-lg);
padding: 36px;
position: sticky;
top: calc(var(--nav-h) + 20px);
}
.research-side h3 {
color: var(--accent);
margin-bottom: 8px;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.research-side p {
color: rgba(255,255,255,0.7);
font-size: 0.92rem;
margin-bottom: 1.2rem;
}
.research-side .btn-outline {
width: 100%;
margin-top: 8px;
}
.research-side .meta {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.12);
font-size: 0.82rem;
color: rgba(255,255,255,0.45);
}
/* ====== INTERACTIVE QUIZ ====== */
#quiz {
background: var(--gray-100);
}
.quiz-wrapper {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
max-width: 760px;
margin: 0 auto;
}
.quiz-header {
background: var(--primary);
color: var(--white);
padding: 28px 36px;
display: flex;
align-items: center;
gap: 18px;
}
.quiz-header .q-icon {
width: 48px;
height: 48px;
background: var(--accent);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.quiz-header h3 {
color: var(--white);
font-size: 1.15rem;
}
.quiz-header p {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
margin-bottom: 0;
}
.quiz-body {
padding: 32px 36px;
}
.quiz-question {
font-size: 1.15rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 20px;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.quiz-option {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 2px solid var(--gray-200);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
background: var(--light);
}
.quiz-option:hover {
border-color: var(--accent);
background: var(--gray-100);
}
.quiz-option.selected {
border-color: var(--primary);
background: rgba(26,58,92,0.08);
}
.quiz-option input[type="radio"] {
accent-color: var(--primary);
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
}
.quiz-option label {
cursor: pointer;
font-weight: 500;
flex: 1;
}
.quiz-feedback {
margin-top: 22px;
padding: 16px 20px;
border-radius: var(--radius);
display: none;
font-size: 0.95rem;
line-height: 1.6;
}
.quiz-feedback.show {
display: block;
}
.quiz-feedback.correct {
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.3);
color: #166534;
}
.quiz-feedback.incorrect {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
color: #991b1b;
}
.quiz-next {
margin-top: 18px;
display: none;
}
.quiz-next.show {
display: inline-flex;
}
/* ====== TESTIMONIALS ====== */
#testimonials {
background: var(--white);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.testimonial-card {
background: var(--light);
border-radius: var(--radius);
padding: 30px;
border: 1px solid var(--gray-200);
position: relative;
}
.testimonial-card .quote {
font-size: 2.2rem;
color: var(--accent);
line-height: 1;
margin-bottom: 12px;
font-family: 'Georgia', serif;
}
.testimonial-card p {
color: var(--gray-600);
font-size: 0.95rem;
font-style: italic;
margin-bottom: 18px;
line-height: 1.65;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-author img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--white);
box-shadow: var(--shadow-sm);
}
.testimonial-author .author-info strong {
display: block;
font-size: 0.92rem;
color: var(--dark);
}
.testimonial-author .author-info span {
font-size: 0.8rem;
color: var(--gray-600);
}
.testimonial-card .stars {
color: var(--accent);
font-size: 0.85rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
/* ====== SIDEBAR + MAIN LAYOUT ====== */
#get-involved {
background: var(--gray-100);
}
.involved-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
align-items: start;
}
.involved-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.involved-card {
background: var(--white);
border-radius: var(--radius);
padding: 28px 24px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
transition: transform 0.2s, box-shadow 0.25s;
}
.involved-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.involved-card .icon {
font-size: 1.6rem;
margin-bottom: 12px;
display: block;
}
.involved-card h3 {
font-size: 1.05rem;
margin-bottom: 8px;
color: var(--dark);
}
.involved-card p {
font-size: 0.9rem;
color: var(--gray-600);
margin-bottom: 0;
}
.involved-card .btn {
margin-top: 14px;
}
/* ====== SIDEBAR ====== */
.sidebar {
position: sticky;
top: calc(var(--nav-h) + 20px);
}
.sidebar-box {
background: var(--white);
border-radius: var(--radius);
padding: 24px;
border: 1px solid var(--gray-200);
margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.sidebar-box h4 {
color: var(--dark);
font-size: 0.95rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-box ul {
list-style: none;
}
.sidebar-box ul li {
padding: 8px 0;
border-bottom: 1px solid var(--gray-100);
font-size: 0.9rem;
color: var(--gray-800);
display: flex;
align-items: flex-start;
gap: 8px;
}
.sidebar-box ul li:last-child {
border-bottom: none;
}
.sidebar-box ul li .bullet {
color: var(--accent);
font-weight: 700;
flex-shrink: 0;
}
.sidebar-box .alert-badge {
display: inline-block;
background: #fee2e2;
color: #991b1b;
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 6px;
}
.sidebar-box .btn {
width: 100%;
margin-top: 6px;
}
/* ====== FAQ ====== */
#faq {
background: var(--white);
}
.faq-grid {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow 0.2s;
}
.faq-item:hover {
box-shadow: var(--shadow-sm);
}
.faq-q {
width: 100%;
background: none;
border: none;
padding: 20px 24px;
text-align: left;
font-size: 1.02rem;
font-weight: 600;
color: var(--dark);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-family: inherit;
}
.faq-q .icon {
font-size: 1.3rem;
color: var(--accent);
transition: transform 0.3s;
flex-shrink: 0;
}
.faq-item.open .faq-q .icon {
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.3s;
background: var(--light);
}
.faq-item.open .faq-a {
max-height: 400px;
}
.faq-a-inner {
padding: 0 24px 20px;
color: var(--gray-600);
font-size: 0.95rem;
line-height: 1.7;
}
/* ====== CTA BANNER ====== */
.cta-banner {
background: var(--primary);
color: var(--white);
padding: 64px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(200,164,92,0.15), transparent 70%);
pointer-events: none;
}
.cta-banner h2 {
color: var(--white);
margin-bottom: 12px;
}
.cta-banner p {
color: rgba(255,255,255,0.75);
max-width: 560px;
margin: 0 auto 28px;
font-size: 1.05rem;
}
.cta-banner .btn {
background: var(--accent);
color: var(--dark);
}
.cta-banner .btn:hover {
background: var(--accent-hover);
}
/* ====== FOOTER ====== */
.site-footer {
background: var(--dark);
color: rgba(255,255,255,0.7);
padding: 56px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 36px;
margin-bottom: 40px;
}
.footer-col h4 {
color: var(--white);
font-size: 0.95rem;
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.footer-col p, .footer-col a {
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
display: block;
padding: 3px 0;
text-decoration: none;
}
.footer-col a:hover {
color: var(--accent);
}
.footer-col .contact-line {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 0.85rem;
}
.footer-bottom .legal-links {
display: flex;
gap: 20px;
}
.footer-bottom .legal-links a {
color: rgba(255,255,255,0.45);
}
.footer-bottom .legal-links a:hover {
color: var(--accent);
}
.social-links {
display: flex;
gap: 12px;
}
.social-links a {
width: 36px;
height: 36px;
background: rgba(255,255,255,0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
transition: background 0.2s, color 0.2s;
}
.social-links a:hover {
background: var(--accent);
color: var(--dark);
}
/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
.research-grid {
grid-template-columns: 1fr;
}
.research-side {
position: static;
order: -1;
}
.involved-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
html { font-size: 16px; }
.nav-links {
display: none;
position: absolute;
top: var(--nav-h);
left: 0;
width: 100%;
background: rgba(15,36,64,0.98);
flex-direction: column;
padding: 16px;
gap: 2px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-links.open { display: flex; }
.nav-links a {
padding: 12px 16px;
width: 100%;
border-radius: 6px;
}
.menu-toggle { display: block; }
.about-grid {
grid-template-columns: 1fr;
}
.involved-cta-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.hero-stats { gap: 24px; }
.cta-banner { padding: 44px 0; }
section { padding: 60px 0; }
}
@media (max-width: 480px) {
.hero-cta { flex-direction: column; align-items: center; }
.hero-cta .btn { width: 100%; max-width: 280px; }
.quiz-body { padding: 22px 18px; }
.quiz-header { padding: 20px 18px; }
}
/* ====== ANIMATIONS ====== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up {
animation: fadeUp 0.6s ease forwards;
}
</style>
</head>
<body>
<!-- ====== HEADER ====== -->
<header class="site-header" id="siteHeader">
<div class="container header-inner">
<a href="#" class="logo-link" aria-label="Civic Foundations Home">
<div class="logo-img" aria-hidden="true">CF</div>
<div class="logo-text">
<span class="name">Civic Foundations</span>
<span class="tagline">Law & Democracy in Action</span>
</div>
</a>
<button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation menu" aria-expanded="false">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
</button>
<nav aria-label="Main navigation">
<ul class="nav-links" id="navLinks">
<li><a href="#advocacy">Advocacy</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#quiz">Rights Quiz</a></li>
<li><a href="#get-involved">Volunteer</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#get-involved" class="nav-cta">Get Involved</a></li>
</ul>
</nav>
</div>
</header>
<!-- ====== HERO ====== -->
<section class="hero" id="home">
<div class="container hero-content fade-up">
<h1>Building a Democracy That Works for Everyone</h1>
<p class="lead">
Civic Foundations equips communities with the legal knowledge, policy analysis, and civic tools
needed to protect constitutional rights, drive meaningful legislative change, and strengthen
civic participation from the ground up.
</p>
<div class="hero-cta">
<a href="#get-involved" class="btn btn-primary">Find Resources</a>
<a href="#research" class="btn btn-outline">Explore Policy Analysis</a>
</div>
<div class="hero-stats">
<div class="stat"><span class="num">14,200+</span>Community Members</div>
<div class="stat"><span class="num">340+</span>Policy Briefs Published</div>
<div class="stat"><span class="num">28</span>States Active</div>
<div class="stat"><span class="num">156</span>Advocacy Wins in 2025</div>
</div>
</div>
</section>
<!-- ====== ADVOCACY / FEATURES ====== -->
<section id="advocacy">
<div class="container">
<div class="section-head fade-up">
<span class="section-label">Community Advocacy</span>
<h2>How We Drive Change Together</h2>
<p>
From local zoning disputes to federal civil liberties cases, our advocacy work bridges the gap
between legal expertise and grassroots power. We believe that informed communities are the
strongest defense of democratic values.
</p>
</div>
<div class="feature-grid">
<article class="feature-card fade-up">
<div class="feature-icon" aria-hidden="true">⚖️</div>
<h3>Civil Liberties Defense</h3>
<p>
Our legal team provides know-your-rights education, handles precedent-setting cases involving
free speech, due process, and equal protection, and publishes plain-language guides so anyone
can understand their constitutional rights.
</p>
<a href="#research" class="card-link">Learn Your Rights →</a>
</article>
<article class="feature-card fade-up">
<div class="feature-icon" aria-hidden="true">📋</div>
<h3>Legislative Tracking & Lobbying</h3>
<p>
We monitor bills across all 50 state legislatures andCongress, producing accessible summaries
that translate complex statutory language into actionable insight. Our advocacy coalitions
amplify community voices directly to policymakers.
</p>
<a href="#research" class="card-link">Track Legislation →</a>
</article>
<article class="feature-card fade-up">
<div class="feature-icon" aria-hidden="true">🗳️</div>
<h3>Civic Participation Programs</h3>
<p>
Voter registration drives, candidate forums, and civic education workshops form the backbone
of our engagement work. We host monthly town halls that connect constituents directly with
elected officials and policy experts.
</p>
<a href="#get-involved" class="card-link">Register to Vote →</a>
</article>
<article class="feature-card fade-up">
<div class="feature-icon" aria-hidden="true">🤝</div>
<h3>Community Legal Clinics</h3>
<p>
Free monthly clinics offer one-on-one guidance on housing law, employment rights, immigration
questions, and family law matters. Our pro bono network of attorneys ensures that cost is
never a barrier to accessing justice.
</p>
<a href="#faq" class="card-link">Find a Clinic →</a>
</article>
</div>
</div>
</section>
<!-- ====== ABOUT / TWO-COLUMN ====== -->
<section id="about">
<div class="container">
<div class="about-grid fade-up">
<div class="about-text">
<span class="section-label">About Us</span>
<h2>A Nonpartisan Force for Democratic Integrity</h2>
<p>
Founded in 2011, Civic Foundations was born from a simple conviction: that every person,
regardless of background or income, deserves access to accurate legal information and a
meaningful voice in the political process. Over more than a decade, we've grown from a
single-city legal aid project into a national organization operating in 28 states.
</p>
<p>
We are fiercely nonpartisan. Our work is grounded in constitutional principles, empirical
research, and a commitment to protecting the rights enshrined in the Bill of Rights and
subsequent civil rights legislation. We do not endorse candidates or parties — we empower
citizens to engage with the systems that shape their lives.
</p>
<div class="highlight">
"Democracy is not a spectator sport. Civic Foundations gives people the playbook."
— <strong>Eleanor Marsh, Executive Director</strong>
</div>
<p>
Our team includes attorneys, policy analysts, community organizers, and data scientists who
collaborate to produce research that holds up in public debate and in court. We partner with
local libraries, schools, and civic groups to bring our resources directly to the people who
need them most.
</p>
<a href="#get-involved" class="btn btn-dark">Meet Our Team</a>
</div>
<img
src="https://placehold.co/800x600/1a3a5c/ffffff?text=Civic+Foundations+Team+in+Action&font=poppins"
alt="Civic Foundations team members collaborating in a community meeting"
class="about-img"
>
</div>
</div>
</section>
<!-- ====== RESEARCH / POLICY ANALYSIS ====== -->
<section id="research">
<div class="container">
<div class="section-head fade-up">
<span class="section-label">Policy Analysis</span>
<h2>Research That Shapes the Legislative Process</h2>
<p>
Our research division produces rigorous, accessible analysis on the issues that matter most to
communities: voting rights, criminal justice reform, housing policy, and digital privacy. Every
brief is peer-reviewed and written with the understanding that good policy starts with good
information.
</p>
</div>
<div class="research-grid">
<div class="research-list fade-up">
<div class="research-item">
<span class="r-number">01</span>
<div>
<h4>Voting Access in the Post-<em>Shelby</em> Era</h4>
<p>A 48-page analysis of voter ID laws, roll purges, and polling place closures across 15 states, with recommended policy responses.</p>
</div>
</div>
<div class="research-item">
<span class="r-number">02</span>
<div>
<h4>Algorithmic Policing & Civil Rights</h4>
<p>Examines predictive policing tools and their disproportionate impact on communities of color, with model legislation for transparency.</p>
</div>
</div>
<div class="research-item">
<span class="r-number">03</span>
<div>
<h4>Housing Justice in Urban Markets</h4>
<p>Tracks eviction rates, rent stabilization policies, and tenant protection ordinances, offering a toolkit for municipal advocacy.</p>
</div>
</div>
<div class="research-item">
<span class="r-number">04</span>
<div>
<h4>First Amendment in the Digital Public Square</h4>
<p>Explores how content moderation, algorithmic amplification, and government pressure intersect with free speech protections online.</p>
</div>
</div>
<div class="research-item">
<span class="r-number">05</span>
<div>
<h4>Climate Policy & Environmental Justice</h4>
<p>Maps the legal landscape of climate adaptation funding and environmental justice screening tools used by federal and state agencies.</p>
</div>
</div>
</div>
<aside class="research-side fade-up">
<h3>Featured Brief</h3>
<p>
Our latest deep-dive, <strong>"Reconstructing the Right to Vote"</strong>, synthesizes
appellate decisions from 2022–2025 and offers a framework for state-level voting rights
restoration. Used by 30+ advocacy organizations and cited in two legislative committees.
</p>
<a href="#" class="btn btn-outline">Download Full Brief (PDF)</a>
<div class="meta">
Published March 2025 · 84 pages · Peer reviewed
</div>
</aside>
</div>
</div>
</section>
<!-- ====== INTERACTIVE RIGHTS QUIZ ====== -->
<section id="quiz">
<div class="container">
<div class="section-head fade-up" style="text-align:center; margin-left:auto; margin-right:auto;">
<span class="section-label">Interactive Tool</span>
<h2>Test Your Constitutional Knowledge</h2>
<p>
The U.S. Constitution protects a wide range of rights — but many people are unsure exactly what
those protections cover. Take our 60-second quiz to check your understanding and learn something
new along the way.
</p>
</div>
<div class="quiz-wrapper fade-up">
<div class="quiz-header">
<div class="q-icon" aria-hidden="true">🧠</div>
<div>
<h3>Constitutional Rights Quick Check</h3>
<p>4 questions · Takes about 1 minute · Instant feedback</p>
</div>
</div>
<div class="quiz-body">
<!-- Question 1 -->
<div class="quiz-question">1. The First Amendment protects which of the following?</div>
<div class="quiz-options" data-q="1">
<div class="quiz-option">
<input type="radio" name="q1" id="q1a" value="a">
<label for="q1a">Freedom of speech, religion, press, assembly, and petition</label>
</div>
<div class="quiz-option">
<input type="radio" name="q1" id="q1b" value="b">
<label for="q1b">The right to a speedy trial</label>
</div>
<div class="quiz-option">
<input type="radio" name="q1" id="q1c" value="c">
<label for="q1c">Protection against unreasonable searches</label>
</div>
</div>
<div class="quiz-feedback" data-for="1"></div>
<!-- Question 2 -->
<div class="quiz-question" style="margin-top:24px;">2. Under the Fourth Amendment, a warrantless search of your home is generally:</div>
<div class="quiz-options" data-q="2">
<div class="quiz-option">
<input type="radio" name="q2" id="q2a" value="a">
<label for="q2a">Always unconstitutional</label>
</div>
<div class="quiz-option">
<input type="radio" name="q2" id="q2b" value="b">
<label for="q2b">Permitted if police suspect a crime</label>
</div>
<div class="quiz-option">
<input type="radio" name="q2" id="q2c" value="c">
<label for="q2c">Presumptively unreasonable, with limited exceptions</label>
</div>
</div>
<div class="quiz-feedback" data-for="2"></div>
<!-- Question 3 -->
<div class="quiz-question" style="margin-top:24px;">3. Which clause of the Fourteenth Amendment has been used to apply most Bill of Rights protections to the states?</div>
<div class="quiz-options" data-q="3">
<div class="quiz-option">
<input type="radio" name="q3" id="q3a" value="a">
<label for="q3a">The Equal Protection Clause</label>
</div>
<div class="quiz-option">
<input type="radio" name="q3" id="q3b" value="b">
<label for="q3b">The Due Process Clause (incorporation)</label>
</div>
<div class="quiz-option">
<input type="radio" name="q3" id="q3c" value="c">
<label for="q3c">The Privileges or Immunities Clause</label>
</div>
</div>
<div class="quiz-feedback" data-for="3"></div>
<!-- Question 4 -->
<div class="quiz-question" style="margin-top:24px;">4. True or False: The right to vote is explicitly mentioned in the original U.S. Constitution.</div>
<div class="quiz-options" data-q="4">
<div class="quiz-option">
<input type="radio" name="q4" id="q4a" value="a">
<label for="q4a">True — it is in Article I</label>
</div>
<div class="quiz-option">
<input type="radio" name="q4" id="q4b" value="b">
<label for="q4b">False — voting qualifications were left to the states</label>
</div>
</div>
<div class="quiz-feedback" data-for="4"></div>
<div style="text-align:center; margin-top: 24px;">
<button class="btn btn-primary quiz-reset" id="quizReset">Reset Quiz</button>
</div>
</div>
</div>
</div>
</section>
<!-- ====== TESTIMONIALS ====== -->
<section id="testimonials">
<div class="container">
<div class="section-head fade-up" style="text-align:center; margin-left:auto; margin-right:auto;">
<span class="section-label">What People Are Saying</span>
<h2>Voices from Our Community</h2>
<p>
From legal clinics to policy workshops, here's how Civic Foundations has made a difference for
people across the country.
</p>
</div>
<div class="testimonial-grid">
<div class="testimonial-card fade-up">
<div class="stars">★★★★★</div>
<div class="quote">"</div>
<p>
The know-your-rights workshop helped me understand what to do when my landlord tried an
illegal eviction. Civic Foundations gave me the confidence and the knowledge to stand up
for my rights.
</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/88?u=janedoe" alt="Jane Doe">
<div class="author-info">
<strong>Jane Okafor</strong>
<span>Tenant Advocate, Atlanta, GA</span>
</div>
</div>
</div>
<div class="testimonial-card fade-up">
<div class="stars">★★★★★</div>
<div class="quote">"</div>
<p>
Their legislative tracking briefs are incredible. I work on city council policy, and the
plain-language summaries save our team hours of research every week. A genuinely useful
resource for local government.
</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/88?u=marcusreid" alt="Marcus Reid">
<div class="author-info">
<strong>Marcus Reid</strong>
<span>Policy Director, City of Portland</span>
</div>
</div>
</div>
<div class="testimonial-card fade-up">
<div class="stars">★★★★★</div>
<div class="quote">"</div>
<p>
As a first-generation college student, I never knew how to get involved in the legislative
process. Civic Foundations' volunteer program walked me through everything — from writing
to my representatives to organizing a voter registration drive on campus.
</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/88?u=sofiazhang" alt="Sofia Zhang">
<div class="author-info">
<strong>Sofia Zhang</strong>
<span>Volunteer Organizer, Madison, WI</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== GET INVOLVED + SIDEBAR ====== -->
<section id="get-involved">
<div class="container">
<div class="section-head fade-up">
<span class="section-label">Volunteer & Engagement</span>
<h2>Take Action in Your Community</h2>
<p>
Whether you have two hours a week or two hours a month, there's a place for you in our movement.
Join thousands of citizens who are turning civic knowledge into civic power.
</p>
</div>
<div class="involved-grid">
<div>
<div class="involved-cta-grid">
<div class="involved-card fade-up">
<span class="icon" aria-hidden="true">📝</span>
<h3>Register to Vote</h3>
<p>
We provide state-by-state guides covering eligibility, registration deadlines, ID
requirements, and absentee ballot procedures. Make sure your voice is counted.
</p>
<a href="#" class="btn btn-primary btn-sm">Register to Vote</a>
</div>
<div class="involved-card fade-up">
<span class="icon" aria-hidden="true">📚</span>
<h3>Find Legal Resources</h3>
<p>
Browse our library of plain-language guides on tenant rights, employment discrimination,
free speech, and more. Updated regularly by our legal team.
</p>
<a href="#faq" class="btn btn-primary btn-sm">Find Resources</a>
</div>
<div class="involved-card fade-up">
<span class="icon" aria-hidden="true">✍️</span>
<h3>Write to Your Representatives</h3>
<p>
Use our tool to find your federal, state, and local representatives and send a
personalized message about the issues you care about most.
</p>
<a href="#" class="btn btn-primary btn-sm">Contact Officials</a>
</div>
<div class="involved-card fade-up">
<span class="icon" aria-hidden="true">🤝</span>
<h3>Join a Local Chapter</h3>
<p>
We have active chapters in 28 states. Attend a town hall, volunteer at a clinic, or
help organize a community forum. No experience required.
</p>
<a href="#" class="btn btn-primary btn-sm">Find a Chapter</a>
</div>
</div>
</div>
<!-- ====== SIDEBAR ====== -->
<aside class="sidebar fade-up">
<div class="sidebar-box">
<h4>📢 Action Alerts</h4>
<ul>
<li>
<span class="bullet">›</span>
<span><strong>Voting Rights Bill S. 142</strong> — Committee markup this Thursday. <span class="alert-badge">Urgent</span> <a href="#">Take action →</a></span>
</li>
<li>
<span class="bullet">›</span>
<span><strong>State Lobbying Disclosure</strong> — Comment period open until April 30. <a href="#">Submit feedback →</a></span>
</li>
<li>
<span class="bullet">›</span>
<span><strong>Free Speech Town Hall</strong> — Next session: May 12, 7 PM ET. <a href="#">Register now →</a></span>
</li>
</ul>
<a href="#" class="btn btn-sm btn-dark">View All Alerts</a>
</div>
<div class="sidebar-box">
<h4>🏆 Advocacy Wins</h4>
<ul>
<li>
<span class="bullet">›</span>
<span>Tenant protection ordinance passed in Columbus, OH — citing our brief.</span>
</li>
<li>
<span class="bullet">›</span>
<span>Court rules in favor of public access to police body cam footage in 3 counties.</span>
</li>
<li>
<span class="bullet">›</span>
<span>Voter registration drive adds 2,300 new voters across 6 states this quarter.</span>
</li>
</ul>
<a href="#" class="btn btn-sm btn-dark">See All Wins</a>
</div>
<div class="sidebar-box">
<h4>📬 Stay Informed</h4>
<p style="font-size:0.88rem; color:var(--gray-600); margin-bottom:10px;">
Get the weekly Civic Dispatch — policy updates, action alerts, and community stories.
</p>
<form onsubmit="event.preventDefault(); alert('Thanks for signing up! (Demo)');" style="display:flex; gap:8px;">
<input type="email" placeholder="your@email.com" required
style="flex:1; padding:10px 14px; border:1px solid var(--gray-200); border-radius:8px; font-size:0.9rem; background:var(--light); color:var(--gray-800); outline:none;"
aria-label="Email address for newsletter">
<button type="submit" class="btn btn-primary btn-sm" style="white-space:nowrap;">Join</button>
</form>
</div>
</aside>
</div>
</div>
</section>
<!-- ====== FAQ ====== -->
<section id="faq">
<div class="container">
<div class="section-head fade-up" style="text-align:center; margin-left:auto; margin-right:auto;">
<span class="section-label">FAQ</span>
<h2>Common Questions About Your Rights</h2>
<p>
These are some of the questions we hear most often at our clinics and town halls. If you don't
see what you're looking for, reach out — our legal team is happy to help.
</p>
</div>
<div class="faq-grid">
<div class="faq-item">
<button class="faq-q" aria-expanded="false">
<span>What should I do if I believe my constitutional rights were violated by law enforcement?</span>
<span class="icon" aria-hidden="true">➕</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
<p>
Document everything you can remember as soon as possible — dates, times, badge numbers,
witnesses, and any footage. You have the right to remain silent and the right to an
attorney. Do not consent to searches if you are uncomfortable, and clearly state that
you wish to speak with a lawyer. Then contact our legal clinic or a local civil rights
organization to discuss your options. You generally have a limited window to file a
complaint or pursue a claim, so acting promptly matters.
</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">
<span>How can I find out who my state and federal representatives are?</span>
<span class="icon" aria-hidden="true">➕</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
<p>
You can use our "Find Your Representatives" tool — just enter your address and we'll
show you your members of Congress, state legislators, governor, and local officials.
Each profile includes contact information, committee assignments, and a link to their
official website. We also provide sample message templates for common issues so you
can express your views clearly and effectively.
</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">
<span>Does Civic Foundations endorse political candidates or parties?</span>
<span class="icon" aria-hidden="true">➕</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
<p>
No. Civic Foundations is a strictly nonpartisan organization. We do not endorse candidates,
parties, or ballot measures. Our mission is to equip citizens with accurate legal
information, policy analysis, and the tools to participate meaningfully in the democratic
process — regardless of their political views. We host candidate forums that give all
qualified candidates an equal opportunity to present their platforms.
</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">
<span>Are your legal clinics really free? What can I expect at a clinic?</span>
<span class="icon" aria-hidden="true">➕</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
<p>
Yes — our clinics are completely free for community members. Appointments typically last
30–45 minutes. You'll meet with a licensed attorney or a supervised law student who will
listen to your situation, explain relevant legal principles in plain language, and help you
understand your options. We do not provide ongoing representation through the clinic, but we
can refer you to pro bono attorneys, legal aid organizations, or self-help resources when
appropriate. Clinics are held monthly in most of our active chapters.
</p>
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">
<span>How can I volunteer with Civic Foundations?</span>
<span class="icon" aria-hidden="true">➕</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
<p>
We welcome volunteers at every skill level. Roles include community outreach, voter
registration, research assistance, event planning, social media amplification, and
translating our materials into multiple languages. If you have legal training, you may
be eligible to join our pro bono network. Fill out the volunteer interest form and a
regional coordinator will reach out to discuss opportunities in your area.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== CTA BANNER ====== -->
<div class="cta-banner fade-up">
<div class="container">
<h2>Ready to Strengthen Democracy in Your Community?</h2>
<p>
Join 14,200+ citizens who already rely on Civic Foundations for legal knowledge, policy insight, and
actionable ways to make a difference.
</p>
<a href="#get-involved" class="btn">Get Started Today</a>
</div>
</div>
<!-- ====== FOOTER ====== -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<img src="https://placehold.co/140x44/1a3a5c/ffffff?text=Civic+Foundations&font=montserrat&size=140x44"
alt="Civic Foundations Logo" style="margin-bottom:14px; border-radius:6px;">
<p style="max-width:320px;">
A nonpartisan nonprofit dedicated to legal education, policy analysis, and civic engagement
across the United States.
</p>
</div>
<div class="footer-col">
<h4>Organize</h4>
<a href="#advocacy">Advocacy</a>
<a href="#research">Research</a>
<a href="#get-involved">Volunteer</a>
<a href="#">Find a Chapter</a>
<a href="#">Donate</a>
</div>
<div class="footer-col">
<h4>Resources</h4>
<a href="#">Legal Clinics</a>
<a href="#">Rights Guides</a>
<a href="#">Policy Briefs</a>
<a href="#faq">FAQ</a>
<a href="#">Speaker Requests</a>
</div>
<div class="footer-col">
<h4>Contact</h4>
<div class="contact-line">
<span aria-hidden="true">📍</span>
<span>1200 Democracy Way, Suite 400<br>Washington, DC 20001</span>
</div>
<div class="contact-line">
<span aria-hidden="true">📞</span>
<span>(202) 555-0142</span>
</div>
<div class="contact-line">
<span aria-hidden="true">✉️</span>
<a href="mailto:hello@civicfoundations.org">hello@civicfoundations.org</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Civic Foundations. All rights reserved.</span>
<div class="legal-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Accessibility</a>
<a href="#">Nonprofit 501(c)(3)</a>
</div>
<div class="social-links">
<a href="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="Facebook">f</a>
<a href="#" aria-label="Instagram">◻</a>
<a href="#" aria-label="LinkedIn">in</a>
<a href="#" aria-label="YouTube">▶</a>
</div>
</div>
</div>
</footer>
<script>
(function() {
'use strict';
// ====== MOBILE MENU ======
const menuToggle = document.getElementById('menuToggle');
const navLinks = document.getElementById('navLinks');
menuToggle.addEventListener('click', function() {
const isOpen = navLinks.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', isOpen);
});
// Close menu when a nav link is clicked
navLinks.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', function() {
navLinks.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
});
});
// Close menu on outside click
document.addEventListener('click', function(e) {
if (!document.getElementById('siteHeader').contains(e.target)) {
navLinks.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
}
});
// ====== STICKY HEADER SHADOW ON SCROLL ======
const header = document.getElementById('siteHeader');
window.addEventListener('scroll', function() {
if (window.scrollY > 10) {
header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
} else {
header.style.boxShadow = 'none';
}
});
// ====== FAQ ACCORDION ======
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(function(item) {
const button = item.querySelector('.faq-q');
button.addEventListener('click', function() {
const isOpen = item.classList.contains('open');
// Close all
faqItems.forEach(function(other) {
other.classList.remove('open');
other.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
});
// Toggle current
if (!isOpen) {
item.classList.add('open');
button.setAttribute('aria-expanded', 'true');
}
});
});
// ====== RIGHTS QUIZ ======
const quizData = {
1: {
correct: 'a',
correctText: 'Correct! The First Amendment protects freedom of speech, religion, press, assembly, and the right to petition the government.',
incorrectText: 'Not quite. The First Amendment protects freedom of speech, religion, press, assembly, and petition — not the right to a speedy trial (Sixth) or protection against searches (Fourth).'
},
2: {
correct: 'c',
correctText: 'Correct! The Fourth Amendment makes warrantless home searches presumptively unreasonable. There are limited exceptions (exigent circumstances, consent, plain view), but the default is that a warrant is required.',
incorrectText: 'Not exactly. While there are limited exceptions (exigent circumstances, consent, plain view), the general rule is that warrantless home searches are presumptively unreasonable under the Fourth Amendment.'
},
3: {
correct: 'b',
correctText: 'Exactly right! Through a series of decisions, the Supreme Court has used the Due Process Clause of the Fourteenth Amendment to "incorporate" most Bill of Rights protections and apply them to state and local governments.',
incorrectText: 'The Due Process Clause of the Fourteenth Amendment is the primary vehicle for incorporation — applying most Bill of Rights protections to the states. The Equal Protection Clause addresses discrimination, and the Privileges or Immunities Clause has been narrowly interpreted.'
},
4: {
correct: 'b',
correctText: 'Correct! The original Constitution did not explicitly grant a right to vote — it left voting qualifications largely to the states. Voting rights amendments (15th, 19th, 24th, 26th) and the Voting Rights Act of 1965 later expanded and protected that right.',
incorrectText: 'Actually false. The original Constitution did not explicitly grant a right to vote — it left voting qualifications to the states. The 15th, 19th, 24th, and 26th Amendments, along with the Voting Rights Act, later protected and expanded voting rights.'
}
};
const optionsContainers = document.querySelectorAll('.quiz-options');
const feedbackEls = document.querySelectorAll('.quiz-feedback');
const quizReset = document.getElementById('quizReset');
function getSelectedValue(container) {
const selected = container.querySelector('input[type="radio"]:checked');
return selected ? selected.value : null;
}
function showFeedback(qNum, isCorrect, text) {
const fb = document.querySelector(`.quiz-feedback[data-for="${qNum}"]`);
if (!fb) return;
fb.textContent = text;
fb.className = 'quiz-feedback show ' + (isCorrect ? 'correct' : 'incorrect');
}
function handleQuizOptionClick(e) {
const option = e.currentTarget;
const container = option.closest('.quiz-options');
if (!container) return;
const qNum = parseInt(container.dataset.q, 10);
const val = option.querySelector('input[type="radio"]').value;
// Deselect siblings, select this one
container.querySelectorAll('.quiz-option').forEach(function(opt) {
opt.classList.remove('selected');
});
option.classList.add('selected');
option.querySelector('input[type="radio"]').checked = true;
// Show feedback
const data = quizData[qNum];
if (!data) return;
const isCorrect = val === data.correct;
showFeedback(qNum, isCorrect, isCorrect ? data.correctText : data.incorrectText);
}
optionsContainers.forEach(function(container) {
container.querySelectorAll('.quiz-option').forEach(function(option) {
option.addEventListener('click', handleQuizOptionClick);
});
});
// Allow keyboard activation via label
optionsContainers.forEach(function(container) {
container.querySelectorAll('label').forEach(function(label) {
label.addEventListener('click', function(e) {
// The radio change will trigger, but we also want the visual selected state
const option = label.closest('.quiz-option');
if (option) {
container.querySelectorAll('.quiz-option').forEach(function(opt) {
opt.classList.remove('selected');
});
option.classList.add('selected');
// Trigger our handler manually since label click doesn't bubble to option
const qNum = parseInt(container.dataset.q, 10);
const val = label.htmlFor ? document.getElementById(label.htmlFor) : null;
if (val && val.checked) {
const data = quizData[qNum];
if (data) {
const isCorrect = val.value === data.correct;
showFeedback(qNum, isCorrect, isCorrect ? data.correctText : data.incorrectText);
}
}
}
});
});
});
quizReset.addEventListener('click', function() {
// Clear all
document.querySelectorAll('.quiz-option').forEach(function(opt) {
opt.classList.remove('selected');
});
document.querySelectorAll('input[type="radio"]').forEach(function(r) {
r.checked = false;
});
feedbackEls.forEach(function(fb) {
fb.className = 'quiz-feedback';
fb.textContent = '';
});
});
// ====== SMOOTH SCROLL (fallback for older browsers) ======
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
const target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
const headerH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--nav-h'), 10) || 76;
const top = target.getBoundingClientRect().top + window.pageYOffset - headerH - 8;
window.scrollTo({ top: top, behavior: 'smooth' });
}
});
});
// ====== INTERSECTION OBSERVER FOR FADE-IN ======
if ('IntersectionObserver' in window) {
const fadeEls = document.querySelectorAll('.fade-up');
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
fadeEls.forEach(function(el) {
el.style.animationPlayState = 'paused';
observer.observe(el);
});
// Run once for elements already visible
fadeEls.forEach(function(el) {
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight) {
el.style.animationPlayState = 'running';
observer.unobserve(el);
}
});
} else {
document.querySelectorAll('.fade-up').forEach(function(el) {
el.style.animationPlayState = 'running';
});
}
})();
</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:50:16.221Z",
"url": "https://benchmark.aimac.invalid/be3fc76dd66bec5676cd93f8d7a5e8ddd7ab5d0c6639187c024551de6f5e9418.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": "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": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"logo-img\" aria-hidden=\"true\">CF</div>",
"target": [
".logo-img"
]
}
]
},
{
"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 href=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
},
{
"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=\"container hero-content fade-up\" style=\"animation-play-state: running;\">",
"target": [
".hero-content"
]
}
]
},
{
"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-primary quiz-reset\" id=\"quizReset\">Reset Quiz</button>",
"target": [
"#quizReset"
]
}
]
},
{
"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>Building a Democracy That Works for Everyone</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>How We Drive Change Together</h2>",
"target": [
"#advocacy > .container > .section-head.fade-up > h2"
]
},
{
"html": "<h3>Civil Liberties Defense</h3>",
"target": [
"article:nth-child(1) > h3"
]
},
{
"html": "<h3>Legislative Tracking & Lobbying</h3>",
"target": [
"article:nth-child(2) > h3"
]
},
{
"html": "<h3>Civic Participation Programs</h3>",
"target": [
"article:nth-child(3) > h3"
]
},
{
"html": "<h3>Community Legal Clinics</h3>",
"target": [
"article:nth-child(4) > h3"
]
},
{
"html": "<h2>A Nonpartisan Force for Democratic Integrity</h2>",
"target": [
".about-text > h2"
]
},
{
"html": "<h2>Research That Shapes the Legislative Process</h2>",
"target": [
"#research > .container > .section-head.fade-up > h2"
]
},
{
"html": "<h4>Voting Access in the Post-<em>Shelby</em> Era</h4>",
"target": [
".research-item:nth-child(1) > div > h4"
]
},
{
"html": "<h4>Algorithmic Policing & Civil Rights</h4>",
"target": [
".research-item:nth-child(2) > div > h4"
]
},
{
"html": "<h4>Housing Justice in Urban Markets</h4>",
"target": [
".research-item:nth-child(3) > div > h4"
]
},
{
"html": "<h4>First Amendment in the Digital Public Square</h4>",
"target": [
".research-item:nth-child(4) > div > h4"
]
},
{
"html": "<h4>Climate Policy & Environmental Justice</h4>",
"target": [
".research-item:nth-child(5) > div > h4"
]
},
{
"html": "<h3>Featured Brief</h3>",
"target": [
".research-side > h3"
]
},
{
"html": "<h2>Test Your Constitutional Knowledge</h2>",
"target": [
"#quiz > .container > .section-head.fade-up > h2"
]
},
{
"html": "<h3>Constitutional Rights Quick Check</h3>",
"target": [
".quiz-header > div:nth-child(2) > h3"
]
},
{
"html": "<h2>Voices from Our Community</h2>",
"target": [
"#testimonials > .container > .section-head.fade-up > h2"
]
},
{
"html": "<h2>Take Action in Your Community</h2>",
"target": [
"#get-involved > .container > .section-head.fade-up > h2"
]
},
{
"html": "<h3>Register to Vote</h3>",
"target": [
".involved-card.fade-up:nth-child(1) > h3"
]
},
{
"html": "<h3>Find Legal Resources</h3>",
"target": [
".involved-card.fade-up:nth-child(2) > h3"
]
},
{
"html": "<h3>Write to Your Representatives</h3>",
"target": [
".involved-card.fade-up:nth-child(3) > h3"
]
},
{
"html": "<h3>Join a Local Chapter</h3>",
"target": [
".involved-card.fade-up:nth-child(4) > h3"
]
},
{
"html": "<h4>\ud83d\udce2 Action Alerts</h4>",
"target": [
".sidebar-box:nth-child(1) > h4"
]
},
{
"html": "<h4>\ud83c\udfc6 Advocacy Wins</h4>",
"target": [
".sidebar-box:nth-child(2) > h4"
]
},
{
"html": "<h4>\ud83d\udcec Stay Informed</h4>",
"target": [
".sidebar-box:nth-child(3) > h4"
]
},
{
"html": "<h2>Common Questions About Your Rights</h2>",
"target": [
"#faq > .container > .section-head.fade-up > h2"
]
},
{
"html": "<h2>Ready to Strengthen Democracy in Your Community?</h2>",
"target": [
".container > h2"
]
},
{
"html": "<h4>Organize</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"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": "#0f2440",
"bgColor": "#c8a45c",
"contrastRatio": 6.62,
"fontSize": "14.0pt (18.7px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 6.62"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"logo-img\" aria-hidden=\"true\">CF</div>",
"target": [
".logo-img"
]
}
]
},
{
"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": "q1a",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<input type=\"radio\" name=\"q1\" id=\"q1a\" value=\"a\">",
"target": [
"#q1a"
]
}
]
},
{
"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=\"q1a\">Freedom of speech, religion, press, assembly, and petition</label>",
"target": [
"label[for=\"q1a\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"radio\" name=\"q1\" id=\"q1a\" value=\"a\">",
"target": [
"#q1a"
]
}
]
},
{
"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/800x600/1a3a5c/ffffff?text=Civic+Foundations+Team+in+Action&font=poppins\" alt=\"Civic Foundations team members collaborating in a community meeting\" class=\"about-img\">",
"target": [
".about-img"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"q1a\">Freedom of speech, religion, press, assembly, and petition</label>",
"target": [
"label[for=\"q1a\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"radio\" name=\"q1\" id=\"q1a\" value=\"a\">",
"target": [
"#q1a"
]
}
]
},
{
"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"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"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=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"nav-links\" id=\"navLinks\">",
"target": [
"#navLinks"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#advocacy\">Advocacy</a></li>",
"target": [
"#navLinks > 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/800x600/1a3a5c/ffffff?text=Civic+Foundations+Team+in+Action&font=poppins\" alt=\"Civic Foundations team members collaborating in a community meeting\" class=\"about-img\">",
"target": [
".about-img"
]
}
]
},
{
"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": 244.1,
"height": 42
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (244.1px by 42px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo-link\" aria-label=\"Civic Foundations Home\">",
"target": [
".logo-link"
]
}
]
}
],
"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": "14.7pt (19.55px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"hero\" id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"name\">Civic Foundations</span>",
"target": [
".name"
],
"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": "#7b8796",
"bgColor": "#0f2440",
"contrastRatio": 4.26,
"fontSize": "10.8pt (14.45px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Privacy Policy</a>",
"target": [
".legal-links > a[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b8796",
"bgColor": "#0f2440",
"contrastRatio": 4.26,
"fontSize": "10.8pt (14.45px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Terms of Use</a>",
"target": [
".legal-links > a[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b8796",
"bgColor": "#0f2440",
"contrastRatio": 4.26,
"fontSize": "10.8pt (14.45px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Accessibility</a>",
"target": [
".legal-links > a[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b8796",
"bgColor": "#0f2440",
"contrastRatio": 4.26,
"fontSize": "10.8pt (14.45px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Nonprofit 501(c)(3)</a>",
"target": [
".legal-links > a[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.8pt (14.45px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#ffffff",
"contrastRatio": 2.35,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"advocacy\">",
"target": [
"#advocacy"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Community Advocacy</span>",
"target": [
"#advocacy > .container > .section-head.fade-up > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#eef0f3",
"contrastRatio": 2.06,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #c8a45c, background color: #eef0f3, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">About Us</span>",
"target": [
".about-text > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #c8a45c, background color: #eef0f3, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#eef0f3",
"contrastRatio": 4.23,
"fontSize": "12.8pt (17px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>",
"target": [
".about-text > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#eef0f3",
"contrastRatio": 4.23,
"fontSize": "12.8pt (17px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>",
"target": [
"p:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#eef0f3",
"contrastRatio": 4.23,
"fontSize": "12.8pt (17px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>",
"target": [
"p:nth-child(6)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#ffffff",
"contrastRatio": 2.35,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"research\">",
"target": [
"#research"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Policy Analysis</span>",
"target": [
"#research > .container > .section-head.fade-up > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b8796",
"bgColor": "#0f2440",
"contrastRatio": 4.26,
"fontSize": "10.5pt (13.94px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"research-side fade-up\" style=\"animation-play-state: running;\">",
"target": [
".research-side"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.5pt (13.94px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"meta\">\n Published March 2025 \u00b7 84 pages \u00b7 Peer reviewed\n </div>",
"target": [
".meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.26 (foreground color: #7b8796, background color: #0f2440, font size: 10.5pt (13.94px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#eef0f3",
"contrastRatio": 2.06,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"quiz\">",
"target": [
"#quiz"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #c8a45c, background color: #eef0f3, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Interactive Tool</span>",
"target": [
"#quiz > .container > .section-head.fade-up > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #c8a45c, background color: #eef0f3, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#eef0f3",
"contrastRatio": 4.23,
"fontSize": "13.4pt (17.85px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"quiz\">",
"target": [
"#quiz"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 13.4pt (17.85px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\n The U.S. Constitution protects a wide range of rights \u2014 but many people are unsure exactly what\n those protections cover. Take our 60-second quiz to check your understanding and learn something\n new along the way.\n </p>",
"target": [
"#quiz > .container > .section-head.fade-up > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 13.4pt (17.85px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#ffffff",
"contrastRatio": 2.35,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">What People Are Saying</span>",
"target": [
"#testimonials > .container > .section-head.fade-up > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#eef0f3",
"contrastRatio": 2.06,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"get-involved\">",
"target": [
"#get-involved"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #c8a45c, background color: #eef0f3, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Volunteer & Engagement</span>",
"target": [
"#get-involved > .container > .section-head.fade-up > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #c8a45c, background color: #eef0f3, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#eef0f3",
"contrastRatio": 4.23,
"fontSize": "13.4pt (17.85px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"get-involved\">",
"target": [
"#get-involved"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 13.4pt (17.85px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\n Whether you have two hours a week or two hours a month, there's a place for you in our movement.\n Join thousands of citizens who are turning civic knowledge into civic power.\n </p>",
"target": [
"#get-involved > .container > .section-head.fade-up > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.23 (foreground color: #6b7280, background color: #eef0f3, font size: 13.4pt (17.85px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c8a45c",
"bgColor": "#ffffff",
"contrastRatio": 2.35,
"fontSize": "9.6pt (12.75px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"faq\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">FAQ</span>",
"target": [
"#faq > .container > .section-head.fade-up > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #c8a45c, background color: #ffffff, font size: 9.6pt (12.75px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"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",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 1.44,
"requiredContrastRatio": 3,
"nodeColor": "#2a5a8c",
"parentColor": "#374151"
},
"relatedNodes": [
{
"html": "<span><strong>Voting Rights Bill S. 142</strong> \u2014 Committee markup this Thursday. <span class=\"alert-badge\">Urgent</span> <a href=\"#\">Take action \u2192</a></span>",
"target": [
".sidebar-box:nth-child(1) > ul > li:nth-child(1) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2a5a8c, surrounding text: #374151)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span><strong>Voting Rights Bill S. 142</strong> \u2014 Committee markup this Thursday. <span class=\"alert-badge\">Urgent</span> <a href=\"#\">Take action \u2192</a></span>",
"target": [
".sidebar-box:nth-child(1) > ul > li:nth-child(1) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Take action \u2192</a>",
"target": [
"li:nth-child(1) > span:nth-child(2) > a[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2a5a8c, surrounding text: #374151)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
},
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 1.44,
"requiredContrastRatio": 3,
"nodeColor": "#2a5a8c",
"parentColor": "#374151"
},
"relatedNodes": [
{
"html": "<span><strong>State Lobbying Disclosure</strong> \u2014 Comment period open until April 30. <a href=\"#\">Submit feedback \u2192</a></span>",
"target": [
".sidebar-box:nth-child(1) > ul > li:nth-child(2) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2a5a8c, surrounding text: #374151)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span><strong>State Lobbying Disclosure</strong> \u2014 Comment period open until April 30. <a href=\"#\">Submit feedback \u2192</a></span>",
"target": [
".sidebar-box:nth-child(1) > ul > li:nth-child(2) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Submit feedback \u2192</a>",
"target": [
"li:nth-child(2) > span:nth-child(2) > a[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2a5a8c, surrounding text: #374151)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
},
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 1.44,
"requiredContrastRatio": 3,
"nodeColor": "#2a5a8c",
"parentColor": "#374151"
},
"relatedNodes": [
{
"html": "<span><strong>Free Speech Town Hall</strong> \u2014 Next session: May 12, 7 PM ET. <a href=\"#\">Register now \u2192</a></span>",
"target": [
".sidebar-box:nth-child(1) > ul > li:nth-child(3) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2a5a8c, surrounding text: #374151)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<span><strong>Free Speech Town Hall</strong> \u2014 Next session: May 12, 7 PM ET. <a href=\"#\">Register now \u2192</a></span>",
"target": [
".sidebar-box:nth-child(1) > ul > li:nth-child(3) > span:nth-child(2)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Register now \u2192</a>",
"target": [
"li:nth-child(3) > span:nth-child(2) > a[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2a5a8c, surrounding text: #374151)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9615
},
{
"y": 576,
"height": 9615
},
{
"y": 1152,
"height": 9615
},
{
"y": 1728,
"height": 9615
},
{
"y": 2304,
"height": 9615
},
{
"y": 2880,
"height": 9615
},
{
"y": 3456,
"height": 9615
},
{
"y": 4032,
"height": 9615
},
{
"y": 4608,
"height": 9615
},
{
"y": 5184,
"height": 9615
},
{
"y": 5760,
"height": 9615
},
{
"y": 6336,
"height": 9615
},
{
"y": 6912,
"height": 9615
},
{
"y": 7488,
"height": 9615
},
{
"y": 8064,
"height": 9615
},
{
"y": 8640,
"height": 9615
},
{
"y": 8895,
"height": 9615
}
],
"scans": 18,
"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: "Advocacy", "Research", "Volunteer".
- **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: "Community Advocacy", "Civil Liberties", "Policy Analysis".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "civic participation", "legislative process", "constitutional rights".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Find Resources", "Learn Rights", "Register to Vote".
- **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: "rights quiz".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "legal resources", "advocacy wins", "action alerts".
- **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.