OpenAI GPT 6.1 Terra – Religion and Spirituality
via OpenAI · Generated
- AIMAC Debt 4.64
- Cost $0.05
- Total Violations 16
- HTML Size 35 KB
- Em Dashes 3
Screenshot
View Live Page
Accessibility Issues Found
16 Serious
-
color-contrast serious 16 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="brand-tag">A place to belong & become</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Stillwater Community Church is a welcoming Christian community gathering for worship, spiritual formation, and service.">
<meta name="theme-color" content="#203c32">
<title>Stillwater Community Church | A place to belong and become</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=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<style>
:root {
--ink: #203c32;
--ink-deep: #162d25;
--body: #405048;
--cream: #f7f5ee;
--paper: #fffefb;
--sage: #e4eadf;
--sage-dark: #b8c8b6;
--clay: #bd704e;
--line: #d9dfd5;
--white: #fff;
--serif: "DM Serif Display", Georgia, serif;
--sans: "DM Sans", Arial, sans-serif;
--max: 1260px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.7; }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #dc9a6e; outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; }
h1 { font-size: clamp(3.5rem, 6.4vw, 6.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.5rem, 4.3vw, 4.4rem); letter-spacing: -.035em; }
h3 { font-size: 1.65rem; letter-spacing: -.02em; }
p { color: var(--body); }
.container { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
.eyebrow { display: block; margin-bottom: 18px; color: #6d7c69; font-size: .7rem; font-weight: 700; letter-spacing: .19em; line-height: 1.4; text-transform: uppercase; }
.eyebrow.light { color: #c1d0bf; }
.section { padding: 112px 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 54px; padding: 14px 22px; border: 1px solid transparent; background: var(--ink); color: var(--white); font-size: .83rem; font-weight: 700; line-height: 1.2; transition: background .2s, color .2s, border-color .2s; }
.button:hover { background: #345c4c; }
.button.outline { border-color: #a4b0a4; background: transparent; color: var(--ink); }
.button.outline:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.button.light { background: var(--cream); color: var(--ink); }
.button.light:hover { background: #dce7d9; }
.arrow { font-size: 1.1rem; line-height: 1; }
.text-link { display: inline-flex; align-items: center; gap: 15px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: .82rem; font-weight: 700; }
.text-link:hover { color: var(--clay); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; background: white; color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.announcement { padding: 9px 20px; background: var(--ink-deep); color: #e8eee6; text-align: center; font-size: .73rem; letter-spacing: .025em; }
.announcement a { margin-left: 10px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-header { position: relative; z-index: 10; background: var(--paper); border-bottom: 1px solid #e6e9e2; }
.header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 48px; height: 48px; }
.brand-name { display: block; font-family: var(--serif); font-size: 1.32rem; line-height: 1.05; }
.brand-tag { display: block; margin-top: 5px; color: #788579; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav a { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.nav a:not(.nav-cta):hover { color: var(--clay); }
.nav .nav-cta { padding: 11px 17px; background: var(--ink); color: #fff; }
.nav .nav-cta:hover { background: #345c4c; }
.menu-toggle { display: none; padding: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; }
.hero { background: #e9eee4; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 660px; }
.hero-copy { align-self: center; padding: 85px 65px 90px max(40px, calc((100vw - var(--max)) / 2)); }
.hero-copy h1 { max-width: 650px; margin-bottom: 25px; }
.hero-copy h1 em { color: #738a72; font-weight: 400; }
.hero-copy p { max-width: 475px; margin-bottom: 30px; font-size: 1.04rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-image { position: relative; min-height: 530px; overflow: hidden; }
.hero-image > img { width: 100%; height: 100%; object-fit: cover; }
.hero-image::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(16, 38, 28, .34)); content: ""; pointer-events: none; }
.hero-note { position: absolute; z-index: 1; right: 0; bottom: 45px; width: min(340px, 86%); padding: 23px 28px; background: var(--paper); }
.hero-note .eyebrow { margin-bottom: 8px; }
.hero-note strong { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; line-height: 1.2; }
.hero-note span:last-child { color: #6b796d; font-size: .78rem; }
.welcome-strip { padding: 25px 0; background: var(--ink); color: #e7eee5; }
.welcome-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.welcome-inner p { margin: 0; color: inherit; font-size: .88rem; }
.welcome-inner strong { margin-right: 10px; color: #fff; }
.welcome-inner a { flex-shrink: 0; color: #fff; font-size: .8rem; font-weight: 700; }
.intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10%; align-items: center; }
.image-frame { position: relative; padding: 0 35px 38px 0; }
.image-frame::after { position: absolute; z-index: -1; right: 0; bottom: 0; width: 72%; height: 75%; background: var(--sage); content: ""; }
.image-frame img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; }
.intro-copy h2 { max-width: 570px; margin-bottom: 25px; }
.intro-copy p { max-width: 580px; }
.intro-copy .text-link { margin-top: 12px; }
.verse { margin: 29px 0 0; padding-left: 22px; border-left: 2px solid var(--clay); color: var(--ink); font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; }
.verse cite { display: block; margin-top: 8px; color: #788579; font-family: var(--sans); font-size: .7rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pathways { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.section-heading h2 { max-width: 660px; margin-bottom: 0; }
.section-heading p { max-width: 390px; margin-bottom: 5px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.path-card { display: flex; flex-direction: column; min-height: 345px; padding: 34px; border: 1px solid var(--line); background: #fafbf7; }
.path-card .number { margin-bottom: 38px; color: #9aaa97; font-family: var(--serif); font-size: 1.15rem; }
.path-card h3 { margin-bottom: 15px; }
.path-card p { margin-bottom: 25px; font-size: .9rem; }
.path-card .text-link { align-self: flex-start; margin-top: auto; }
.events { background: #e7ece2; }
.events-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 9%; }
.events-intro h2 { margin-bottom: 23px; }
.events-intro p { max-width: 400px; }
.events-intro .button { margin-top: 12px; }
.event-list { border-top: 1px solid #b8c8b7; }
.event-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 22px; padding: 25px 0; border-bottom: 1px solid #b8c8b7; }
.event-date { padding: 9px 5px; border: 1px solid #b8c8b7; text-align: center; }
.event-date span { display: block; color: #6f806e; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.event-date strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; line-height: 1.2; }
.event-info h3 { margin-bottom: 5px; font-size: 1.35rem; }
.event-info p { margin: 0; font-size: .8rem; }
.event-row button { padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font-size: .76rem; font-weight: 700; }
.sermon-grid { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--ink); color: #fff; }
.sermon-image { min-height: 490px; }
.sermon-image img { width: 100%; height: 100%; object-fit: cover; }
.sermon-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(40px, 6vw, 85px); }
.sermon-copy h2 { margin-bottom: 22px; }
.sermon-copy p { color: #d0ddd0; }
.sermon-meta { margin-bottom: 26px; color: #b6c9b5; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.quote-section { padding: 95px 0; background: #f2eee5; text-align: center; }
.quote-section blockquote { max-width: 850px; margin: 0 auto; }
.quote-section blockquote p { color: var(--ink); font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.3; }
.quote-section cite { color: #7b8a79; font-size: .73rem; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.visit-copy h2 { margin-bottom: 22px; }
.visit-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 35px 0; padding-top: 25px; border-top: 1px solid var(--line); }
.visit-details strong { display: block; margin-bottom: 6px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.visit-details p { margin: 0; font-size: .88rem; }
.faq h3 { margin-bottom: 20px; font-size: 1.65rem; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 20px 32px 20px 0; font-size: .9rem; font-weight: 700; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { position: absolute; right: 3px; content: "+"; font-size: 1.3rem; font-weight: 400; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 20px; font-size: .88rem; }
.footer { padding: 70px 0 25px; background: var(--ink-deep); color: #eff4ed; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 45px; padding-bottom: 60px; }
.footer .brand-tag { color: #b5c5b4; }
.footer-about p { max-width: 320px; margin: 24px 0 0; color: #bdccbd; font-size: .85rem; }
.footer h3 { margin-bottom: 20px; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li, .footer address { margin-bottom: 10px; color: #bdccbd; font-size: .83rem; font-style: normal; }
.footer a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid #496054; color: #aebfaf; font-size: .72rem; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 20px; }
dialog { width: min(550px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(13, 30, 22, .7); }
.dialog-inner { padding: 38px; }
.dialog-top { display: flex; justify-content: space-between; gap: 20px; }
.dialog-top h2 { margin-bottom: 12px; font-size: 2.4rem; }
.close-dialog { align-self: flex-start; padding: 0 6px; border: 0; background: transparent; color: var(--ink); font-size: 2rem; line-height: 1; }
.dialog-inner > p { font-size: .88rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 700; }
.field input, .field select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #bdcbbd; border-radius: 0; background: white; color: var(--ink); }
.form-note { margin: 13px 0 0; color: #66766a; font-size: .76rem; }
#form-status { margin-top: 14px; color: var(--ink); font-size: .85rem; }
@media (max-width: 1050px) {
.container { width: min(calc(100% - 48px), var(--max)); }
.header-inner { min-height: 82px; }
.menu-toggle { display: block; }
.nav { position: absolute; top: 100%; right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 10px 24px 24px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 20px rgba(20,40,30,.1); }
.nav.is-open { display: flex; flex-direction: column; }
.nav a { padding: 12px 0; }
.nav .nav-cta { margin-top: 8px; padding: 12px 16px; text-align: center; }
.hero-copy { padding-left: 24px; padding-right: 35px; }
.hero-grid { min-height: 580px; }
.section { padding: 85px 0; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.footer-about { grid-column: span 3; }
}
@media (max-width: 700px) {
.container { width: calc(100% - 36px); }
.announcement { font-size: .68rem; }
.announcement a { display: inline-block; }
.brand img { width: 42px; height: 42px; }
.brand-name { font-size: 1.18rem; }
.brand-tag { font-size: .52rem; }
.hero-grid { grid-template-columns: 1fr; }
.hero-copy { padding: 68px 18px 55px; }
.hero-copy h1 { font-size: clamp(3.5rem, 14vw, 5rem); }
.hero-image { min-height: 360px; height: 430px; }
.hero-note { bottom: 22px; }
.welcome-inner { align-items: flex-start; flex-direction: column; gap: 8px; }
.section { padding: 70px 0; }
.intro-grid, .events-grid, .visit-grid { grid-template-columns: 1fr; gap: 45px; }
.image-frame { max-width: 500px; }
.section-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.card-grid { grid-template-columns: 1fr; gap: 12px; }
.path-card { min-height: 0; padding: 28px; }
.path-card .number { margin-bottom: 25px; }
.event-row { grid-template-columns: 65px 1fr; gap: 15px; }
.event-row button { grid-column: 2; justify-self: start; }
.sermon-grid { grid-template-columns: 1fr; }
.sermon-image { min-height: 300px; height: 300px; }
.sermon-copy { padding: 45px 28px; }
.quote-section { padding: 70px 0; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
.footer-about { grid-column: span 2; }
.footer-bottom { flex-direction: column; }
.dialog-inner { padding: 26px; }
}
@media (max-width: 400px) {
.form-grid, .visit-details { grid-template-columns: 1fr; }
.hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<div class="announcement">
Sundays at 9:00 & 10:45 AM · Everyone is welcome.
<a href="#visit">Plan your first visit <span aria-hidden="true">↗</span></a>
</div>
<header class="site-header">
<div class="container header-inner">
<a class="brand" href="#top" aria-label="Stillwater Community Church, home">
<img src="https://placehold.co/96x96/203c32/ffffff?text=SC&font=lora" width="48" height="48" alt="">
<span>
<span class="brand-name">Stillwater</span>
<span class="brand-tag">A place to belong & become</span>
</span>
</a>
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="primary-nav">Menu <span aria-hidden="true">☰</span></button>
<nav class="nav" id="primary-nav" aria-label="Primary navigation">
<a href="#about">About</a>
<a href="#community">Community</a>
<a href="#events">Events</a>
<a href="#resources">Resources</a>
<a href="#visit">Visit</a>
<a href="#contact">Contact</a>
<a class="nav-cta" href="#visit">Join us Sunday <span aria-hidden="true">↗</span></a>
</nav>
</div>
</header>
<main id="main">
<section class="hero" id="top" aria-labelledby="hero-heading">
<div class="hero-grid">
<div class="hero-copy">
<span class="eyebrow">Welcome to Stillwater Community Church</span>
<h1 id="hero-heading">Room for your soul to <em>breathe.</em></h1>
<p>Wherever you are on your journey of faith, there is a place for you here. Come as you are and discover a community learning to live in the way of Jesus, together.</p>
<div class="hero-actions">
<a class="button" href="#visit">Plan your visit <span class="arrow" aria-hidden="true">↗</span></a>
<a class="button outline" href="#community">Explore our community <span class="arrow" aria-hidden="true">→</span></a>
</div>
</div>
<div class="hero-image">
<img src="https://picsum.photos/id/1018/1200/1200" alt="A peaceful mountain landscape reflected in still water" width="1200" height="1200" fetchpriority="high">
<div class="hero-note">
<span class="eyebrow">Gather with us</span>
<strong>There's a seat for you.</strong>
<span>Sundays at 9:00 & 10:45 AM</span>
</div>
</div>
</div>
</section>
<div class="welcome-strip">
<div class="container welcome-inner">
<p><strong>New around here?</strong> We would love to meet you and help you feel at home.</p>
<a href="#visit">A little more about Sundays <span aria-hidden="true">→</span></a>
</div>
</div>
<section class="section" id="about" aria-labelledby="about-heading">
<div class="container intro-grid">
<div class="image-frame">
<img src="https://picsum.photos/id/1011/900/1000" alt="A sunlit landscape inviting quiet reflection" width="900" height="1000" loading="lazy">
</div>
<div class="intro-copy">
<span class="eyebrow">A faith that makes room</span>
<h2 id="about-heading">Rooted in grace. Growing together.</h2>
<p>Stillwater is a Christian church for people of every age and background. We believe faith is not about having every answer; it is about drawing closer to God and learning to love our neighbors well.</p>
<p>Through communal worship, honest conversation, prayer, and acts of service, we make space for both questions and hope. Whether church has always been part of your life or you are walking through the doors for the first time, you are welcome here.</p>
<blockquote class="verse">
“Be still, and know that I am God.”
<cite>Psalm 46:10</cite>
</blockquote>
<a class="text-link" href="#community">Get to know our community <span aria-hidden="true">↗</span></a>
</div>
</div>
</section>
<section class="section pathways" id="community" aria-labelledby="community-heading">
<div class="container">
<div class="section-heading">
<div>
<span class="eyebrow">Life together</span>
<h2 id="community-heading">There is more than one way to belong.</h2>
</div>
<p>Faith grows in community. Find a rhythm that meets you where you are, and take the next step when you are ready.</p>
</div>
<div class="card-grid">
<article class="path-card">
<span class="number">01 / Gather</span>
<h3>Worship with us</h3>
<p>Our Sunday gatherings bring together music, prayer, Scripture, and a thoughtful sermon. We celebrate the sacrament of Communion regularly, remembering the grace that gathers us around one table.</p>
<a class="text-link" href="#visit">Plan a Sunday visit <span aria-hidden="true">↗</span></a>
</article>
<article class="path-card">
<span class="number">02 / Grow</span>
<h3>Find your people</h3>
<p>Our small groups meet in homes and at church to share a meal, study Scripture, and pray for one another. There is room for your questions, your story, and the friendships still to come.</p>
<a class="text-link" href="#events">Find a group <span aria-hidden="true">↗</span></a>
</article>
<article class="path-card">
<span class="number">03 / Serve</span>
<h3>Love our neighbors</h3>
<p>From preparing community meals to supporting local families, we put compassion into practice. You do not need special experience—just a willingness to show up and serve alongside others.</p>
<a class="text-link" href="#events">Explore ways to serve <span aria-hidden="true">↗</span></a>
</article>
</div>
</div>
</section>
<section class="section events" id="events" aria-labelledby="events-heading">
<div class="container events-grid">
<div class="events-intro">
<span class="eyebrow">What's happening</span>
<h2 id="events-heading">Make space for connection.</h2>
<p>There is always something happening at Stillwater, and you do not have to be a member to take part. Come for a conversation, lend a hand, or simply share a table.</p>
<p>Our recurring gatherings are a lovely place to start. Let us know you are coming and our team will help you with the details.</p>
<button class="button register-button" type="button" data-event="">Sign up for a gathering <span class="arrow" aria-hidden="true">↗</span></button>
</div>
<div class="event-list" aria-label="Recurring community gatherings">
<article class="event-row">
<div class="event-date"><span>Every</span><strong>Sun</strong></div>
<div class="event-info">
<h3>Sunday worship</h3>
<p>9:00 & 10:45 AM · Main sanctuary</p>
</div>
<button class="register-button" type="button" data-event="Sunday worship">Let us know <span aria-hidden="true">↗</span></button>
</article>
<article class="event-row">
<div class="event-date"><span>Every</span><strong>Wed</strong></div>
<div class="event-info">
<h3>Midweek study & prayer</h3>
<p>6:30 PM · Community room</p>
</div>
<button class="register-button" type="button" data-event="Midweek study and prayer">Sign up <span aria-hidden="true">↗</span></button>
</article>
<article class="event-row">
<div class="event-date"><span>First</span><strong>Sat</strong></div>
<div class="event-info">
<h3>Community table</h3>
<p>10:00 AM · Stillwater kitchen</p>
</div>
<button class="register-button" type="button" data-event="Community table">Sign up <span aria-hidden="true">↗</span></button>
</article>
</div>
</div>
</section>
<section class="section" id="resources" aria-labelledby="resources-heading">
<div class="container">
<div class="sermon-grid">
<div class="sermon-image">
<img src="https://picsum.photos/id/1040/1100/900" alt="A quiet natural landscape beneath an open sky" width="1100" height="900" loading="lazy">
</div>
<div class="sermon-copy">
<span class="eyebrow light">A little encouragement for the journey</span>
<h2 id="resources-heading">Take a moment to be still.</h2>
<p>Life moves quickly. Our weekly teachings invite you to slow down, listen for God, and carry the wisdom of Scripture into ordinary moments.</p>
<p>Looking for a sermon, a prayer resource, or a place to begin reading the Bible? Our team would be glad to share something meaningful with you.</p>
<div class="sermon-meta">Scripture · Prayer · Everyday faith</div>
<a class="button light" href="mailto:hello@stillwaterchurch.example?subject=Spiritual%20resources">Request resources <span class="arrow" aria-hidden="true">↗</span></a>
</div>
</div>
</div>
</section>
<section class="quote-section" aria-label="A community member's reflection">
<div class="container">
<span class="eyebrow">A word from our community</span>
<blockquote>
<p>“I came looking for a place to ask honest questions. I found people who were willing to walk alongside me while I did.”</p>
<cite>— A member of the Stillwater community</cite>
</blockquote>
</div>
</section>
<section class="section" id="visit" aria-labelledby="visit-heading">
<div class="container visit-grid">
<div class="visit-copy">
<span class="eyebrow">Your first Sunday</span>
<h2 id="visit-heading">Come as you are. We'll save you a seat.</h2>
<p>A warm welcome, a good cup of coffee, and people ready to help you find your way—that is what you can expect at Stillwater. Our gatherings last about an hour, and children are welcome throughout the service.</p>
<p>There is no dress code and no need to have it all figured out. Come on your own, bring a friend, or bring the whole family. We look forward to meeting you.</p>
<div class="visit-details">
<div>
<strong>When we gather</strong>
<p>Sundays at 9:00 & 10:45 AM<br>Kids' programs at both services</p>
</div>
<div>
<strong>Where to find us</strong>
<p>128 Willow Lane<br>Asheville, NC 28801</p>
</div>
</div>
<button class="button register-button" type="button" data-event="Sunday worship">Let us know you're coming <span class="arrow" aria-hidden="true">↗</span></button>
</div>
<div class="faq">
<span class="eyebrow">Good to know</span>
<h3>Questions before you come?</h3>
<details>
<summary>What should I expect on a Sunday?</summary>
<p>Expect a relaxed, welcoming atmosphere with music, prayer, a reading from Scripture, and a practical sermon. Greeters at the entrance can answer questions and help you find a seat.</p>
</details>
<details>
<summary>Is there something for children?</summary>
<p>Yes. Stillwater Kids offers age-appropriate activities during both services, led by caring volunteers. You are also welcome to keep your children with you in the sanctuary.</p>
</details>
<details>
<summary>Do I need to be a Christian to attend?</summary>
<p>Not at all. People with different experiences, beliefs, and questions are welcome to join us. You can participate at whatever pace feels comfortable to you.</p>
</details>
<details>
<summary>Is the building accessible?</summary>
<p>Our main entrance, sanctuary, and restrooms are wheelchair accessible. If you have a specific accessibility question, please contact us before your visit so we can help.</p>
</details>
</div>
</div>
</section>
</main>
<footer class="footer" id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-about">
<a class="brand" href="#top">
<img src="https://placehold.co/96x96/e4eadf/203c32?text=SC&font=lora" width="48" height="48" alt="">
<span>
<span class="brand-name">Stillwater</span>
<span class="brand-tag">A place to belong & become</span>
</span>
</a>
<p>A welcoming community following Jesus, finding belonging, and sharing hope with our neighbors.</p>
</div>
<div>
<h3>Explore</h3>
<ul>
<li><a href="#about">About us</a></li>
<li><a href="#community">Community</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
</div>
<div>
<h3>Find us</h3>
<address>128 Willow Lane<br>Asheville, NC 28801</address>
<ul>
<li><a href="tel:+18285550148">(828) 555-0148</a></li>
<li><a href="mailto:hello@stillwaterchurch.example">Email our team</a></li>
</ul>
</div>
<div>
<h3>Connect</h3>
<ul>
<li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram <span aria-hidden="true">↗</span><span class="sr-only"> (opens in a new tab)</span></a></li>
<li><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">Facebook <span aria-hidden="true">↗</span><span class="sr-only"> (opens in a new tab)</span></a></li>
<li><a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">YouTube <span aria-hidden="true">↗</span><span class="sr-only"> (opens in a new tab)</span></a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2026</span> Stillwater Community Church. All rights reserved.</span>
<div><a href="mailto:hello@stillwaterchurch.example?subject=Privacy%20inquiry">Privacy</a><a href="mailto:hello@stillwaterchurch.example?subject=Terms%20inquiry">Terms</a><a href="#top">Back to top ↑</a></div>
</div>
</div>
</footer>
<dialog id="registration-dialog" aria-labelledby="dialog-title">
<div class="dialog-inner">
<div class="dialog-top">
<div>
<span class="eyebrow">We look forward to meeting you</span>
<h2 id="dialog-title">Join a gathering.</h2>
</div>
<button class="close-dialog" type="button" aria-label="Close registration">×</button>
</div>
<p>Tell us a little about your plans and we will help you feel at home. Submitting opens an email to our welcome team; please send it from your email app.</p>
<form id="registration-form">
<div class="form-grid">
<div class="field">
<label for="visitor-name">Your name</label>
<input id="visitor-name" name="name" autocomplete="name" required>
</div>
<div class="field">
<label for="visitor-email">Email address</label>
<input id="visitor-email" name="email" type="email" autocomplete="email" required>
</div>
</div>
<div class="field">
<label for="visitor-event">Gathering</label>
<select id="visitor-event" name="event" required>
<option value="">Choose a gathering</option>
<option>Sunday worship</option>
<option>Midweek study and prayer</option>
<option>Community table</option>
</select>
</div>
<div class="form-grid">
<div class="field">
<label for="visitor-date">When would you like to come?</label>
<input id="visitor-date" name="date" type="date" required>
</div>
<div class="field">
<label for="visitor-guests">Number of people</label>
<select id="visitor-guests" name="guests">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5 or more</option>
</select>
</div>
</div>
<button class="button" type="submit">Prepare email <span class="arrow" aria-hidden="true">↗</span></button>
<p class="form-note">Or email us directly at <a href="mailto:hello@stillwaterchurch.example"><u>hello@stillwaterchurch.example</u></a>.</p>
<div id="form-status" role="status" aria-live="polite"></div>
</form>
</div>
</dialog>
<style>
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
</style>
<script>
const menuButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('#primary-nav');
menuButton.addEventListener('click', () => {
const expanded = menuButton.getAttribute('aria-expanded') === 'true';
menuButton.setAttribute('aria-expanded', String(!expanded));
nav.classList.toggle('is-open', !expanded);
});
nav.addEventListener('click', event => {
if (event.target.closest('a')) {
nav.classList.remove('is-open');
menuButton.setAttribute('aria-expanded', 'false');
}
});
const dialog = document.querySelector('#registration-dialog');
const eventSelect = document.querySelector('#visitor-event');
const status = document.querySelector('#form-status');
document.querySelectorAll('.register-button').forEach(button => {
button.addEventListener('click', () => {
eventSelect.value = button.dataset.event || '';
status.textContent = '';
dialog.showModal();
});
});
document.querySelector('.close-dialog').addEventListener('click', () => dialog.close());
dialog.addEventListener('click', event => {
if (event.target === dialog) dialog.close();
});
document.querySelector('#registration-form').addEventListener('submit', event => {
event.preventDefault();
const data = new FormData(event.currentTarget);
const subject = `Gathering inquiry: ${data.get('event')}`;
const body = `Hello Stillwater team,\n\nI'd like to attend ${data.get('event')}.\n\nName: ${data.get('name')}\nEmail: ${data.get('email')}\nDate: ${data.get('date')}\nNumber of people: ${data.get('guests')}\n\nThank you!`;
window.location.href = `mailto:hello@stillwaterchurch.example?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
status.textContent = 'Your email app should open with your details. Please send the email to complete your inquiry.';
});
document.querySelector('#year').textContent = new Date().getFullYear();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:16:55.893Z",
"url": "https://benchmark.aimac.invalid/7f6d5a71db2dff1248041df180271e8ba43c3cdf8193619da57b9f63aabeefb7.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"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": "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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Stillwater Community Church, home\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Stillwater Community Church, home\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"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": "<span aria-hidden=\"true\">\u2197</span>",
"target": [
".announcement > a[href$=\"#visit\"] > span[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 class=\"brand\" href=\"#top\" aria-label=\"Stillwater Community Church, home\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Stillwater Community Church, home\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Stillwater Community Church, home\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"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 register-button\" type=\"button\" data-event=\"\">Sign up for a gathering <span class=\"arrow\" aria-hidden=\"true\">\u2197</span></button>",
"target": [
"button[data-event=\"\"]"
]
}
]
},
{
"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-heading\">Room for your soul to <em>breathe.</em></h1>",
"target": [
"#hero-heading"
]
},
{
"html": "<h2 id=\"about-heading\">Rooted in grace. Growing together.</h2>",
"target": [
"#about-heading"
]
},
{
"html": "<h2 id=\"community-heading\">There is more than one way to belong.</h2>",
"target": [
"#community-heading"
]
},
{
"html": "<h3>Worship with us</h3>",
"target": [
".path-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Find your people</h3>",
"target": [
".path-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Love our neighbors</h3>",
"target": [
".path-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"events-heading\">Make space for connection.</h2>",
"target": [
"#events-heading"
]
},
{
"html": "<h3>Sunday worship</h3>",
"target": [
".event-row:nth-child(1) > .event-info > h3"
]
},
{
"html": "<h3>Midweek study & prayer</h3>",
"target": [
".event-row:nth-child(2) > .event-info > h3"
]
},
{
"html": "<h3>Community table</h3>",
"target": [
".event-row:nth-child(3) > .event-info > h3"
]
},
{
"html": "<h2 id=\"resources-heading\">Take a moment to be still.</h2>",
"target": [
"#resources-heading"
]
},
{
"html": "<h2 id=\"visit-heading\">Come as you are. We'll save you a seat.</h2>",
"target": [
"#visit-heading"
]
},
{
"html": "<h3>Questions before you come?</h3>",
"target": [
".faq > h3"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
".footer-grid > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Find us</h3>",
"target": [
"div:nth-child(3) > h3"
]
},
{
"html": "<h3>Connect</h3>",
"target": [
"div:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"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": "#e8eee6",
"bgColor": "#162d25",
"contrastRatio": 12.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 12.39"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"announcement\">\n Sundays at 9:00 & 10:45 AM \u00b7 Everyone is welcome.\n <a href=\"#visit\">Plan your first visit <span aria-hidden=\"true\">\u2197</span></a>\n </div>",
"target": [
".announcement"
]
}
]
},
{
"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\">",
"target": [
"#primary-nav"
]
}
]
},
{
"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"
},
{
"id": "presentational-role",
"data": {
"role": "presentation"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were overridden with role=\"presentation\""
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/96x96/203c32/ffffff?text=SC&font=lora\" width=\"48\" height=\"48\" alt=\"\">",
"target": [
".header-inner > .brand[href$=\"#top\"] > img[width=\"48\"][height=\"48\"][alt=\"\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"announcement\">\n Sundays at 9:00 & 10:45 AM \u00b7 Everyone is welcome.\n <a href=\"#visit\">Plan your first visit <span aria-hidden=\"true\">\u2197</span></a>\n </div>",
"target": [
".announcement"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#visit\">Plan your first visit <span aria-hidden=\"true\">\u2197</span></a>",
"target": [
".announcement > a[href$=\"#visit\"]"
]
}
]
},
{
"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-link\" href=\"#main\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>\n <li><a href=\"#about\">About us</a></li>\n <li><a href=\"#community\">Community</a></li>\n <li><a href=\"#events\">Events</a></li>\n <li><a href=\"#resources\">Resources</a></li>\n </ul>",
"target": [
"div:nth-child(2) > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#about\">About us</a></li>",
"target": [
"div:nth-child(2) > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"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://picsum.photos/id/1018/1200/1200\" alt=\"A peaceful mountain landscape reflected in still water\" width=\"1200\" height=\"1200\" fetchpriority=\"high\">",
"target": [
"img[width=\"1200\"]"
]
}
]
},
{
"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 should I expect on a Sunday?</summary>",
"target": [
"details:nth-child(3) > 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": 145.7,
"height": 47.2
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (145.7px by 47.2px, 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-link\" href=\"#main\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
}
],
"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=\"event-list\" aria-label=\"Recurring community gatherings\">",
"target": [
".event-list"
],
"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": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"arrow\" aria-hidden=\"true\">\u2192</span>",
"target": [
".outline > .arrow[aria-hidden=\"true\"]"
],
"failureSummary": "Fix any of the following:\n Element content contains only non-text characters"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#788579",
"bgColor": "#fffefb",
"contrastRatio": 3.83,
"fontSize": "7.0pt (9.28px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\">",
"target": [
"header"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.83 (foreground color: #788579, background color: #fffefb, font size: 7.0pt (9.28px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tag\">A place to belong & become</span>",
"target": [
".header-inner > .brand[href$=\"#top\"] > span > .brand-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.83 (foreground color: #788579, background color: #fffefb, font size: 7.0pt (9.28px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#e9eee4",
"contrastRatio": 3.76,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"top\" aria-labelledby=\"hero-heading\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #6d7c69, background color: #e9eee4, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Welcome to Stillwater Community Church</span>",
"target": [
".hero-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #6d7c69, background color: #e9eee4, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#f7f5ee",
"contrastRatio": 4.06,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.06 (foreground color: #6d7c69, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">A faith that makes room</span>",
"target": [
".intro-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #6d7c69, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#788579",
"bgColor": "#f7f5ee",
"contrastRatio": 3.54,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.54 (foreground color: #788579, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<cite>Psalm 46:10</cite>",
"target": [
".verse > cite"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.54 (foreground color: #788579, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#fffefb",
"contrastRatio": 4.39,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section pathways\" id=\"community\" aria-labelledby=\"community-heading\">",
"target": [
"#community"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #6d7c69, background color: #fffefb, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Life together</span>",
"target": [
".section-heading > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #6d7c69, background color: #fffefb, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aaa97",
"bgColor": "#fafbf7",
"contrastRatio": 2.35,
"fontSize": "13.8pt (18.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"path-card\">",
"target": [
".path-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #9aaa97, background color: #fafbf7, font size: 13.8pt (18.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"number\">01 / Gather</span>",
"target": [
".path-card:nth-child(1) > .number"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #9aaa97, background color: #fafbf7, font size: 13.8pt (18.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aaa97",
"bgColor": "#fafbf7",
"contrastRatio": 2.35,
"fontSize": "13.8pt (18.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"path-card\">",
"target": [
".path-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #9aaa97, background color: #fafbf7, font size: 13.8pt (18.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"number\">02 / Grow</span>",
"target": [
".path-card:nth-child(2) > .number"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #9aaa97, background color: #fafbf7, font size: 13.8pt (18.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aaa97",
"bgColor": "#fafbf7",
"contrastRatio": 2.35,
"fontSize": "13.8pt (18.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"path-card\">",
"target": [
".path-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #9aaa97, background color: #fafbf7, font size: 13.8pt (18.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"number\">03 / Serve</span>",
"target": [
".path-card:nth-child(3) > .number"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #9aaa97, background color: #fafbf7, font size: 13.8pt (18.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#e7ece2",
"contrastRatio": 3.69,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-heading\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #6d7c69, background color: #e7ece2, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">What's happening</span>",
"target": [
".events-intro > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #6d7c69, background color: #e7ece2, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f806e",
"bgColor": "#e7ece2",
"contrastRatio": 3.5,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-heading\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.5 (foreground color: #6f806e, background color: #e7ece2, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Every</span>",
"target": [
".event-row:nth-child(1) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.5 (foreground color: #6f806e, background color: #e7ece2, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f806e",
"bgColor": "#e7ece2",
"contrastRatio": 3.5,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-heading\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.5 (foreground color: #6f806e, background color: #e7ece2, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Every</span>",
"target": [
".event-row:nth-child(2) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.5 (foreground color: #6f806e, background color: #e7ece2, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f806e",
"bgColor": "#e7ece2",
"contrastRatio": 3.5,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-heading\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.5 (foreground color: #6f806e, background color: #e7ece2, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>First</span>",
"target": [
".event-row:nth-child(3) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.5 (foreground color: #6f806e, background color: #e7ece2, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#f2eee5",
"contrastRatio": 3.82,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"quote-section\" aria-label=\"A community member's reflection\">",
"target": [
".quote-section"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.82 (foreground color: #6d7c69, background color: #f2eee5, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">A word from our community</span>",
"target": [
".container > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.82 (foreground color: #6d7c69, background color: #f2eee5, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b8a79",
"bgColor": "#f2eee5",
"contrastRatio": 3.15,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"quote-section\" aria-label=\"A community member's reflection\">",
"target": [
".quote-section"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.15 (foreground color: #7b8a79, background color: #f2eee5, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<cite>\u2014 A member of the Stillwater community</cite>",
"target": [
".container > blockquote > cite"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.15 (foreground color: #7b8a79, background color: #f2eee5, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#f7f5ee",
"contrastRatio": 4.06,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.06 (foreground color: #6d7c69, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Your first Sunday</span>",
"target": [
".visit-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #6d7c69, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6d7c69",
"bgColor": "#f7f5ee",
"contrastRatio": 4.06,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.06 (foreground color: #6d7c69, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Good to know</span>",
"target": [
".faq > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.06 (foreground color: #6d7c69, background color: #f7f5ee, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6077
},
{
"y": 576,
"height": 6077
},
{
"y": 1152,
"height": 6077
},
{
"y": 1728,
"height": 6077
},
{
"y": 2304,
"height": 6077
},
{
"y": 2880,
"height": 6077
},
{
"y": 3456,
"height": 6077
},
{
"y": 4032,
"height": 6077
},
{
"y": 4608,
"height": 6077
},
{
"y": 5184,
"height": 6077
},
{
"y": 5357,
"height": 6077
}
],
"scans": 12,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Religion and Spirituality" 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: "Religion and Spirituality"
- Description: Religious organizations, spiritual resources, faith communities, and worship services.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Religion and Spirituality" 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: "About", "Events", "Resources".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Religion and Spirituality" category. Consider themes similar to: "Study Groups", "Spiritual Teachings", "Community Events".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "sermon", "sacrament", "communal worship".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Sign Up", "Watch Service", "Find Group".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Religion and Spirituality" sector. Ideas similar but not limited to: "event registration".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "recent sermons", "volunteer opportunities", "ministry updates".
- **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.