OpenAI GPT 6 Luna Pro – Social Media
via OpenAI · Generated
- AIMAC Debt 5.17
- Cost $0.018
- Total Violations 28
- HTML Size 45 KB
- Em Dashes 5
Screenshot
View Live Page
Accessibility Issues Found
28 Serious
-
color-contrast serious 28 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="brand-tagline">Find your people. Make it matter.</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f8f7f2">
<meta name="description" content="Meet your people on Common Ground: a social network for sharing ideas, building communities, and making more meaningful connections.">
<title>Common Ground — Find your people. Make it matter.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--ink: #20241f;
--muted: #71766e;
--paper: #f8f7f2;
--white: #fff;
--green: #315b43;
--green-dark: #234633;
--lime: #d7f17c;
--line: #e8e7df;
--coral: #f07861;
--lavender: #e9e3f8;
--shadow: 0 18px 50px rgba(35, 45, 35, .09);
--radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "DM Sans", sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--green);
font-size: .76rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: var(--coral);
border-radius: 9px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, sans-serif; letter-spacing: -.045em; }
h2 { margin-bottom: 14px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; }
.section-intro { max-width: 620px; color: var(--muted); font-size: 1.04rem; }
.btn {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid transparent;
border-radius: 999px;
padding: 0 21px;
background: var(--green);
color: white;
font-weight: 700;
cursor: pointer;
transition: transform .2s, background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--green-dark); box-shadow: 0 8px 22px #315b4330; }
.btn-light { background: white; color: var(--ink); border-color: var(--line); }
.btn-light:hover { background: #f5f4ee; color: var(--ink); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #c9e96a; color: var(--ink); }
.arrow { font-size: 1.15rem; line-height: 1; }
/* Header */
.site-header { position: relative; z-index: 5; }
.topbar {
height: 88px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(32, 36, 31, .08);
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 44px; height: 44px; border-radius: 14px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font: 800 1.08rem Manrope, sans-serif; letter-spacing: -.04em; }
.brand-tagline { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 35px); }
.nav-links a { color: #50564f; font-size: .87rem; font-weight: 600; transition: color .2s; }
.nav-links a:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.sign-in { color: var(--ink); font-weight: 700; font-size: .88rem; }
.header-actions .btn { min-height: 43px; padding: 0 18px; font-size: .85rem; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 9px; cursor: pointer; }
.menu-toggle span { display: block; width: 23px; height: 2px; margin: 5px; background: var(--ink); }
/* Hero */
.hero { padding: 58px 0 78px; }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 5.5%; }
.hero-copy { padding: 22px 0; }
.hero h1 { max-width: 650px; margin: 19px 0 20px; font-size: clamp(3.5rem, 7.1vw, 6.1rem); line-height: .99; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { max-width: 535px; margin-bottom: 28px; color: #62685f; font-size: 1.12rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.social-proof { display: flex; align-items: center; gap: 13px; margin-top: 34px; color: var(--muted); font-size: .81rem; }
.avatar-stack { display: flex; padding-left: 5px; }
.avatar-stack img { width: 31px; height: 31px; margin-left: -6px; border: 2px solid var(--paper); border-radius: 50%; object-fit: cover; }
.social-proof strong { color: var(--ink); }
.hero-visual { position: relative; min-height: 495px; }
.hero-photo { position: absolute; inset: 10px 20px 18px 38px; width: calc(100% - 58px); height: calc(100% - 28px); object-fit: cover; border-radius: 45% 45% 25px 25px; }
.photo-shade { position: absolute; inset: 10px 20px 18px 38px; border-radius: 45% 45% 25px 25px; background: linear-gradient(180deg, transparent 46%, rgba(16,28,20,.45)); }
.float-card {
position: absolute;
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
background: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.85);
border-radius: 17px;
box-shadow: var(--shadow);
backdrop-filter: blur(8px);
}
.float-card small { display: block; color: var(--muted); font-size: .7rem; }
.float-card strong { display: block; font-size: .84rem; }
.float-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--lime); font-size: 1.15rem; }
.float-top { top: 83px; left: 0; }
.float-bottom { right: 0; bottom: 45px; }
.float-bottom .float-icon { background: var(--lavender); }
.photo-caption { position: absolute; left: 65px; bottom: 42px; color: white; }
.photo-caption small { display: block; opacity: .8; font-size: .76rem; }
.photo-caption strong { font: 700 1.04rem Manrope, sans-serif; }
/* Community ticker */
.ticker { overflow: hidden; padding: 15px 0; background: var(--green); color: white; }
.ticker-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ticker-label { color: #dce8dc; font-size: .77rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.ticker-topics { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.topic-pill { padding: 6px 12px; border: 1px solid #ffffff44; border-radius: 50px; color: #f4f7f1; font-size: .75rem; white-space: nowrap; }
/* Trending */
.section { padding: 94px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-head .section-intro { margin-bottom: 0; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.text-link:hover { gap: 12px; }
.trend-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.trend-card { overflow: hidden; min-width: 0; background: white; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.trend-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.trend-image { position: relative; height: 218px; overflow: hidden; }
.trend-card:first-child .trend-image { height: 250px; }
.trend-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.trend-card:hover .trend-image img { transform: scale(1.04); }
.trend-label { position: absolute; top: 15px; left: 15px; padding: 6px 11px; border-radius: 50px; background: rgba(255,255,255,.93); font-size: .7rem; font-weight: 700; }
.trend-body { padding: 20px 21px 19px; }
.trend-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: var(--muted); font-size: .73rem; }
.trend-body h3 { margin-bottom: 8px; font-size: 1.15rem; line-height: 1.3; }
.trend-body p { min-height: 68px; margin-bottom: 15px; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.post-author { display: flex; align-items: center; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .77rem; font-weight: 700; }
.post-author img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.post-author span { margin-left: auto; color: var(--muted); font-weight: 500; }
/* Manifesto / story */
.story-band { padding: 80px 0; background: #efeee7; }
.story-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 9%; }
.story-photo-wrap { position: relative; padding: 0 20px 20px 0; }
.story-photo-wrap::before { position: absolute; content: ""; right: 0; bottom: 0; width: 72%; height: 74%; border-radius: 22px; background: var(--lime); }
.story-photo { position: relative; width: 100%; height: 420px; object-fit: cover; border-radius: 22px; }
.story-note { position: absolute; right: -2px; top: 27px; width: 150px; padding: 15px; border-radius: 16px; background: white; box-shadow: var(--shadow); transform: rotate(3deg); }
.story-note span { color: var(--green); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.story-note strong { display: block; margin-top: 4px; font: 700 1.2rem Manrope, sans-serif; }
.story-copy h2 { max-width: 550px; margin-top: 17px; }
.story-copy p { color: #656a62; font-size: .97rem; line-height: 1.8; }
.story-copy p + p { margin-top: 12px; }
.story-stat-row { display: flex; gap: 34px; margin: 26px 0 27px; }
.story-stat strong { display: block; font: 800 1.55rem Manrope, sans-serif; letter-spacing: -.05em; }
.story-stat span { color: var(--muted); font-size: .76rem; }
/* Features */
.features { padding: 96px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 38px; }
.feature-card { padding: 25px; border: 1px solid var(--line); border-radius: 21px; background: white; }
.feature-icon { display: grid; width: 47px; height: 47px; place-items: center; margin-bottom: 22px; border-radius: 15px; background: #edf3e7; color: var(--green); font-size: 1.35rem; }
.feature-card:nth-child(2) .feature-icon { background: #f9e7e0; color: #c85f4a; }
.feature-card:nth-child(3) .feature-icon { background: var(--lavender); color: #65538b; }
.feature-card h3 { margin-bottom: 9px; font-size: 1.13rem; }
.feature-card p { margin-bottom: 0; color: var(--muted); font-size: .87rem; line-height: 1.7; }
/* Creator studio */
.studio-section { padding: 84px 0; background: #e9eee6; }
.studio-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 8%; }
.studio-copy h2 { margin-top: 15px; }
.studio-copy p { max-width: 430px; color: #626a60; line-height: 1.75; }
.studio-points { display: grid; gap: 12px; margin-top: 23px; }
.studio-point { display: flex; align-items: center; gap: 10px; color: #39463b; font-size: .86rem; font-weight: 600; }
.check { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: white; color: var(--green); font-size: .74rem; }
.composer { padding: 26px; background: white; border: 1px solid #e1e6df; border-radius: 22px; box-shadow: 0 18px 48px rgba(35,55,37,.08); }
.composer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.composer-head h3 { margin: 0; font-size: 1.14rem; }
.draft-tag { padding: 5px 9px; border-radius: 30px; background: #f0f1eb; color: #747b70; font-size: .68rem; font-weight: 700; }
.composer label { display: block; margin: 14px 0 6px; color: #535b51; font-size: .76rem; font-weight: 700; }
.composer textarea, .composer input, .composer select {
width: 100%;
border: 1px solid #e3e5df;
border-radius: 11px;
padding: 12px 13px;
background: #fdfdfb;
color: var(--ink);
outline: none;
transition: border .2s, box-shadow .2s;
}
.composer textarea:focus, .composer input:focus, .composer select:focus { border-color: #78937e; box-shadow: 0 0 0 3px #315b4315; }
.composer textarea { min-height: 102px; resize: vertical; }
.composer textarea::placeholder { color: #9a9e96; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.composer-hint { color: var(--muted); font-size: .72rem; }
.composer .btn { min-height: 43px; padding: 0 17px; font-size: .83rem; }
.schedule-status { min-height: 20px; margin: 12px 0 0; color: var(--green); font-size: .8rem; font-weight: 700; }
.queue { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.queue-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: .76rem; font-weight: 700; }
.queue-title span:last-child { color: var(--muted); font-weight: 500; }
.queue-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border-radius: 10px; background: #f7f8f4; font-size: .75rem; }
.queue-item + .queue-item { margin-top: 7px; }
.queue-item strong { display: block; max-width: 255px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item time { flex-shrink: 0; color: var(--muted); font-size: .7rem; }
/* Events */
.events-section { padding: 96px 0; }
.events-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; margin-top: 35px; }
.event-feature { position: relative; min-height: 365px; overflow: hidden; border-radius: 24px; color: white; }
.event-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-feature::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(16,27,20,.82), rgba(16,27,20,.05)); }
.event-content { position: absolute; z-index: 1; left: 30px; bottom: 30px; max-width: 390px; }
.event-date { display: inline-flex; gap: 7px; align-items: center; padding: 6px 10px; border-radius: 30px; background: var(--lime); color: var(--ink); font-size: .7rem; font-weight: 700; }
.event-content h3 { margin: 15px 0 8px; font-size: 1.8rem; line-height: 1.15; }
.event-content p { margin-bottom: 18px; color: #e2e7df; font-size: .86rem; }
.event-content .btn { min-height: 42px; font-size: .82rem; }
.event-list { display: grid; gap: 12px; }
.event-item { display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.date-box { display: grid; flex: 0 0 51px; width: 51px; height: 55px; align-content: center; text-align: center; border-radius: 12px; background: #f2f4ed; color: var(--green); }
.date-box strong { font: 800 1.2rem Manrope, sans-serif; line-height: 1; }
.date-box span { margin-top: 4px; font-size: .63rem; font-weight: 700; text-transform: uppercase; }
.event-item h3 { margin: 0 0 4px; font-size: .94rem; letter-spacing: -.02em; }
.event-item p { margin: 0; color: var(--muted); font-size: .74rem; }
.event-item .arrow { margin-left: auto; color: var(--green); }
/* Testimonials */
.voices { padding: 86px 0 96px; background: #f0eee7; }
.voices-head { max-width: 650px; margin: 0 auto 35px; text-align: center; }
.voices-head .eyebrow { justify-content: center; }
.voices-head h2 { margin-top: 14px; }
.voices-head p { color: var(--muted); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote-card { padding: 23px; border: 1px solid #e5e2d9; border-radius: 19px; background: rgba(255,255,255,.75); }
.stars { margin-bottom: 12px; color: #bb7a29; letter-spacing: 2px; font-size: .85rem; }
.quote-card blockquote { margin: 0 0 20px; color: #424941; font-size: .88rem; line-height: 1.75; }
.quote-person { display: flex; align-items: center; gap: 10px; }
.quote-person img { width: 39px; height: 39px; border-radius: 50%; object-fit: cover; }
.quote-person strong { display: block; font-size: .78rem; }
.quote-person span { display: block; color: var(--muted); font-size: .7rem; }
/* CTA / footer */
.closing { padding: 62px 0; }
.closing-box { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 44px 52px; border-radius: 25px; background: var(--green); color: white; }
.closing-box h2 { max-width: 590px; margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3.1rem); }
.closing-box p { max-width: 550px; margin-bottom: 0; color: #dce6dc; }
.closing-box .btn { flex-shrink: 0; }
footer { padding: 30px 0 24px; border-top: 1px solid var(--line); }
.footer-main { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 32px; }
.footer-brand { max-width: 290px; }
.footer-brand p { margin: 15px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 48px; }
.footer-col strong { display: block; margin-bottom: 13px; font: 700 .8rem Manrope, sans-serif; }
.footer-col a { display: block; margin: 8px 0; color: var(--muted); font-size: .77rem; }
.footer-col a:hover { color: var(--green); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 19px; border-top: 1px solid var(--line); color: var(--muted); font-size: .73rem; }
.footer-social { display: flex; gap: 17px; }
.footer-social a { color: #555d54; font-weight: 700; }
@media (max-width: 920px) {
.nav-links { gap: 15px; }
.nav-links a { font-size: .8rem; }
.header-actions { gap: 9px; }
.header-actions .btn { padding: 0 13px; }
.hero-grid { gap: 2%; }
.hero-visual { min-height: 420px; }
.trend-grid { grid-template-columns: 1fr 1fr; }
.trend-card:first-child { grid-column: span 2; }
.trend-card:first-child .trend-image { height: 280px; }
.studio-grid { gap: 5%; }
.footer-links { gap: 25px; }
}
@media (max-width: 700px) {
.wrap { width: min(100% - 34px, 540px); }
.topbar { height: 73px; }
.brand img { width: 39px; height: 39px; }
.brand-tagline { font-size: .62rem; }
.header-actions { margin-left: auto; margin-right: 10px; }
.header-actions .sign-in { display: none; }
.header-actions .btn { min-height: 39px; font-size: .77rem; }
.menu-toggle { display: block; }
.nav-links {
position: absolute;
top: 73px;
left: 0;
right: 0;
display: none;
align-items: stretch;
padding: 13px 22px 20px;
border-bottom: 1px solid var(--line);
background: var(--paper);
box-shadow: 0 16px 22px rgba(30,40,30,.07);
}
.nav-links.open { display: flex; flex-direction: column; gap: 0; }
.nav-links a { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.nav-links a:last-child { border: 0; }
.hero { padding: 40px 0 56px; }
.hero-grid { grid-template-columns: 1fr; gap: 26px; }
.hero-copy { padding: 0; }
.hero h1 { max-width: 520px; margin: 15px 0; font-size: clamp(3.25rem, 14vw, 5rem); }
.hero-copy > p { font-size: 1rem; }
.hero-visual { width: 100%; min-height: 390px; }
.hero-photo, .photo-shade { inset: 5px 17px 15px 27px; width: calc(100% - 44px); height: calc(100% - 20px); }
.float-top { top: 35px; }
.float-bottom { bottom: 33px; }
.photo-caption { left: 48px; bottom: 34px; }
.ticker-inner { align-items: flex-start; flex-direction: column; gap: 12px; }
.ticker-topics { justify-content: flex-start; }
.section { padding: 69px 0; }
.section-head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 25px; }
.trend-grid { grid-template-columns: 1fr; }
.trend-card:first-child { grid-column: auto; }
.trend-card:first-child .trend-image, .trend-image { height: 220px; }
.trend-body p { min-height: 0; }
.story-band { padding: 65px 0; }
.story-grid { grid-template-columns: 1fr; gap: 36px; }
.story-photo { height: 340px; }
.story-copy h2 { font-size: 2.45rem; }
.features { padding: 70px 0; }
.feature-grid { grid-template-columns: 1fr; margin-top: 27px; }
.feature-card { padding: 22px; }
.feature-icon { margin-bottom: 15px; }
.studio-section { padding: 69px 0; }
.studio-grid { grid-template-columns: 1fr; gap: 27px; }
.composer { padding: 20px; }
.form-row { grid-template-columns: 1fr; gap: 0; }
.composer-bottom { align-items: flex-start; flex-direction: column; }
.composer-bottom .btn { width: 100%; }
.events-section { padding: 70px 0; }
.events-layout { grid-template-columns: 1fr; }
.event-feature { min-height: 330px; }
.voices { padding: 68px 0; }
.quote-grid { grid-template-columns: 1fr; }
.closing { padding: 45px 0; }
.closing-box { align-items: flex-start; flex-direction: column; padding: 31px 25px; }
.closing-box .btn { width: 100%; }
.footer-main { flex-direction: column; gap: 30px; }
.footer-links { grid-template-columns: repeat(2, 1fr); gap: 25px 20px; }
.footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<header class="site-header">
<div class="wrap topbar">
<a class="brand" href="#home" aria-label="Common Ground home">
<img src="https://placehold.co/88x88/315b43/ffffff?text=CG&font=manrope" alt="Common Ground logo">
<span class="brand-copy">
<span class="brand-name">common ground</span>
<span class="brand-tagline">Find your people. Make it matter.</span>
</span>
</a>
<nav class="nav-links" id="primary-nav" aria-label="Main navigation">
<a href="#discover">Discover</a>
<a href="#stories">Stories</a>
<a href="#groups">Groups</a>
<a href="#events">Events</a>
<a href="#create">Create</a>
<a href="#about">About us</a>
</nav>
<div class="header-actions">
<a class="sign-in" href="#join">Log in</a>
<a class="btn" href="#join">Join the community <span class="arrow">↗</span></a>
</div>
<button class="menu-toggle" id="menu-toggle" aria-label="Open navigation menu" aria-expanded="false" aria-controls="primary-nav">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="home">
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="eyebrow">A little more human, online</span>
<h1>Good things grow <em>together.</em></h1>
<p>Common Ground is a social network for the things that bring us closer. Find your people, share what you care about, and turn everyday connections into a community that shows up.</p>
<div class="hero-actions">
<a class="btn" href="#join">Find your community <span class="arrow">↗</span></a>
<a class="btn btn-light" href="#discover">See what’s happening</a>
</div>
<div class="social-proof">
<div class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/80?u=common-ava1" alt="">
<img src="https://i.pravatar.cc/80?u=common-ava2" alt="">
<img src="https://i.pravatar.cc/80?u=common-ava3" alt="">
<img src="https://i.pravatar.cc/80?u=common-ava4" alt="">
</div>
<span><strong>42,000+ curious people</strong><br>already making room for more.</span>
</div>
</div>
<div class="hero-visual" aria-label="Friends gathered around a table">
<img class="hero-photo" src="https://picsum.photos/id/1011/900/1100" alt="A sunlit outdoor gathering with friends">
<div class="photo-shade"></div>
<div class="float-card float-top">
<div class="float-icon" aria-hidden="true">✳</div>
<div><small>New group taking off</small><strong>Slow Sunday Club</strong></div>
</div>
<div class="float-card float-bottom">
<div class="float-icon" aria-hidden="true">♡</div>
<div><small>A little love goes a long way</small><strong>268 thoughtful replies</strong></div>
</div>
<div class="photo-caption"><small>Community looks good on you</small><strong>More connection. Less noise.</strong></div>
</div>
</div>
</section>
<div class="ticker" aria-label="Popular community topics">
<div class="wrap ticker-inner">
<span class="ticker-label">The community is talking about</span>
<div class="ticker-topics">
<span class="topic-pill">#SmallWins</span>
<span class="topic-pill">#CreativePractice</span>
<span class="topic-pill">#LocalFood</span>
<span class="topic-pill">#BetterTogether</span>
<span class="topic-pill">#WeekendPlans</span>
</div>
</div>
</div>
<section class="section" id="discover">
<div class="wrap">
<div class="section-head">
<div>
<span class="eyebrow">A good place to start</span>
<h2>Worth a little of your scroll.</h2>
<p class="section-intro">Fresh perspectives from people who care. Our discovery algorithm looks beyond the loudest voices to surface thoughtful posts, useful ideas, and conversations you’ll actually want to join.</p>
</div>
<a class="text-link" href="#stories">Explore all stories <span class="arrow">→</span></a>
</div>
<div class="trend-grid">
<article class="trend-card">
<div class="trend-image">
<img src="https://picsum.photos/id/1060/1000/700" alt="A colorful home-cooked meal ready to share">
<span class="trend-label">Community favorite</span>
</div>
<div class="trend-body">
<div class="trend-meta"><span>FOOD & EVERYDAY JOY</span><span>6 min read</span></div>
<h3>The neighborhood table that started with one extra chair</h3>
<p>After one simple invitation, a Sunday lunch grew into a monthly ritual. Maya shares the recipes, happy accidents, and little traditions that made it stick.</p>
<div class="post-author">
<img src="https://i.pravatar.cc/80?u=maya-rivera" alt="">
Maya Rivera <span>2 hours ago</span>
</div>
</div>
</article>
<article class="trend-card">
<div class="trend-image">
<img src="https://picsum.photos/id/1035/800/600" alt="A quiet mountain lake at sunrise">
<span class="trend-label">On the rise</span>
</div>
<div class="trend-body">
<div class="trend-meta"><span>OUTDOORS</span><span>4 min read</span></div>
<h3>Take the long way home</h3>
<p>One local walking group is trading step counts for small discoveries—and finding a new way to feel at home in their own city.</p>
<div class="post-author">
<img src="https://i.pravatar.cc/80?u=leo-park" alt="">
Leo Park <span>5 hours ago</span>
</div>
</div>
</article>
<article class="trend-card">
<div class="trend-image">
<img src="https://picsum.photos/id/1068/800/600" alt="A creative studio filled with plants and natural light">
<span class="trend-label">Made together</span>
</div>
<div class="trend-body">
<div class="trend-meta"><span>CREATIVE PRACTICE</span><span>8 min read</span></div>
<h3>Make something before you feel ready</h3>
<p>A no-pressure sketching circle is helping first-timers turn “I can’t draw” into a weekly hour of play, practice, and pleasant surprises.</p>
<div class="post-author">
<img src="https://i.pravatar.cc/80?u=imani-wells" alt="">
Imani Wells <span>Yesterday</span>
</div>
</div>
</article>
</div>
</div>
</section>
<section class="story-band" id="stories">
<div class="wrap story-grid">
<div class="story-photo-wrap">
<img class="story-photo" src="https://picsum.photos/id/1012/900/850" alt="Friends sharing a moment together outside">
<div class="story-note"><span>A note from us</span><strong>Be here<br>for each other.</strong></div>
</div>
<div class="story-copy" id="about">
<span class="eyebrow">A network with room to breathe</span>
<h2>Connection shouldn’t feel like keeping up.</h2>
<p>We started Common Ground with a simple question: what if social media helped you feel more connected to your life, not more distracted from it? So we built a place where the quality of a conversation matters more than the speed of a reaction.</p>
<p>There are no engagement tricks or mystery boosts here. Your feed learns from the communities you choose, the conversations you join, and the voices you tell us you want to hear. Every impression is an invitation—not a competition for your attention.</p>
<p>That means creators can build trust at their own pace, small groups can find their people, and an influencer with something meaningful to share can reach an audience that’s genuinely interested.</p>
<div class="story-stat-row">
<div class="story-stat"><strong>2.4m</strong><span>kind conversations</span></div>
<div class="story-stat"><strong>84%</strong><span>feel more connected</span></div>
<div class="story-stat"><strong>0</strong><span>rage-bait rankings</span></div>
</div>
<a class="text-link" href="#join">Read our community promise <span class="arrow">→</span></a>
</div>
</div>
</section>
<section class="features" id="groups">
<div class="wrap">
<span class="eyebrow">Your corner of the internet</span>
<h2>Find your people. Then make it yours.</h2>
<p class="section-intro">From a few neighbors swapping garden tips to thousands of fans learning from a favorite creator, Common Ground gives every kind of community the tools to grow with care.</p>
<div class="feature-grid">
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">⌂</div>
<h3>Groups with a point of view</h3>
<p>Start a private circle or open a public group around something you love. Set clear guidelines, welcome new members, and keep conversations organized with pinned posts and topic threads.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">✎</div>
<h3>Sharing that feels like you</h3>
<p>Post a photo, a voice note, a long-form story, or a quick thought. Give your work context, invite real replies, and build an audience through trust—not a race for impressions.</p>
</article>
<article class="feature-card">
<div class="feature-icon" aria-hidden="true">◎</div>
<h3>Creators, meet your community</h3>
<p>Make space for thoughtful collaboration. Creator profiles, audience insights, and welcoming community spaces help independent voices and responsible influencers grow sustainably.</p>
</article>
</div>
</div>
</section>
<section class="studio-section" id="create">
<div class="wrap studio-grid">
<div class="studio-copy">
<span class="eyebrow">Your next good idea</span>
<h2>Create when inspiration strikes. Share when it’s right.</h2>
<p>Give your post a little breathing room before it goes live. Write it now, choose a community, and schedule a moment when your people are most likely to be around. Your plan stays yours—you can edit or remove it anytime.</p>
<div class="studio-points">
<div class="studio-point"><span class="check">✓</span> One simple calendar for your communities</div>
<div class="studio-point"><span class="check">✓</span> Thoughtful timing, never engagement bait</div>
<div class="studio-point"><span class="check">✓</span> Your drafts stay private until you share</div>
</div>
</div>
<form class="composer" id="scheduler-form">
<div class="composer-head">
<h3>Post planner</h3>
<span class="draft-tag">YOUR CREATOR STUDIO</span>
</div>
<label for="post-copy">What would you like to share?</label>
<textarea id="post-copy" name="post-copy" placeholder="A thought, a little win, something your community might love…"></textarea>
<div class="form-row">
<div>
<label for="post-group">Share with</label>
<select id="post-group" name="post-group">
<option>My community</option>
<option>Slow Sunday Club</option>
<option>Creative Practice Circle</option>
<option>Neighborhood Gardeners</option>
</select>
</div>
<div>
<label for="post-time">Schedule for</label>
<input id="post-time" name="post-time" type="datetime-local" required>
</div>
</div>
<div class="composer-bottom">
<span class="composer-hint">Your community, your timing.</span>
<button class="btn" type="submit">Schedule post <span class="arrow">↗</span></button>
</div>
<p class="schedule-status" id="schedule-status" role="status" aria-live="polite"></p>
<div class="queue" aria-label="Scheduled posts">
<div class="queue-title"><span>Coming up</span><span id="queue-count">2 posts scheduled</span></div>
<div class="queue-list" id="queue-list">
<div class="queue-item"><strong>Share the little things you’re growing 🌱</strong><time>Today · 4:30 PM</time></div>
<div class="queue-item"><strong>Sunday sketchbook check-in</strong><time>Tomorrow · 10:00 AM</time></div>
</div>
</div>
</form>
</div>
</section>
<section class="events-section" id="events">
<div class="wrap">
<div class="section-head">
<div>
<span class="eyebrow">Good things, in real life</span>
<h2>Make a plan to meet up.</h2>
<p class="section-intro">The best online communities have a way of spilling into the real world. Find a welcoming local gathering, join a live conversation, or host something small of your own.</p>
</div>
<a class="text-link" href="#join">Discover all events <span class="arrow">→</span></a>
</div>
<div class="events-layout">
<article class="event-feature">
<img src="https://picsum.photos/id/1015/1100/800" alt="A group of people exploring a scenic outdoor trail">
<div class="event-content">
<span class="event-date">✦ COMMUNITY PICK · SAT, JUN 21</span>
<h3>Out of office, into the wild.</h3>
<p>A gentle morning hike, a shared thermos, and a no-pressure invitation to meet the people behind your favorite local group.</p>
<a class="btn btn-lime" href="#join">Save your spot <span class="arrow">↗</span></a>
</div>
</article>
<div class="event-list">
<a class="event-item" href="#join">
<div class="date-box"><strong>18</strong><span>Jun</span></div>
<div><h3>Sketch & sip: open studio</h3><p>Live · Creative Practice Circle</p></div>
<span class="arrow">↗</span>
</a>
<a class="event-item" href="#join">
<div class="date-box"><strong>20</strong><span>Jun</span></div>
<div><h3>Ask a grower: balcony gardens</h3><p>Online · Neighborhood Gardeners</p></div>
<span class="arrow">↗</span>
</a>
<a class="event-item" href="#join">
<div class="date-box"><strong>22</strong><span>Jun</span></div>
<div><h3>Sunday table, open seats</h3><p>In person · Portland, OR</p></div>
<span class="arrow">↗</span>
</a>
<a class="event-item" href="#join">
<div class="date-box"><strong>25</strong><span>Jun</span></div>
<div><h3>Make room for good ideas</h3><p>Live talk · The Good Work Group</p></div>
<span class="arrow">↗</span>
</a>
</div>
</div>
</div>
</section>
<section class="voices">
<div class="wrap">
<div class="voices-head">
<span class="eyebrow">A few words from the neighborhood</span>
<h2>Better together looks different for everyone.</h2>
<p>Small moments, new friendships, and the good feeling of finding a place where you belong.</p>
</div>
<div class="quote-grid">
<article class="quote-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“I came for the gardening advice and stayed for the people. It’s the first time an app has introduced me to neighbors I now actually see every week.”</blockquote>
<div class="quote-person">
<img src="https://i.pravatar.cc/90?u=elena-morales" alt="">
<div><strong>Elena Morales</strong><span>Neighborhood Gardener</span></div>
</div>
</article>
<article class="quote-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“My work doesn’t need to go viral to matter. I can have a real conversation with the people who care about what I make, and that’s changed how I create.”</blockquote>
<div class="quote-person">
<img src="https://i.pravatar.cc/90?u=jamie-chen" alt="">
<div><strong>Jamie Chen</strong><span>Illustrator & community host</span></div>
</div>
</article>
<article class="quote-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“It feels like a social network with the volume turned down and the good parts turned up. I leave with something to think about, not another hour lost.”</blockquote>
<div class="quote-person">
<img src="https://i.pravatar.cc/90?u=marcus-hill" alt="">
<div><strong>Marcus Hill</strong><span>Member since 2022</span></div>
</div>
</article>
</div>
</div>
</section>
<section class="closing" id="join">
<div class="wrap">
<div class="closing-box">
<div>
<h2>There’s a place for you here.</h2>
<p>Bring your curiosity, your half-formed ideas, and your whole self. Your next favorite corner of the internet is one hello away.</p>
</div>
<a class="btn btn-lime" href="mailto:hello@commonground.social">Join Common Ground <span class="arrow">↗</span></a>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-main">
<div class="footer-brand">
<a class="brand" href="#home">
<img src="https://placehold.co/88x88/315b43/ffffff?text=CG&font=manrope" alt="">
<span class="brand-copy">
<span class="brand-name">common ground</span>
<span class="brand-tagline">Find your people. Make it matter.</span>
</span>
</a>
<p>A social network for the people, passions, and small moments that make life feel a little more connected.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<strong>Explore</strong>
<a href="#discover">Discover</a>
<a href="#stories">Stories</a>
<a href="#events">Events</a>
</div>
<div class="footer-col">
<strong>Make it yours</strong>
<a href="#groups">Groups</a>
<a href="#create">Creator studio</a>
<a href="#join">Community guidelines</a>
</div>
<div class="footer-col">
<strong>Say hello</strong>
<a href="mailto:hello@commonground.social">hello@commonground.social</a>
<a href="tel:+14155550184">+1 (415) 555-0184</a>
<a href="#about">Our story</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="current-year">2025</span> Common Ground Social, Inc. Made for being together.</span>
<div class="footer-social">
<a href="https://www.instagram.com/" aria-label="Instagram">Instagram</a>
<a href="https://www.tiktok.com/" aria-label="TikTok">TikTok</a>
<a href="https://www.linkedin.com/" aria-label="LinkedIn">LinkedIn</a>
<a href="#privacy">Privacy</a>
<a href="#terms">Terms</a>
</div>
</div>
</div>
</footer>
<script>
(function () {
const menuButton = document.getElementById("menu-toggle");
const nav = document.getElementById("primary-nav");
menuButton.addEventListener("click", function () {
const isOpen = nav.classList.toggle("open");
menuButton.setAttribute("aria-expanded", String(isOpen));
menuButton.setAttribute("aria-label", isOpen ? "Close navigation menu" : "Open navigation menu");
});
nav.querySelectorAll("a").forEach(function (link) {
link.addEventListener("click", function () {
nav.classList.remove("open");
menuButton.setAttribute("aria-expanded", "false");
menuButton.setAttribute("aria-label", "Open navigation menu");
});
});
const year = document.getElementById("current-year");
year.textContent = new Date().getFullYear();
const dateInput = document.getElementById("post-time");
const minDate = new Date(Date.now() + 60 * 60 * 1000);
minDate.setMinutes(Math.ceil(minDate.getMinutes() / 15) * 15, 0, 0);
const localDate = new Date(minDate.getTime() - minDate.getTimezoneOffset() * 60000);
dateInput.min = localDate.toISOString().slice(0, 16);
const tomorrow = new Date(minDate.getTime() + 24 * 60 * 60 * 1000);
const defaultDate = new Date(tomorrow.getTime() - tomorrow.getTimezoneOffset() * 60000);
dateInput.value = defaultDate.toISOString().slice(0, 16);
const form = document.getElementById("scheduler-form");
const copyInput = document.getElementById("post-copy");
const groupInput = document.getElementById("post-group");
const queueList = document.getElementById("queue-list");
const queueCount = document.getElementById("queue-count");
const status = document.getElementById("schedule-status");
form.addEventListener("submit", function (event) {
event.preventDefault();
const copy = copyInput.value.trim();
const chosenDate = new Date(dateInput.value);
if (!copy) {
status.textContent = "Add a few words to your post before scheduling.";
copyInput.focus();
return;
}
if (!dateInput.value || chosenDate <= new Date()) {
status.textContent = "Choose a time in the future for your post.";
dateInput.focus();
return;
}
const item = document.createElement("div");
item.className = "queue-item";
const title = document.createElement("strong");
title.textContent = copy;
title.title = groupInput.value;
const time = document.createElement("time");
time.dateTime = chosenDate.toISOString();
time.textContent = chosenDate.toLocaleString(undefined, {
weekday: "short",
month: "short",
day: "numeric",
hour: "numeric",
minute: "2-digit"
});
item.append(title, time);
queueList.appendChild(item);
const count = queueList.children.length;
queueCount.textContent = count + (count === 1 ? " post scheduled" : " posts scheduled");
status.textContent = "Your post is scheduled for " + time.textContent + ".";
copyInput.value = "";
});
}());
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:57:45.279Z",
"url": "https://benchmark.aimac.invalid/7a0704412e3b4a11ad3751dde187606c2644112a92ec878f0f2649f62c871427.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<p class=\"schedule-status\" id=\"schedule-status\" role=\"status\" aria-live=\"polite\"></p>",
"target": [
"#schedule-status"
]
}
]
},
{
"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=\"avatar-stack\" aria-hidden=\"true\">",
"target": [
".avatar-stack"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<p class=\"schedule-status\" id=\"schedule-status\" role=\"status\" aria-live=\"polite\"></p>",
"target": [
"#schedule-status"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<p class=\"schedule-status\" id=\"schedule-status\" role=\"status\" aria-live=\"polite\"></p>",
"target": [
"#schedule-status"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
},
{
"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\" type=\"submit\">Schedule post <span class=\"arrow\">\u2197</span></button>",
"target": [
"button[type=\"submit\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>Good things grow <em>together.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Worth a little of your scroll.</h2>",
"target": [
"#discover > .wrap > .section-head > div > h2"
]
},
{
"html": "<h3>The neighborhood table that started with one extra chair</h3>",
"target": [
".trend-card:nth-child(1) > .trend-body > h3"
]
},
{
"html": "<h3>Take the long way home</h3>",
"target": [
".trend-card:nth-child(2) > .trend-body > h3"
]
},
{
"html": "<h3>Make something before you feel ready</h3>",
"target": [
".trend-card:nth-child(3) > .trend-body > h3"
]
},
{
"html": "<h2>Connection shouldn\u2019t feel like keeping up.</h2>",
"target": [
"#about > h2"
]
},
{
"html": "<h2>Find your people. Then make it yours.</h2>",
"target": [
".wrap > h2"
]
},
{
"html": "<h3>Groups with a point of view</h3>",
"target": [
".feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Sharing that feels like you</h3>",
"target": [
".feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Creators, meet your community</h3>",
"target": [
".feature-card:nth-child(3) > h3"
]
},
{
"html": "<h2>Create when inspiration strikes. Share when it\u2019s right.</h2>",
"target": [
".studio-copy > h2"
]
},
{
"html": "<h3>Post planner</h3>",
"target": [
".composer-head > h3"
]
},
{
"html": "<h2>Make a plan to meet up.</h2>",
"target": [
"#events > .wrap > .section-head > div > h2"
]
},
{
"html": "<h3>Out of office, into the wild.</h3>",
"target": [
".event-content > h3"
]
},
{
"html": "<h3>Sketch & sip: open studio</h3>",
"target": [
".event-item[href$=\"#join\"]:nth-child(1) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Ask a grower: balcony gardens</h3>",
"target": [
".event-item[href$=\"#join\"]:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Sunday table, open seats</h3>",
"target": [
".event-item[href$=\"#join\"]:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Make room for good ideas</h3>",
"target": [
".event-item[href$=\"#join\"]:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h2>Better together looks different for everyone.</h2>",
"target": [
".voices-head > h2"
]
},
{
"html": "<h2>There\u2019s a place for you here.</h2>",
"target": [
".closing-box > div > h2"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#20241f",
"bgColor": "#f8f7f2",
"contrastRatio": 14.68,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.68"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"brand-name\">common ground</span>",
"target": [
"a[aria-label=\"Common Ground home\"] > .brand-copy > .brand-name"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"nav-links\" id=\"primary-nav\" aria-label=\"Main navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"post-copy\">What would you like to share?</label>",
"target": [
"label[for=\"post-copy\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<textarea id=\"post-copy\" name=\"post-copy\" placeholder=\"A thought, a little win, something your community might love\u2026\"></textarea>",
"target": [
"#post-copy"
]
}
]
},
{
"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/88x88/315b43/ffffff?text=CG&font=manrope\" alt=\"Common Ground logo\">",
"target": [
"img[alt=\"Common Ground logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "What would you like to share?"
},
"relatedNodes": [
{
"html": "<label for=\"post-copy\">What would you like to share?</label>",
"target": [
"label[for=\"post-copy\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<textarea id=\"post-copy\" name=\"post-copy\" placeholder=\"A thought, a little win, something your community might love\u2026\"></textarea>",
"target": [
"#post-copy"
]
}
]
},
{
"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-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"story-copy\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"text-link\" href=\"#join\">Read our community promise <span class=\"arrow\">\u2192</span></a>",
"target": [
"#about > .text-link[href$=\"#join\"]"
]
}
]
},
{
"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 class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/88x88/315b43/ffffff?text=CG&font=manrope\" alt=\"Common Ground logo\">",
"target": [
"img[alt=\"Common Ground logo\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Share with"
},
"relatedNodes": [
{
"html": "<label for=\"post-group\">Share with</label>",
"target": [
"label[for=\"post-group\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"post-group\" name=\"post-group\">\n <option>My community</option>\n <option>Slow Sunday Club</option>\n <option>Creative Practice Circle</option>\n <option>Neighborhood Gardeners</option>\n </select>",
"target": [
"#post-group"
]
}
]
},
{
"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": 220.2,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (220.2px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Common Ground home\">",
"target": [
"a[aria-label=\"Common Ground home\"]"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"hero-visual\" aria-label=\"Friends gathered around a table\">",
"target": [
".hero-visual"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"float-card float-top\">\n <div class=\"float-icon\" aria-hidden=\"true\">\u2733</div>\n <div><small>New group taking off</small><strong>Slow Sunday Club</strong></div>\n </div>",
"target": [
".float-top"
]
},
{
"html": "<div class=\"photo-shade\"></div>",
"target": [
".photo-shade"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>New group taking off</small>",
"target": [
".float-top > div:nth-child(2) > small"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
},
{
"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": "bgOverlap"
},
"relatedNodes": [
{
"html": "<div class=\"footer-brand\">",
"target": [
".footer-brand"
]
}
],
"impact": "serious",
"message": "Element's contrast ratio could not be determined because of element overlap"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"brand\" href=\"#home\">",
"target": [
".footer-brand > .brand[href$=\"#home\"]"
],
"failureSummary": "Fix any of the following:\n Element's contrast ratio could not be determined because of element overlap"
}
]
}
],
"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": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tagline\">Find your people. Make it matter.</span>",
"target": [
"a[aria-label=\"Common Ground home\"] > .brand-copy > .brand-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.7pt (12.96px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.7pt (12.96px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><strong>42,000+ curious people</strong><br>already making room for more.</span>",
"target": [
".social-proof > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.7pt (12.96px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "12.5pt (16.64px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 12.5pt (16.64px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-intro\">Fresh perspectives from people who care. Our discovery algorithm looks beyond the loudest voices to surface thoughtful posts, useful ideas, and conversations you\u2019ll actually want to join.</p>",
"target": [
"#discover > .wrap > .section-head > div > .section-intro"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 12.5pt (16.64px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#efeee7",
"contrastRatio": 3.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"story-band\" id=\"stories\">",
"target": [
"#stories"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #71766e, background color: #efeee7, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>kind conversations</span>",
"target": [
".story-stat:nth-child(1) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #71766e, background color: #efeee7, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#efeee7",
"contrastRatio": 3.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"story-band\" id=\"stories\">",
"target": [
"#stories"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #71766e, background color: #efeee7, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>feel more connected</span>",
"target": [
".story-stat:nth-child(2) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #71766e, background color: #efeee7, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#efeee7",
"contrastRatio": 3.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"story-band\" id=\"stories\">",
"target": [
"#stories"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.99 (foreground color: #71766e, background color: #efeee7, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>rage-bait rankings</span>",
"target": [
".story-stat:nth-child(3) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.99 (foreground color: #71766e, background color: #efeee7, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "12.5pt (16.64px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 12.5pt (16.64px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-intro\">From a few neighbors swapping garden tips to thousands of fans learning from a favorite creator, Common Ground gives every kind of community the tools to grow with care.</p>",
"target": [
".wrap > .section-intro"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 12.5pt (16.64px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#747b70",
"bgColor": "#f0f1eb",
"contrastRatio": 3.84,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"draft-tag\">YOUR CREATOR STUDIO</span>",
"target": [
".draft-tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.84 (foreground color: #747b70, background color: #f0f1eb, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"draft-tag\">YOUR CREATOR STUDIO</span>",
"target": [
".draft-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.84 (foreground color: #747b70, background color: #f0f1eb, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f7f8f4",
"contrastRatio": 4.35,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"queue-item\"><strong>Share the little things you\u2019re growing \ud83c\udf31</strong><time>Today \u00b7 4:30 PM</time></div>",
"target": [
".queue-item:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #71766e, background color: #f7f8f4, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<time>Today \u00b7 4:30 PM</time>",
"target": [
".queue-item:nth-child(1) > time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #71766e, background color: #f7f8f4, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f7f8f4",
"contrastRatio": 4.35,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"queue-item\"><strong>Sunday sketchbook check-in</strong><time>Tomorrow \u00b7 10:00 AM</time></div>",
"target": [
".queue-item:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #71766e, background color: #f7f8f4, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<time>Tomorrow \u00b7 10:00 AM</time>",
"target": [
".queue-item:nth-child(2) > time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #71766e, background color: #f7f8f4, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "12.5pt (16.64px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 12.5pt (16.64px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-intro\">The best online communities have a way of spilling into the real world. Find a welcoming local gathering, join a live conversation, or host something small of your own.</p>",
"target": [
"#events > .wrap > .section-head > div > .section-intro"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 12.5pt (16.64px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f0eee7",
"contrastRatio": 4,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"voices\">",
"target": [
".voices"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #71766e, background color: #f0eee7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Small moments, new friendships, and the good feeling of finding a place where you belong.</p>",
"target": [
".voices-head > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #71766e, background color: #f0eee7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#fbfbf9",
"contrastRatio": 4.48,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"quote-card\">",
"target": [
".quote-card:nth-child(1)"
]
},
{
"html": "<section class=\"voices\">",
"target": [
".voices"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.48 (foreground color: #71766e, background color: #fbfbf9, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Neighborhood Gardener</span>",
"target": [
".quote-card:nth-child(1) > .quote-person > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.48 (foreground color: #71766e, background color: #fbfbf9, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#fbfbf9",
"contrastRatio": 4.48,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"quote-card\">",
"target": [
".quote-card:nth-child(2)"
]
},
{
"html": "<section class=\"voices\">",
"target": [
".voices"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.48 (foreground color: #71766e, background color: #fbfbf9, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Illustrator & community host</span>",
"target": [
".quote-card:nth-child(2) > .quote-person > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.48 (foreground color: #71766e, background color: #fbfbf9, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#fbfbf9",
"contrastRatio": 4.48,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"quote-card\">",
"target": [
".quote-card:nth-child(3)"
]
},
{
"html": "<section class=\"voices\">",
"target": [
".voices"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.48 (foreground color: #71766e, background color: #fbfbf9, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Member since 2022</span>",
"target": [
".quote-card:nth-child(3) > .quote-person > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.48 (foreground color: #71766e, background color: #fbfbf9, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tagline\">Find your people. Make it matter.</span>",
"target": [
".footer-brand > .brand[href$=\"#home\"] > .brand-copy > .brand-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>A social network for the people, passions, and small moments that make life feel a little more connected.</p>",
"target": [
".footer-brand > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#discover\">Discover</a>",
"target": [
".footer-col:nth-child(1) > a[href$=\"#discover\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#stories\">Stories</a>",
"target": [
".footer-col:nth-child(1) > a[href$=\"#stories\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Events</a>",
"target": [
".footer-col:nth-child(1) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#groups\">Groups</a>",
"target": [
".footer-col:nth-child(2) > a[href$=\"#groups\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#create\">Creator studio</a>",
"target": [
".footer-col:nth-child(2) > a[href$=\"#create\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#join\">Community guidelines</a>",
"target": [
".footer-col:nth-child(2) > a[href$=\"#join\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"mailto:hello@commonground.social\">hello@commonground.social</a>",
"target": [
".footer-col:nth-child(3) > a:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+14155550184\">+1 (415) 555-0184</a>",
"target": [
"a[href=\"tel:+14155550184\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "9.2pt (12.32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#about\">Our story</a>",
"target": [
".footer-col:nth-child(3) > a[href$=\"#about\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 9.2pt (12.32px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00a9 <span id=\"current-year\">2026</span> Common Ground Social, Inc. Made for being together.</span>",
"target": [
".footer-bottom > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#71766e",
"bgColor": "#f8f7f2",
"contrastRatio": 4.33,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"current-year\">2026</span>",
"target": [
"#current-year"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.33 (foreground color: #71766e, background color: #f8f7f2, font size: 8.8pt (11.68px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6136
},
{
"y": 576,
"height": 6136
},
{
"y": 1152,
"height": 6136
},
{
"y": 1728,
"height": 6136
},
{
"y": 2304,
"height": 6136
},
{
"y": 2880,
"height": 6136
},
{
"y": 3456,
"height": 6136
},
{
"y": 4032,
"height": 6136
},
{
"y": 4608,
"height": 6136
},
{
"y": 5184,
"height": 6136
},
{
"y": 5416,
"height": 6136
}
],
"scans": 12,
"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 "Social Media" 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: "Social Media"
- Description: Platforms for social networking, sharing, messaging, and online communities.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Social Media" 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: "Events", "Create", "Groups".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Social Media" category. Consider themes similar to: "User Stories", "Trending Content", "Featured Posts".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "impressions", "algorithm", "influencer".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Discover", "Explore", "Subscribe".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Social Media" sector. Ideas similar but not limited to: "content scheduler".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "community highlights", "suggested follows", "live streams".
- **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.