OpenAI GPT 6.1 Sol Pro – Social Media
via OpenAI · Generated
- AIMAC Debt 3.71
- Cost $0.41
- Total Violations 6
- HTML Size 59 KB
- Em Dashes 2
Screenshot
View Live Page
Accessibility Issues Found
6 Serious
-
color-contrast serious 6 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span>Shared interests, not follower counts.</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.0">
<meta name="theme-color" content="#174e3d">
<meta name="description" content="Gatherly brings people together around shared interests. Discover welcoming communities, share what matters, and turn online connections into real-life moments.">
<title>Gatherly — Good people. Shared interests.</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{--bg:#f7f8f3;--surface:#fff;--ink:#202b26;--muted:#69726b;--green:#174e3d;--lime:#d9ef95;--line:#e4e8df;--purple:#eee9fa;--radius:20px;--shadow:0 12px 35px #173b2410}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.65}
h1,h2,h3,h4{font-family:Manrope,sans-serif;line-height:1.22;margin:0;letter-spacing:-.035em}
h1{font-size:clamp(40px,4.2vw,59px);font-weight:800}h2{font-size:30px;font-weight:800}h3{font-size:19px;font-weight:800}
p{margin:0 0 16px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}button:disabled{cursor:default}a,button{transition:background .18s,color .18s,transform .18s,box-shadow .18s}
:focus-visible{outline:3px solid #8cad42;outline-offset:4px}
img{display:block;max-width:100%;object-fit:cover}svg.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.container{width:min(1280px,calc(100% - 80px));margin:auto}
.skip{position:fixed;left:15px;top:-70px;background:var(--green);color:white;padding:12px;z-index:100}.skip:focus{top:12px}
.header{background:#ffffffef;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(15px)}
.header-inner{height:88px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand img{width:39px;height:39px;border-radius:12px}.brand-name{font-family:Manrope;font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1.2}.brand-tagline{font-size:10px;color:var(--muted);letter-spacing:.1px}
.nav{display:flex;align-items:center;gap:23px;margin-left:auto;font-size:13px;font-weight:600}.nav a:hover{color:var(--green)}.nav a:first-child{color:var(--green)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:9px;border:1px solid transparent;border-radius:9px;background:var(--green);color:#fff;padding:11px 19px;font-weight:700;font-size:13px;white-space:nowrap;line-height:1.5}
.button:hover{background:#23634d;transform:translateY(-1px)}.button.light{background:#fff;border-color:var(--line);color:var(--ink)}.button.light:hover{background:#f1f5e9}.button.lime{background:var(--lime);color:var(--green)}.button.small{padding:8px 13px;font-size:12px}.button.joined{background:#eaf2dd;color:var(--green);border-color:#cdddaf}
.mobile-toggle{display:none;border:0;background:none;padding:8px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;display:flex;align-items:center;gap:8px;color:var(--green);margin-bottom:15px}
.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#75a641}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:58px 0 50px}
.hero h1 span{color:var(--green);position:relative}.hero-copy>p{font-size:16px;max-width:465px;color:var(--muted);margin:22px 0 25px;line-height:1.8}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.social-proof{display:flex;gap:13px;align-items:center;margin-top:27px;font-size:11px;color:var(--muted)}.social-proof strong{color:var(--ink)}.avatar-stack{display:flex;padding-left:0}.avatar-stack img{width:33px;height:33px;border:3px solid var(--bg);border-radius:50%;margin-left:-9px}.avatar-stack img:first-child{margin-left:0}
.hero-visual{position:relative;height:407px;border-radius:26px;background:#e1e8d7;padding:12px}
.hero-visual>img{width:100%;height:100%;border-radius:17px;filter:brightness(.88)}
.photo-label{position:absolute;top:31px;left:31px;color:#fff;font-size:11px;background:#273a31a8;padding:6px 12px;border:1px solid #ffffff55;border-radius:30px;backdrop-filter:blur(10px);display:flex;align-items:center;gap:7px}
.floating-card{position:absolute;left:-24px;bottom:24px;width:277px;background:#fff;border-radius:15px;padding:16px 18px;box-shadow:0 10px 40px #0002;transform:rotate(-3deg)}.floating-card .eyebrow{font-size:9px;margin-bottom:7px;letter-spacing:1px}.floating-card h3{font-size:17px}.floating-card p{font-size:11px;color:var(--muted);margin:6px 0 12px}.floating-card-bottom{display:flex;align-items:center;justify-content:space-between}.floating-card .avatar-stack img{width:27px;height:27px;border-color:#fff}
.circle-badge{position:absolute;right:-15px;top:-18px;width:86px;height:86px;border-radius:50%;background:var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);box-shadow:0 0 0 7px var(--bg);font-size:10px;font-weight:700;color:var(--green);line-height:1.35}.circle-badge span{font-size:25px}
.values{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;background:#f0f3e9;margin-bottom:49px;padding:20px 28px;gap:25px}.value{display:flex;gap:13px;align-items:center}.value .icon{color:var(--green);width:24px;height:24px}.value strong{display:block;font-size:12px}.value span{font-size:11px;color:var(--muted)}
.section{margin-bottom:48px;scroll-margin-top:105px}.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:23px}.section-top p{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:670px}.text-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12px;color:var(--green);white-space:nowrap}
.finder{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:#fff;color:var(--muted);padding:8px 15px;border-radius:30px;font-size:12px;font-weight:600}.filter.active{background:var(--green);color:#fff;border-color:var(--green)}.filter:hover{border-color:var(--green)}
.search{position:relative;min-width:245px}.search .icon{position:absolute;left:13px;top:12px;width:16px;color:var(--muted)}.search input{width:100%;padding:10px 12px 10px 38px;border:1px solid var(--line);border-radius:9px;background:white;font-size:12px;color:var(--ink)}
.group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.group-image{height:166px;position:relative}.group-image img{width:100%;height:100%}.category-label{position:absolute;top:13px;left:14px;font-size:10px;font-weight:700;background:#ffffffef;border-radius:5px;padding:4px 9px;backdrop-filter:blur(4px)}
.group-content{padding:21px}.group-heading{display:flex;gap:10px;align-items:center}.group-symbol{font-size:21px;background:#edf3e2;width:41px;height:41px;display:grid;place-items:center;border-radius:11px}.group-heading h3{font-size:17px}.meta{color:var(--muted);font-size:11px}.group-content>p{color:var(--muted);font-size:12px;line-height:1.8;margin:15px 0 17px;min-height:64px}.group-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px}.group-bottom .meta{display:flex;align-items:center;gap:6px}.group-bottom .dot{width:5px;height:5px}
.empty-state{background:#fff;border:1px dashed #c8d4be;border-radius:14px;padding:30px;text-align:center;color:var(--muted);grid-column:1/-1}
.content-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr);gap:28px;align-items:start}
.feed-section .section-top{margin-bottom:19px}.feed-section h2,.side-heading{font-size:25px}
.feed-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:18px}.feed-tab{padding:0 0 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:12px;font-weight:600}.feed-tab.active{color:var(--green);border-bottom-color:var(--green)}
.post{padding:22px;margin-bottom:17px}.post-header{display:flex;gap:11px;align-items:center;margin-bottom:15px}.avatar{width:40px;height:40px;border-radius:50%}.post-author{font-size:12px;font-weight:700}.verified{color:var(--green);font-size:11px}.post-header .meta{font-size:10px}.post-category{margin-left:auto;font-size:10px;background:#f0f4e9;padding:5px 9px;border-radius:5px;color:var(--green)}.post>p{font-size:13px;line-height:1.8;color:#515c53;margin-bottom:15px}.hashtag{color:var(--green);font-weight:600}.post-photo{height:235px;width:100%;border-radius:10px;margin-bottom:16px}.post-actions{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);padding-top:13px}.icon-button{border:0;background:transparent;display:flex;gap:6px;align-items:center;padding:0;color:var(--muted);font-size:11px}.icon-button:hover,.icon-button.active{color:var(--green)}.icon-button.active .icon{fill:#d9ef95}.post-actions .save{margin-left:auto}.post-quote{background:#f1ecf9;border-radius:12px;padding:24px;margin:17px 0;color:#57466c;font-family:Manrope;font-size:19px;font-weight:700;letter-spacing:-.4px}.feed-note{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-top:12px}
.sidebar{display:flex;flex-direction:column;gap:23px}.aside-card{padding:23px}.aside-card h3{margin-bottom:6px}.aside-card>p{font-size:12px;color:var(--muted);margin-bottom:19px}.event{display:flex;gap:13px;padding:17px 0;border-top:1px solid var(--line)}.event-date{background:#eef3e5;border-radius:10px;width:49px;height:57px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--green);font-size:9px;font-weight:700;text-transform:uppercase}.event-date strong{font-size:23px;line-height:1.3}.event h4{font-size:13px;letter-spacing:-.2px;margin-bottom:4px}.event p{font-size:11px;color:var(--muted);margin-bottom:8px}.event .text-link{font-size:11px;border:0;background:none;padding:0}
.market{background:#f0ecf8;border-color:#e4ddf2}.market-image{height:150px;width:100%;border-radius:10px;margin:15px 0}.market .eyebrow{color:#76638e;font-size:10px}.market h3{font-size:19px}.market-bottom{display:flex;justify-content:space-between;align-items:center}.market-bottom span{font-size:11px;color:#6f617e}
.trends h3{font-size:17px;margin-bottom:15px}.trend{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.trend strong{font-size:12px;display:block}.trend span{font-size:10px;color:var(--muted)}.trend-number{font-size:12px;color:#93a187}.trend-label{display:flex;gap:13px;align-items:center}
.update{background:var(--green);color:#fff;border-radius:23px;padding:39px 43px;display:grid;grid-template-columns:1.2fr 1fr;gap:55px;margin:13px 0 48px;overflow:hidden;position:relative}.update .eyebrow{color:var(--lime)}.update h2{font-size:30px;max-width:400px}.update p{color:#ccdcd4;font-size:13px;margin:17px 0 23px;max-width:480px;line-height:1.8}.update-features{display:flex;flex-direction:column;justify-content:center;gap:23px}.update-feature{display:flex;gap:15px}.feature-icon{width:39px;height:39px;background:#ffffff12;border:1px solid #ffffff20;display:grid;place-items:center;border-radius:10px;flex-shrink:0;color:var(--lime)}.update-feature h3{font-size:14px;margin-bottom:5px}.update-feature p{font-size:12px;margin:0}
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.voice{padding:25px}.stars{color:#709542;letter-spacing:3px;font-size:13px;margin-bottom:14px}.voice blockquote{margin:0 0 22px;font-size:13px;line-height:1.85;color:#525d54}.voice-person{display:flex;gap:10px;align-items:center}.voice-person img{width:36px;height:36px;border-radius:50%}.voice-person strong{font-size:11px;display:block}.voice-person span{font-size:10px;color:var(--muted)}
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:75px;padding:12px 0 45px}.faq p{font-size:13px;color:var(--muted);margin:14px 0 18px}.faq details{border-bottom:1px solid var(--line);padding:17px 0}.faq details:first-child{padding-top:0}.faq summary{font-size:13px;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:21px;color:var(--green)}.faq details[open] summary::after{content:"−"}.faq details p{margin-bottom:0;font-size:12px}
.bottom-cta{background:#e9f0d9;border:1px solid #dbe6c5;border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:31px 37px;margin-bottom:55px;gap:25px}.bottom-cta h2{font-size:25px}.bottom-cta p{font-size:13px;color:var(--muted);margin:7px 0 0}
footer{border-top:1px solid var(--line);background:#fff;padding:43px 0 20px}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:36px}.footer-brand p{font-size:12px;color:var(--muted);max-width:250px;margin:15px 0}.footer-column h3{font-size:12px;letter-spacing:0;margin-bottom:15px}.footer-column a{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.footer-column a:hover{color:var(--green)}.footer-column p{font-size:12px;color:var(--muted);margin-bottom:8px}.social-links{display:flex;gap:14px;font-size:12px;font-weight:700;color:var(--green)}.footer-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.footer-legal{display:flex;gap:22px}
dialog{border:1px solid var(--line);border-radius:20px;padding:30px;width:min(500px,calc(100% - 32px));color:var(--ink);box-shadow:0 25px 100px #0003}dialog::backdrop{background:#142a2266;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.dialog-top h2{font-size:24px}.close{border:0;background:#f0f3ea;border-radius:50%;width:30px;height:30px;font-size:20px;line-height:1}.form-label{display:block;font-size:12px;font-weight:700;margin:15px 0 6px}.form-input{width:100%;border:1px solid #d9dfd4;border-radius:8px;padding:11px;background:#fbfcf9;color:var(--ink);font-size:13px}textarea.form-input{resize:vertical;min-height:130px}.dialog-note{font-size:11px;color:var(--muted);margin:14px 0}.dialog-actions{display:flex;justify-content:flex-end;margin-top:20px}.legal-copy{font-size:13px;color:var(--muted)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--green);color:#fff;border-radius:10px;padding:13px 23px;font-size:13px;box-shadow:var(--shadow);z-index:100;transition:transform .25s;max-width:calc(100% - 30px);text-align:center}.toast.visible{transform:translateX(-50%) translateY(0)}
[hidden]{display:none!important}
@media(min-width:1450px){.container{width:1280px}.hero{gap:95px}.hero-visual{height:425px}}
@media(max-width:1150px){.container{width:calc(100% - 48px)}.header-inner{gap:20px}.nav{gap:14px;font-size:12px}.brand-tagline{display:none}.hero{gap:35px}.hero h1{font-size:46px}.group-content{padding:17px}.group-bottom .meta{font-size:10px}.content-grid{gap:22px}.post-category{display:none}}
@media(max-width:900px){.mobile-toggle{display:block;margin-left:auto}.header-inner>.button{padding:9px 12px}.header-inner{height:74px}.nav{display:none;position:absolute;top:74px;left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:20px 24px;flex-wrap:wrap;gap:20px}.nav.open{display:flex}.hero{padding-top:40px;gap:30px}.hero h1{font-size:38px}.hero-visual{height:365px}.floating-card{width:240px;left:-10px}.circle-badge{right:-8px;width:70px;height:70px}.values{padding:18px;gap:15px}.value{gap:9px}.value span{font-size:10px}.group-grid{gap:14px}.group-content>p{min-height:108px}.group-bottom{gap:10px;flex-wrap:wrap}.content-grid{grid-template-columns:1.6fr 1fr}.aside-card{padding:18px}.update{gap:30px;padding:32px}.voice{padding:19px}.faq{gap:35px}.footer-top{gap:25px}.finder{align-items:flex-start;flex-direction:column}.search{width:100%}}
@media(max-width:680px){.container{width:calc(100% - 36px)}.brand-name{font-size:23px}.brand img{width:34px;height:34px}.header-inner{gap:10px}.header-inner>.button{font-size:11px}.hero{grid-template-columns:1fr;gap:35px;padding-top:32px}.hero h1{font-size:43px;max-width:450px}.hero-copy>p{font-size:14px;max-width:100%}.hero-visual{height:345px;margin:0 8px}.floating-card{left:3px;bottom:18px}.circle-badge{top:-15px}.values{grid-template-columns:1fr;padding:22px;gap:18px;margin-bottom:36px}.value span{font-size:12px}.value strong{font-size:13px}.value .icon{width:24px;height:24px}.section-top{align-items:flex-start;flex-wrap:wrap;gap:12px}h2{font-size:26px}.group-grid{grid-template-columns:1fr}.group-image{height:190px}.group-content{padding:21px}.group-content>p{min-height:0;font-size:13px}.group-bottom{flex-wrap:nowrap}.group-bottom .meta{font-size:11px}.section{margin-bottom:35px}.content-grid{grid-template-columns:1fr}.post{padding:18px}.post-photo{height:225px}.sidebar{display:grid;grid-template-columns:1fr}.aside-card{padding:23px}.update{grid-template-columns:1fr;padding:28px;gap:28px;margin-top:35px}.update h2{font-size:28px}.voices-grid{grid-template-columns:1fr}.voice{padding:24px}.faq{grid-template-columns:1fr;gap:20px;padding-bottom:35px}.bottom-cta{align-items:flex-start;flex-direction:column;padding:27px;margin-bottom:35px}.footer-top{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{gap:15px;flex-wrap:wrap}.footer-legal{gap:17px}.post-quote{font-size:17px}.filter{padding:8px 13px}.post-actions{gap:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
<symbol id="arrow" viewBox="0 0 24 24"><path d="M5 12h14m-6-6 6 6-6 6"/></symbol>
<symbol id="people" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><path d="M3 21v-3a6 6 0 0 1 12 0v3m1-16a3 3 0 0 1 0 6m2 3a5 5 0 0 1 3 4v3"/></symbol>
<symbol id="leaf" viewBox="0 0 24 24"><path d="M20 3C7 2 2 9 6 16c7 5 14-1 14-13ZM4 21 15 10"/></symbol>
<symbol id="shield" viewBox="0 0 24 24"><path d="m12 3 8 3v6c0 5-8 9-8 9S4 17 4 12V6l8-3Z"/><path d="m8 12 3 3 5-6"/></symbol>
<symbol id="search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></symbol>
<symbol id="plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
<symbol id="heart" viewBox="0 0 24 24"><path d="M20 5c-3-3-7-1-8 1-1-2-5-4-8-1-5 5 3 11 8 15 5-4 13-10 8-15Z"/></symbol>
<symbol id="chat" viewBox="0 0 24 24"><path d="M21 11a9 9 0 0 1-9 9H4l-2 2V11a9 9 0 0 1 19 0Z"/><path d="M7 10h10M7 14h6"/></symbol>
<symbol id="bookmark" viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3Z"/></symbol>
<symbol id="globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><path d="M3 12h18"/></symbol>
<symbol id="sliders" viewBox="0 0 24 24"><path d="M4 7h5m4 0h7M4 17h9m4 0h3"/><circle cx="11" cy="7" r="2"/><circle cx="15" cy="17" r="2"/></symbol>
<symbol id="menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
</svg>
<a class="skip" href="#main">Skip to content</a>
<header class="header">
<div class="container header-inner">
<a href="#" class="brand" aria-label="Gatherly home">
<img src="https://placehold.co/80x80/174e3d/d9ef95?text=g.&font=manrope" alt="Gatherly logo" width="39" height="39">
<div><div class="brand-name">gatherly<span style="color:#7c9b48">.</span></div><div class="brand-tagline">Good people. Shared interests.</div></div>
</a>
<nav class="nav" id="primary-nav" aria-label="Primary navigation">
<a href="#main">Discover</a><a href="#feed">Feed</a><a href="#communities">Groups</a><a href="#marketplace">Marketplace</a><a href="#events">Events</a><a href="#updates">What’s new</a><a href="#about">About</a>
</nav>
<button class="mobile-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="primary-nav"><svg class="icon"><use href="#menu"/></svg></button>
<button class="button" data-open="welcome-dialog">Get started <svg class="icon"><use href="#arrow"/></svg></button>
</div>
</header>
<main id="main" class="container">
<section class="hero" aria-labelledby="hero-title">
<div class="hero-copy">
<div class="eyebrow"><span class="dot"></span> Less scrolling. More belonging.</div>
<h1 id="hero-title">Your people.<br>Your passions.<br><span>Your place.</span></h1>
<p>The best connections start with something in common. Find your community, share a little of yourself, and make room for conversations that actually matter.</p>
<div class="hero-actions">
<a href="#communities" class="button">Find your community <svg class="icon"><use href="#arrow"/></svg></a>
<button class="button light" data-open="post-dialog"><svg class="icon"><use href="#plus"/></svg> Create a post</button>
</div>
<div class="social-proof">
<div class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/70?u=gatherly-alex" alt=""><img src="https://i.pravatar.cc/70?u=gatherly-lena" alt=""><img src="https://i.pravatar.cc/70?u=gatherly-jules" alt=""><img src="https://i.pravatar.cc/70?u=gatherly-maya" alt="">
</div>
<div><strong>A little internet. A lot of connection.</strong><br>Built for curious people, just like you.</div>
</div>
</div>
<div class="hero-visual">
<img src="https://picsum.photos/760/620?random=42" alt="An inspiring outdoor scene for a community weekend adventure" width="760" height="620" fetchpriority="high">
<div class="photo-label"><svg class="icon" style="width:13px;height:13px"><use href="#people"/></svg> Shared moments > screen time</div>
<div class="circle-badge"><span>✳</span>Find your<br>kind of people</div>
<div class="floating-card">
<div class="eyebrow"><span class="dot"></span> Good things happen together</div>
<h3>A weekend well spent.</h3>
<p>Fresh air, new friends, and no small talk required.</p>
<div class="floating-card-bottom">
<div class="avatar-stack" aria-hidden="true"><img src="https://i.pravatar.cc/60?u=trail-one" alt=""><img src="https://i.pravatar.cc/60?u=trail-two" alt=""><img src="https://i.pravatar.cc/60?u=trail-three" alt=""></div>
<a href="#events" class="text-link" style="font-size:10px">Find your next meetup ↗</a>
</div>
</div>
</div>
</section>
<div class="values" aria-label="The Gatherly difference">
<div class="value"><svg class="icon"><use href="#people"/></svg><div><strong>Real people. Real connection.</strong><span>Shared interests, not follower counts.</span></div></div>
<div class="value"><svg class="icon"><use href="#leaf"/></svg><div><strong>A feed that feels like you.</strong><span>You choose what gets your attention.</span></div></div>
<div class="value"><svg class="icon"><use href="#shield"/></svg><div><strong>Kindness comes standard.</strong><span>Thoughtful spaces, actively moderated.</span></div></div>
</div>
<section id="communities" class="section" aria-labelledby="groups-title">
<div class="section-top">
<div><div class="eyebrow">Find your corner of the internet</div><h2 id="groups-title">Small interests. Big connections.</h2><p>From a first sketch to a favorite trail, there’s a conversation waiting for you. Explore member-led groups where questions are welcome and showing up is enough.</p></div>
<a href="#community-search" class="text-link">Explore communities <svg class="icon"><use href="#arrow"/></svg></a>
</div>
<div class="finder">
<div class="filters" role="group" aria-label="Filter communities by interest">
<button class="filter active" data-filter="all" aria-pressed="true">For everyone</button>
<button class="filter" data-filter="creative" aria-pressed="false">Creative minds</button>
<button class="filter" data-filter="outdoors" aria-pressed="false">Outdoors</button>
<button class="filter" data-filter="lifestyle" aria-pressed="false">Lifestyle</button>
</div>
<div class="search"><svg class="icon"><use href="#search"/></svg><input type="search" id="community-search" aria-label="Search communities" placeholder="Find an interest or community…"></div>
</div>
<div class="group-grid" id="group-results">
<article class="card group-card" data-category="creative" data-keywords="creative corner art design photography sketch makers">
<div class="group-image"><img src="https://picsum.photos/600/300?random=21" alt="Visual inspiration for the Creative Corner community" width="600" height="300" loading="lazy"><span class="category-label">Art & creativity</span></div>
<div class="group-content">
<div class="group-heading"><div class="group-symbol" aria-hidden="true">✳</div><div><h3>Creative Corner</h3><span class="meta">4.2k members · Public group</span></div></div>
<p>A little inspiration, a little constructive feedback. Share works in progress, trade techniques, and make something new with a community of curious creatives.</p>
<div class="group-bottom"><span class="meta"><span class="dot"></span> Weekly creative prompts</span><button class="button small join-button" aria-pressed="false" data-group="Creative Corner">Join group <span aria-hidden="true">+</span></button></div>
</div>
</article>
<article class="card group-card" data-category="outdoors" data-keywords="outdoors weekend wanderers hiking trails nature travel adventure">
<div class="group-image"><img src="https://picsum.photos/600/300?random=28" alt="A scenic landscape for the Weekend Wanderers group" width="600" height="300" loading="lazy"><span class="category-label">Outdoors & adventure</span></div>
<div class="group-content">
<div class="group-heading"><div class="group-symbol" style="background:#f3eedf" aria-hidden="true">↟</div><div><h3>Weekend Wanderers</h3><span class="meta">2.8k members · Public group</span></div></div>
<p>Take the scenic route, together. Find local trail recommendations, plan a low-key adventure, and meet people who think the best plans start outside.</p>
<div class="group-bottom"><span class="meta"><span class="dot"></span> Beginner-friendly meetups</span><button class="button small join-button" aria-pressed="false" data-group="Weekend Wanderers">Join group <span aria-hidden="true">+</span></button></div>
</div>
</article>
<article class="card group-card" data-category="lifestyle" data-keywords="lifestyle slow living club books gardening mindful cooking plants sustainable">
<div class="group-image"><img src="https://picsum.photos/600/300?random=36" alt="A peaceful everyday scene for the Slow Living Club" width="600" height="300" loading="lazy"><span class="category-label">Everyday & mindful</span></div>
<div class="group-content">
<div class="group-heading"><div class="group-symbol" style="background:#f0eafa" aria-hidden="true">☀</div><div><h3>The Slow Living Club</h3><span class="meta">3.6k members · Public group</span></div></div>
<p>Less hustle, more little joys. Swap good reads, celebrate your first homegrown tomato, and share everyday rituals that make life feel a bit more intentional.</p>
<div class="group-bottom"><span class="meta"><span class="dot"></span> A softer pace, together</span><button class="button small join-button" aria-pressed="false" data-group="The Slow Living Club">Join group <span aria-hidden="true">+</span></button></div>
</div>
</article>
<div class="empty-state" id="empty-groups" hidden>No communities match just yet. Try “creative,” “hiking,” or “books,” or choose another interest.</div>
</div>
<div id="filter-announcement" class="meta" aria-live="polite" style="margin-top:10px"></div>
</section>
<div class="content-grid">
<section id="feed" class="section feed-section" aria-labelledby="feed-title">
<div class="section-top"><div><div class="eyebrow">The conversation starts here</div><h2 id="feed-title">A little from the community.</h2><p>Fresh perspectives, small wins, and the things worth sharing. Your feed puts genuine conversation ahead of going viral.</p></div><button class="button light small" data-open="post-dialog"><svg class="icon" style="width:15px"><use href="#plus"/></svg> Create post</button></div>
<div class="feed-tabs" role="group" aria-label="Feed filters">
<button class="feed-tab active" data-feed="featured" aria-pressed="true">Featured posts</button><button class="feed-tab" data-feed="latest" aria-pressed="false">Latest conversations</button><button class="feed-tab" data-feed="saved" aria-pressed="false">Saved for later</button>
</div>
<div id="posts">
<article class="card post" data-post="trail" data-order="1">
<div class="post-header"><img class="avatar" src="https://i.pravatar.cc/90?u=gatherly-maya" alt="Maya Chen" loading="lazy"><div><div class="post-author">Maya Chen <span class="verified" aria-label="Community host">✳</span></div><div class="meta">In Weekend Wanderers · 2 hours ago</div></div><span class="post-category">Community moment</span></div>
<p>We said “just a short walk” and somehow found our new favorite view. 🌿 Twelve people, three very enthusiastic dogs, and a reminder that you don’t need a big plan to have a great day.<br><br>Next time we’re trying the riverside loop. First-timers are always welcome—who’s coming?</p>
<img class="post-photo" src="https://picsum.photos/900/430?random=49" alt="A scenic view shared after a Weekend Wanderers community walk" width="900" height="430" loading="lazy">
<p class="hashtag" style="font-size:11px;margin-bottom:13px">#WeekendWanderers #GetOutside</p>
<div class="post-actions"><button class="icon-button like-button" aria-label="Like Maya's post" aria-pressed="false" data-count="128"><svg class="icon"><use href="#heart"/></svg><span>128</span></button><button class="icon-button comment-button" data-post-title="Maya’s weekend walk"><svg class="icon"><use href="#chat"/></svg> Join conversation</button><button class="icon-button save" aria-label="Save Maya's post" aria-pressed="false"><svg class="icon"><use href="#bookmark"/></svg></button></div>
</article>
<article class="card post" data-post="creative" data-order="2">
<div class="post-header"><img class="avatar" src="https://i.pravatar.cc/90?u=gatherly-jules" alt="Jules Rivera" loading="lazy"><div><div class="post-author">Jules Rivera</div><div class="meta">In Creative Corner · 45 minutes ago</div></div><span class="post-category">Something to think about</span></div>
<p>This week’s creative prompt is beautifully simple: make something just for the joy of it. No portfolio, no perfect lighting, no algorithm to impress.</p>
<div class="post-quote">“Not everything you make has to become something. Sometimes, making it is the whole point.”</div>
<p>I’m sketching the very wonky plants on my windowsill. What are you making? Share your wonderfully imperfect work in the comments. <span class="hashtag">#MakeForYou</span></p>
<div class="post-actions"><button class="icon-button like-button" aria-label="Like Jules's post" aria-pressed="false" data-count="86"><svg class="icon"><use href="#heart"/></svg><span>86</span></button><button class="icon-button comment-button" data-post-title="Jules’s creative prompt"><svg class="icon"><use href="#chat"/></svg> Join conversation</button><button class="icon-button save" aria-label="Save Jules's post" aria-pressed="false"><svg class="icon"><use href="#bookmark"/></svg></button></div>
</article>
</div>
<div id="empty-feed" class="empty-state" hidden>Your saved collection starts here. Use the bookmark on any post to keep it for later.</div>
<div class="feed-note"><svg class="icon" style="width:13px;height:13px"><use href="#sliders"/></svg> A thoughtful feed, not an endless one. You’re all caught up.</div>
</section>
<aside class="sidebar" aria-label="More to discover">
<section id="events" class="card aside-card">
<div class="eyebrow">Take it beyond the feed</div><h3>Good company, coming up.</h3><p>Make space for something new. These small, welcoming events are hosted by people in your community.</p>
<div class="event"><div class="event-date">Jul<strong>18</strong></div><div><h4>Sketch & sip: a creative hour</h4><p>Saturday · 10:00 AM PT<br>Online · Hosted by Creative Corner</p><button class="text-link rsvp" data-event="Sketch & sip">Reserve a spot <span aria-hidden="true">↗</span></button></div></div>
<div class="event"><div class="event-date">Jul<strong>25</strong></div><div><h4>The no-rush neighborhood walk</h4><p>Saturday · 9:00 AM PT<br>Portland, OR · All paces welcome</p><button class="text-link rsvp" data-event="The no-rush neighborhood walk">Reserve a spot <span aria-hidden="true">↗</span></button></div></div>
<div class="event"><div class="event-date" style="background:#eee9fa;color:#78618d">Aug<strong>02</strong></div><div><h4>One book, plenty of perspectives</h4><p>Sunday · 4:00 PM PT<br>Online · The Slow Living Club</p><button class="text-link rsvp" data-event="One book, plenty of perspectives">Reserve a spot <span aria-hidden="true">↗</span></button></div></div>
<p class="meta" style="margin:7px 0 0">Preview events · Reservations are saved for this visit.</p>
</section>
<section id="marketplace" class="card aside-card market">
<div class="eyebrow">The community marketplace</div><h3>Pre-loved. Newly appreciated.</h3>
<img class="market-image" src="https://picsum.photos/520/280?random=65" alt="A curated inspiration image for community marketplace finds" width="520" height="280" loading="lazy">
<p>Good things deserve another chapter. Discover member-made pieces, trade hobby gear, or pass along something you’ve outgrown. Local connections make every exchange a little more personal.</p>
<div class="market-bottom"><span>Buy less. Connect more.</span><button class="button light small" data-open="market-dialog">Explore <svg class="icon" style="width:14px"><use href="#arrow"/></svg></button></div>
</section>
<section class="card aside-card trends">
<h3>Trending, for good reasons.</h3>
<div class="trend"><div class="trend-label"><span class="trend-number">01</span><div><strong>#SmallJoys</strong><span>The everyday things worth noticing</span></div></div><span>↗</span></div>
<div class="trend"><div class="trend-label"><span class="trend-number">02</span><div><strong>#MakeForYou</strong><span>Creating without the pressure</span></div></div><span>↗</span></div>
<div class="trend"><div class="trend-label"><span class="trend-number">03</span><div><strong>#OutsideTogether</strong><span>A little fresh air, a new connection</span></div></div><span>↗</span></div>
</section>
</aside>
</div>
<section id="updates" class="update" aria-labelledby="updates-title">
<div>
<div class="eyebrow">A better kind of social · Platform updates</div>
<h2 id="updates-title">More of what matters.<br>Less of everything else.</h2>
<p>We’re building Gatherly around a simple belief: social media should leave you feeling more connected, not more drained. Our latest platform updates give members more control and community hosts better tools to care for their spaces.</p>
<button class="button lime" data-open="updates-dialog">See what’s new <svg class="icon"><use href="#arrow"/></svg></button>
</div>
<div class="update-features">
<div class="update-feature"><div class="feature-icon"><svg class="icon"><use href="#sliders"/></svg></div><div><h3>Your feed, your rules</h3><p>Switch to chronological posts, tune your interests, and choose what the recommendation algorithm surfaces.</p></div></div>
<div class="update-feature"><div class="feature-icon"><svg class="icon"><use href="#people"/></svg></div><div><h3>Better tools for better communities</h3><p>New welcome prompts and clear group guidelines make community management more human and less work.</p></div></div>
<div class="update-feature"><div class="feature-icon"><svg class="icon"><use href="#shield"/></svg></div><div><h3>Built with boundaries</h3><p>Control who can message you, mute topics without leaving groups, and take a break without missing your people.</p></div></div>
</div>
</section>
<section id="about" class="section" aria-labelledby="voices-title">
<div class="section-top"><div><div class="eyebrow">People make the platform</div><h2 id="voices-title">A place to feel a little more you.</h2><p>Gatherly is made for the friendships that start with “me too.” Here’s a glimpse of the experiences we’re building for our founding community.</p></div><span class="meta">Founding community stories</span></div>
<div class="voices-grid">
<article class="card voice"><div class="stars" aria-label="5 out of 5 stars">★★★★★</div><blockquote>“I joined to find people to hike with. What I found was a group that checks in on each other all week. It feels less like a platform and more like a neighborhood.”</blockquote><div class="voice-person"><img src="https://i.pravatar.cc/80?u=gatherly-alex" alt="Alex Morgan" loading="lazy"><div><strong>Alex Morgan</strong><span>Weekend Wanderers · Portland</span></div></div></article>
<article class="card voice"><div class="stars" aria-label="5 out of 5 stars">★★★★★</div><blockquote>“Sharing unfinished work used to feel terrifying. Here, people ask thoughtful questions and cheer on the process. I’m creating more, and second-guessing myself less.”</blockquote><div class="voice-person"><img src="https://i.pravatar.cc/80?u=gatherly-lena" alt="Lena Brooks" loading="lazy"><div><strong>Lena Brooks</strong><span>Creative Corner · Austin</span></div></div></article>
<article class="card voice"><div class="stars" aria-label="5 out of 5 stars">★★★★★</div><blockquote>“The small conversations are my favorite part. A book recommendation became a book club, and that became a Sunday ritual. Turns out my people were one hello away.”</blockquote><div class="voice-person"><img src="https://i.pravatar.cc/80?u=gatherly-sam" alt="Sam Ellis" loading="lazy"><div><strong>Sam Ellis</strong><span>The Slow Living Club · Bristol</span></div></div></article>
</div>
</section>
<section class="faq" aria-labelledby="faq-title">
<div><div class="eyebrow">A few things worth knowing</div><h2 id="faq-title">Curious? You’re in<br>good company.</h2><p>A new space should feel easy to step into. Here are answers to a few questions you might have before saying hello.</p><a href="mailto:hello@gatherly.example" class="text-link">Ask us a question <svg class="icon"><use href="#arrow"/></svg></a></div>
<div>
<details open><summary>What makes Gatherly different?</summary><p>We put shared interests before popularity. Communities have clear guidelines and active hosts, while your feed prioritizes conversations rather than engagement bait. You can explore at your own pace, without the pressure to build an audience.</p></details>
<details><summary>Do I need to know anyone to join?</summary><p>Not at all. Browse a public group, read its welcome post, and introduce yourself when you’re ready. Many events are specifically designed for first-timers, and quietly following along is welcome too.</p></details>
<details><summary>How do you keep communities welcoming?</summary><p>Community hosts set expectations, review reports, and help guide conversations. Member controls let you block unwanted contact and report harmful content. Thoughtful community management is part of the experience, not an afterthought.</p></details>
<details><summary>Can I try the page before making an account?</summary><p>Yes. This preview lets you filter communities, join groups, save posts, write a post, and reserve example event spots. These actions stay in this page session; no account is created and nothing is published to a live service.</p></details>
</div>
</section>
<section class="bottom-cta" aria-labelledby="cta-title">
<div><h2 id="cta-title">Your next good connection starts here.</h2><p>Follow a curiosity. Find your people. Make yourself at home.</p></div>
<a class="button" href="#communities">Explore your interests <svg class="icon"><use href="#arrow"/></svg></a>
</section>
</main>
<footer>
<div class="container">
<div class="footer-top">
<div class="footer-brand"><a href="#" class="brand"><img src="https://placehold.co/80x80/174e3d/d9ef95?text=g.&font=montserrat" width="39" height="39" alt="Gatherly logo"><div class="brand-name">gatherly.</div></a><p>Good people. Shared interests.<br>A more human place to connect, online and out in the world.</p><div class="social-links"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Explore Instagram (opens in a new tab)">Instagram ↗</a><a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="Explore LinkedIn (opens in a new tab)">LinkedIn ↗</a></div></div>
<div class="footer-column"><h3>Find your people</h3><a href="#communities">Discover communities</a><a href="#feed">Community feed</a><a href="#events">Upcoming events</a><a href="#marketplace">Marketplace</a></div>
<div class="footer-column"><h3>Meet Gatherly</h3><a href="#about">Our community</a><a href="#updates">Platform updates</a><button class="text-link" data-open="guidelines-dialog" style="border:0;background:none;padding:0;color:var(--muted);font-weight:400">Community guidelines</button></div>
<div class="footer-column"><h3>Let’s talk</h3><a href="mailto:hello@gatherly.example">hello@gatherly.example</a><a href="tel:+15035550148">+1 (503) 555-0148</a><p>120 Common Ground Lane<br>Portland, OR 97205</p><span class="meta">Fictional brand · Interactive preview</span></div>
</div>
<div class="footer-bottom"><span>© <span id="year">2026</span> Gatherly. A little more connected.</span><div class="footer-legal"><a href="#privacy" data-legal="privacy">Privacy</a><a href="#terms" data-legal="terms">Terms</a><a href="#accessibility" data-legal="accessibility">Accessibility</a></div></div>
</div>
</footer>
<dialog id="post-dialog" aria-labelledby="post-dialog-title">
<div class="dialog-top"><h2 id="post-dialog-title">Start a conversation.</h2><button class="close" aria-label="Close dialog">×</button></div>
<p class="legal-copy">A question, a small win, or something that made you pause. Your community would love to hear it.</p>
<form id="post-form">
<label class="form-label" for="post-group">Share with</label><select id="post-group" class="form-input"><option>Creative Corner</option><option>Weekend Wanderers</option><option>The Slow Living Club</option></select>
<label class="form-label" for="post-text">What’s on your mind?</label><textarea id="post-text" class="form-input" placeholder="Share something worth connecting over…" required maxlength="1500"></textarea>
<p class="dialog-note">Preview mode: your post appears only in this page session. It is not published publicly.</p>
<div class="dialog-actions"><button type="submit" class="button">Share your post <svg class="icon"><use href="#arrow"/></svg></button></div>
</form>
</dialog>
<dialog id="welcome-dialog" aria-labelledby="welcome-title">
<div class="dialog-top"><h2 id="welcome-title">Come as you are.</h2><button class="close" aria-label="Close dialog">×</button></div>
<p class="legal-copy">Your interests are a great place to start. Explore three welcoming communities, join a conversation, or save something that inspires you.</p><p class="dialog-note">This is an interactive preview of Gatherly. No signup is required, and your activity is kept only for this visit.</p>
<div class="dialog-actions"><button class="button" id="start-exploring">Find my community <svg class="icon"><use href="#arrow"/></svg></button></div>
</dialog>
<dialog id="comment-dialog" aria-labelledby="comment-title">
<div class="dialog-top"><h2 id="comment-title">Join the conversation.</h2><button class="close" aria-label="Close dialog">×</button></div><p class="legal-copy" id="comment-context"></p>
<div id="comment-list"></div>
<form id="comment-form"><label class="form-label" for="comment-text">Your reply</label><textarea class="form-input" id="comment-text" placeholder="Add a thoughtful reply…" maxlength="600" required></textarea><p class="dialog-note">Replies are visible in this preview only.</p><div class="dialog-actions"><button class="button">Add reply</button></div></form>
</dialog>
<dialog id="market-dialog" aria-labelledby="market-title">
<div class="dialog-top"><h2 id="market-title">A few lovely finds.</h2><button class="close" aria-label="Close dialog">×</button></div><p class="legal-copy">A preview of what our community is passing along. Listings are examples, not live offers.</p>
<div class="event"><div class="group-symbol" aria-hidden="true">✎</div><div><h4>Beginner watercolor kit · $18</h4><p>Lightly used paints, two brushes, and a fresh sketchbook.<br>Portland · Local pickup</p></div></div>
<div class="event"><div class="group-symbol" aria-hidden="true">↟</div><div><h4>Day-hike backpack · $35</h4><p>A trusty 20L companion, ready for its next trail.<br>Portland · Local pickup</p></div></div>
<div class="event"><div class="group-symbol" aria-hidden="true">☀</div><div><h4>Rooted pothos cuttings · Free</h4><p>Three happy little plants looking for a sunny home.<br>Portland · Plant swap welcome</p></div></div>
<p class="dialog-note">Meet in a public place, verify items in person, and never share sensitive payment details in messages.</p>
</dialog>
<dialog id="updates-dialog" aria-labelledby="release-title">
<div class="dialog-top"><h2 id="release-title">Small changes. Better connection.</h2><button class="close" aria-label="Close dialog">×</button></div>
<div class="legal-copy"><p><strong>Feed controls:</strong> The “Latest conversations” tab now puts recent posts first. “Saved for later” gives thoughtful reads a home outside the main feed.</p><p><strong>Easier discovery:</strong> Search by a hobby or topic and combine it with an interest filter. Clearer group descriptions help you find a good fit before you join.</p><p><strong>A warmer welcome:</strong> Community hosts can introduce weekly prompts and beginner-friendly events, making that first conversation a little easier.</p></div><p class="dialog-note">Try the new discovery and feed controls right here in the preview.</p>
</dialog>
<dialog id="guidelines-dialog" aria-labelledby="guidelines-title">
<div class="dialog-top"><h2 id="guidelines-title">Make room for each other.</h2><button class="close" aria-label="Close dialog">×</button></div>
<div class="legal-copy"><p><strong>Be kind, even when you disagree.</strong> Challenge an idea without attacking the person. Harassment, hate speech, and threats have no place here.</p><p><strong>Share with care.</strong> Respect privacy, give credit to creators, and ask before sharing another member’s photos or personal information.</p><p><strong>Keep it genuine.</strong> No spam, deceptive listings, or engagement manipulation. Follow each group’s guidelines and help hosts keep conversations useful and welcoming.</p><p>For questions about this fictional preview, contact hello@gatherly.example.</p></div>
</dialog>
<dialog id="legal-dialog" aria-labelledby="legal-title"><div class="dialog-top"><h2 id="legal-title"></h2><button class="close" aria-label="Close dialog">×</button></div><div class="legal-copy" id="legal-content"></div></dialog>
<div class="toast" role="status" aria-live="polite"></div>
<script>
(() => {
const $ = (s, root = document) => root.querySelector(s);
const $$ = (s, root = document) => [...root.querySelectorAll(s)];
$('#year').textContent = new Date().getFullYear();
let toastTimer;
function notify(message) {
$('.toast').textContent = message;
$('.toast').classList.add('visible');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => $('.toast').classList.remove('visible'), 3500);
}
$$('[data-open]').forEach(button => button.addEventListener('click', () => {
$('#' + button.dataset.open).showModal();
}));
$$('dialog .close').forEach(button => button.addEventListener('click', () => button.closest('dialog').close()));
$$('dialog').forEach(dialog => dialog.addEventListener('click', e => {
if (e.target === dialog) {
const r = dialog.getBoundingClientRect();
if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dialog.close();
}
}));
$('.mobile-toggle').addEventListener('click', () => {
const open = $('#primary-nav').classList.toggle('open');
$('.mobile-toggle').setAttribute('aria-expanded', String(open));
});
$$('.nav a').forEach(a => a.addEventListener('click', () => {
$('#primary-nav').classList.remove('open');
$('.mobile-toggle').setAttribute('aria-expanded', 'false');
}));
$('#start-exploring').addEventListener('click', () => {
$('#welcome-dialog').close();
$('#communities').scrollIntoView({behavior:'smooth'});
$('#community-search').focus({preventScroll:true});
});
let currentFilter = 'all';
function filterGroups() {
const term = $('#community-search').value.trim().toLowerCase();
let count = 0;
$$('.group-card').forEach(card => {
const match = (currentFilter === 'all' || card.dataset.category === currentFilter) && card.dataset.keywords.includes(term);
card.hidden = !match;
if (match) count++;
});
$('#empty-groups').hidden = count !== 0;
$('#filter-announcement').textContent = count + (count === 1 ? ' community' : ' communities') + ' to explore';
}
$$('.filter').forEach(button => button.addEventListener('click', () => {
currentFilter = button.dataset.filter;
$$('.filter').forEach(b => {
b.classList.toggle('active', b === button);
b.setAttribute('aria-pressed', String(b === button));
});
filterGroups();
}));
$('#community-search').addEventListener('input', filterGroups);
$$('.join-button').forEach(button => button.addEventListener('click', () => {
const joined = button.getAttribute('aria-pressed') !== 'true';
button.setAttribute('aria-pressed', String(joined));
button.classList.toggle('joined', joined);
button.textContent = joined ? 'Joined ✓' : 'Join group +';
notify(joined ? `You joined ${button.dataset.group} for this visit. Welcome!` : `You left ${button.dataset.group}.`);
}));
let feedMode = 'featured';
function updateFeed() {
const posts = $$('#posts .post');
posts.sort((a,b) => feedMode === 'featured' ? Number(a.dataset.order) - Number(b.dataset.order) : Number(b.dataset.order) - Number(a.dataset.order));
let visible = 0;
posts.forEach(post => {
post.hidden = feedMode === 'saved' && $('.save', post).getAttribute('aria-pressed') !== 'true';
if (!post.hidden) visible++;
$('#posts').appendChild(post);
});
$('#empty-feed').hidden = visible > 0;
}
$$('.feed-tab').forEach(button => button.addEventListener('click', () => {
feedMode = button.dataset.feed;
$$('.feed-tab').forEach(b => {
b.classList.toggle('active', b === button);
b.setAttribute('aria-pressed', String(b === button));
});
updateFeed();
}));
const comments = new Map();
let currentPost;
function bindPost(post) {
$('.like-button', post).addEventListener('click', function() {
const liked = this.getAttribute('aria-pressed') !== 'true';
this.setAttribute('aria-pressed', String(liked));
this.classList.toggle('active', liked);
$('span', this).textContent = Number(this.dataset.count) + (liked ? 1 : 0);
});
$('.save', post).addEventListener('click', function() {
const saved = this.getAttribute('aria-pressed') !== 'true';
this.setAttribute('aria-pressed', String(saved));
this.setAttribute('aria-label', saved ? 'Unsave post' : 'Save post');
this.classList.toggle('active', saved);
notify(saved ? 'Saved for later. Find it in your Saved tab.' : 'Post removed from your saved collection.');
updateFeed();
});
$('.comment-button', post).addEventListener('click', function() {
currentPost = post.dataset.post;
$('#comment-context').textContent = 'Replying to ' + this.dataset.postTitle;
renderComments();
$('#comment-dialog').showModal();
});
}
function renderComments() {
$('#comment-list').replaceChildren();
(comments.get(currentPost) || []).forEach(text => {
const p = document.createElement('p');
p.className = 'legal-copy';
p.style.cssText = 'padding:12px;background:#f0f4e9;border-radius:8px;white-space:pre-wrap';
const name = document.createElement('strong');
name.textContent = 'You · ';
p.append(name, document.createTextNode(text));
$('#comment-list').append(p);
});
}
$$('#posts .post').forEach(bindPost);
$('#comment-form').addEventListener('submit', e => {
e.preventDefault();
const text = $('#comment-text').value.trim();
if (!text) { $('#comment-text').setCustomValidity('Please write a reply.'); $('#comment-text').reportValidity(); return; }
const replies = comments.get(currentPost) || [];
replies.push(text);
comments.set(currentPost, replies);
e.target.reset();
renderComments();
notify('Your reply was added to this preview.');
});
$('#comment-text').addEventListener('input', e => e.target.setCustomValidity(''));
let postNumber = 2;
$('#post-form').addEventListener('submit', e => {
e.preventDefault();
const text = $('#post-text').value.trim();
if (!text) { $('#post-text').setCustomValidity('Please write something to share.'); $('#post-text').reportValidity(); return; }
const group = $('#post-group').value;
const post = document.createElement('article');
post.className = 'card post';
post.dataset.order = String(++postNumber);
post.dataset.post = 'local-' + postNumber;
post.innerHTML = '<div class="post-header"><img class="avatar" src="https://i.pravatar.cc/90?u=gatherly-you" alt="Your preview avatar"><div><div class="post-author">You <span class="meta">· Preview member</span></div><div class="meta post-location"></div></div></div><p class="post-body" style="white-space:pre-wrap"></p><div class="post-actions"><button class="icon-button like-button" aria-label="Like your post" aria-pressed="false" data-count="0"><svg class="icon"><use href="#heart"/></svg><span>0</span></button><button class="icon-button comment-button" data-post-title="your community post"><svg class="icon"><use href="#chat"/></svg> Join conversation</button><button class="icon-button save" aria-label="Save your post" aria-pressed="false"><svg class="icon"><use href="#bookmark"/></svg></button></div>';
$('.post-location',post).textContent = 'In ' + group + ' · Just now';
$('.post-body',post).textContent = text;
$('#posts').prepend(post);
bindPost(post);
$('#post-dialog').close();
e.target.reset();
$('[data-feed="latest"]').click();
$('#feed').scrollIntoView({behavior:'smooth'});
notify('Your post is live in this preview. Thanks for sharing!');
});
$('#post-text').addEventListener('input', e => e.target.setCustomValidity(''));
$$('.rsvp').forEach(button => button.addEventListener('click', () => {
const reserved = button.getAttribute('aria-pressed') !== 'true';
button.setAttribute('aria-pressed', String(reserved));
button.textContent = reserved ? 'Spot reserved ✓ · Undo' : 'Reserve a spot ↗';
notify(reserved ? `Preview spot reserved for ${button.dataset.event}.` : 'Your preview reservation was canceled.');
}));
const legal = {
privacy: ['Privacy, plainly.', 'This is a fictional website preview. Posts, replies, group memberships, and saved items are held in memory during your visit and are cleared when you reload the page. We do not send your input to a server or create an account.', 'Images and fonts are provided by third-party services, which may receive standard connection information such as your IP address when assets load. External links are governed by the destination website’s privacy policy.'],
terms: ['A note on this preview.', 'Gatherly is a fictional brand presented as an interactive demonstration. Membership figures, community stories, events, and marketplace listings are illustrative. There are no live purchases, public posts, or binding event reservations.', 'Please do not enter sensitive personal information. All interactive activity is temporary and is not an agreement to provide social networking services.'],
accessibility: ['A place for everyone.', 'This page supports keyboard navigation, visible focus states, descriptive labels, responsive layouts, and reduced-motion preferences. Dialogs can be closed with Escape, and expandable questions use native browser controls.', 'If something gets in your way, we want to hear about it. Contact hello@gatherly.example with the browser, assistive technology, and feature involved.']
};
$$('[data-legal]').forEach(link => link.addEventListener('click', e => {
e.preventDefault();
const content = legal[link.dataset.legal];
$('#legal-title').textContent = content[0];
$('#legal-content').replaceChildren();
content.slice(1).forEach(text => {
const p = document.createElement('p');
p.textContent = text;
$('#legal-content').append(p);
});
$('#legal-dialog').showModal();
}));
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:58:48.967Z",
"url": "https://benchmark.aimac.invalid/c7f1f37db330dba02d4e86e088338d4b3386db85b171c53989375a9097dad47c.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"Gatherly home\">",
"target": [
"a[aria-label=\"Gatherly 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 href=\"#\" class=\"brand\" aria-label=\"Gatherly home\">",
"target": [
"a[aria-label=\"Gatherly home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"filters\" role=\"group\" aria-label=\"Filter communities by interest\">",
"target": [
".filters"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\" aria-hidden=\"true\">",
"target": [
"svg[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"Gatherly home\">",
"target": [
"a[aria-label=\"Gatherly home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"filters\" role=\"group\" aria-label=\"Filter communities by interest\">",
"target": [
".filters"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"filters\" role=\"group\" aria-label=\"Filter communities by interest\">",
"target": [
".filters"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"Gatherly home\">",
"target": [
"a[aria-label=\"Gatherly 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 href=\"#\" class=\"brand\" aria-label=\"Gatherly home\">",
"target": [
"a[aria-label=\"Gatherly home\"]"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span style=\"color:#7c9b48\">.</span>",
"target": [
".brand-name > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"button\" data-open=\"welcome-dialog\">Get started <svg class=\"icon\"><use href=\"#arrow\"></use></svg></button>",
"target": [
"button[data-open=\"welcome-dialog\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 id=\"hero-title\">Your people.<br>Your passions.<br><span>Your place.</span></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h3>A weekend well spent.</h3>",
"target": [
".floating-card > h3"
]
},
{
"html": "<h2 id=\"groups-title\">Small interests. Big connections.</h2>",
"target": [
"#groups-title"
]
},
{
"html": "<h3>Creative Corner</h3>",
"target": [
"article[data-category=\"creative\"] > .group-content > .group-heading > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Weekend Wanderers</h3>",
"target": [
"article[data-category=\"outdoors\"] > .group-content > .group-heading > div:nth-child(2) > h3"
]
},
{
"html": "<h3>The Slow Living Club</h3>",
"target": [
"article[data-category=\"lifestyle\"] > .group-content > .group-heading > div:nth-child(2) > h3"
]
},
{
"html": "<h2 id=\"feed-title\">A little from the community.</h2>",
"target": [
"#feed-title"
]
},
{
"html": "<h3>Good company, coming up.</h3>",
"target": [
"#events > h3"
]
},
{
"html": "<h4>Sketch & sip: a creative hour</h4>",
"target": [
"#events > .event:nth-child(4) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>The no-rush neighborhood walk</h4>",
"target": [
"#events > .event:nth-child(5) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>One book, plenty of perspectives</h4>",
"target": [
".event:nth-child(6) > div:nth-child(2) > h4"
]
},
{
"html": "<h3>Pre-loved. Newly appreciated.</h3>",
"target": [
"#marketplace > h3"
]
},
{
"html": "<h3>Trending, for good reasons.</h3>",
"target": [
".trends > h3"
]
},
{
"html": "<h2 id=\"updates-title\">More of what matters.<br>Less of everything else.</h2>",
"target": [
"#updates-title"
]
},
{
"html": "<h3>Your feed, your rules</h3>",
"target": [
".update-feature:nth-child(1) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Better tools for better communities</h3>",
"target": [
".update-feature:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Built with boundaries</h3>",
"target": [
".update-feature:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h2 id=\"voices-title\">A place to feel a little more you.</h2>",
"target": [
"#voices-title"
]
},
{
"html": "<h2 id=\"faq-title\">Curious? You\u2019re in<br>good company.</h2>",
"target": [
"#faq-title"
]
},
{
"html": "<h2 id=\"cta-title\">Your next good connection starts here.</h2>",
"target": [
"#cta-title"
]
},
{
"html": "<h3>Find your people</h3>",
"target": [
".footer-column:nth-child(2) > h3"
]
},
{
"html": "<h3>Meet Gatherly</h3>",
"target": [
".footer-column:nth-child(3) > h3"
]
},
{
"html": "<h3>Let\u2019s talk</h3>",
"target": [
".footer-column:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\" class=\"container\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#202b26",
"bgColor": "#fefffe",
"contrastRatio": 14.59,
"fontSize": "18.8pt (25px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.59"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"brand-name\">gatherly<span style=\"color:#7c9b48\">.</span></div>",
"target": [
"div > .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\" id=\"primary-nav\" aria-label=\"Primary navigation\">\n <a href=\"#main\">Discover</a><a href=\"#feed\">Feed</a><a href=\"#communities\">Groups</a><a href=\"#marketplace\">Marketplace</a><a href=\"#events\">Events</a><a href=\"#updates\">What\u2019s new</a><a href=\"#about\">About</a>\n </nav>",
"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": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"search\" id=\"community-search\" aria-label=\"Search communities\" placeholder=\"Find an interest or community\u2026\">",
"target": [
"#community-search"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/80x80/174e3d/d9ef95?text=g.&font=manrope\" alt=\"Gatherly logo\" width=\"39\" height=\"39\">",
"target": [
"a[aria-label=\"Gatherly home\"] > img[alt=\"Gatherly logo\"][width=\"39\"][height=\"39\"]"
]
}
]
},
{
"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": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"search\" id=\"community-search\" aria-label=\"Search communities\" placeholder=\"Find an interest or community\u2026\">",
"target": [
"#community-search"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div>",
"target": [
".faq > div:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"mailto:hello@gatherly.example\" class=\"text-link\">Ask us a question <svg class=\"icon\"><use href=\"#arrow\"></use></svg></a>",
"target": [
".text-link[href=\"mailto:hello@gatherly.example\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/80x80/174e3d/d9ef95?text=g.&font=manrope\" alt=\"Gatherly logo\" width=\"39\" height=\"39\">",
"target": [
"a[aria-label=\"Gatherly home\"] > img[alt=\"Gatherly logo\"][width=\"39\"][height=\"39\"]"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>What makes Gatherly different?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 130.6,
"height": 48.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (130.6px by 48.8px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"values\" aria-label=\"The Gatherly difference\">",
"target": [
".values"
],
"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.3pt (11px)",
"fontWeight": "normal",
"messageKey": "bgOverlap",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element's background color could not be determined because it is overlapped by another element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"photo-label\"><svg class=\"icon\" style=\"width:13px;height:13px\"><use href=\"#people\"></use></svg> Shared moments > screen time</div>",
"target": [
".photo-label"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because it is overlapped by another element"
}
]
}
],
"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": "#69726b",
"bgColor": "#f0f3e9",
"contrastRatio": 4.43,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"values\" aria-label=\"The Gatherly difference\">",
"target": [
".values"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.43 (foreground color: #69726b, background color: #f0f3e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Shared interests, not follower counts.</span>",
"target": [
".value:nth-child(1) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.43 (foreground color: #69726b, background color: #f0f3e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69726b",
"bgColor": "#f0f3e9",
"contrastRatio": 4.43,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"values\" aria-label=\"The Gatherly difference\">",
"target": [
".values"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.43 (foreground color: #69726b, background color: #f0f3e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>You choose what gets your attention.</span>",
"target": [
".value:nth-child(2) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.43 (foreground color: #69726b, background color: #f0f3e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69726b",
"bgColor": "#f0f3e9",
"contrastRatio": 4.43,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"values\" aria-label=\"The Gatherly difference\">",
"target": [
".values"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.43 (foreground color: #69726b, background color: #f0f3e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Thoughtful spaces, actively moderated.</span>",
"target": [
".value:nth-child(3) > div > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.43 (foreground color: #69726b, background color: #f0f3e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69726b",
"bgColor": "#f0ecf8",
"contrastRatio": 4.27,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"marketplace\" class=\"card aside-card market\">",
"target": [
"#marketplace"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.27 (foreground color: #69726b, background color: #f0ecf8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Good things deserve another chapter. Discover member-made pieces, trade hobby gear, or pass along something you\u2019ve outgrown. Local connections make every exchange a little more personal.</p>",
"target": [
"#marketplace > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.27 (foreground color: #69726b, background color: #f0ecf8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69726b",
"bgColor": "#e9f0d9",
"contrastRatio": 4.24,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bottom-cta\" aria-labelledby=\"cta-title\">",
"target": [
".bottom-cta"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.24 (foreground color: #69726b, background color: #e9f0d9, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Follow a curiosity. Find your people. Make yourself at home.</p>",
"target": [
".bottom-cta > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.24 (foreground color: #69726b, background color: #e9f0d9, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69726b",
"bgColor": "#f0f4f3",
"contrastRatio": 4.48,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"header\">",
"target": [
"header"
]
},
{
"html": "<section id=\"updates\" class=\"update\" aria-labelledby=\"updates-title\">",
"target": [
"#updates"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.48 (foreground color: #69726b, background color: #f0f4f3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"brand-tagline\">Good people. Shared interests.</div>",
"target": [
".brand-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.48 (foreground color: #69726b, background color: #f0f4f3, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 4445
},
{
"y": 576,
"height": 4445
},
{
"y": 1152,
"height": 4445
},
{
"y": 1728,
"height": 4445
},
{
"y": 2304,
"height": 4445
},
{
"y": 2880,
"height": 4445
},
{
"y": 3456,
"height": 4445
},
{
"y": 3725,
"height": 4445
}
],
"scans": 9,
"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: "Marketplace", "Events", "Feed".
- **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: "Group Discoveries", "Featured Posts", "Platform Updates".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "algorithm", "trending", "community management".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Join Group", "Create Post", "Explore".
- **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: "community finder".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "suggested follows", "event invites", "trending hashtags".
- **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.