OpenAI GPT 6 Astra Pro – Pets
via OpenAI · Generated
- AIMAC Debt 2.00
- Cost $2.12
- Total Violations 1
- HTML Size 57 KB
- Em Dashes 7
Screenshot
View Live Page
Accessibility Issues Found
1 Serious
-
color-contrast serious 1 instance
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p>You don’t have to have it all figured out. Start with approachable guidance that helps you ask better questions and build a healthier routine.</p>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#254d40">
<meta name="description" content="Find your new best friend and feel at home in pet parenthood. Kindred & Co. connects pets and people through adoption, positive training, and practical care resources.">
<title>Kindred & Co. — Better lives, together.</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&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
<style>
:root{--paper:#f8f6ef;--white:#fffefa;--ink:#243c32;--green:#254d40;--muted:#657067;--line:#dedfd4;--orange:#d56c42;--lime:#e4ecb9;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",sans-serif;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%;object-fit:cover}
h1,h2,h3,h4,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-1.8px}
h1{font-size:clamp(50px,5.7vw,78px)}
h2{font-size:clamp(36px,4vw,50px)}
h3{font-size:23px;line-height:1.3;letter-spacing:-.5px}
p{color:var(--muted)}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.container{width:min(1180px,calc(100% - 80px));margin:auto}
.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:800;line-height:1.5;margin-bottom:19px}
.eyebrow::before{content:"";width:7px;height:7px;flex-shrink:0;background:var(--orange);border-radius:50%}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;text-decoration:none;border:1px solid var(--green);background:var(--green);color:white;min-height:50px;padding:12px 23px;border-radius:7px;font-size:13px;font-weight:700;transition:background .2s,transform .2s}
.btn:hover{background:#183d30;transform:translateY(-2px)}
.btn.light{background:transparent;color:var(--green);border-color:#b4bbae}
.btn.light:hover{background:#e9eddd}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn.lime:hover{background:#f1f7d5}
.text-link{display:inline-flex;align-items:center;gap:20px;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 5px;background:transparent;cursor:pointer}
.text-link:hover{color:var(--orange);border-color:var(--orange)}
.arrow{font-size:19px;font-weight:400;line-height:1}
.topbar{background:var(--green);color:#f0f3e6;text-align:center;padding:9px 20px;font-size:11px;letter-spacing:.4px}
.topbar a{margin-left:9px;text-underline-offset:3px;font-weight:700;white-space:nowrap}
header{background:rgba(248,246,239,.97);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line)}
.header-inner{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand img{width:42px;height:42px;border-radius:50%}
.brand-name{font-family:var(--serif);font-size:25px;line-height:1.2;letter-spacing:-.8px}
.brand-tagline{display:block;font-size:9px;letter-spacing:1.2px;margin-top:4px;text-transform:uppercase}
nav{display:flex;align-items:center;gap:25px}
nav a{font-size:12px;font-weight:600;text-decoration:none;padding:12px 0}
nav a:hover{color:var(--orange)}
.header-cta{font-size:12px;min-height:42px;padding:10px 17px}
.menu-toggle{display:none;border:1px solid var(--line);border-radius:5px;background:transparent;padding:8px 13px;color:var(--ink)}
.hero{padding:65px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:65px}
.hero-copy{padding:20px 0}
h1 em{color:var(--orange);font-weight:500}
.hero-copy>p{max-width:425px;margin:25px 0 29px;font-size:16px;line-height:1.85}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:31px}
.avatars{display:flex;padding-left:0}
.avatars img{border:3px solid var(--paper);width:36px;height:36px;border-radius:50%;margin-left:-10px}
.avatars img:first-child{margin-left:0}
.hero-proof p{font-size:11px;line-height:1.6}
.hero-proof strong{color:var(--ink);font-weight:700}
.hero-visual{position:relative;padding:0 12px 20px 0}
.hero-photo{width:100%;height:535px;border-radius:200px 200px 16px 16px;object-position:center 45%;background:#bfa88b}
.photo-outline{position:absolute;inset:10px 0 6px 13px;border:1px solid #9dada0;border-radius:200px 200px 18px 18px;z-index:-1}
.round-stamp{position:absolute;right:-20px;top:28px;width:108px;height:108px;border-radius:50%;background:var(--lime);border:6px solid var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg);font-size:11px;line-height:1.6;font-weight:800;letter-spacing:1px}
.round-stamp span{display:block;font-size:28px;font-weight:400;line-height:1}
.pet-note{position:absolute;bottom:45px;left:-31px;background:var(--white);border-radius:11px;box-shadow:0 10px 35px #13291e15;padding:15px 19px;display:flex;align-items:center;gap:20px}
.pet-note b{font-family:var(--serif);font-size:22px;font-weight:500}
.pet-note p{font-size:11px;margin-top:2px}
.pet-note a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;text-decoration:none}
.value-strip{background:#eef0e4;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.values{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0}
.value{display:flex;align-items:center;justify-content:center;gap:11px;padding:0 15px;border-right:1px solid #cfd5c5;font-size:12px;font-weight:600}
.value:first-child{padding-left:0;justify-content:flex-start}
.value:last-child{border-right:0}
.value svg{width:23px;height:23px;flex-shrink:0}
.section{padding:83px 0}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:35px}
.section-head p{max-width:370px;font-size:14px;line-height:1.8}
.section-head h2{max-width:570px}
.filterbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:15px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{border:1px solid #d4d8cb;padding:7px 20px;border-radius:30px;font-size:12px;color:var(--muted);background:transparent;min-height:38px}
.filter.active{background:var(--green);border-color:var(--green);color:white}
.filter:hover:not(.active){background:#e7ecdf}
.result-count{font-size:11px;color:var(--muted)}
.pet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pet-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s,box-shadow .25s}
.pet-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px #233b3209}
.pet-card[hidden]{display:none}
.pet-image{height:275px;position:relative;background:#ddd9c9}
.pet-image img{width:100%;height:100%}
.pet-image .pill{position:absolute;left:16px;top:16px;background:var(--white);border-radius:30px;font-size:10px;font-weight:600;padding:5px 12px}
.pet-body{padding:23px}
.pet-title{display:flex;align-items:center;justify-content:space-between}
.pet-title h3{font-family:var(--serif);font-size:28px;font-weight:500}
.pet-title span{font-size:11px;color:var(--muted)}
.pet-meta{font-size:12px;margin-top:6px}
.pet-desc{font-size:13px;line-height:1.75;margin:14px 0 18px}
.pet-body .text-link{width:100%;justify-content:space-between;border-color:var(--line);padding:13px 0 0;border-bottom:0;border-top:1px solid var(--line)}
.adopt-note{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:26px}
.adopt-note p{font-size:12px;max-width:750px}
.adopt-note .text-link{flex-shrink:0}
.care-section{background:#eeeede;border-top:1px solid #e3e3d4;border-bottom:1px solid #e3e3d4}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.care-card{padding:28px;background:var(--paper);border-radius:12px;display:flex;flex-direction:column;align-items:flex-start}
.care-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;margin-bottom:25px;background:#e3e9d3}
.care-card:nth-child(2) .care-icon{background:#f3e1d3}
.care-card:nth-child(3) .care-icon{background:#e0e8e6}
.care-icon svg{width:24px;height:24px}
.card-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.care-card h3{font-family:var(--serif);font-weight:500;font-size:26px;margin-bottom:15px}
.care-card p{font-size:13px;line-height:1.8;margin-bottom:12px}
.care-card .text-link{margin-top:auto;padding-top:13px}
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.training-image{position:relative}
.training-image>img{height:530px;width:100%;border-radius:12px 12px 130px 12px}
.image-caption{position:absolute;bottom:28px;left:25px;right:25px;background:var(--paper);padding:17px 20px;border-radius:8px;display:flex;gap:13px;align-items:center;font-size:12px;max-width:290px}
.image-caption svg{width:27px;height:27px;flex-shrink:0}
.training-copy>p{font-size:14px;line-height:1.9;margin-top:23px}
.training-points{list-style:none;padding:0;margin:24px 0 29px}
.training-points li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.check{font-size:13px;color:var(--green);background:#e3e9d3;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0}
.training-points small{display:block;color:var(--muted);margin-top:3px;font-size:11px}
.small-note{font-size:11px!important;margin-top:12px!important}
.community-section{background:var(--green);color:var(--paper);overflow:hidden}
.community-section .eyebrow::before{background:var(--lime)}
.community-section .section-head p{color:#ccd7cd}
.community-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:55px}
.quote-card{background:#365b4e;border:1px solid #5d7766;border-radius:13px;padding:30px}
.quote-mark{font-family:var(--serif);font-size:65px;line-height:.8;color:var(--lime)}
blockquote{margin:15px 0 25px;font-family:var(--serif);font-size:23px;line-height:1.6}
.quote-person{display:flex;align-items:center;gap:12px}
.quote-person img{width:43px;height:43px;border-radius:50%}
.quote-person strong{font-size:12px}
.quote-person p{font-size:11px;color:#d0dbcf;margin-top:2px}
.events-title{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.event{display:flex;align-items:center;gap:18px;padding:22px 0;border-bottom:1px solid #5b7566}
.event-date{border:1px solid #819581;border-radius:7px;min-width:57px;padding:8px;text-align:center;font-size:10px;line-height:1.5;text-transform:uppercase;color:var(--lime)}
.event-date strong{display:block;font-size:19px;color:var(--paper)}
.event h3{font-size:16px;font-weight:500;letter-spacing:0}
.event p{font-size:11px;color:#c8d4c6;margin-top:5px}
.event button{border:0;background:transparent;color:var(--lime);font-size:22px;margin-left:auto;padding:10px}
.community-link{margin-top:23px;color:var(--paper);border-color:#8ba18e}
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}
.faq-intro p{font-size:14px;margin:23px 0}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 0;font-size:14px;font-weight:600;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;font-weight:400;color:var(--muted)}
details[open] summary::after{content:"−"}
details p{font-size:13px;line-height:1.85;padding:0 30px 23px 0}
.about-band{margin-bottom:75px;background:var(--lime);border-radius:14px;padding:44px 50px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.about-band h2{font-size:35px}
.about-band p{font-size:13px;max-width:650px;margin-top:15px;color:#4e624c;line-height:1.8}
.about-band .btn{flex-shrink:0}
footer{border-top:1px solid var(--line);padding:48px 0 23px}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:45px;padding-bottom:43px}
.footer-brand p{font-size:12px;max-width:255px;margin:18px 0}
.socials{display:flex;gap:15px}
.socials a{font-size:11px;text-underline-offset:4px}
.footer-col h3{font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:18px}
.footer-col a,.footer-col p{display:block;font-size:12px;margin-bottom:8px;text-decoration:none;color:var(--muted)}
.footer-col a:hover{text-decoration:underline}
.footer-col address{font-style:normal}
.footer-bottom{border-top:1px solid var(--line);padding-top:21px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
.legal{display:flex;gap:20px}
.legal button{border:0;padding:0;color:var(--muted);background:transparent;font-size:10px}
.skip{position:absolute;left:20px;top:-100px;background:var(--green);color:white;padding:10px;z-index:100}
.skip:focus{top:10px}
dialog{border:1px solid var(--line);border-radius:17px;padding:0;max-width:590px;width:calc(100% - 36px);max-height:85vh;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #0003}
dialog::backdrop{background:#10271ec4;backdrop-filter:blur(4px)}
.modal-content{padding:35px}
.modal-close{position:absolute;top:12px;right:12px;border:1px solid var(--line);background:var(--paper);border-radius:50%;width:34px;height:34px;font-size:23px;color:var(--ink);line-height:1}
.modal-content h2{font-size:35px;padding-right:15px;margin-bottom:20px}
.modal-content h3{font-size:17px;margin:20px 0 8px}
.modal-content p,.modal-content li{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:13px}
.modal-content ul{padding-left:20px}
.modal-content .btn{margin-top:10px}
.modal-content label{display:block;font-size:12px;font-weight:600;margin:17px 0 7px}
.modal-content select{width:100%;padding:12px;border:1px solid #bec5b6;background:var(--white);border-radius:7px;color:var(--ink)}
.match-result{padding:20px;background:#e8edda;border-radius:10px;margin-top:20px}
.match-result h3{margin-top:0}
.match-result p:last-child{margin-bottom:0}
@media(min-width:1450px){.hero{padding-top:80px;padding-bottom:85px}}
@media(max-width:1100px){
.container{width:calc(100% - 48px)}
nav{gap:17px}.header-cta{display:none}
.hero-grid{gap:40px}.hero-photo{height:490px}
.training-grid{gap:45px}.faq-layout{gap:50px}
.footer-grid{gap:25px}.round-stamp{right:-5px}
.care-card{padding:23px}
}
@media(max-width:800px){
.header-inner{min-height:76px}.brand-name{font-size:23px}
.menu-toggle{display:block}
nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:16px 24px 22px;border-bottom:1px solid var(--line);box-shadow:0 10px 20px #20372a0a}
nav.open{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 25px}
nav a{font-size:14px}
.hero{padding:35px 0 45px}.hero-grid{gap:30px}
h1{font-size:48px}.hero-copy>p{font-size:14px}.hero-photo{height:440px}
.hero-buttons .btn{width:100%}.hero-proof{gap:7px}
.pet-note{left:-12px;bottom:35px;padding:12px;gap:10px}
.round-stamp{width:90px;height:90px;right:-12px;top:20px;font-size:9px}
.values{grid-template-columns:repeat(2,1fr);gap:18px 0}.value{justify-content:flex-start!important;padding-left:15px!important}.value:nth-child(2){border:0}
.section{padding:60px 0}.section-head{align-items:start;gap:25px}.section-head p{max-width:280px}
.pet-grid{gap:14px}.pet-image{height:210px}.pet-body{padding:17px}
.pet-title{align-items:start;flex-direction:column}.pet-title span{margin-top:5px}
.care-grid{gap:14px}.care-card{padding:20px}.care-card h3{font-size:23px}
.training-grid{gap:30px}.training-image>img{height:535px}
.community-grid{gap:25px}.quote-card{padding:23px}blockquote{font-size:20px}
.faq-layout{grid-template-columns:1fr;gap:25px}.faq-intro p{max-width:450px}
.about-band{padding:32px;flex-direction:column;align-items:start;gap:23px}
.footer-grid{grid-template-columns:1.4fr 1fr;gap:35px}
}
@media(max-width:580px){
.container{width:calc(100% - 36px)}
.topbar{font-size:10px;padding:8px 12px}.topbar a{margin-left:4px}
.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy{padding:8px 0 0}
h1{font-size:57px;max-width:370px}.hero-copy>p{font-size:15px;margin-top:20px}
.hero-buttons{gap:9px}.hero-buttons .btn{width:auto;flex:1;padding:12px 14px;gap:12px}
.hero-proof{margin-top:23px;gap:12px}.hero-visual{margin:0 10px 0 20px}
.hero-photo{height:420px;border-radius:170px 170px 12px 12px}
.photo-outline{border-radius:170px 170px 12px 12px}
.pet-note{left:-20px}.round-stamp{right:-10px}
.value{font-size:10px;gap:7px;padding:0 9px!important}.value svg{width:20px}
h2{font-size:39px}.section-head{flex-direction:column;gap:18px;margin-bottom:26px}.section-head p{max-width:none}
.filterbar{align-items:flex-start;flex-direction:column;gap:10px}.filter{padding:7px 16px}
.pet-grid{grid-template-columns:1fr;gap:22px}.pet-image{height:310px}.pet-body{padding:23px}.pet-title{flex-direction:row;align-items:center}
.pet-desc{font-size:14px}.adopt-note{align-items:start;flex-direction:column;gap:18px}
.care-grid{grid-template-columns:1fr;gap:18px}.care-card{padding:28px}.care-card h3{font-size:28px}.care-card p{font-size:14px}.care-icon{margin-bottom:20px}
.training-grid{grid-template-columns:1fr;gap:37px}.training-image>img{height:380px}.training-copy>p{font-size:14px}
.community-grid{grid-template-columns:1fr;gap:30px}.quote-card{padding:28px}blockquote{font-size:23px}
.faq-layout{gap:15px}.about-band{padding:30px 25px;margin-bottom:45px}.about-band h2{font-size:32px}
.footer-grid{grid-template-columns:1fr 1fr;gap:32px 20px}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:320px}
.footer-col:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:12px}
.modal-content{padding:32px 24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
</style>
</head>
<body>
<a href="#main" class="skip">Skip to content</a>
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
<symbol id="icon-heart" viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></symbol>
<symbol id="icon-shield" viewBox="0 0 24 24"><path d="m12 2 8 3v7c0 5-8 10-8 10S4 17 4 12V5l8-3Z" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="m8 12 3 3 5-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="icon-leaf" viewBox="0 0 24 24"><path d="M20 3C10 2 3 6 4 13s13 10 16-10Z M4 21 16 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></symbol>
<symbol id="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M12 1v3m0 16v3M1 12h3m16 0h3M4 4l2 2m12 12 2 2M4 20l2-2M18 6l2-2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></symbol>
<symbol id="icon-bowl" viewBox="0 0 24 24"><path d="M3 12h18l-2 8H5l-2-8Zm-1 8h20M8 8c-3-3 3-3 0-6m8 6c-3-3 3-3 0-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</svg>
<div class="topbar">A little love. A whole new beginning. <a href="#adopt">Meet your new best friend <span aria-hidden="true">↗</span></a></div>
<header>
<div class="container header-inner">
<a class="brand" href="#" aria-label="Kindred and Co. home">
<img src="https://placehold.co/84x84/254d40/f8f6ef?text=k.&font=lora" alt="" width="42" height="42">
<div><div class="brand-name">kindred & co.</div><span class="brand-tagline">Better lives, together.</span></div>
</a>
<button class="menu-toggle" aria-expanded="false" aria-controls="main-nav">Menu <span aria-hidden="true">☰</span></button>
<nav id="main-nav" aria-label="Primary navigation">
<a href="#adopt">Adopt</a>
<a href="#care">Pet Care</a>
<a href="#training">Training</a>
<a href="#resources">Resources</a>
<a href="#community">Community</a>
<a href="#about">About</a>
</nav>
<a href="#adopt" class="btn header-cta">Find your kindred <span aria-hidden="true">↗</span></a>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<div class="container hero-grid">
<div class="hero-copy">
<div class="eyebrow">For the love of little paws</div>
<h1 id="hero-title">Their next chapter.<br>Your new<br><em>best friend.</em></h1>
<p>A good life starts with a little connection. Find a pet to love, advice you can use, and a community that’s with you for every wag, whisker, and wonderful mess.</p>
<div class="hero-buttons">
<a href="#adopt" class="btn">Meet the pets <span class="arrow" aria-hidden="true">↗</span></a>
<a href="#care" class="btn light">Explore pet care <span class="arrow" aria-hidden="true">→</span></a>
</div>
<div class="hero-proof">
<div class="avatars" aria-hidden="true">
<img src="https://i.pravatar.cc/72?u=kindred-maya" width="36" height="36" alt="">
<img src="https://i.pravatar.cc/72?u=kindred-elliot" width="36" height="36" alt="">
<img src="https://i.pravatar.cc/72?u=kindred-jules" width="36" height="36" alt="">
</div>
<p><strong>Good people. Very good pets.</strong><br>A kinder kind of pet community.</p>
</div>
</div>
<div class="hero-visual">
<div class="photo-outline"></div>
<img class="hero-photo" src="https://picsum.photos/id/237/800/950" alt="A black puppy with soulful brown eyes looking up at the camera" width="800" height="950" fetchpriority="high">
<div class="round-stamp" aria-label="Small paws, big love"><div>SMALL PAWS<span aria-hidden="true">♡</span>BIG LOVE</div></div>
<div class="pet-note">
<div><b>Hi, I’m Fern.</b><p>Professional cuddler. Future best friend.</p></div>
<a href="#adopt" aria-label="Meet Fern"><span class="arrow" aria-hidden="true">↗</span></a>
</div>
</div>
</div>
</section>
<div class="value-strip">
<div class="container values">
<div class="value"><svg aria-hidden="true"><use href="#icon-heart"/></svg>Thoughtful adoption</div>
<div class="value"><svg aria-hidden="true"><use href="#icon-leaf"/></svg>Practical, everyday care</div>
<div class="value"><svg aria-hidden="true"><use href="#icon-shield"/></svg>Reward-based training</div>
<div class="value"><svg aria-hidden="true"><use href="#icon-sun"/></svg>A community that cares</div>
</div>
</div>
<section id="adopt" class="section" aria-labelledby="adopt-heading">
<div class="container">
<div class="section-head">
<div><div class="eyebrow">A home changes everything</div><h2 id="adopt-heading">Your person might<br>have four paws.</h2></div>
<p>Big personalities. Little quirks. So much love to give. Meet a few of the dogs in our foster network, and find a companion whose needs fit your everyday life.</p>
</div>
<div class="filterbar">
<div class="filters" role="group" aria-label="Filter available dogs by life stage">
<button class="filter active" data-filter="all" aria-pressed="true">All dogs</button>
<button class="filter" data-filter="puppy" aria-pressed="false">Puppies</button>
<button class="filter" data-filter="adult" aria-pressed="false">Adults</button>
<button class="filter" data-filter="senior" aria-pressed="false">Seniors</button>
</div>
<span class="result-count" role="status" aria-live="polite">3 friends to meet · Portland, OR</span>
</div>
<div class="pet-grid">
<article class="pet-card" data-stage="puppy">
<div class="pet-image"><img src="https://picsum.photos/id/237/650/550" alt="Fern, a black mixed-breed puppy" width="650" height="550" loading="lazy"><span class="pill">A curious little soul</span></div>
<div class="pet-body">
<div class="pet-title"><h3>Fern</h3><span>Female · 8 months</span></div>
<p class="pet-meta">Mixed breed · Medium when grown</p>
<p class="pet-desc">A leaf-chasing, toy-loving sweetheart. Fern is discovering the world and would love a patient person to show her the ropes.</p>
<button class="text-link" data-pet="fern">Meet Fern <span class="arrow" aria-hidden="true">↗</span></button>
</div>
</article>
<article class="pet-card" data-stage="adult">
<div class="pet-image"><img src="https://picsum.photos/id/1025/650/550" alt="Otis, a small pug relaxing in a blanket" width="650" height="550" loading="lazy"><span class="pill">Your sofa sidekick</span></div>
<div class="pet-body">
<div class="pet-title"><h3>Otis</h3><span>Male · 4 years</span></div>
<p class="pet-meta">Pug mix · Small</p>
<p class="pet-desc">Otis takes his snuggle duties seriously. His perfect day includes a gentle sniff walk, a food puzzle, and a spot beside you.</p>
<button class="text-link" data-pet="otis">Meet Otis <span class="arrow" aria-hidden="true">↗</span></button>
</div>
</article>
<article class="pet-card" data-stage="senior">
<div class="pet-image"><img src="https://picsum.photos/id/1062/650/550" alt="Clover, a gentle pug enjoying a comfortable rest" width="650" height="550" loading="lazy"><span class="pill">An old soul, a full heart</span></div>
<div class="pet-body">
<div class="pet-title"><h3>Clover</h3><span>Female · 9 years</span></div>
<p class="pet-meta">Pug mix · Small</p>
<p class="pet-desc">A quiet companion with a wonderfully silly streak. Clover is looking for a calm home, soft beds, and unhurried afternoons.</p>
<button class="text-link" data-pet="clover">Meet Clover <span class="arrow" aria-hidden="true">↗</span></button>
</div>
</article>
</div>
<div class="adopt-note">
<p>Every placement starts with a conversation, not a checkout. We’ll share health records, microchipping details, and an honest picture of each pet’s needs. Availability is confirmed by our foster team.</p>
<button class="text-link" id="match-button">Help me find my fit <span aria-hidden="true">↗</span></button>
</div>
</div>
</section>
<section id="care" class="section care-section" aria-labelledby="care-heading">
<div class="container">
<div class="section-head">
<div><div class="eyebrow">Small habits. Happier pets.</div><h2 id="care-heading">Care for every chapter.</h2></div>
<p>You don’t have to have it all figured out. Start with approachable guidance that helps you ask better questions and build a healthier routine.</p>
</div>
<div class="care-grid" id="resources">
<article class="care-card">
<div class="care-icon"><svg aria-hidden="true"><use href="#icon-bowl"/></svg></div>
<div class="card-label">Nutrition · 4 min read</div>
<h3>A little more bowl wisdom.</h3>
<p>Good nutrition is about the right fit, not the latest trend. Choose a complete and balanced diet for your pet’s species and life stage, and use measured portions to support a healthy body condition.</p>
<p>Learn how to read a food label, introduce a new diet gradually, and make treats part of the plan—not the whole plan.</p>
<button class="text-link" data-resource="nutrition">Build a better routine <span aria-hidden="true">↗</span></button>
</article>
<article class="care-card">
<div class="care-icon"><svg aria-hidden="true"><use href="#icon-shield"/></svg></div>
<div class="card-label">Health & safety · 5 min read</div>
<h3>Prepared is a kind of love.</h3>
<p>A secure harness, an up-to-date ID tag, and registered microchipping can make a real difference. At home, keep medications, toxic foods, and unsafe plants out of curious paws’ reach.</p>
<p>Create a simple emergency plan, know your nearest emergency vet, and learn which changes in behavior deserve a call.</p>
<button class="text-link" data-resource="safety">Make home safer <span aria-hidden="true">↗</span></button>
</article>
<article class="care-card">
<div class="care-icon"><svg aria-hidden="true"><use href="#icon-leaf"/></svg></div>
<div class="card-label">Enrichment · 3 min read</div>
<h3>Let them be a little wild.</h3>
<p>Sniffing, scratching, foraging, and playing aren’t extras. They’re natural behaviors that help pets feel secure. Thoughtful enrichment gives those instincts somewhere wonderful to go.</p>
<p>Try a scatter-feeding game, a cardboard hideout, or a slower walk with more sniff stops. Start simple and let your pet set the pace.</p>
<button class="text-link" data-resource="enrichment">Find your next play idea <span aria-hidden="true">↗</span></button>
</article>
</div>
</div>
</section>
<section id="training" class="section" aria-labelledby="training-heading">
<div class="container training-grid">
<div class="training-image">
<img src="https://picsum.photos/id/1025/800/900" alt="A relaxed pug wrapped in a soft blanket" width="800" height="900" loading="lazy">
<div class="image-caption"><svg aria-hidden="true"><use href="#icon-heart"/></svg><span>More trust. Less pressure.<br><strong>Always on your pet’s side.</strong></span></div>
</div>
<div class="training-copy">
<div class="eyebrow">Good habits grow with kindness</div>
<h2>Better together.<br>One little win at a time.</h2>
<p>Training isn’t about having a “perfect” pet. It’s about learning each other’s language. Our positive reinforcement approach rewards useful behaviors and builds confidence without fear, force, or intimidation.</p>
<p>Whether you’re welcoming a puppy or helping an older dog settle in, we start with your real life. Expect manageable steps, room for questions, and plenty of encouragement for both ends of the leash.</p>
<ul class="training-points">
<li><span class="check" aria-hidden="true">✓</span><div><strong>Puppy foundations</strong><small>Toilet routines, gentle handling, and thoughtful socialization.</small></div></li>
<li><span class="check" aria-hidden="true">✓</span><div><strong>Everyday life skills</strong><small>Loose-leash walking, recall, and settling on a mat.</small></div></li>
<li><span class="check" aria-hidden="true">✓</span><div><strong>A fresh start for rescue dogs</strong><small>Decompression, predictable routines, and trust at their pace.</small></div></li>
</ul>
<button class="btn" id="training-button">Book a training consultation <span class="arrow" aria-hidden="true">↗</span></button>
<p class="small-note">Start with a free 15-minute conversation. No pressure, just a plan.</p>
</div>
</div>
</section>
<section id="community" class="section community-section" aria-labelledby="community-heading">
<div class="container">
<div class="section-head">
<div><div class="eyebrow">Find your pack</div><h2 id="community-heading">It takes a little community.</h2></div>
<p>For the first-night questions, the tiny breakthroughs, and everything in between. There’s a place for you here—even if you don’t have a pet yet.</p>
</div>
<div class="community-grid">
<article class="quote-card">
<div class="quote-mark" aria-hidden="true">“</div>
<blockquote>We thought we were just adopting a dog. We found people who helped us through the nervous first week—and celebrated his first happy zoomies right along with us.</blockquote>
<div class="quote-person"><img src="https://i.pravatar.cc/100?u=kindred-maya" alt="Maya" width="43" height="43" loading="lazy"><div><strong>Maya & Ben</strong><p>First-time adopters. Lifelong members of the pack.</p></div></div>
</article>
<div>
<h3 class="events-title">Good things to do together</h3>
<article class="event">
<div class="event-date">Every<strong>SAT</strong></div>
<div><h3>The slow-sniff walking club</h3><p>9:00 am · Laurelhurst Park · Free</p></div>
<button data-event="walk" aria-label="View details for the slow-sniff walking club">↗</button>
</article>
<article class="event">
<div class="event-date">First<strong>SUN</strong></div>
<div><h3>Meet the foster families</h3><p>11:00 am–1:00 pm · Kindred House · Free</p></div>
<button data-event="foster" aria-label="View details for meet the foster families">↗</button>
</article>
<article class="event">
<div class="event-date">Any<strong>DAY</strong></div>
<div><h3>A little time. A big difference.</h3><p>Volunteer, foster, or help with supplies</p></div>
<button data-event="volunteer" aria-label="View volunteering opportunities">↗</button>
</article>
<a class="text-link community-link" href="mailto:community@kindredandco.example?subject=I'd%20love%20to%20join%20the%20community">Say hello to your community <span aria-hidden="true">↗</span></a>
</div>
</div>
</div>
</section>
<section class="section" aria-labelledby="faq-heading">
<div class="container faq-layout">
<div class="faq-intro">
<div class="eyebrow">A little clarity</div>
<h2 id="faq-heading">Big love.<br>Good questions.</h2>
<p>A new companion is a real commitment. We’re here to make the next step thoughtful, transparent, and a little less overwhelming.</p>
<a class="text-link" href="mailto:hello@kindredandco.example">Ask us anything <span aria-hidden="true">↗</span></a>
</div>
<div>
<details open>
<summary>What does the adoption process look like?</summary>
<p>First, tell our adoption team about your home, routine, and the pet you’d like to meet. We’ll discuss their needs, arrange a foster-led introduction, and talk through any resident-pet introductions. If it feels right for everyone, we’ll review the adoption agreement, health records, and settling-in plan together. There’s no obligation to adopt after a meeting.</p>
</details>
<details>
<summary>What is included in an adoption fee?</summary>
<p>Our typical dog adoption fees range from $150 for seniors to $350 for puppies. A pet’s profile and adoption conversation will confirm the exact amount. Fees support veterinary assessment, age-appropriate vaccinations, microchipping, and spay or neuter care where medically appropriate. We disclose any pending care or ongoing medical needs before placement.</p>
</details>
<details>
<summary>Can I adopt if I rent or work full-time?</summary>
<p>Yes—there isn’t one perfect kind of home. We’ll ask about housing permission, time alone, exercise, and a realistic care plan. Some pets need more company or a quieter setting than others. A dog walker, trusted friend, or flexible schedule can help; the goal is a match that works for you and meets the individual pet’s needs.</p>
</details>
<details>
<summary>Can you help with cats and other pets, too?</summary>
<p>Absolutely. Our current foster listings feature dogs, but our care resources include cats, and our community team can help you connect with local cat and small-animal rescue organizations. Species-specific nutrition, housing, enrichment, and veterinary care matter, so we’ll encourage you to speak with a suitably experienced rescue or veterinarian.</p>
</details>
<details>
<summary>My pet seems unwell. Can you give medical advice?</summary>
<p>Our resources are educational and don’t replace veterinary care. Contact your veterinarian for symptoms, medication questions, or sudden behavior changes. Trouble breathing, collapse, suspected poisoning, an inability to urinate, or severe pain require urgent veterinary attention. Please don’t wait for a reply from our community team in an emergency.</p>
</details>
</div>
</div>
</section>
<section id="about" class="container about-band" aria-labelledby="about-heading">
<div>
<div class="eyebrow">A small team with a big soft spot</div>
<h2 id="about-heading">A better world starts close to home.</h2>
<p>Kindred & Co. is a Portland-based, foster-first pet community built around one simple belief: people and animals do better when they’re supported. We connect thoughtful adopters, caring foster homes, and reward-based educators—so that finding a family is only the beginning.</p>
</div>
<a class="btn" href="mailto:hello@kindredandco.example?subject=Let's%20make%20a%20difference">Make a difference <span aria-hidden="true">↗</span></a>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="#" aria-label="Kindred and Co. home">
<img src="https://placehold.co/84x84/254d40/f8f6ef?text=k.&font=lora" alt="" width="42" height="42" loading="lazy">
<div><div class="brand-name">kindred & co.</div><span class="brand-tagline">Better lives, together.</span></div>
</a>
<p>For the pets who make us better people.<br>And the people who make their lives better.</p>
<div class="socials"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Instagram (opens in a new tab)">Instagram ↗</a><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" aria-label="Facebook (opens in a new tab)">Facebook ↗</a></div>
</div>
<div class="footer-col"><h3>Find your way</h3><a href="#adopt">Available pets</a><a href="#training">Positive training</a><a href="#resources">Care resources</a><a href="#community">Our community</a><a href="#about">Our story</a></div>
<div class="footer-col"><h3>Lend a paw</h3><a href="mailto:foster@kindredandco.example">Become a foster</a><a href="mailto:community@kindredandco.example?subject=Volunteer%20enquiry">Volunteer with us</a><a href="mailto:community@kindredandco.example?subject=Supply%20donation%20enquiry">Donate supplies</a><a href="mailto:hello@kindredandco.example?subject=Partnership%20enquiry">Partner with us</a></div>
<div class="footer-col">
<h3>Come say hello</h3>
<address><a href="mailto:hello@kindredandco.example">hello@kindredandco.example</a><a href="tel:+15035550148">(503) 555-0148</a><p>1248 NE Willow Lane<br>Portland, OR 97212</p></address>
<p>Tue–Sat, 10 am–5 pm<br>Pet introductions by appointment.</p>
</div>
</div>
<div class="footer-bottom"><span>© <span id="year">2026</span> Kindred & Co. All paws welcome.</span><div class="legal"><button data-legal="privacy">Privacy</button><button data-legal="terms">Terms</button><span>Made with a little extra love ♡</span></div></div>
</div>
</footer>
<dialog id="info-dialog" aria-labelledby="dialog-heading">
<button class="modal-close" aria-label="Close dialog">×</button>
<div class="modal-content" id="dialog-content"></div>
</dialog>
<script>
const dialog = document.getElementById('info-dialog');
const content = document.getElementById('dialog-content');
function openDialog(html) {
content.innerHTML = html;
dialog.showModal();
document.body.style.overflow = 'hidden';
}
function closeDialog() { dialog.close(); }
dialog.querySelector('.modal-close').addEventListener('click', closeDialog);
dialog.addEventListener('close', () => { document.body.style.overflow = ''; });
dialog.addEventListener('click', e => {
const r = dialog.getBoundingClientRect();
if (e.target === dialog && (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom)) closeDialog();
});
document.getElementById('year').textContent = new Date().getFullYear();
const menu = document.querySelector('.menu-toggle');
const nav = document.getElementById('main-nav');
function closeMenu() { nav.classList.remove('open'); menu.setAttribute('aria-expanded', 'false'); }
menu.addEventListener('click', () => {
const expanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', String(!expanded));
nav.classList.toggle('open', !expanded);
});
nav.querySelectorAll('a').forEach(link => link.addEventListener('click', closeMenu));
document.addEventListener('keydown', e => { if (e.key === 'Escape' && nav.classList.contains('open')) { closeMenu(); menu.focus(); } });
document.querySelectorAll('.filter').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.filter').forEach(b => {
b.classList.toggle('active', b === button);
b.setAttribute('aria-pressed', String(b === button));
});
let count = 0;
document.querySelectorAll('.pet-card').forEach(card => {
const show = button.dataset.filter === 'all' || card.dataset.stage === button.dataset.filter;
card.hidden = !show;
if (show) count++;
});
document.querySelector('.result-count').textContent = `${count} ${count === 1 ? 'friend' : 'friends'} to meet · Portland, OR`;
});
});
const pets = {
fern: {name:'Fern', meta:'8 months · Female · Medium mixed breed', story:'Fern is an enthusiastic young learner who loves sniffing trails and carrying soft toys. She is practicing settling, toilet routines, and being comfortable alone. Her new family should have time for frequent breaks and short, reward-based training sessions.', home:'A patient household with a predictable routine and time for puppy care. Compatibility with children, cats, or resident dogs needs an individual conversation and careful introductions.', fee:'$350'},
otis: {name:'Otis', meta:'4 years · Male · Small pug mix', story:'Otis loves company and low-key adventures. He enjoys food puzzles and gentle walks, with plenty of rest in between. As a short-nosed dog, he needs careful heat management and a veterinarian-led plan for any breathing concerns.', home:'A home that enjoys a relaxed pace and can keep him cool during warm weather. We’ll discuss time alone and arrange appropriate introductions to other pets.', fee:'$250'},
clover: {name:'Clover', meta:'9 years · Female · Small pug mix', story:'Clover is a gentle companion who enjoys an easy routine and a cozy place near her people. Short, comfortable outings and easy-access resting spots suit her best. Our team will discuss her senior veterinary assessment and any ongoing support before a meeting.', home:'A calm household ready to budget for senior wellness care and follow her comfort level. Minimal stairs or help navigating them would be welcome.', fee:'$150'}
};
document.querySelectorAll('[data-pet]').forEach(button => button.addEventListener('click', () => {
const p = pets[button.dataset.pet];
openDialog(`<div class="eyebrow">A friend worth getting to know</div><h2 id="dialog-heading">Meet ${p.name}.</h2><p><strong>${p.meta}</strong></p><p>${p.story}</p><h3>A home that could fit</h3><p>${p.home}</p><h3>Adoption fee: ${p.fee}</h3><p>We’ll review vaccination records, microchip registration, spay/neuter status, and any known medical or behavioral needs together. Profiles are an introduction, not a guarantee of behavior or availability.</p><a class="btn" href="mailto:adopt@kindredandco.example?subject=I'd%20like%20to%20meet%20${p.name}">Contact the adoption team ↗</a><p class="small-note">Opens your email app. Tell us a little about your household and routine.</p>`);
}));
const resources = {
nutrition: `<div class="eyebrow">The everyday care guide</div><h2 id="dialog-heading">Build a better bowl.</h2><p>Start with food labeled complete and balanced for your pet’s species and life stage. Dogs and cats have different nutritional requirements; a food designed for one isn’t a substitute for the other.</p><h3>Keep the basics consistent</h3><ul><li>Use the feeding guide as a starting point, then ask your vet about portions and body condition.</li><li>Measure meals and count treats. For most healthy pets, treats should make up no more than about 10% of daily calories.</li><li>Introduce a new food over roughly 7–10 days, or follow your veterinarian’s advice for sensitive stomachs.</li><li>Keep clean drinking water available and wash bowls regularly.</li></ul><h3>When to ask your vet</h3><p>Weight changes, persistent vomiting or diarrhea, reduced appetite, and suspected food allergies call for veterinary advice. Puppies, kittens, pregnant animals, and pets with medical conditions may need a specific feeding plan. Avoid homemade or raw diets without qualified veterinary nutrition guidance.</p>`,
safety: `<div class="eyebrow">Your safer-home checklist</div><h2 id="dialog-heading">A little preparation helps.</h2><p>Walk through your home at pet level. Loose medication, dangling cords, open bins, and easy-to-reach cleaners are common hazards. Store anything questionable behind a secure door.</p><h3>Five things to check today</h3><ul><li>Make sure your pet’s ID tag and microchip registry have your current contact details. A microchip is not a GPS tracker.</li><li>Check window screens, fence gaps, harness fit, and carrier latches.</li><li>Keep chocolate, xylitol, grapes, raisins, and human medications away from pets. Keep lilies out of homes with cats.</li><li>Save your veterinarian’s number and your nearest 24-hour emergency clinic’s address.</li><li>Prepare a carrier or leash, medical records, food, water, and prescribed medications for an evacuation.</li></ul><h3>If something goes wrong</h3><p>For suspected poisoning, contact a veterinarian or animal poison service immediately. Don’t induce vomiting or give home remedies unless a veterinary professional specifically directs you. Breathing difficulty, collapse, severe pain, or inability to urinate need urgent care.</p>`,
enrichment: `<div class="eyebrow">Make room for natural behavior</div><h2 id="dialog-heading">More curious. More content.</h2><p>Enrichment works best when your pet can choose to join in, succeed easily, and step away. Introduce one new activity at a time and supervise anything that could be chewed or swallowed.</p><h3>For dogs: a five-minute scent game</h3><p>Hide a few pieces of their normal food in easy-to-find spots in one room. Let them watch the first round, then slowly add a little challenge. Count the food toward their daily portion. For dogs that guard food, keep other animals away and seek qualified support.</p><h3>For cats: hunt, catch, rest</h3><p>Move a wand toy like prey, with pauses and hiding places. Let your cat catch it, then finish with a small portion of a meal. Put string toys away after play. Offer stable perches, scratching surfaces, and a quiet retreat.</p><h3>Keep it kind</h3><p>Stop if you see frustration, avoidance, or fatigue. Older pets and animals with mobility limitations can enjoy low-impact scent games and accessible puzzles. The goal is a fulfilled pet, not a tired-out one.</p>`
};
document.querySelectorAll('[data-resource]').forEach(b => b.addEventListener('click', () => openDialog(resources[b.dataset.resource])));
document.getElementById('match-button').addEventListener('click', () => {
openDialog(`<div class="eyebrow">A thoughtful starting point</div><h2 id="dialog-heading">What fits your everyday?</h2><p>A good match starts with the care you can offer. This quick guide suggests a conversation to have—not a guaranteed match.</p><form id="match-form"><label for="pace">Your preferred daily pace</label><select id="pace" required><option value="">Choose your pace</option><option value="active">Active, with time for play and training</option><option value="balanced">A mix of gentle outings and downtime</option><option value="quiet">Quiet, relaxed, and mostly close to home</option></select><label for="support">The support you can plan for</label><select id="support" required><option value="">Choose an option</option><option value="puppy">Frequent breaks and puppy foundations</option><option value="adult">Consistent routines and ongoing training</option><option value="senior">Senior wellness and comfort care</option></select><button class="btn" type="submit">Find my starting point →</button></form><div id="match-result" aria-live="polite"></div>`);
document.getElementById('match-form').addEventListener('submit', e => {
e.preventDefault();
const pace = document.getElementById('pace').value;
const support = document.getElementById('support').value;
let key = support === 'puppy' && pace === 'active' ? 'fern' : support === 'senior' && pace !== 'active' ? 'clover' : 'otis';
let caveat = support === 'puppy' && pace !== 'active' ? 'Puppy care can be busy even in a quiet home. An adult dog may offer a more predictable starting point.' : support === 'senior' && pace === 'active' ? 'An active household can welcome a senior, but exercise needs to follow the dog’s comfort rather than your schedule.' : 'Time alone, housing, veterinary costs, and other pets still matter. Our team will help you explore the full picture.';
const p = pets[key];
document.getElementById('match-result').innerHTML = `<div class="match-result"><h3>Start a conversation about ${p.name}.</h3><p>${caveat}</p><p>This is a guide, not an adoption decision. Ask about ${p.name}’s current needs and availability.</p><a class="text-link" href="mailto:adopt@kindredandco.example?subject=Help%20me%20find%20my%20fit%20-%20${p.name}">Talk with the adoption team ↗</a></div>`;
});
});
document.getElementById('training-button').addEventListener('click', () => {
openDialog(`<div class="eyebrow">Let’s start small</div><h2 id="dialog-heading">Your first training conversation.</h2><p>Our free 15-minute phone consultation helps us understand your dog, your routine, and what you’d like to work on. We’ll discuss suitable next steps and share availability and pricing before you commit.</p><h3>What to include in your email</h3><ul><li>Your dog’s name, age, and how long they’ve been with you.</li><li>One or two things you’d like help with.</li><li>Your preferred contact number and a few suitable times.</li></ul><p>For sudden behavior changes, pain, severe fear, or a bite history, we may recommend veterinary assessment or a qualified behavior specialist first.</p><a class="btn" href="mailto:training@kindredandco.example?subject=Free%20training%20consultation&body=My%20name%3A%0AMy%20dog's%20name%20and%20age%3A%0AWhat%20I'd%20like%20help%20with%3A%0APhone%20number%3A%0APreferred%20times%3A">Request a consultation ↗</a><p class="small-note">Opens your email app. Your appointment is confirmed only when our team replies.</p>`);
});
const events = {
walk: {title:'Take the scenic sniff route.', text:'Join a relaxed, on-leash walk at Laurelhurst Park on Saturdays at 9:00 am. We keep distance between dogs and make plenty of room for sniffing. Bring water, waste bags, and a well-fitted harness. Skip retractable leashes and greetings unless both handlers agree.', extra:'Email the community team for the exact meeting point and weather updates before attending. If your dog finds groups stressful, ask us about quieter ways to get involved.', subject:'Walking club details'},
foster: {title:'Meet the people behind the paws.', text:'On the first Sunday of each month, from 11:00 am to 1:00 pm, our foster families share what everyday rescue care looks like. Learn about settling-in routines, supplies, and the support available when you foster.', extra:'Please RSVP by email for space confirmation. This is an information session; individual pet introductions happen by appointment. Leave resident pets comfortably at home.', subject:'Foster family session RSVP'},
volunteer: {title:'Your kind of helping matters.', text:'You don’t need a spare room to make a difference. Our community needs help with transport, clean bedding, enrichment preparation, event setup, and organizing supplies. Foster carers receive guidance and a care plan before welcoming a pet.', extra:'Tell us about your interests, availability, and transport access. We’ll explain current needs, orientation, and any role-specific requirements. Please check with us before purchasing or dropping off supplies.', subject:'I would like to volunteer'}
};
document.querySelectorAll('[data-event]').forEach(b => b.addEventListener('click', () => {
const e = events[b.dataset.event];
openDialog(`<div class="eyebrow">A little community goes a long way</div><h2 id="dialog-heading">${e.title}</h2><p>${e.text}</p><p>${e.extra}</p><a class="btn" href="mailto:community@kindredandco.example?subject=${encodeURIComponent(e.subject)}">Contact the community team ↗</a>`);
}));
document.querySelectorAll('[data-legal]').forEach(b => b.addEventListener('click', () => {
if (b.dataset.legal === 'privacy') {
openDialog(`<div class="eyebrow">Your information, treated thoughtfully</div><h2 id="dialog-heading">Privacy.</h2><p>This page does not create accounts, set analytics cookies, or send your match-guide answers to a server. Filter and match selections stay in the current page and are cleared when you reload.</p><h3>Email and external services</h3><p>Contact links open your email app. Any information you choose to send is handled by your email provider and the recipient. Please don’t include sensitive medical, financial, or identification documents in an initial message.</p><p>Fonts and placeholder images load from Google Fonts, Picsum, Pravatar, and Placehold.co. Those providers may receive technical information, including your IP address, under their own privacy policies. Social links take you to external platforms.</p><p>Privacy questions: <a href="mailto:hello@kindredandco.example">hello@kindredandco.example</a>.</p>`);
} else {
openDialog(`<div class="eyebrow">The important details</div><h2 id="dialog-heading">Terms of use.</h2><p>Care and training information on this page is general education, not veterinary diagnosis or individualized behavioral advice. Seek professional care for your animal’s specific needs and urgent veterinary help in an emergency.</p><h3>Adoptions and enquiries</h3><p>Pet descriptions, fees, event information, and availability must be confirmed with the team. A match-guide result, email enquiry, or meeting does not reserve an animal, book an appointment, or create an adoption agreement.</p><h3>About this website</h3><p>Kindred & Co. is a fictional demonstration brand. Pet profiles, community stories, events, and contact details are illustrative; images are placeholders. Addresses ending in .example are reserved demonstration addresses and do not receive email. This page does not accept payments or submit applications.</p>`);
}
}));
</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:56:48.104Z",
"url": "https://benchmark.aimac.invalid/cea9294cc03358d5cfcac04e265058885e819114d699f6b73208ed6e05bb98f1.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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=\"#\" aria-label=\"Kindred and Co. home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred and Co. home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Kindred and Co. home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred and Co. 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 available dogs by life stage\">",
"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=\"position:absolute;width:0;height:0;overflow:hidden\" aria-hidden=\"true\">",
"target": [
"body > svg"
]
}
]
},
{
"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=\"#\" aria-label=\"Kindred and Co. home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred and Co. 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 available dogs by life stage\">",
"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 available dogs by life stage\">",
"target": [
".filters"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": "critical",
"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=\"#\" aria-label=\"Kindred and Co. home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred and Co. home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Kindred and Co. home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred and Co. home\"]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"filter active\" data-filter=\"all\" aria-pressed=\"true\">All dogs</button>",
"target": [
".active"
]
}
]
},
{
"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\">Their next chapter.<br>Your new<br><em>best friend.</em></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"adopt-heading\">Your person might<br>have four paws.</h2>",
"target": [
"#adopt-heading"
]
},
{
"html": "<h3>Fern</h3>",
"target": [
"article[data-stage=\"puppy\"] > .pet-body > .pet-title > h3"
]
},
{
"html": "<h3>Otis</h3>",
"target": [
"article[data-stage=\"adult\"] > .pet-body > .pet-title > h3"
]
},
{
"html": "<h3>Clover</h3>",
"target": [
"article[data-stage=\"senior\"] > .pet-body > .pet-title > h3"
]
},
{
"html": "<h2 id=\"care-heading\">Care for every chapter.</h2>",
"target": [
"#care-heading"
]
},
{
"html": "<h3>A little more bowl wisdom.</h3>",
"target": [
".care-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Prepared is a kind of love.</h3>",
"target": [
".care-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Let them be a little wild.</h3>",
"target": [
".care-card:nth-child(3) > h3"
]
},
{
"html": "<h2>Better together.<br>One little win at a time.</h2>",
"target": [
".training-copy > h2"
]
},
{
"html": "<h2 id=\"community-heading\">It takes a little community.</h2>",
"target": [
"#community-heading"
]
},
{
"html": "<h3 class=\"events-title\">Good things to do together</h3>",
"target": [
".events-title"
]
},
{
"html": "<h3>The slow-sniff walking club</h3>",
"target": [
".event:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Meet the foster families</h3>",
"target": [
".event:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>A little time. A big difference.</h3>",
"target": [
".event:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h2 id=\"faq-heading\">Big love.<br>Good questions.</h2>",
"target": [
"#faq-heading"
]
},
{
"html": "<h2 id=\"about-heading\">A better world starts close to home.</h2>",
"target": [
"#about-heading"
]
},
{
"html": "<h3>Find your way</h3>",
"target": [
".footer-col:nth-child(2) > h3"
]
},
{
"html": "<h3>Lend a paw</h3>",
"target": [
".footer-col:nth-child(3) > h3"
]
},
{
"html": "<h3>Come say hello</h3>",
"target": [
".footer-col: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": "#f0f3e6",
"bgColor": "#254d40",
"contrastRatio": 8.43,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 8.43"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"topbar\">A little love. A whole new beginning. <a href=\"#adopt\">Meet your new best friend <span aria-hidden=\"true\">\u2197</span></a></div>",
"target": [
".topbar"
]
}
]
},
{
"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": "main-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav id=\"main-nav\" aria-label=\"Primary navigation\">\n <a href=\"#adopt\">Adopt</a>\n <a href=\"#care\">Pet Care</a>\n <a href=\"#training\">Training</a>\n <a href=\"#resources\">Resources</a>\n <a href=\"#community\">Community</a>\n <a href=\"#about\">About</a>\n </nav>",
"target": [
"#main-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/84x84/254d40/f8f6ef?text=k.&font=lora\" alt=\"\" width=\"42\" height=\"42\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred and Co. home\"] > img[width=\"42\"][height=\"42\"][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",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"topbar\">A little love. A whole new beginning. <a href=\"#adopt\">Meet your new best friend <span aria-hidden=\"true\">\u2197</span></a></div>",
"target": [
".topbar"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"topbar\">A little love. A whole new beginning. <a href=\"#adopt\">Meet your new best friend <span aria-hidden=\"true\">\u2197</span></a></div>",
"target": [
".topbar"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#adopt\">Meet your new best friend <span aria-hidden=\"true\">\u2197</span></a>",
"target": [
".topbar > a[href$=\"#adopt\"]"
]
}
]
},
{
"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 href=\"#main\" class=\"skip\">Skip to content</a>",
"target": [
".skip"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"training-points\">",
"target": [
"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><span class=\"check\" aria-hidden=\"true\">\u2713</span><div><strong>Puppy foundations</strong><small>Toilet routines, gentle handling, and thoughtful socialization.</small></div></li>",
"target": [
"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 class=\"hero-photo\" src=\"https://picsum.photos/id/237/800/950\" alt=\"A black puppy with soulful brown eyes looking up at the camera\" width=\"800\" height=\"950\" fetchpriority=\"high\">",
"target": [
".hero-photo"
]
}
]
},
{
"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 does the adoption process look like?</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": 133.7,
"height": 46.4
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (133.7px by 46.4px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#main\" class=\"skip\">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=\"round-stamp\" aria-label=\"Small paws, big love\"><div>SMALL PAWS<span aria-hidden=\"true\">\u2661</span>BIG LOVE</div></div>",
"target": [
".round-stamp"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "aria-valid-attr-value",
"impact": "critical",
"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": {
"messageKey": "noId",
"needsReview": "aria-labelledby=\"training-heading\""
},
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"training-heading\""
}
],
"none": [],
"impact": "critical",
"html": "<section id=\"training\" class=\"section\" aria-labelledby=\"training-heading\">",
"target": [
"#training"
],
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"training-heading\""
}
]
},
{
"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": [
".light > .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": "#657067",
"bgColor": "#eeeede",
"contrastRatio": 4.4,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"care\" class=\"section care-section\" aria-labelledby=\"care-heading\">",
"target": [
"#care"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #657067, background color: #eeeede, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>You don\u2019t have to have it all figured out. Start with approachable guidance that helps you ask better questions and build a healthier routine.</p>",
"target": [
"#care > .container > .section-head > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #657067, background color: #eeeede, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5624
},
{
"y": 576,
"height": 5624
},
{
"y": 1152,
"height": 5624
},
{
"y": 1728,
"height": 5624
},
{
"y": 2304,
"height": 5624
},
{
"y": 2880,
"height": 5624
},
{
"y": 3456,
"height": 5624
},
{
"y": 4032,
"height": 5624
},
{
"y": 4608,
"height": 5624
},
{
"y": 4904,
"height": 5624
}
],
"scans": 11,
"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 "Pets" 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: "Pets"
- Description: Pet care, adoption, veterinary resources, training, and animal rescue information.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Pets" 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: "Resources", "Community", "About".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Pets" category. Consider themes similar to: "Available Pets", "Nutrition Advice", "Pet Safety".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "enrichment", "positive reinforcement", "microchipping".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Supplies", "Contact Shelter", "Book Training".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "pet name generator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "community photos", "event calendar", "adoption success stories".
- **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.