OpenAI GPT 6.1 Sol – Pets
via OpenAI · Generated
- AIMAC Debt 4.94
- Cost $0.18
- Total Violations 22
- HTML Size 61 KB
- Em Dashes 8
Screenshot
View Live Page
Accessibility Issues Found
22 Serious
-
color-contrast serious 22 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p>Our rescue partners get to know every animal, so you can find a companion whose needs fit your life. These sample profiles show what a thoughtfu...
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#244d40">
<meta name="description" content="Kindred helps pets and their people thrive with preventive care, positive training, local rescue partnerships, and a welcoming community.">
<title>Kindred — Good care. Great company.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{--paper:#faf8f2;--white:#fff;--ink:#233b32;--green:#244d40;--muted:#63736b;--orange:#ec743f;--peach:#f6decb;--line:#dedfd4;--sage:#e7ecdf;--radius:22px;--shadow:0 18px 55px #203a3212}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.65}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:Manrope,sans-serif;line-height:1.16}
h1{font-size:clamp(48px,5.4vw,77px);font-weight:800;letter-spacing:-4px}
h2{font-size:clamp(32px,3.4vw,47px);font-weight:800;letter-spacing:-1.8px}
h3{font-size:22px;letter-spacing:-.5px}
p+p{margin-top:15px}
.container{width:min(1180px,calc(100% - 64px));margin:auto}
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:9px;margin-bottom:18px}
.eyebrow:before{content:"";height:8px;width:8px;border-radius:50%;background:var(--orange)}
.muted{color:var(--muted)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid transparent;padding:13px 22px;border-radius:9px;background:var(--green);color:white;font-size:14px;font-weight:700;line-height:1.5;transition:transform .2s,background .2s}
.btn:hover{background:#16392e;transform:translateY(-2px)}
.btn.orange{background:var(--orange);color:#241d14}
.btn.orange:hover{background:#f08a59}
.btn.outline{background:transparent;border-color:#a9b5ab;color:var(--green)}
.btn.outline:hover{background:var(--sage)}
.text-link{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:14px;border-bottom:1px solid #9cafa0;padding-bottom:4px}
.text-link:hover{color:#b24c26}
.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.skip{position:fixed;top:-80px;left:20px;padding:10px 18px;background:white;z-index:100}
.skip:focus{top:15px}
:focus-visible{outline:3px solid #d45b24;outline-offset:5px}
.topbar{background:var(--green);color:#eaf0e7;text-align:center;padding:8px 16px;font-size:12px;letter-spacing:.2px}
.topbar a{text-decoration:underline;text-underline-offset:3px;margin-left:9px}
header{background:#faf8f2f5;position:sticky;top:0;z-index:30;border-bottom:1px solid #e8e8dd;backdrop-filter:blur(14px)}
.header-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:43px;height:43px;border-radius:14px}
.brand strong{font-family:Manrope,sans-serif;font-size:27px;line-height:1;letter-spacing:-1.2px;display:block}
.brand small{display:block;font-size:10px;letter-spacing:.4px;margin-top:6px;color:var(--muted)}
nav{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:600}
nav a:hover{color:#b34f2b}
nav .btn{padding:11px 15px}
.menu-toggle{display:none;border:1px solid var(--line);background:transparent;border-radius:8px;padding:8px 12px;color:var(--green)}
.hero{padding:65px 0 45px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}
.hero h1 em{font-style:normal;color:#ca643a}
.hero-copy>p{font-size:17px;color:var(--muted);max-width:450px;margin-top:25px;line-height:1.8}
.hero-social{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:12px;line-height:1.5}
.avatars{display:flex;padding-left:0}
.avatars img{width:36px;height:36px;border:3px solid var(--paper);border-radius:50%;margin-left:-9px}
.avatars img:first-child{margin-left:0}
.stars{color:#b85a31;letter-spacing:2px;font-size:13px}
.hero-art{position:relative;background:#e2e8d9;border-radius:150px 150px 24px 24px;height:480px;isolation:isolate}
.hero-art .landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;border-radius:inherit;filter:grayscale(1)}
.hero-art>svg{position:absolute;width:100%;height:100%;bottom:0;left:0}
.round-note{position:absolute;top:28px;right:-24px;transform:rotate(12deg);height:103px;width:103px;border-radius:50%;background:#f4ba79;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:800;line-height:1.5;border:6px solid var(--paper)}
.floating-card{position:absolute;left:-24px;bottom:30px;background:white;padding:15px 20px;border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
.floating-card .heart{width:38px;height:38px;background:#fce8de;color:#cb6239;display:grid;place-items:center;border-radius:50%;font-size:21px}
.floating-card strong{font-size:13px;display:block}
.floating-card span{font-size:11px;color:var(--muted)}
.hero-caption{text-align:right;font-size:11px;color:var(--muted);margin-top:12px}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px;padding:23px 0;gap:18px}
.trust-item{display:flex;align-items:center;gap:12px;justify-content:center;font-size:13px;font-weight:600}
.trust-item svg{width:25px;height:25px;stroke:var(--green);fill:none;stroke-width:1.6}
section.block{padding:78px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}
.section-head p{max-width:365px;font-size:14px;color:var(--muted)}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.care-card{background:white;border:1px solid #e4e5dc;border-radius:var(--radius);padding:29px 27px;display:flex;flex-direction:column}
.icon-box{width:51px;height:51px;background:var(--sage);border-radius:15px;display:grid;place-items:center;margin-bottom:24px;color:var(--green)}
.icon-box svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.care-card:nth-child(2) .icon-box{background:#fbe5d8}
.care-card:nth-child(3) .icon-box{background:#f4efd9}
.care-card p{font-size:14px;color:var(--muted);margin-top:14px}
.care-card .text-link{margin-top:25px;align-self:flex-start}
.emergency{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f3e9de;border-radius:12px;padding:20px 26px;margin-top:23px}
.emergency strong{font-size:14px}
.emergency p{font-size:12px;color:#6e6358;margin-top:4px;max-width:760px}
.emergency button{background:none;border:0;white-space:nowrap}
.adoption{background:var(--sage)}
.adoption-head{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:32px}
.adoption-head p{max-width:540px;color:var(--muted);font-size:14px;margin-top:15px}
.filters{display:flex;gap:6px;background:#d9e1d2;padding:5px;border-radius:30px}
.filters button{border:0;background:transparent;border-radius:24px;padding:8px 17px;font-size:13px;color:var(--green);font-weight:600}
.filters button[aria-pressed="true"]{background:white;box-shadow:0 2px 4px #233b3210}
.pet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.pet-card{background:white;border-radius:18px;overflow:hidden}
.pet-art{height:230px;position:relative;overflow:hidden}
.pet-art img{height:100%;width:100%;object-fit:cover}
.pet-art svg{position:absolute;inset:0;width:100%;height:100%}
.pet-tag{position:absolute;left:16px;top:15px;background:#fffffff2;border-radius:20px;font-size:10px;letter-spacing:.3px;font-weight:700;padding:5px 10px}
.pet-info{padding:23px}
.pet-title{display:flex;justify-content:space-between;align-items:center}
.pet-title small{font-size:12px;color:var(--muted)}
.pet-info p{font-size:13px;color:var(--muted);margin:12px 0 18px}
.pet-info .text-link{font-size:12px}
.adoption-foot{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:28px;font-size:13px;color:var(--muted)}
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.training-visual{border-radius:22px;overflow:hidden;background:#eed4b4;position:relative;height:465px}
.training-visual>img{height:100%;width:100%;object-fit:cover;opacity:.27;filter:sepia(.3)}
.training-visual>svg{position:absolute;inset:0;width:100%;height:100%}
.visual-label{position:absolute;bottom:22px;left:22px;right:22px;background:#fffefa;padding:17px 20px;border-radius:12px;font-size:13px}
.visual-label strong{display:block}
.visual-label span{color:var(--muted);font-size:12px}
.training-copy>p{color:var(--muted);font-size:14px;margin-top:19px}
.check-list{list-style:none;padding:0;margin:24px 0}
.check-list li{font-size:14px;margin:12px 0;display:flex;gap:10px}
.check-list li:before{content:"✓";font-weight:700;background:#e5ecdf;border-radius:50%;width:22px;height:22px;flex-shrink:0;text-align:center;color:var(--green)}
.events{border-top:1px solid var(--line)}
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.event-card{background:white;border:1px solid var(--line);border-radius:16px;padding:25px;display:flex;flex-direction:column}
.event-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.date-box{background:var(--sage);min-width:59px;border-radius:10px;text-align:center;padding:8px 12px;font-size:10px;font-weight:700;text-transform:uppercase}
.date-box b{display:block;font-size:25px;line-height:1.2}
.event-type{font-size:11px;color:var(--muted)}
.event-type strong{display:block;color:var(--green);font-size:12px}
.event-card h3{font-size:20px}
.event-card p{font-size:13px;color:var(--muted);margin:12px 0 22px;flex:1}
.event-card .text-link{align-self:flex-start;font-size:12px}
.event-note{font-size:11px;color:var(--muted);margin-top:16px}
.community{background:var(--green);color:var(--paper)}
.community .eyebrow{color:#d7e3d0}
.community .section-head p{color:#cedbd1}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote-card{border:1px solid #547265;background:#315749;border-radius:16px;padding:28px}
.quote-card .stars{color:#f3bc7d}
blockquote{margin:18px 0 25px;font-size:15px;line-height:1.8}
.quote-person{display:flex;align-items:center;gap:12px;font-size:12px}
.quote-person img{height:39px;width:39px;border-radius:50%}
.quote-person strong{display:block}
.quote-person span{color:#c2d2c6;font-size:11px}
.impact{display:grid;grid-template-columns:1.5fr repeat(3,1fr);align-items:center;gap:22px;margin-top:42px;padding-top:35px;border-top:1px solid #547265}
.impact p{color:#d0ded3;font-size:13px;max-width:290px}
.stat b{font-family:Manrope,sans-serif;font-size:33px;display:block;line-height:1.3}
.stat span{color:#c2d2c6;font-size:12px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.faq-intro p{color:var(--muted);font-size:14px;margin:18px 0 25px}
details{border-bottom:1px solid var(--line)}
summary{font-weight:600;font-size:15px;padding:20px 34px 20px 0;cursor:pointer;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:3px;top:18px;font-size:22px;font-weight:400}
details[open] summary:after{content:"−"}
details p{font-size:14px;color:var(--muted);padding:0 28px 20px 0}
.newsletter{background:var(--peach);border-radius:24px;padding:38px 43px;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;margin-bottom:70px}
.newsletter h2{font-size:30px;letter-spacing:-1px}
.newsletter p{font-size:13px;color:#6e6255;margin-top:10px}
.email-row{display:flex;gap:8px}
.email-row input{width:100%;min-width:0;background:#fffaf5;border:1px solid #d9bea7;padding:13px 16px;border-radius:9px}
.newsletter small{font-size:10px;color:#6e6255;display:block;margin-top:9px}
footer{background:#eeefe6;padding:53px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.footer-intro p{max-width:270px;font-size:13px;color:var(--muted);margin-top:20px}
.footer-column h3{font-size:13px;letter-spacing:0;margin-bottom:16px}
.footer-column a{display:block;color:var(--muted);font-size:12px;margin:9px 0}
.footer-column a:hover{text-decoration:underline}
.footer-column p{font-size:12px;color:var(--muted);line-height:1.9}
.socials{display:flex;gap:15px;margin-top:19px;font-size:12px;font-weight:600}
.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #d7dcd0;margin-top:38px;padding-top:20px;font-size:11px;color:var(--muted)}
.footer-bottom div{display:flex;gap:20px}
.legal-button{border:0;background:none;padding:0;color:inherit;font-size:inherit}
.legal-button:hover{text-decoration:underline}
.demo-note{font-size:10px;color:var(--muted);margin-top:15px}
dialog{border:0;border-radius:22px;padding:0;width:min(560px,calc(100% - 32px));max-height:90vh;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #0004}
dialog::backdrop{background:#122b24a8;backdrop-filter:blur(4px)}
.dialog-content{padding:34px}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.dialog-head h2{font-size:28px;letter-spacing:-1px}
.close-dialog{border:0;border-radius:50%;background:var(--sage);width:32px;height:32px;flex-shrink:0;color:var(--ink);font-size:22px;line-height:1}
.dialog-content p{font-size:14px;color:var(--muted);margin-bottom:16px}
.dialog-content ul{font-size:14px;padding-left:20px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:22px 0}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700}
.field input,.field select{border:1px solid #bfc8bd;border-radius:8px;padding:10px 12px;background:white;width:100%;color:var(--ink);min-width:0}
.form-note{font-size:11px!important}
.success-box{background:var(--sage);border-radius:12px;padding:20px}
[hidden]{display:none!important}
@media(min-width:1400px){.hero{padding-top:80px}}
@media(max-width:1100px){nav{gap:14px;font-size:12px}.header-inner{gap:15px}.hero-grid{gap:38px}.hero-art{height:430px}.round-note{right:-10px}.training-grid{gap:40px}.footer-grid{gap:25px}}
@media(max-width:900px){
.container{width:calc(100% - 40px)}.menu-toggle{display:block}nav{display:none;position:absolute;top:92px;left:0;right:0;background:var(--paper);padding:24px;box-shadow:0 15px 20px #203a3215;flex-direction:column;align-items:stretch;gap:0}nav.open{display:flex}nav a{padding:12px}nav .btn{margin-top:10px}
.hero-grid{gap:30px}h1{font-size:54px;letter-spacing:-2.8px}.hero-art{height:400px}.hero-copy>p{font-size:15px}.floating-card{left:-15px;padding:12px}.trust-item{font-size:11px;gap:8px}
.care-card{padding:23px 20px}.section-head p{max-width:300px}.pet-art{height:190px}.pet-title{align-items:flex-start;gap:8px;flex-direction:column}.training-visual{height:420px}.faq-grid{gap:40px}.newsletter{padding:30px;gap:25px}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-column:last-child{grid-column:1/-1}.impact{grid-template-columns:1.3fr repeat(3,1fr)}
}
@media(max-width:680px){
.container{width:calc(100% - 36px)}.topbar{font-size:10px}.header-inner{min-height:77px}nav{top:77px}.brand strong{font-size:25px}.brand img{width:39px;height:39px}
.hero{padding:38px 0 25px}.hero-grid{grid-template-columns:1fr;gap:35px}h1{font-size:56px}.hero-copy>p{max-width:100%}.hero-art{height:410px;margin:0 12px;border-radius:130px 130px 22px 22px}.round-note{right:-18px;width:90px;height:90px}.floating-card{left:-12px}.hero-caption{padding-right:12px}.hero-social{margin-top:25px}.trust-strip{grid-template-columns:1fr 1fr;margin-top:30px;gap:20px}.trust-item{justify-content:flex-start}
section.block{padding:52px 0}.section-head{display:block;margin-bottom:26px}.section-head p{max-width:100%;margin-top:18px}.care-grid,.pet-grid,.event-grid,.testimonials{grid-template-columns:1fr}.care-card{padding:26px}.icon-box{margin-bottom:18px}.emergency{align-items:flex-start;flex-direction:column;gap:12px;padding:21px}.emergency button{font-size:13px}
.adoption-head{align-items:flex-start;flex-direction:column;gap:22px}.pet-art{height:265px}.pet-title{flex-direction:row;align-items:center}.adoption-foot{align-items:flex-start;flex-direction:column;gap:18px}.training-grid{grid-template-columns:1fr;gap:30px}.training-visual{height:385px}.training-copy{order:-1}.event-card{padding:25px}.impact{grid-template-columns:repeat(3,1fr);gap:20px}.impact>p{grid-column:1/-1;max-width:none}.stat b{font-size:29px}.stat span{font-size:10px}
.faq-grid{grid-template-columns:1fr;gap:20px}.newsletter{grid-template-columns:1fr;padding:27px 23px;margin-bottom:48px;gap:20px}.email-row{flex-direction:column}.newsletter h2{font-size:28px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-intro{grid-column:1/-1}.footer-column:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:12px}.dialog-content{padding:25px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Original illustrations keep this preview independent of pet photography. -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true" style="position:absolute;overflow:hidden">
<defs>
<symbol id="dog" viewBox="0 0 400 400">
<ellipse cx="205" cy="361" rx="120" ry="16" fill="#253d32" opacity=".12"/>
<path d="M280 278c58-40 59 20 35 36" fill="none" stroke="#b87844" stroke-width="25" stroke-linecap="round"/>
<path d="M139 241c-16 38-26 87-18 110h39l24-92 39 93h43c13-49-10-106-23-121" fill="#d89859"/>
<path d="M164 266c-13 37-15 73-10 88h30l13-76 15 76h30c7-29-7-67-14-88" fill="#f4d6a6"/>
<path d="M130 132c-18-39-55-29-62-1-9 33 16 108 45 108l32-69m113-39c18-39 55-29 62-1 9 33-16 108-45 108l-32-69" fill="#9b633f"/>
<path d="M109 153c0-62 41-99 92-99 59 0 96 43 96 105 0 81-40 119-94 119-58 0-94-45-94-125" fill="#e3a665"/>
<path d="M178 63c-12 45-1 88 20 111 24-26 36-68 27-115" fill="#f3d6a6"/>
<ellipse cx="161" cy="167" rx="8" ry="11" fill="#28352e"/><ellipse cx="246" cy="167" rx="8" ry="11" fill="#28352e"/>
<circle cx="164" cy="164" r="2.5" fill="white"/><circle cx="249" cy="164" r="2.5" fill="white"/>
<ellipse cx="203" cy="215" rx="48" ry="34" fill="#f6dfb9"/>
<path d="M187 202q16-12 32 0c3 8-10 17-16 17s-19-9-16-17" fill="#28352e"/>
<path d="M184 234q19 17 39 0" fill="none" stroke="#754d36" stroke-width="3" stroke-linecap="round"/>
<path d="M195 239h17v14c0 13-17 13-17 0z" fill="#da8b83"/>
<path d="M141 263q61 20 116-3" fill="none" stroke="#315c4a" stroke-width="13"/>
<circle cx="203" cy="276" r="12" fill="#eec15d"/><path d="M199 272h8m-4-4v8" stroke="#9d7539" stroke-width="2"/>
</symbol>
<symbol id="cat" viewBox="0 0 400 400">
<ellipse cx="203" cy="356" rx="108" ry="15" fill="#253d32" opacity=".12"/>
<path d="M264 306c87 42 82-73 46-44" fill="none" stroke="#9d9c90" stroke-width="23" stroke-linecap="round"/>
<path d="M154 225c-29 42-32 94-17 127h126c13-48-2-106-32-131" fill="#a9aa9b"/>
<path d="M185 261l-18 90h28l10-68 8 68h28l-13-90" fill="#e4e1d4"/>
<path d="M115 145l-9-83 71 46m108 37 10-83-74 46" fill="#9b9e91"/>
<path d="M121 123l-3-43 37 28m116 15 10-43-39 28" fill="#d6aaa0"/>
<ellipse cx="200" cy="173" rx="96" ry="81" fill="#b9baab"/>
<path d="M177 97l12 39m13-43 0 42m26-37-13 38" stroke="#8c9384" stroke-width="9" stroke-linecap="round"/>
<path d="M135 166q22-23 43 0-23 17-43 0m89 0q22-23 43 0-23 17-43 0" fill="#d9d78c"/>
<path d="M157 155v17m88-17v17" stroke="#273a31" stroke-width="5" stroke-linecap="round"/>
<path d="M190 195h20l-10 11z" fill="#ad7e77"/>
<path d="M200 206v8m0 0q-12 12-24 0m24 0q12 12 24 0" fill="none" stroke="#6b7164" stroke-width="2.5"/>
<path d="M166 204l-65-9m65 20-64 5m131-16 65-9m-65 20 64 5" stroke="#6b7164" stroke-width="2" stroke-linecap="round"/>
<path d="M151 244q50 15 99-1" fill="none" stroke="#b85d3f" stroke-width="10"/>
<circle cx="202" cy="254" r="10" fill="#efd293"/>
</symbol>
</defs>
</svg>
<div class="topbar">A little care makes a big difference. <a href="#adopt">Meet your new best friend ↗</a></div>
<header>
<div class="container header-inner">
<a class="brand" href="#" aria-label="Kindred home">
<img src="https://placehold.co/86x86/244d40/ffffff?text=k.&font=manrope" alt="Kindred logo" width="43" height="43">
<span><strong>kindred<span style="color:#ce683c">.</span></strong><small>Good care. Great company.</small></span>
</a>
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-nav">Menu ☰</button>
<nav id="primary-nav" aria-label="Primary navigation">
<a href="#care">Pet Care</a>
<a href="#adopt">Adoption</a>
<a href="#training">Training</a>
<a href="#events">Events</a>
<a href="#community">Community</a>
<a href="#about">About Us</a>
<button class="btn" data-appointment>Make Appointment ↗</button>
</nav>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<div class="hero-grid">
<div class="hero-copy">
<div class="eyebrow">For pets. For people. For life.</div>
<h1 id="hero-title">A better life.<br><em>Together.</em></h1>
<p>From the first happy hello to the golden years, we’re here for every chapter. Find thoughtful pet care, a friend to adopt, and a community that gets it.</p>
<div class="actions">
<a class="btn orange" href="#adopt">Find your companion <span aria-hidden="true">↗</span></a>
<a class="btn outline" href="#care">Explore pet care <span aria-hidden="true">→</span></a>
</div>
<div class="hero-social">
<div class="avatars" aria-hidden="true">
<img src="https://i.pravatar.cc/72?u=kindred-ava" alt="" width="36" height="36">
<img src="https://i.pravatar.cc/72?u=kindred-jo" alt="" width="36" height="36">
<img src="https://i.pravatar.cc/72?u=kindred-sam" alt="" width="36" height="36">
</div>
<div><div class="stars" aria-label="Five stars">★★★★★</div><span>A little neighborhood. A lot of love.</span></div>
</div>
</div>
<div>
<div class="hero-art">
<img class="landscape" src="https://picsum.photos/seed/kindred-meadow/650/650" alt="" width="650" height="650" fetchpriority="high">
<svg viewBox="0 0 500 480" role="img" aria-label="A cheerful golden dog wearing a green collar">
<circle cx="255" cy="210" r="153" fill="#f5f0d8" opacity=".8"/>
<path d="M40 353q-20-45 8-78m-7 45q30-17 43 3m340 10q23-43 6-78m-5 47q-35-17-45 9" fill="none" stroke="#91a084" stroke-width="7" stroke-linecap="round"/>
<use href="#dog" x="35" y="35" width="435" height="435"/>
<path d="M86 129l-8-9m17 0 4-12m294 72 10-7m-7 22 13 2" stroke="#c87844" stroke-width="4" stroke-linecap="round"/>
</svg>
<div class="round-note">Small paws.<br>Big possibilities.</div>
<div class="floating-card"><div class="heart" aria-hidden="true">♡</div><div><strong>Every pet belongs.</strong><span>Let’s help them find their people.</span></div></div>
</div>
<p class="hero-caption">More tail wags. More together.</p>
</div>
</div>
<div class="trust-strip" aria-label="Our commitments">
<div class="trust-item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 8 9 8 9s8-4 8-9V6z"/><path d="m8 12 3 3 5-6"/></svg>Care with compassion</div>
<div class="trust-item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20S2 14 2 8a5 5 0 0 1 10-1 5 5 0 0 1 10 1c0 6-10 12-10 12Z"/></svg>Rescue-first partnerships</div>
<div class="trust-item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="7" r="3"/><path d="M3 21v-5a6 6 0 0 1 12 0v5m2-16a3 3 0 0 1 0 6m1 3c3 0 4 2 4 5v2"/></svg>People who understand</div>
<div class="trust-item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m3 12 9-9 9 9M6 10v11h12V10m-9 11v-7h6v7"/></svg>Your neighborhood resource</div>
</div>
</div>
</section>
<section class="block" id="care" aria-labelledby="care-title">
<div class="container">
<div class="section-head">
<div><div class="eyebrow">Care that grows with them</div><h2 id="care-title">Their best life starts<br>with everyday care.</h2></div>
<p>No two pets are the same. We help you build a practical care routine around their age, lifestyle, and wonderfully individual personality.</p>
</div>
<div class="care-grid">
<article class="care-card">
<div class="icon-box"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M10 4h8v6h6v8h-6v6h-8v-6H4v-8h6z"/></svg></div>
<h3>Wellness, not guesswork.</h3>
<p>A regular wellness exam is the foundation of preventive care. Talk with a veterinary professional about vaccinations, parasite prevention, dental health, and changes in appetite or activity.</p>
<p>We help you prepare the right questions and connect you with routine-care appointments. Puppies, kittens, and senior pets may need a more frequent check-in.</p>
<button class="text-link" data-appointment>Make an appointment <span aria-hidden="true">↗</span></button>
</article>
<article class="care-card">
<div class="icon-box"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M4 13h20l-3 10H7zM7 9c0-3 4-3 4-6m6 6c0-3 4-3 4-6M3 13h22"/></svg></div>
<h3>Good habits. Happy pets.</h3>
<p>Balanced nutrition, fresh water, comfortable rest, and daily enrichment go a long way. Choose a complete diet appropriate for your pet’s life stage, and ask your vet about healthy portions.</p>
<p>Our essentials guide takes the overwhelm out of shopping, with practical picks for safe transport, grooming, feeding, and play—not a cupboard full of things you don’t need.</p>
<button class="text-link" data-info="supplies">Get supplies guidance <span aria-hidden="true">↗</span></button>
</article>
<article class="care-card">
<div class="icon-box"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M5 4h8c2 0 3 1 3 3v18c0-2-2-3-4-3H5zM23 4h-7m0 3c0-2 2-3 4-3h3v18h-4c-2 0-3 1-3 3M8 9h4m-4 4h4"/></svg></div>
<h3>Find their kind of care.</h3>
<p>Breed guides can offer clues about grooming, exercise, and inherited health concerns, but your pet is more than a label. Mixed-breed companions deserve the same thoughtful, individual approach.</p>
<p>Learn to balance breed tendencies with age, temperament, and your household’s rhythm. A good match starts with realistic expectations, not appearances.</p>
<button class="text-link" data-info="guides">Explore breed & life-stage guides <span aria-hidden="true">↗</span></button>
</article>
</div>
<div class="emergency">
<div><strong>Need urgent help? Don’t wait for an online reply.</strong><p>Breathing difficulty, collapse, suspected poisoning, or inability to urinate can be emergencies. Contact your nearest emergency veterinary hospital immediately.</p></div>
<button class="text-link" data-info="emergency">Emergency resources ↗</button>
</div>
</div>
</section>
<section class="block adoption" id="adopt" aria-labelledby="adoption-title">
<div class="container">
<div class="adoption-head">
<div><div class="eyebrow">A new chapter begins here</div><h2 id="adoption-title">Someone wonderful is waiting.</h2><p>Our rescue partners get to know every animal, so you can find a companion whose needs fit your life. These sample profiles show what a thoughtful match can look like.</p></div>
<div class="filters" role="group" aria-label="Filter adoptable pets">
<button data-filter="all" aria-pressed="true">All pets</button>
<button data-filter="dog" aria-pressed="false">Dogs</button>
<button data-filter="cat" aria-pressed="false">Cats</button>
</div>
</div>
<div class="pet-grid" id="pet-results" aria-live="polite">
<article class="pet-card" data-pet-type="dog">
<div class="pet-art">
<img src="https://placehold.co/700x460/ecd9bd/ecd9bd?text=%20" alt="" width="700" height="460" loading="lazy">
<svg viewBox="0 0 400 280" role="img" aria-label="Illustrated golden Labrador mix"><use href="#dog" x="46" y="-22" width="310" height="310"/></svg>
<span class="pet-tag">READY FOR A FRESH START</span>
</div>
<div class="pet-info"><div class="pet-title"><h3>Milo</h3><small>2 years · Labrador mix</small></div><p>A sunny-side-up companion who loves sniffy walks and a good game of fetch. Milo would thrive with an active family and a predictable routine.</p><button class="text-link" data-info="milo">Meet Milo <span aria-hidden="true">↗</span></button></div>
</article>
<article class="pet-card" data-pet-type="cat">
<div class="pet-art">
<img src="https://placehold.co/700x460/dde5d7/dde5d7?text=%20" alt="" width="700" height="460" loading="lazy">
<svg viewBox="0 0 400 280" role="img" aria-label="Illustrated gray tabby cat"><use href="#cat" x="42" y="-23" width="315" height="315"/></svg>
<span class="pet-tag">EXPERT WINDOW-WATCHER</span>
</div>
<div class="pet-info"><div class="pet-title"><h3>Clover</h3><small>3 years · Domestic shorthair</small></div><p>A gentle soul with a quiet purr and excellent sunbeam-finding skills. Give Clover a calm home, a slow introduction, and a cozy spot by your side.</p><button class="text-link" data-info="clover">Meet Clover <span aria-hidden="true">↗</span></button></div>
</article>
<article class="pet-card" data-pet-type="dog">
<div class="pet-art">
<img src="https://placehold.co/700x460/f2d9cc/f2d9cc?text=%20" alt="" width="700" height="460" loading="lazy">
<svg viewBox="0 0 400 280" role="img" aria-label="Illustrated small brown dog"><g transform="translate(44,-9) scale(.77)"><use href="#dog" width="400" height="400"/></g></svg>
<span class="pet-tag">SMALL DOG, BIG HEART</span>
</div>
<div class="pet-info"><div class="pet-title"><h3>Pippin</h3><small>5 years · Terrier mix</small></div><p>Part walking buddy, part sofa enthusiast. Pippin enjoys short adventures and patient people who let him settle in at his own pace.</p><button class="text-link" data-info="pippin">Meet Pippin <span aria-hidden="true">↗</span></button></div>
</article>
</div>
<div class="adoption-foot"><p>Not ready to adopt? Fostering and rescue support change lives, too.</p><button class="btn outline" data-info="rescue">Support a rescue <span aria-hidden="true">♡</span></button></div>
</div>
</section>
<section class="block" id="training" aria-labelledby="training-title">
<div class="container training-grid">
<div class="training-visual">
<img src="https://picsum.photos/seed/kindred-park/700/700" alt="Outdoor scenery placeholder for our neighborhood training walks" width="700" height="700" loading="lazy">
<svg viewBox="0 0 500 470" role="img" aria-label="A dog and their person practicing together outdoors">
<circle cx="255" cy="170" r="127" fill="#f5e3c9" opacity=".85"/>
<path d="M304 198l-6 139-30 42m40-42 29 44" stroke="#365749" stroke-width="26" stroke-linecap="round" fill="none"/>
<path d="M279 116q26-18 48 4l15 86h-73z" fill="#c7754b"/>
<circle cx="299" cy="89" r="27" fill="#e7b58d"/>
<path d="M272 84q-4-39 34-33 29 5 21 38l-12-17-40 6" fill="#394c3a"/>
<path d="M278 132l-23 57-48 9m114-59 27 48" stroke="#e7b58d" stroke-width="15" stroke-linecap="round" fill="none"/>
<path d="M252 189q-39 42-73 68" fill="none" stroke="#315749" stroke-width="3"/>
<use href="#dog" x="25" y="166" width="235" height="235"/>
<path d="M62 392h318" stroke="#5f7656" stroke-width="4" stroke-linecap="round"/>
</svg>
<div class="visual-label"><strong>Progress over perfection.</strong><span>A few positive minutes, practiced every day.</span></div>
</div>
<div class="training-copy">
<div class="eyebrow">Better understanding. Stronger bonds.</div>
<h2 id="training-title">Good behavior starts<br>with connection.</h2>
<p>Jumping, barking, pulling, and hiding are ways pets communicate—not signs of a “bad” animal. We help you understand what’s behind the behavior and build skills using reward-based, humane training.</p>
<p>Start with manageable goals, a comfortable environment, and rewards your pet genuinely enjoys. Sudden behavioral changes can have a medical cause, so a veterinary check is often the right first step.</p>
<ul class="check-list">
<li>Puppy foundations and confident socialization</li>
<li>Loose-leash walking and everyday manners</li>
<li>Gentle support for shy or newly adopted pets</li>
</ul>
<button class="btn" data-appointment data-service="Behavior consultation">Find behavior help <span aria-hidden="true">↗</span></button>
</div>
</div>
</section>
<section class="block events" id="events" aria-labelledby="events-title">
<div class="container">
<div class="section-head"><div><div class="eyebrow">Come as you are. Bring a friend.</div><h2 id="events-title">Good things happen together.</h2></div><p>Meet fellow pet people, learn something useful, and give back close to home. Our gatherings are relaxed, welcoming, and built around animal comfort.</p></div>
<div class="event-grid">
<article class="event-card">
<div class="event-top"><div class="date-box">Sep<b>12</b></div><div class="event-type"><strong>Meet & greet</strong>10:00 AM–1:00 PM · Kindred courtyard</div></div>
<h3>Find-a-friend adoption day</h3><p>Get to know rescue companions and chat with foster carers about temperament, routines, and the adoption process. Please leave resident pets at home for a calm first meeting.</p><button class="text-link" data-info="event-adopt">Plan your visit ↗</button>
</article>
<article class="event-card">
<div class="event-top"><div class="date-box">Sep<b>19</b></div><div class="event-type"><strong>Learn together</strong>9:00–10:00 AM · Willow Park</div></div>
<h3>A little less leash pulling</h3><p>A small-group introduction to rewarding check-ins, keeping a comfortable distance, and making walks more enjoyable. Bring treats, a fixed-length leash, and your dog’s usual harness.</p><button class="text-link" data-info="event-walk">See workshop details ↗</button>
</article>
<article class="event-card">
<div class="event-top"><div class="date-box">Sep<b>26</b></div><div class="event-type"><strong>Give a little love</strong>11:00 AM–3:00 PM · Kindred hub</div></div>
<h3>Pack a rescue care kit</h3><p>Help assemble welcome-home bundles for foster families. We’ll sort food, washable bedding, and enrichment toys. No animal-handling experience needed—just a willing pair of hands.</p><button class="text-link" data-info="event-volunteer">Explore volunteering ↗</button>
</article>
</div>
<p class="event-note">Illustrative September 2026 calendar. Event dates, locations, and availability must be confirmed before attending.</p>
</div>
</section>
<section class="block community" id="community" aria-labelledby="community-title">
<div class="container">
<div class="section-head"><div><div class="eyebrow">A community with heart</div><h2 id="community-title">The little moments mean everything.</h2></div><p>Advice is better when it comes with empathy. These illustrative stories capture the kind of difference thoughtful care and a good support network can make.</p></div>
<div class="testimonials">
<article class="quote-card"><div class="stars" aria-label="Five stars">★★★★★</div><blockquote>“We didn’t just find a dog. We found people who helped us understand him. Those first-week routines made our whole home feel calmer.”</blockquote><div class="quote-person"><img src="https://i.pravatar.cc/80?u=kindred-maya" alt="" width="39" height="39" loading="lazy"><div><strong>Maya & Finn</strong><span>A fresh start, together</span></div></div></article>
<article class="quote-card"><div class="stars" aria-label="Five stars">★★★★★</div><blockquote>“The wellness checklist helped me ask better questions at our vet visit. I finally feel like I have a plan for Luna’s senior years.”</blockquote><div class="quote-person"><img src="https://i.pravatar.cc/80?u=kindred-alex" alt="" width="39" height="39" loading="lazy"><div><strong>Alex & Luna</strong><span>Making the golden years count</span></div></div></article>
<article class="quote-card"><div class="stars" aria-label="Five stars">★★★★★</div><blockquote>“Small steps, no judgment, and lots of encouragement. Walking Pepper is becoming the best part of our day instead of the hardest.”</blockquote><div class="quote-person"><img src="https://i.pravatar.cc/80?u=kindred-jules" alt="" width="39" height="39" loading="lazy"><div><strong>Jules & Pepper</strong><span>Learning one walk at a time</span></div></div></article>
</div>
<div class="impact"><p>Our promise is simple: thoughtful guidance, kinder choices, and a place for every pet person.</p><div class="stat"><b>01</b><span>Put animal welfare first</span></div><div class="stat"><b>02</b><span>Meet people with kindness</span></div><div class="stat"><b>03</b><span>Build lasting connections</span></div></div>
</div>
</section>
<section class="block" id="about" aria-labelledby="about-title">
<div class="container faq-grid">
<div class="faq-intro"><div class="eyebrow">Your neighborhood, a little kinder</div><h2 id="about-title">Pet people.<br>People people.</h2><p>Kindred is a local pet-care resource built around one belief: life with animals is better when we support each other. We bring care education, positive training, and rescue connections into one welcoming place.</p><p>We’re here to help you find your next step—not replace the veterinarian who knows your pet. When something needs specialist attention, we’ll encourage the right professional support.</p><a class="text-link" href="mailto:hello@kindred.example">Say hello to Kindred ↗</a></div>
<div aria-label="Frequently asked questions">
<details open><summary>How does the adoption process work?</summary><p>Start by discussing your home, routine, and experience with the rescue team. A meet-and-greet helps everyone assess the match. Each partner sets its own application, fees, veterinary-care arrangements, and follow-up process. Adoption is a conversation, not a race.</p></details>
<details><summary>Can I book a veterinary appointment here?</summary><p>You can use our appointment planner to prepare your preferred service and date. This demonstration does not send a request or reserve a slot. A live service would confirm availability directly with the participating clinic. Contact your own veterinary practice for actual care.</p></details>
<details><summary>What if my pet is nervous around other animals?</summary><p>Let your trainer or clinic know before arriving so they can plan a quieter visit. Keep a comfortable distance, avoid forced greetings, and allow your pet to opt out. Individual support is usually a better starting point than a busy group class.</p></details>
<details><summary>How can I help if I can’t adopt?</summary><p>Fostering, transport, practical donations, and administrative volunteering all support rescue work. Ask your local organization what it needs most before buying supplies. Even sharing a verified adoption profile can help the right family find a companion.</p></details>
</div>
</div>
</section>
<div class="container">
<section class="newsletter" aria-labelledby="newsletter-title">
<div><h2 id="newsletter-title">A little good in your inbox.</h2><p>Seasonal care tips, rescue stories, and neighborhood happenings. Useful things for life with your favorite companion.</p></div>
<form id="newsletter-form">
<label for="newsletter-email" class="eyebrow" style="font-size:10px;margin-bottom:9px">The Kindred monthly</label>
<div class="email-row"><input type="email" id="newsletter-email" name="email" placeholder="Your email address" autocomplete="email" required><button class="btn" type="submit">Count me in ↗</button></div>
<small>Preview form only. Your email is not stored or sent. No spam, no paw-pressure.</small>
<p id="newsletter-status" role="status" hidden></p>
</form>
</section>
</div>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-intro">
<a class="brand" href="#" aria-label="Kindred home"><img src="https://placehold.co/86x86/244d40/ffffff?text=k.&font=lato" alt="" width="43" height="43"><span><strong>kindred.</strong><small>Good care. Great company.</small></span></a>
<p>For the paws, purrs, and people that make a house a home. Let’s make life together a little better.</p>
<div class="socials" aria-label="Social platforms"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit Instagram (opens in new tab)">Instagram ↗</a><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit Facebook (opens in new tab)">Facebook ↗</a></div>
</div>
<div class="footer-column"><h3>For your companion</h3><a href="#care">Pet care & wellness</a><a href="#adopt">Find a friend</a><a href="#training">Behavior & training</a><button class="legal-button" data-info="emergency" style="font-size:12px;color:var(--muted)">Emergency resources</button></div>
<div class="footer-column"><h3>Be part of it</h3><a href="#events">What’s happening</a><a href="#community">Our community</a><a href="#about">Our story</a><button class="legal-button" data-info="rescue" style="font-size:12px;color:var(--muted)">Donate & volunteer</button></div>
<div class="footer-column"><h3>Come say hello</h3><p>214 Willow Lane, Portland, OR 97205<br>Mon–Fri, 9 AM–6 PM · Sat, 10 AM–2 PM</p><a href="tel:+15035550146">(503) 555-0146</a><a href="mailto:hello@kindred.example">hello@kindred.example</a></div>
</div>
<div class="footer-bottom"><span>© <span id="year">2026</span> Kindred Pet Collective. All rights reserved.</span><div><button class="legal-button" data-info="privacy">Privacy</button><button class="legal-button" data-info="terms">Terms</button><a href="#main">Back to top ↑</a></div></div>
<p class="demo-note">Kindred is a fictional concept website. Contact details, pet profiles, and community stories are illustrative. General guidance is not a diagnosis or a substitute for veterinary care.</p>
</div>
</footer>
<dialog id="appointment-dialog" aria-labelledby="appointment-title">
<div class="dialog-content">
<div class="dialog-head"><h2 id="appointment-title">Plan a care appointment.</h2><button class="close-dialog" aria-label="Close appointment planner">×</button></div>
<p>Make the next step easier. Choose a service and preferred date to create a summary for your care team.</p>
<form id="appointment-form">
<div class="form-grid">
<div class="field"><label for="pet-name">Pet’s name</label><input id="pet-name" name="pet" maxlength="60" placeholder="e.g. Luna" required></div>
<div class="field"><label for="pet-kind">Companion</label><select id="pet-kind" name="kind"><option>Dog</option><option>Cat</option><option>Other companion</option></select></div>
<div class="field full"><label for="service">What can we help with?</label><select id="service" name="service"><option>Wellness exam</option><option>New pet care consultation</option><option>Senior pet care review</option><option>Behavior consultation</option></select></div>
<div class="field"><label for="appointment-date">Preferred date</label><input type="date" id="appointment-date" name="date" required></div>
<div class="field"><label for="appointment-time">Preferred time</label><select id="appointment-time" name="time"><option>Morning, 9 AM–12 PM</option><option>Afternoon, 12–4 PM</option><option>Late afternoon, 4–6 PM</option></select></div>
</div>
<p class="form-note">This is a planning tool, not a booking service. Nothing is sent or stored. Availability and clinical suitability must be confirmed with a veterinary practice. Not for emergencies.</p>
<button class="btn" type="submit">Create my appointment summary →</button>
</form>
<div id="appointment-result" class="success-box" role="status" hidden></div>
</div>
</dialog>
<dialog id="info-dialog" aria-labelledby="info-title">
<div class="dialog-content">
<div class="dialog-head"><h2 id="info-title"></h2><button class="close-dialog" aria-label="Close information">×</button></div>
<div id="info-content"></div>
</div>
</dialog>
<script>
(() => {
const menu = document.querySelector('.menu-toggle');
const nav = document.getElementById('primary-nav');
menu.addEventListener('click', () => {
const expanded = menu.getAttribute('aria-expanded') !== 'true';
menu.setAttribute('aria-expanded', String(expanded));
nav.classList.toggle('open', expanded);
});
nav.querySelectorAll('a, button').forEach(link => link.addEventListener('click', () => {
menu.setAttribute('aria-expanded', 'false');
nav.classList.remove('open');
}));
document.addEventListener('keydown', event => {
if (event.key === 'Escape') {
menu.setAttribute('aria-expanded', 'false');
nav.classList.remove('open');
}
});
document.querySelectorAll('[data-filter]').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('[data-filter]').forEach(item => item.setAttribute('aria-pressed', String(item === button)));
document.querySelectorAll('[data-pet-type]').forEach(card => {
card.hidden = button.dataset.filter !== 'all' && card.dataset.petType !== button.dataset.filter;
});
});
});
let returnFocus;
function openDialog(dialog, trigger) {
returnFocus = trigger;
dialog.showModal();
document.body.style.overflow = 'hidden';
}
document.querySelectorAll('dialog').forEach(dialog => {
dialog.querySelector('.close-dialog').addEventListener('click', () => dialog.close());
dialog.addEventListener('click', event => {
if (event.target === dialog) {
const rect = dialog.getBoundingClientRect();
if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
}
});
dialog.addEventListener('close', () => {
document.body.style.overflow = '';
if (returnFocus) returnFocus.focus();
});
});
const appointment = document.getElementById('appointment-dialog');
const form = document.getElementById('appointment-form');
const result = document.getElementById('appointment-result');
const dateInput = document.getElementById('appointment-date');
const now = new Date();
const localDate = [now.getFullYear(), String(now.getMonth() + 1).padStart(2, '0'), String(now.getDate()).padStart(2, '0')].join('-');
dateInput.min = localDate;
document.querySelectorAll('[data-appointment]').forEach(button => {
button.addEventListener('click', () => {
form.hidden = false;
result.hidden = true;
form.reset();
if (button.dataset.service) document.getElementById('service').value = button.dataset.service;
openDialog(appointment, button);
});
});
form.addEventListener('submit', event => {
event.preventDefault();
if (dateInput.value < localDate) {
dateInput.setCustomValidity('Please choose today or a future date.');
dateInput.reportValidity();
return;
}
dateInput.setCustomValidity('');
const values = new FormData(form);
const formattedDate = new Date(values.get('date') + 'T12:00:00').toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
result.replaceChildren();
const title = document.createElement('h3');
title.textContent = 'Your plan is ready.';
const summary = document.createElement('p');
summary.style.marginTop = '14px';
summary.textContent = `${values.get('pet')} (${values.get('kind')}): ${values.get('service')}, preferably ${formattedDate}, ${values.get('time').toLowerCase()}.`;
const next = document.createElement('p');
next.textContent = 'No appointment has been booked and no details were sent. Share this summary with your veterinary practice or trainer to confirm the next step.';
const back = document.createElement('button');
back.className = 'btn outline';
back.type = 'button';
back.textContent = 'Edit my plan';
back.addEventListener('click', () => {
result.hidden = true;
form.hidden = false;
document.getElementById('pet-name').focus();
});
result.append(title, summary, next, back);
form.hidden = true;
result.hidden = false;
});
dateInput.addEventListener('input', () => dateInput.setCustomValidity(''));
const info = {
supplies: {
title: 'Start with the essentials.',
body: '<p>A few well-chosen items make daily care simpler. Prioritize fit, safety, and washability over trends.</p><ul><li><strong>Coming home:</strong> a secure carrier or properly fitted harness, identification tag, and a quiet resting space.</li><li><strong>Mealtimes:</strong> complete life-stage food, easy-to-clean bowls, and fresh water. Make diet changes gradually with veterinary guidance.</li><li><strong>Everyday care:</strong> grooming tools suited to their coat, waste bags or an appropriately sized litter tray, and pet-safe dental products.</li><li><strong>Enrichment:</strong> appropriately sized toys, food puzzles, and scratching surfaces for cats. Supervise new toys and discard damaged items.</li></ul><p>Ask your rescue or clinic about the pet’s existing routine before shopping. Familiar food and bedding can make the first few days gentler.</p>'
},
guides: {
title: 'Meet the pet, not just the breed.',
body: '<p>Use breed information as a conversation starter, never a guarantee. Ask a rescue about observed behavior, energy, grooming needs, and comfort around children or other animals.</p><ul><li><strong>Puppies and kittens:</strong> discuss vaccination schedules, safe socialization, nutrition, and age-appropriate play.</li><li><strong>Adult companions:</strong> match exercise, enrichment, and alone-time tolerance to your actual weekday routine.</li><li><strong>Senior pets:</strong> monitor mobility, appetite, body weight, and bathroom habits. Your vet may recommend more frequent exams or testing.</li><li><strong>Breed-related concerns:</strong> ask about relevant screening, heat tolerance, skin and ear care, and breathing or joint issues.</li></ul><p>Individual medical history and an examination are more useful than a generic checklist. Keep a short record of changes to share at the next wellness exam.</p>'
},
emergency: {
title: 'When minutes matter.',
body: '<p><strong>Contact the nearest emergency veterinary hospital now</strong> if your pet is struggling to breathe, collapsing, having prolonged or repeated seizures, unable to urinate, bleeding heavily, or may have swallowed a toxin.</p><p>Call ahead if possible. Keep your pet as calm as you safely can and follow the veterinary team’s transport instructions. Do not induce vomiting or give human medication unless a veterinary professional specifically directs you to.</p><p><strong>U.S. poison resources:</strong><br>ASPCA Animal Poison Control: <a href="tel:+18884264435">888-426-4435</a><br>Pet Poison Helpline: <a href="tel:+18557667661">855-764-7661</a><br>Consultation fees may apply.</p><p>Bring medication packaging or a photo of the suspected substance. Outside the U.S., contact your local veterinary emergency service. Kindred is not an emergency clinic.</p>'
},
milo: {
title: 'Say hello to Milo.',
body: '<p>Milo is an illustrative 2-year-old Labrador mix with an enthusiasm for sniffing, learning, and being near his people. His ideal home has time for daily exercise and short, rewarding training sessions.</p><p>A rescue meeting should explore his medical history, behavior with other pets, comfort around children, and how he manages alone time. Introductions are planned by the rescue—not rushed at a busy event.</p><p>This is a sample profile, not a currently available animal. Contact a verified local rescue to find a real companion and confirm its adoption requirements.</p>'
},
clover: {
title: 'A quiet hello from Clover.',
body: '<p>Clover is an illustrative 3-year-old domestic shorthair who appreciates gentle company and a predictable day. Think sunny windows, soft resting places, and wand-toy play on her terms.</p><p>A calm starter room, hiding spots, and gradual introductions can help a new cat settle in. Ask the rescue about litter preferences, diet, veterinary history, and experience with other animals.</p><p>This sample profile does not represent an available cat. A verified rescue can guide you toward a compatible companion and arrange a real meet-and-greet.</p>'
},
pippin: {
title: 'Little Pippin, big possibilities.',
body: '<p>Pippin is an illustrative 5-year-old terrier mix who likes gentle adventures and a cozy home base. Patient people and a steady routine give him space to build trust.</p><p>Discuss handling preferences, barking triggers, exercise needs, and alone-time comfort with the rescue. Small dogs benefit from the same respectful training and veterinary attention as their larger friends.</p><p>This is a sample profile, not a live adoption listing. Please work with a verified rescue for availability, fees, and a thoughtful matching process.</p>'
},
rescue: {
title: 'Make a real difference.',
body: '<p>Rescue work depends on a whole community. Ask a verified local shelter which kind of support would be most useful right now.</p><ul><li><strong>Donate:</strong> use the rescue’s official donation page and check its nonprofit status. This website does not collect payments.</li><li><strong>Foster:</strong> discuss your available space, resident animals, transport, and the organization’s medical support before committing.</li><li><strong>Give supplies:</strong> request a current wish list. Unopened food, washable bedding, and cleaning supplies are often useful; needs vary.</li><li><strong>Volunteer:</strong> transport, laundry, fundraising, photography, and administration can all help.</li></ul><p>A sustainable commitment—even a small one—is better than taking on more than you can comfortably manage.</p>'
},
'event-adopt': {
title: 'A thoughtful first meeting.',
body: '<p><strong>Sample event:</strong> September 12, 2026, 10 AM–1 PM at the Kindred courtyard.</p><p>Come ready to chat about your household, typical schedule, and what you hope for in a companion. Bring questions about health, daily routines, and post-adoption support.</p><p>Leave your own pets at home unless the rescue has arranged an introduction. Please respect resting animals and ask before touching or offering treats.</p><p>This is an illustrative calendar entry. No live registration is available; confirm actual events with a local rescue before traveling.</p>'
},
'event-walk': {
title: 'Walks worth looking forward to.',
body: '<p><strong>Sample workshop:</strong> September 19, 2026, 9–10 AM at Willow Park.</p><p>Practice rewarding check-ins and changing direction without leash corrections. Bring small treats, water, waste bags, and a fixed-length leash attached to a well-fitted harness.</p><p>Dogs who are distressed near other dogs may be more comfortable with individual training. Speak with a qualified reward-based trainer about the best starting point.</p><p>This is a demonstration event, not a confirmed class. No reservation or payment is taken here.</p>'
},
'event-volunteer': {
title: 'A little time. A lot of good.',
body: '<p><strong>Sample gathering:</strong> September 26, 2026, 11 AM–3 PM at the Kindred hub.</p><p>Volunteers help check donated supplies, fold clean bedding, and pack practical welcome kits for foster households. Comfortable clothes and closed-toe shoes are a good idea.</p><p>Ask about accessibility, age requirements, and allergy considerations in advance. There is no animal handling in this sample activity.</p><p>This listing is illustrative. Contact a verified rescue for current volunteer opportunities and onboarding requirements.</p>'
},
privacy: {
title: 'Privacy, plainly explained.',
body: '<p>This concept page does not send appointment or newsletter form entries to a server and does not save them in browser storage. The appointment planner uses entries only to display a summary during your visit.</p><p>Images and fonts are requested from external providers, including Google Fonts, Picsum, Placehold, and Pravatar. Those providers receive ordinary connection information such as your IP address and may apply their own privacy policies.</p><p>There are no analytics scripts or advertising trackers added to this page. External websites have their own policies. A real Kindred service would need a published privacy policy reflecting its actual systems before launch.</p>'
},
terms: {
title: 'A few important things.',
body: '<p>Kindred is a fictional website concept. Contact information, pet profiles, events, and testimonials are examples, not verified listings or service offers.</p><p>Educational content does not diagnose, treat, or replace advice from a licensed veterinarian. For urgent concerns, contact an emergency veterinary hospital directly.</p><p>The appointment planner does not reserve a visit, the newsletter form does not enroll subscribers, and no donations or payments are processed. Confirm all real-world services with the relevant provider.</p>'
}
};
const infoDialog = document.getElementById('info-dialog');
document.querySelectorAll('[data-info]').forEach(button => {
button.addEventListener('click', () => {
const entry = info[button.dataset.info];
document.getElementById('info-title').textContent = entry.title;
document.getElementById('info-content').innerHTML = entry.body;
openDialog(infoDialog, button);
});
});
document.getElementById('newsletter-form').addEventListener('submit', event => {
event.preventDefault();
const status = document.getElementById('newsletter-status');
status.textContent = 'Thanks for your interest! This preview does not send or save your email, so no subscription has been created.';
status.hidden = false;
event.target.reset();
});
document.getElementById('year').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:58:15.066Z",
"url": "https://benchmark.aimac.invalid/65cf652e5d46bc0971cddafd5ea4eff3d8ee2012c2406b61a02829dd221a8ccf.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": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "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 home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred 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 home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred 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": "<svg viewBox=\"0 0 500 480\" role=\"img\" aria-label=\"A cheerful golden dog wearing a green collar\">",
"target": [
"svg[viewBox=\"0 0 500 480\"]"
]
}
]
},
{
"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\" width=\"0\" height=\"0\" aria-hidden=\"true\" style=\"position:absolute;overflow:hidden\">",
"target": [
"svg[width=\"0\"]"
]
}
]
},
{
"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 home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred 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": "<svg viewBox=\"0 0 500 480\" role=\"img\" aria-label=\"A cheerful golden dog wearing a green collar\">",
"target": [
"svg[viewBox=\"0 0 500 480\"]"
]
}
]
},
{
"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": "<svg viewBox=\"0 0 500 480\" role=\"img\" aria-label=\"A cheerful golden dog wearing a green collar\">",
"target": [
"svg[viewBox=\"0 0 500 480\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#\" aria-label=\"Kindred home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred 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 home\">",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred home\"]"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"email\" id=\"newsletter-email\" name=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#newsletter-email"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span style=\"color:#ce683c\">.</span>",
"target": [
"strong > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn\" data-appointment=\"\">Make Appointment \u2197</button>",
"target": [
"#primary-nav > .btn[data-appointment=\"\"]"
]
}
]
},
{
"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\">A better life.<br><em>Together.</em></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"care-title\">Their best life starts<br>with everyday care.</h2>",
"target": [
"#care-title"
]
},
{
"html": "<h3>Wellness, not guesswork.</h3>",
"target": [
".care-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Good habits. Happy pets.</h3>",
"target": [
".care-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Find their kind of care.</h3>",
"target": [
".care-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"adoption-title\">Someone wonderful is waiting.</h2>",
"target": [
"#adoption-title"
]
},
{
"html": "<h3>Milo</h3>",
"target": [
".pet-card[data-pet-type=\"dog\"]:nth-child(1) > .pet-info > .pet-title > h3"
]
},
{
"html": "<h3>Clover</h3>",
"target": [
"article[data-pet-type=\"cat\"] > .pet-info > .pet-title > h3"
]
},
{
"html": "<h3>Pippin</h3>",
"target": [
".pet-card[data-pet-type=\"dog\"]:nth-child(3) > .pet-info > .pet-title > h3"
]
},
{
"html": "<h2 id=\"training-title\">Good behavior starts<br>with connection.</h2>",
"target": [
"#training-title"
]
},
{
"html": "<h2 id=\"events-title\">Good things happen together.</h2>",
"target": [
"#events-title"
]
},
{
"html": "<h3>Find-a-friend adoption day</h3>",
"target": [
".event-card:nth-child(1) > h3"
]
},
{
"html": "<h3>A little less leash pulling</h3>",
"target": [
".event-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Pack a rescue care kit</h3>",
"target": [
".event-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"community-title\">The little moments mean everything.</h2>",
"target": [
"#community-title"
]
},
{
"html": "<h2 id=\"about-title\">Pet people.<br>People people.</h2>",
"target": [
"#about-title"
]
},
{
"html": "<h2 id=\"newsletter-title\">A little good in your inbox.</h2>",
"target": [
"#newsletter-title"
]
},
{
"html": "<h3>For your companion</h3>",
"target": [
".footer-column:nth-child(2) > h3"
]
},
{
"html": "<h3>Be part of it</h3>",
"target": [
".footer-column:nth-child(3) > h3"
]
},
{
"html": "<h3>Come say hello</h3>",
"target": [
".footer-column: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": "#eaf0e7",
"bgColor": "#244d40",
"contrastRatio": 8.19,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 8.19"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"topbar\">A little care makes a big difference. <a href=\"#adopt\">Meet your new best friend \u2197</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": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav id=\"primary-nav\" aria-label=\"Primary navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"newsletter-email\" class=\"eyebrow\" style=\"font-size:10px;margin-bottom:9px\">The Kindred monthly</label>",
"target": [
"label[for=\"newsletter-email\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"newsletter-email\" name=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#newsletter-email"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/86x86/244d40/ffffff?text=k.&font=manrope\" alt=\"Kindred logo\" width=\"43\" height=\"43\">",
"target": [
"img[alt=\"Kindred logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "The Kindred monthly"
},
"relatedNodes": [
{
"html": "<label for=\"newsletter-email\" class=\"eyebrow\" style=\"font-size:10px;margin-bottom:9px\">The Kindred monthly</label>",
"target": [
"label[for=\"newsletter-email\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"newsletter-email\" name=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#newsletter-email"
]
}
]
},
{
"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 care makes a big difference. <a href=\"#adopt\">Meet your new best friend \u2197</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 care makes a big difference. <a href=\"#adopt\">Meet your new best friend \u2197</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 \u2197</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 class=\"skip\" href=\"#main\">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=\"check-list\">\n <li>Puppy foundations and confident socialization</li>\n <li>Loose-leash walking and everyday manners</li>\n <li>Gentle support for shy or newly adopted pets</li>\n </ul>",
"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>Puppy foundations and confident socialization</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.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/86x86/244d40/ffffff?text=k.&font=manrope\" alt=\"Kindred logo\" width=\"43\" height=\"43\">",
"target": [
"img[alt=\"Kindred logo\"]"
]
}
]
},
{
"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>How does the adoption process work?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<svg viewBox=\"0 0 500 480\" role=\"img\" aria-label=\"A cheerful golden dog wearing a green collar\">",
"target": [
"svg[viewBox=\"0 0 500 480\"]"
]
}
]
},
{
"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": 149.7,
"height": 46.4
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (149.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 class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"stars\" aria-label=\"Five stars\">\u2605\u2605\u2605\u2605\u2605</div>",
"target": [
"div:nth-child(2) > .stars[aria-label=\"Five stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span aria-hidden=\"true\">\u2192</span>",
"target": [
".outline.btn[href$=\"#care\"] > span[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": "#63736b",
"bgColor": "#e7ecdf",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"block adoption\" id=\"adopt\" aria-labelledby=\"adoption-title\">",
"target": [
"#adopt"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #63736b, background color: #e7ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Our rescue partners get to know every animal, so you can find a companion whose needs fit your life. These sample profiles show what a thoughtful match can look like.</p>",
"target": [
".adoption-head > div:nth-child(1) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #63736b, background color: #e7ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#e7ecdf",
"contrastRatio": 4.16,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"block adoption\" id=\"adopt\" aria-labelledby=\"adoption-title\">",
"target": [
"#adopt"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #63736b, background color: #e7ecdf, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Not ready to adopt? Fostering and rescue support change lives, too.</p>",
"target": [
".adoption-foot > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #63736b, background color: #e7ecdf, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Good care. Great company.</small>",
"target": [
".footer-intro > .brand[href=\"#\"][aria-label=\"Kindred home\"] > span > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>For the paws, purrs, and people that make a house a home. Let\u2019s make life together a little better.</p>",
"target": [
".footer-intro > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#care\">Pet care & wellness</a>",
"target": [
".footer-column:nth-child(2) > a[href$=\"#care\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#adopt\">Find a friend</a>",
"target": [
".footer-column:nth-child(2) > a[href$=\"#adopt\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#training\">Behavior & training</a>",
"target": [
".footer-column:nth-child(2) > a[href$=\"#training\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"legal-button\" data-info=\"emergency\" style=\"font-size:12px;color:var(--muted)\">Emergency resources</button>",
"target": [
".legal-button[data-info=\"emergency\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">What\u2019s happening</a>",
"target": [
".footer-column:nth-child(3) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#community\">Our community</a>",
"target": [
".footer-column:nth-child(3) > a[href$=\"#community\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#about\">Our story</a>",
"target": [
".footer-column:nth-child(3) > a[href$=\"#about\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"legal-button\" data-info=\"rescue\" style=\"font-size:12px;color:var(--muted)\">Donate & volunteer</button>",
"target": [
".legal-button[data-info=\"rescue\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>214 Willow Lane, Portland, OR 97205<br>Mon\u2013Fri, 9 AM\u20136 PM \u00b7 Sat, 10 AM\u20132 PM</p>",
"target": [
".footer-column:nth-child(4) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15035550146\">(503) 555-0146</a>",
"target": [
"a[href=\"tel:+15035550146\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"mailto:hello@kindred.example\">hello@kindred.example</a>",
"target": [
".footer-column:nth-child(4) > a[href=\"mailto:hello@kindred.example\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00a9 <span id=\"year\">2026</span> Kindred Pet Collective. All rights reserved.</span>",
"target": [
".footer-bottom > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"year\">2026</span>",
"target": [
"#year"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"legal-button\" data-info=\"privacy\">Privacy</button>",
"target": [
"button[data-info=\"privacy\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"legal-button\" data-info=\"terms\">Terms</button>",
"target": [
"button[data-info=\"terms\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#main\">Back to top \u2191</a>",
"target": [
"div > a[href$=\"#main\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#eeefe6",
"contrastRatio": 4.32,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer>",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"demo-note\">Kindred is a fictional concept website. Contact details, pet profiles, and community stories are illustrative. General guidance is not a diagnosis or a substitute for veterinary care.</p>",
"target": [
".demo-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.32 (foreground color: #63736b, background color: #eeefe6, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#63736b",
"bgColor": "#f1f1eb",
"contrastRatio": 4.41,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header>",
"target": [
"header"
]
},
{
"html": "<section class=\"block community\" id=\"community\" aria-labelledby=\"community-title\">",
"target": [
"#community"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #63736b, background color: #f1f1eb, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Good care. Great company.</small>",
"target": [
".header-inner > .brand[href=\"#\"][aria-label=\"Kindred home\"] > span > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #63736b, background color: #f1f1eb, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5803
},
{
"y": 576,
"height": 5803
},
{
"y": 1152,
"height": 5803
},
{
"y": 1728,
"height": 5803
},
{
"y": 2304,
"height": 5803
},
{
"y": 2880,
"height": 5803
},
{
"y": 3456,
"height": 5803
},
{
"y": 4032,
"height": 5803
},
{
"y": 4608,
"height": 5803
},
{
"y": 5083,
"height": 5803
}
],
"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: "Pet Care", "Events", "Community".
- **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: "Behavior Help", "Emergency Info", "Breed Guides".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "wellness exam", "preventive care", "rescue".
- **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", "Donate", "Make Appointment".
- **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: "appointment scheduler".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "rescue spotlights", "event calendar", "pet health tips".
- **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.