Anthropic Claude Opus 5.5 – Pets
via Azure · Generated
- AIMAC Debt 5.33
- Cost $0.55
- Total Violations 33
- HTML Size 63 KB
- Em Dashes 28
Screenshot
View Live Page
Accessibility Issues Found
33 Serious
-
color-contrast serious 33 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#donate" class="btn btn-primary">Donate</a>
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">
<title>Hearth & Paw — Every Animal Deserves a Place to Belong</title>
<meta name="description" content="Hearth & Paw is a community pet resource for adoption, veterinary care, training, enrichment and animal rescue. Find your match, get help fast, and support local shelters.">
<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=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--forest:#1f3d36;
--forest-2:#2c5249;
--terracotta:#d9693f;
--terracotta-dark:#b8532d;
--sand:#f4e9d8;
--cream:#fbf7f0;
--ink:#1d2321;
--muted:#5d6764;
--line:#e5dccd;
--white:#ffffff;
--alert:#c0392b;
--radius:18px;
--shadow:0 10px 30px rgba(31,61,54,.10);
--shadow-lg:0 20px 50px rgba(31,61,54,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.15;color:var(--forest)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:.6rem}
h3{font-size:1.3rem}
p{color:var(--muted)}
.container{width:min(1180px,92%);margin:0 auto}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.7rem}
.section{padding:96px 0}
.section-head{max-width:720px;margin-bottom:48px}
.section-head p{font-size:1.06rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:.97rem;transition:all .2s ease;font-family:inherit}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover{background:var(--terracotta-dark);transform:translateY(-2px)}
.btn-outline{border-color:var(--forest);color:var(--forest);background:transparent}
.btn-outline:hover{background:var(--forest);color:#fff}
.btn-light{background:#fff;color:var(--forest)}
.btn-light:hover{background:var(--sand)}
.btn-ghost-light{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--forest)}
/* Alert bar */
.alert-bar{background:var(--forest);color:#e9f1ee;font-size:.88rem;padding:.55rem 0}
.alert-bar .container{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.alert-bar strong{color:#ffd2bd}
.alert-bar a{color:#fff;font-weight:600}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff7a59;margin-right:.5rem;box-shadow:0 0 0 0 rgba(255,122,89,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,122,89,0)}100%{box-shadow:0 0 0 0 rgba(255,122,89,0)}}
/* Header */
header.site-header{position:sticky;top:0;z-index:50;background:rgba(251,247,240,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand img{width:52px;height:52px;border-radius:14px}
.brand-name{font-family:'Fraunces',serif;font-weight:700;font-size:1.45rem;color:var(--forest);line-height:1}
.brand-tag{font-size:.78rem;color:var(--muted);margin-top:4px}
nav.primary ul{display:flex;list-style:none;gap:1.6rem;align-items:center}
nav.primary a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink);position:relative;padding:4px 0}
nav.primary a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--terracotta);transition:width .2s}
nav.primary a:not(.btn):hover::after{width:100%}
nav.primary .btn{padding:.6rem 1.2rem;color:#fff}
.menu-toggle{display:none;background:none;border:2px solid var(--forest);border-radius:10px;padding:.45rem .7rem;font-weight:600;color:var(--forest);cursor:pointer}
/* Hero */
.hero{padding:72px 0 88px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:var(--sand);right:-180px;top:-160px;z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:1.2rem}
.hero h1 em{color:var(--terracotta);font-style:italic}
.hero p.lead{font-size:1.15rem;margin-bottom:1rem;max-width:560px}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0 2.4rem}
.stats{display:flex;gap:2.4rem;flex-wrap:wrap}
.stat strong{display:block;font-family:'Fraunces',serif;font-size:2rem;color:var(--forest)}
.stat span{font-size:.88rem;color:var(--muted)}
.hero-visual{position:relative}
.hero-visual .main-img{border-radius:28px;box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/5;object-fit:cover}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;font-size:.88rem}
.float-card img{width:44px;height:44px;border-radius:50%}
.float-card b{display:block;color:var(--forest)}
.float-1{left:-36px;bottom:60px}
.float-2{right:-20px;top:40px}
.badge-dot{width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center;font-size:1.3rem}
/* Services strip */
.services{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.service{padding:34px 28px;border-right:1px solid var(--line);text-decoration:none;transition:background .2s}
.service:last-child{border-right:none}
.service:hover{background:var(--cream)}
.service .icon{font-size:1.7rem;margin-bottom:.7rem}
.service h3{font-size:1.15rem;margin-bottom:.4rem}
.service p{font-size:.92rem}
.service .more{display:inline-block;margin-top:.8rem;font-weight:600;color:var(--terracotta);font-size:.9rem}
/* Emergency */
.emergency{background:linear-gradient(135deg,#2a1714 0%,#4a231b 100%);color:#fbe9e2}
.emergency h2{color:#fff}
.emergency p{color:#f1d5ca}
.emergency .eyebrow{color:#ffb79c}
.emergency-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.signs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.sign{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;font-size:.93rem}
.sign strong{color:#fff;display:block;margin-bottom:2px}
.hotline-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg)}
.hotline-card h3{margin-bottom:.4rem}
.hotline-card p{color:var(--muted)}
.hotline-number{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--alert);font-weight:700;margin:.6rem 0;display:block;text-decoration:none}
.hotline-list{list-style:none;margin:1.2rem 0 1.6rem;border-top:1px solid var(--line)}
.hotline-list li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.hotline-list span:last-child{font-weight:600;color:var(--forest);white-space:nowrap}
.emergency .btn-row{display:flex;gap:.8rem;flex-wrap:wrap}
/* Available pets */
.filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:32px}
.filter-btn{border:1.5px solid var(--line);background:#fff;padding:.55rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink);font-family:inherit}
.filter-btn.active,.filter-btn:hover{background:var(--forest);border-color:var(--forest);color:#fff}
.pets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pet-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s, box-shadow .25s;display:flex;flex-direction:column}
.pet-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pet-card .photo{position:relative}
.pet-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.tag{position:absolute;top:12px;left:12px;background:#fff;color:var(--forest);font-size:.75rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
.tag.urgent{background:var(--terracotta);color:#fff}
.pet-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.pet-body h3{font-size:1.25rem}
.pet-meta{font-size:.84rem;color:var(--muted);margin:.2rem 0 .7rem}
.pet-body p{font-size:.9rem;flex:1}
.traits{display:flex;flex-wrap:wrap;gap:6px;margin:.8rem 0 1rem}
.traits span{background:var(--sand);font-size:.74rem;padding:.25rem .6rem;border-radius:999px;color:var(--forest);font-weight:600}
.pet-body .btn{justify-content:center;padding:.7rem 1rem;font-size:.9rem}
.pets-footer{display:flex;justify-content:space-between;align-items:center;margin-top:40px;gap:1rem;flex-wrap:wrap;background:var(--sand);padding:24px 28px;border-radius:var(--radius)}
.pets-footer p{color:var(--forest);font-weight:500;max-width:640px}
/* Quiz */
.quiz-section{background:var(--forest);color:#e8f0ed;position:relative;overflow:hidden}
.quiz-section h2{color:#fff}
.quiz-section p{color:#c9dad4}
.quiz-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.quiz-points{list-style:none;margin-top:24px}
.quiz-points li{padding:.55rem 0 .55rem 2rem;position:relative;color:#dbe7e3}
.quiz-points li::before{content:"✓";position:absolute;left:0;top:.5rem;width:22px;height:22px;border-radius:50%;background:var(--terracotta);color:#fff;font-size:.75rem;display:grid;place-items:center;font-weight:700}
.quiz-card{background:#fff;color:var(--ink);border-radius:24px;padding:36px;box-shadow:var(--shadow-lg);min-height:440px}
.progress{height:8px;background:var(--sand);border-radius:999px;overflow:hidden;margin-bottom:10px}
.progress-fill{height:100%;background:var(--terracotta);width:0;transition:width .35s}
.q-count{font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:18px}
.q-title{font-size:1.45rem;margin-bottom:22px}
.options{display:grid;gap:12px}
.option{text-align:left;border:1.5px solid var(--line);background:var(--cream);border-radius:14px;padding:14px 18px;font-size:.97rem;cursor:pointer;font-family:inherit;color:var(--ink);transition:all .15s}
.option:hover{border-color:var(--terracotta);background:#fff}
.option small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.quiz-nav{display:flex;justify-content:space-between;margin-top:22px}
.link-btn{background:none;border:none;color:var(--muted);font-weight:600;cursor:pointer;font-family:inherit;font-size:.9rem}
.link-btn:disabled{opacity:.35;cursor:default}
.result{display:none}
.result.show{display:block;animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.result-head{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.result-head img{width:96px;height:96px;border-radius:18px;object-fit:cover}
.result-head .eyebrow{margin-bottom:.2rem}
.result ul{margin:.8rem 0 1.4rem 1.1rem;color:var(--muted);font-size:.93rem}
.result .btn-row{display:flex;gap:.8rem;flex-wrap:wrap}
/* Health */
.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.health-img{position:relative}
.health-img img{border-radius:24px;box-shadow:var(--shadow-lg);width:100%;aspect-ratio:5/4;object-fit:cover}
.health-img .stamp{position:absolute;bottom:-22px;right:24px;background:var(--terracotta);color:#fff;border-radius:16px;padding:16px 20px;font-weight:600;box-shadow:var(--shadow);font-size:.9rem}
.health-img .stamp strong{font-family:'Fraunces',serif;font-size:1.6rem;display:block}
.tabs{display:flex;gap:6px;background:var(--sand);padding:6px;border-radius:999px;width:fit-content;margin:24px 0 20px;flex-wrap:wrap}
.tab{border:none;background:transparent;padding:.55rem 1.1rem;border-radius:999px;font-weight:600;cursor:pointer;color:var(--forest);font-family:inherit;font-size:.9rem}
.tab.active{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .3s ease}
.schedule{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:.92rem;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.schedule th{background:var(--forest);color:#fff;text-align:left;padding:.7rem 1rem;font-weight:600}
.schedule td{padding:.7rem 1rem;border-bottom:1px solid var(--line);color:var(--muted)}
.schedule tr:last-child td{border-bottom:none}
.health-ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:24px}
.care-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:80px}
.care-card{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid var(--line)}
.care-card .num{font-family:'Fraunces',serif;color:var(--terracotta);font-size:1.1rem;font-weight:700}
.care-card h3{margin:.4rem 0 .5rem}
.care-card p{font-size:.93rem}
/* Training + sidebar */
.training{background:#fff}
.training-layout{display:grid;grid-template-columns:1fr 340px;gap:48px}
.articles{display:grid;gap:28px}
.article{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line)}
.article:last-child{border-bottom:none}
.article img{border-radius:16px;width:100%;aspect-ratio:4/3;object-fit:cover}
.article .meta{font-size:.8rem;color:var(--terracotta);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.article h3{margin:.35rem 0 .5rem;font-size:1.35rem}
.article p{font-size:.95rem;margin-bottom:.6rem}
.article a.read{font-weight:600;color:var(--forest);font-size:.92rem}
aside.sidebar{display:flex;flex-direction:column;gap:24px}
.widget{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.widget h4{font-size:1.15rem;margin-bottom:.8rem}
.widget p{font-size:.9rem}
.spotlight img{border-radius:12px;margin-bottom:14px;width:100%;aspect-ratio:16/10;object-fit:cover}
.tip-box{background:var(--forest);border:none}
.tip-box h4,.tip-box p{color:#fff}
.tip-box p{color:#cfe0da}
.tip-box .tip-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffb79c}
.class-list{list-style:none}
.class-list li{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px dashed var(--line);font-size:.9rem;gap:.8rem}
.class-list li:last-child{border-bottom:none}
.class-list b{color:var(--forest)}
.class-list span{color:var(--muted);white-space:nowrap}
/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.stars{color:#e8a33d;letter-spacing:2px;margin-bottom:12px}
.testi blockquote{color:var(--ink);font-size:1rem;flex:1;margin-bottom:22px}
.testi .who{display:flex;gap:12px;align-items:center}
.testi .who img{width:48px;height:48px;border-radius:50%}
.testi .who b{display:block;color:var(--forest)}
.testi .who span{font-size:.85rem;color:var(--muted)}
/* FAQ */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;color:var(--forest);display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--terracotta);transition:transform .2s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details .answer{padding:0 24px 22px}
details .answer p{font-size:.95rem}
.faq-contact{background:var(--sand);border-radius:var(--radius);padding:26px;margin-top:24px}
.faq-contact h4{margin-bottom:.4rem}
/* Donate band */
.donate{background:var(--terracotta);color:#fff;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.donate::after{content:"🐾";position:absolute;right:-20px;bottom:-40px;font-size:13rem;opacity:.12}
.donate h2{color:#fff}
.donate p{color:#ffe7dc}
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;position:relative;z-index:1}
.amount{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.5);color:#fff;border-radius:12px;padding:.85rem;font-weight:700;cursor:pointer;font-family:inherit;font-size:1rem}
.amount.active,.amount:hover{background:#fff;color:var(--terracotta-dark)}
.impact{font-size:.9rem;min-height:2.6em;margin-bottom:14px;position:relative;z-index:1}
.donate .btn{position:relative;z-index:1;width:100%;justify-content:center}
/* Newsletter */
.newsletter{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding:48px 0}
.newsletter form{display:flex;gap:10px;flex:1;max-width:480px}
.newsletter input{flex:1;padding:.9rem 1.2rem;border-radius:999px;border:1.5px solid var(--line);font-size:.95rem;font-family:inherit;background:#fff}
.newsletter input:focus{outline:2px solid var(--terracotta);border-color:transparent}
.form-msg{font-size:.88rem;color:var(--forest);margin-top:8px;font-weight:600}
/* Footer */
footer{background:#14282a;color:#b9c9c4;padding:72px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px}
footer h4{color:#fff;font-size:1.05rem;margin-bottom:1rem}
footer p{color:#9fb3ad;font-size:.92rem}
footer ul{list-style:none}
footer li{margin-bottom:.55rem;font-size:.92rem}
footer a{text-decoration:none;color:#b9c9c4}
footer a:hover{color:#fff}
.footer-brand{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.footer-brand img{width:46px;height:46px;border-radius:12px}
.footer-brand span{font-family:'Fraunces',serif;font-size:1.35rem;color:#fff;font-weight:700}
.socials{display:flex;gap:10px;margin-top:1.2rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid #2e4a47;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.socials a:hover{background:var(--terracotta);border-color:var(--terracotta)}
.footer-bottom{border-top:1px solid #2a4240;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem}
.footer-bottom nav a{margin-left:1.2rem}
/* Responsive */
@media (max-width:1060px){
.pets-grid{grid-template-columns:repeat(2,1fr)}
.service-grid{grid-template-columns:repeat(2,1fr)}
.service:nth-child(2){border-right:none}
.service:nth-child(-n+2){border-bottom:1px solid var(--line)}
.training-layout{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.menu-toggle{display:block}
nav.primary{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);display:none;padding:16px 4%}
nav.primary.open{display:block}
nav.primary ul{flex-direction:column;align-items:flex-start;gap:.9rem}
.hero-grid,.emergency-grid,.quiz-grid,.health-grid,.faq-wrap,.donate{grid-template-columns:1fr}
.float-1{left:10px}.float-2{right:10px}
.care-cards,.testi-grid{grid-template-columns:1fr}
.article{grid-template-columns:1fr}
.donate{padding:36px}
.brand-tag{display:none}
}
@media (max-width:560px){
.section{padding:68px 0}
.pets-grid,.signs,.service-grid{grid-template-columns:1fr}
.service{border-right:none;border-bottom:1px solid var(--line)}
.footer-grid{grid-template-columns:1fr}
.newsletter form{flex-direction:column}
.quiz-card{padding:24px}
.alert-bar .hide-sm{display:none}
}
</style>
</head>
<body>
<!-- Emergency alert bar -->
<div class="alert-bar" role="region" aria-label="Emergency information">
<div class="container">
<span><span class="pulse" aria-hidden="true"></span><strong>Pet emergency?</strong> Our 24/7 triage line is staffed by licensed vet techs: <a href="tel:+18005550199">1-800-555-0199</a></span>
<span class="hide-sm">Lost or found pet? <a href="#find-help">Report it here →</a></span>
</div>
</div>
<!-- Header -->
<header class="site-header">
<div class="container header-inner">
<a href="#" class="brand" aria-label="Hearth & Paw home">
<img src="https://placehold.co/104x104/1f3d36/fbf7f0?text=H%26P&font=playfair+display" alt="Hearth & Paw logo">
<div>
<div class="brand-name">Hearth & Paw</div>
<div class="brand-tag">Every animal deserves a place to belong.</div>
</div>
</a>
<button class="menu-toggle" aria-expanded="false" aria-controls="primary-nav">Menu</button>
<nav class="primary" id="primary-nav" aria-label="Primary">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#adopt">Adopt</a></li>
<li><a href="#health">Pet Health</a></li>
<li><a href="#training">Training</a></li>
<li><a href="#find-help">Find Help</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#donate" class="btn btn-primary">Donate</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero" id="about">
<div class="container hero-grid">
<div>
<span class="eyebrow">Rescue · Adoption · Care · Community</span>
<h1>Helping pets and people find <em>home</em> — and thrive there.</h1>
<p class="lead">Hearth & Paw is a nonprofit pet resource network connecting 42 partner shelters, foster homes, and veterinary clinics across the Cascade region. Whether you're ready to adopt, need urgent help, or simply want to give your companion a happier, healthier life, you're in the right place.</p>
<p>Since 2014 we've combined rescue work with practical, vet-reviewed guidance on preventive care, positive-reinforcement training, and enrichment — because adoption is only the beginning of the story.</p>
<div class="hero-ctas">
<a href="#adopt" class="btn btn-primary">Meet Adoptable Pets →</a>
<a href="#quiz" class="btn btn-outline">Take the Match Quiz</a>
</div>
<div class="stats">
<div class="stat"><strong>18,400+</strong><span>Pets placed in loving homes</span></div>
<div class="stat"><strong>96%</strong><span>Adoptions still together at 1 year</span></div>
<div class="stat"><strong>1,250</strong><span>Active foster volunteers</span></div>
</div>
</div>
<div class="hero-visual">
<img class="main-img" src="https://picsum.photos/640/800" alt="A happy adopted dog relaxing at home with its family">
<div class="float-card float-1">
<img src="https://i.pravatar.cc/88?u=hp-adopter-maya" alt="">
<div><b>Maya adopted Juniper 🐶</b>Just now · Portland Shelter</div>
</div>
<div class="float-card float-2">
<div class="badge-dot" aria-hidden="true">🩺</div>
<div><b>Low-cost vaccine clinic</b>Saturday · 9am–1pm</div>
</div>
</div>
</div>
</section>
<!-- Services strip -->
<section class="services" aria-label="What we offer">
<div class="container service-grid">
<a href="#adopt" class="service">
<div class="icon" aria-hidden="true">🏡</div>
<h3>Adopt & Foster</h3>
<p>Browse 600+ dogs, cats, and small animals from vetted rescue partners, all spayed/neutered and microchipped.</p>
<span class="more">Browse pets →</span>
</a>
<a href="#health" class="service">
<div class="icon" aria-hidden="true">🩺</div>
<h3>Veterinary Resources</h3>
<p>Preventive care schedules, sliding-scale clinics, and vet-reviewed answers to common health questions.</p>
<span class="more">Explore pet health →</span>
</a>
<a href="#training" class="service">
<div class="icon" aria-hidden="true">🎾</div>
<h3>Training & Enrichment</h3>
<p>Force-free classes, behavior support, and enrichment ideas that help new pets decompress and settle in.</p>
<span class="more">Start training →</span>
</a>
<a href="#find-help" class="service">
<div class="icon" aria-hidden="true">🆘</div>
<h3>Find Help</h3>
<p>Emergency vet locators, pet food banks, rehoming support, and lost-and-found reporting — all in one place.</p>
<span class="more">Get support →</span>
</a>
</div>
</section>
<!-- Emergency Info -->
<section class="section emergency" id="find-help">
<div class="container emergency-grid">
<div>
<span class="eyebrow">Emergency Info</span>
<h2>When minutes matter, know the warning signs.</h2>
<p>Many pet emergencies don't look dramatic at first. Pets instinctively hide pain, so subtle changes in breathing, posture, or behavior can be the earliest signs that something is seriously wrong. If you notice any of the symptoms below, call your veterinarian or the nearest 24-hour emergency hospital right away — don't wait to see if it passes.</p>
<div class="signs">
<div class="sign"><strong>Labored breathing</strong>Open-mouth breathing in cats, gums turning pale or blue, or persistent coughing.</div>
<div class="sign"><strong>Bloated abdomen</strong>A swollen, tight belly with unproductive retching can signal GDV (bloat) in dogs.</div>
<div class="sign"><strong>Suspected toxin</strong>Chocolate, xylitol, grapes, lilies, rodenticide, or human medications.</div>
<div class="sign"><strong>Straining to urinate</strong>Especially in male cats — a urinary blockage can become fatal within 24–48 hours.</div>
<div class="sign"><strong>Seizures or collapse</strong>Any seizure lasting over 3 minutes or multiple seizures in a day.</div>
<div class="sign"><strong>Trauma or heatstroke</strong>Hit by a car, falls, bite wounds, or excessive panting and drooling on hot days.</div>
</div>
<p>Stay calm, keep your pet warm and still, and transport them carefully. Never induce vomiting unless instructed by a veterinary professional or poison control specialist.</p>
</div>
<div class="hotline-card">
<h3>24/7 Help Directory</h3>
<p>Our triage line can help you decide whether to rush in, and will route you to the closest open ER clinic.</p>
<a href="tel:+18005550199" class="hotline-number">1-800-555-0199</a>
<ul class="hotline-list">
<li><span>Cascade Animal ER — Northside</span><span>Open 24 hrs</span></li>
<li><span>Riverbend Veterinary Specialists</span><span>Open 24 hrs</span></li>
<li><span>Animal Poison Control Partner Line</span><span>(888) 555-0147</span></li>
<li><span>Pet Food Bank (Tue & Sat)</span><span>214 Alder St.</span></li>
<li><span>Lost & Found Pet Registry</span><span>Online 24/7</span></li>
</ul>
<div class="btn-row">
<a href="tel:+18005550199" class="btn btn-primary">Call Triage Line</a>
<a href="#" class="btn btn-outline">Report Lost Pet</a>
</div>
</div>
</div>
</section>
<!-- Available Pets -->
<section class="section" id="adopt">
<div class="container">
<div class="section-head">
<span class="eyebrow">Available Pets</span>
<h2>Ready for their second chapter.</h2>
<p>Every animal listed here has received a full veterinary exam, age-appropriate vaccinations, a microchip, and spay/neuter surgery. Our foster families write each profile from real life at home, so you'll know who's a couch potato, who loves car rides, and who needs a patient, quiet household to blossom.</p>
</div>
<div class="filter-bar" role="group" aria-label="Filter pets">
<button class="filter-btn active" data-filter="all">All Pets</button>
<button class="filter-btn" data-filter="dog">Dogs</button>
<button class="filter-btn" data-filter="cat">Cats</button>
<button class="filter-btn" data-filter="small">Small Animals</button>
<button class="filter-btn" data-filter="senior">Seniors</button>
</div>
<div class="pets-grid">
<article class="pet-card" data-type="dog">
<div class="photo"><img src="https://picsum.photos/500/500" alt="Biscuit, a Labrador mix" loading="lazy"><span class="tag">Dog</span></div>
<div class="pet-body">
<h3>Biscuit</h3>
<div class="pet-meta">Labrador mix · 2 yrs · 58 lbs · Male</div>
<p>A goofy, people-loving retriever who has mastered "sit" and "wait" and is working on loose-leash walking. Thrives with daily hikes.</p>
<div class="traits"><span>Good with kids</span><span>High energy</span></div>
<a href="#" class="btn btn-outline">Meet Biscuit</a>
</div>
</article>
<article class="pet-card" data-type="cat">
<div class="photo"><img src="https://picsum.photos/501/501" alt="Clementine, an orange tabby cat" loading="lazy"><span class="tag">Cat</span></div>
<div class="pet-body">
<h3>Clementine</h3>
<div class="pet-meta">Domestic shorthair · 1 yr · Female</div>
<p>A chatty orange tabby who greets you at the door and adores feather wands. Litter-trained and fine with respectful cats.</p>
<div class="traits"><span>Apartment-friendly</span><span>Playful</span></div>
<a href="#" class="btn btn-outline">Meet Clementine</a>
</div>
</article>
<article class="pet-card" data-type="dog senior">
<div class="photo"><img src="https://picsum.photos/502/502" alt="Walter, a senior beagle" loading="lazy"><span class="tag urgent">Senior · Fee waived</span></div>
<div class="pet-body">
<h3>Walter</h3>
<div class="pet-meta">Beagle · 10 yrs · 27 lbs · Male</div>
<p>A gentle gentleman with a soulful howl. Walter's family moved overseas; he's house-trained and happiest napping in a sunbeam.</p>
<div class="traits"><span>Low energy</span><span>Cat-friendly</span></div>
<a href="#" class="btn btn-outline">Meet Walter</a>
</div>
</article>
<article class="pet-card" data-type="small">
<div class="photo"><img src="https://picsum.photos/503/503" alt="Pepper and Sage, a bonded pair of rabbits" loading="lazy"><span class="tag">Bonded pair</span></div>
<div class="pet-body">
<h3>Pepper & Sage</h3>
<div class="pet-meta">Holland Lop rabbits · 3 yrs · Females</div>
<p>Inseparable bunny sisters who love fresh greens and zooming through cardboard tunnels. Must be adopted together.</p>
<div class="traits"><span>Quiet home</span><span>Litter-trained</span></div>
<a href="#" class="btn btn-outline">Meet the Pair</a>
</div>
</article>
<article class="pet-card" data-type="cat senior">
<div class="photo"><img src="https://picsum.photos/504/504" alt="Duchess, a senior long-haired cat" loading="lazy"><span class="tag urgent">Senior</span></div>
<div class="pet-body">
<h3>Duchess</h3>
<div class="pet-meta">Maine Coon mix · 12 yrs · Female</div>
<p>Regal, affectionate, and fond of lap time. Duchess has managed hyperthyroidism (one daily pill in a treat) and a big purr.</p>
<div class="traits"><span>Lap cat</span><span>Calm</span></div>
<a href="#" class="btn btn-outline">Meet Duchess</a>
</div>
</article>
<article class="pet-card" data-type="dog">
<div class="photo"><img src="https://picsum.photos/505/505" alt="Luna, a shepherd mix" loading="lazy"><span class="tag">Dog</span></div>
<div class="pet-body">
<h3>Luna</h3>
<div class="pet-meta">Shepherd mix · 4 yrs · 62 lbs · Female</div>
<p>Smart and a little shy at first, Luna blooms with routine and puzzle toys. Best as the only dog in an adult home.</p>
<div class="traits"><span>Experienced owner</span><span>Loyal</span></div>
<a href="#" class="btn btn-outline">Meet Luna</a>
</div>
</article>
<article class="pet-card" data-type="cat">
<div class="photo"><img src="https://picsum.photos/506/506" alt="Miso, a black kitten" loading="lazy"><span class="tag">Kitten</span></div>
<div class="pet-body">
<h3>Miso</h3>
<div class="pet-meta">Domestic shorthair · 4 mos · Male</div>
<p>A tiny panther with a big curiosity. Raised in foster alongside dogs and toddlers, so very little fazes him.</p>
<div class="traits"><span>Dog-friendly</span><span>Kid-friendly</span></div>
<a href="#" class="btn btn-outline">Meet Miso</a>
</div>
</article>
<article class="pet-card" data-type="small">
<div class="photo"><img src="https://picsum.photos/507/507" alt="Nugget, a guinea pig" loading="lazy"><span class="tag">Small animal</span></div>
<div class="pet-body">
<h3>Nugget</h3>
<div class="pet-meta">Guinea pig · 1.5 yrs · Male</div>
<p>Wheeks enthusiastically at the sound of a fridge door. Seeking a home with another neutered male or a willing companion.</p>
<div class="traits"><span>Social</span><span>Beginner-friendly</span></div>
<a href="#" class="btn btn-outline">Meet Nugget</a>
</div>
</article>
</div>
<div class="pets-footer">
<p>Adoption fees ($35–$250) cover vaccines, microchipping, and spay/neuter surgery. Every adopter receives a free post-adoption wellness exam and 30 days of pet insurance.</p>
<a href="#" class="btn btn-primary">Contact Shelter</a>
</div>
</div>
</section>
<!-- Compatibility Quiz -->
<section class="section quiz-section" id="quiz">
<div class="container quiz-grid">
<div>
<span class="eyebrow">Pet Compatibility Quiz</span>
<h2>Find the companion who fits your real life.</h2>
<p>Most returned adoptions aren't about bad pets — they're about mismatched expectations. Our two-minute quiz, built with certified behavior consultants, looks at your schedule, space, activity level, and household to suggest the kind of animal most likely to thrive with you.</p>
<ul class="quiz-points">
<li>Five honest questions, no sign-up required</li>
<li>Personalized match with care tips and next steps</li>
<li>Shared with our adoption counselors only if you choose</li>
</ul>
</div>
<div class="quiz-card" aria-live="polite">
<div id="quiz-body">
<div class="progress"><div class="progress-fill" id="progress"></div></div>
<div class="q-count" id="q-count">Question 1 of 5</div>
<h3 class="q-title" id="q-title"></h3>
<div class="options" id="options"></div>
<div class="quiz-nav">
<button class="link-btn" id="back-btn" disabled>← Back</button>
<button class="link-btn" id="restart-btn-inline">Start over</button>
</div>
</div>
<div class="result" id="result">
<div class="result-head">
<img id="r-img" src="https://picsum.photos/192/192" alt="">
<div>
<span class="eyebrow">Your best match</span>
<h3 id="r-title"></h3>
</div>
</div>
<p id="r-desc"></p>
<ul id="r-tips"></ul>
<div class="btn-row">
<a href="#adopt" class="btn btn-primary" id="r-cta">See Matching Pets</a>
<button class="btn btn-outline" id="restart-btn">Retake Quiz</button>
</div>
</div>
</div>
</div>
</section>
<!-- Pet Health -->
<section class="section" id="health">
<div class="container">
<div class="health-grid">
<div class="health-img">
<img src="https://picsum.photos/700/560" alt="A veterinarian performing a wellness exam on a dog" loading="lazy">
<div class="stamp"><strong>$45</strong>Wellness exams at partner clinics</div>
</div>
<div>
<span class="eyebrow">Pet Health & Preventive Care</span>
<h2>Prevention is the kindest medicine.</h2>
<p>Annual wellness exams catch dental disease, heart murmurs, kidney changes, and early arthritis long before they become painful — or expensive. Our veterinary advisory board reviews every guide we publish, so you can trust that the advice is current, evidence-based, and practical.</p>
<div class="tabs" role="tablist">
<button class="tab active" role="tab" data-tab="puppy">Puppies & Kittens</button>
<button class="tab" role="tab" data-tab="adult">Adults</button>
<button class="tab" role="tab" data-tab="senior-care">Seniors</button>
</div>
<div class="tab-panel active" id="puppy" role="tabpanel">
<table class="schedule">
<tr><th>Age</th><th>Recommended care</th></tr>
<tr><td>6–8 weeks</td><td>First core vaccines (DHPP / FVRCP), deworming, exam</td></tr>
<tr><td>10–12 weeks</td><td>Booster vaccines, start flea, tick & heartworm prevention</td></tr>
<tr><td>14–16 weeks</td><td>Final boosters, rabies vaccine, microchip check</td></tr>
<tr><td>5–6 months</td><td>Spay/neuter consult, dental check, socialization review</td></tr>
</table>
</div>
<div class="tab-panel" id="adult" role="tabpanel">
<table class="schedule">
<tr><th>Frequency</th><th>Recommended care</th></tr>
<tr><td>Monthly</td><td>Parasite prevention, weight & body-condition check at home</td></tr>
<tr><td>Every year</td><td>Wellness exam, fecal test, heartworm test, core boosters</td></tr>
<tr><td>Every 1–3 yrs</td><td>Rabies booster per local law, professional dental cleaning</td></tr>
<tr><td>Daily</td><td>Toothbrushing, enrichment, and 30–60 min of activity</td></tr>
</table>
</div>
<div class="tab-panel" id="senior-care" role="tabpanel">
<table class="schedule">
<tr><th>Frequency</th><th>Recommended care</th></tr>
<tr><td>Every 6 months</td><td>Wellness exam, bloodwork, urinalysis, blood pressure</td></tr>
<tr><td>Yearly</td><td>Thyroid & kidney screening, dental assessment</td></tr>
<tr><td>Ongoing</td><td>Joint support, mobility aids, non-slip flooring</td></tr>
<tr><td>As needed</td><td>Cognitive health check, pain management review</td></tr>
</table>
</div>
<div class="health-ctas">
<a href="#" class="btn btn-primary">Schedule Vet Visit</a>
<a href="#" class="btn btn-outline">Find Low-Cost Clinics</a>
</div>
</div>
</div>
<div class="care-cards">
<div class="care-card">
<span class="num">01</span>
<h3>Dental health</h3>
<p>By age three, roughly 80% of dogs and 70% of cats show signs of periodontal disease. Daily brushing with pet-safe toothpaste and VOHC-approved chews dramatically reduce tartar and painful extractions later in life.</p>
</div>
<div class="care-card">
<span class="num">02</span>
<h3>Healthy weight</h3>
<p>Over half of pets in North America are overweight, shortening lifespans by up to two years. Learn to body-condition score at home, measure meals with a scale, and count treats toward the daily 10% calorie budget.</p>
</div>
<div class="care-card">
<span class="num">03</span>
<h3>Parasite prevention</h3>
<p>Fleas, ticks, and heartworm don't take the winter off in our mild climate. Year-round prevention is far cheaper and safer than treatment — ask your vet which product suits your pet's lifestyle and risk.</p>
</div>
</div>
</div>
</section>
<!-- Training & Enrichment with Sidebar -->
<section class="section training" id="training">
<div class="container">
<div class="section-head">
<span class="eyebrow">Training & Enrichment</span>
<h2>Happier pets through understanding.</h2>
<p>We teach only force-free, positive-reinforcement methods endorsed by the AVSAB. Rewarding the behaviors you love builds trust, reduces stress, and creates a pet who <em>wants</em> to work with you — not one who's afraid of getting it wrong.</p>
</div>
<div class="training-layout">
<div class="articles">
<article class="article">
<img src="https://picsum.photos/520/390" alt="A newly adopted dog resting in a crate" loading="lazy">
<div>
<span class="meta">New Adopters · 6 min read</span>
<h3>The 3-3-3 rule: your rescue's first three months</h3>
<p>Three days to decompress, three weeks to learn your routine, three months to truly feel at home. Here's how to set up a calm "landing zone," keep the first weeks low-key, and recognize signs of stress like lip-licking, whale eye, and pacing.</p>
<p>Patience in this window prevents most of the behavior issues that lead to returns — and lays the groundwork for a lifetime of trust.</p>
<a href="#" class="read">Read the guide →</a>
</div>
</article>
<article class="article">
<img src="https://picsum.photos/521/391" alt="A cat playing with a puzzle feeder" loading="lazy">
<div>
<span class="meta">Enrichment · 5 min read</span>
<h3>15 DIY enrichment ideas for indoor cats</h3>
<p>Indoor cats live longer, but they need outlets for hunting, climbing, and exploring. From muffin-tin puzzle feeders to scent trails and window "cat TV," these low-cost ideas tap into natural instincts and curb boredom-related behaviors like over-grooming and nighttime zoomies.</p>
<a href="#" class="read">Get the ideas →</a>
</div>
</article>
<article class="article">
<img src="https://picsum.photos/522/392" alt="A dog practicing loose leash walking" loading="lazy">
<div>
<span class="meta">Dog Training · 8 min read</span>
<h3>Leash reactivity: why it happens and how to help</h3>
<p>Lunging and barking on leash is usually rooted in fear or frustration, not aggression. Learn how to identify your dog's threshold, use counter-conditioning and the "engage-disengage" game, and plan walks that build confidence instead of stress.</p>
<a href="#" class="read">Read more →</a>
</div>
</article>
</div>
<aside class="sidebar" aria-label="Training sidebar">
<div class="widget spotlight">
<h4>🌟 Rescue Spotlight</h4>
<img src="https://picsum.photos/600/375" alt="Volunteers at Second Chance Farm Sanctuary" loading="lazy">
<p><strong>Second Chance Farm Sanctuary</strong> took in 31 animals from a hoarding case last month. Their volunteer team needs fosters for bonded cat pairs and donations of straw and fleece blankets.</p>
<a href="#" class="btn btn-outline" style="margin-top:14px;padding:.6rem 1.1rem;font-size:.88rem">Support Them</a>
</div>
<div class="widget tip-box">
<span class="tip-label">Trainer's tip of the week</span>
<h4>Make "come" the best word ever</h4>
<p>Never call your dog to end the fun or for something unpleasant like a bath. Pair recall with high-value rewards — real chicken, not kibble — and your dog will sprint to you every time.</p>
</div>
<div class="widget">
<h4>Upcoming Classes</h4>
<ul class="class-list">
<li><b>Puppy Kindergarten</b><span>Mon 6pm</span></li>
<li><b>Shy Dog Confidence</b><span>Wed 7pm</span></li>
<li><b>Cat Clicker Basics</b><span>Thu 6:30pm</span></li>
<li><b>Canine Good Citizen</b><span>Sat 10am</span></li>
</ul>
<a href="#" class="btn btn-primary" style="margin-top:16px;width:100%;justify-content:center">Book a Class</a>
</div>
<div class="widget" id="shop">
<h4>🛍️ The Paw Shop</h4>
<p>Shop vet-approved puzzle feeders, harnesses, and enrichment kits. 100% of profits fund medical care for shelter animals.</p>
<a href="#" class="read" style="font-weight:600;color:var(--forest);display:inline-block;margin-top:10px">Shop enrichment kits →</a>
</div>
</aside>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section">
<div class="container">
<div class="section-head">
<span class="eyebrow">Adoption Stories</span>
<h2>Families made, one paw at a time.</h2>
<p>Our adopters, fosters, and volunteers are the heart of everything we do. Here's what some of them have to say about the journey.</p>
</div>
<div class="testi-grid">
<div class="testi">
<div class="stars" aria-label="5 stars">★★★★★</div>
<blockquote>"The compatibility quiz steered us away from the high-energy pup we thought we wanted and toward Rosie, a mellow seven-year-old. Two years later, she's perfect for our busy family. The counselors genuinely cared about getting it right."</blockquote>
<div class="who"><img src="https://i.pravatar.cc/96?u=hp-daniel" alt=""><div><b>Daniel & Priya R.</b><span>Adopted Rosie, 2023</span></div></div>
</div>
<div class="testi">
<div class="stars" aria-label="5 stars">★★★★★</div>
<blockquote>"I called the triage line at 2am when my cat was straining in the litter box. They told me to go to the ER immediately — it was a urinary blockage. That call saved Oliver's life, and I'll never stop being grateful."</blockquote>
<div class="who"><img src="https://i.pravatar.cc/96?u=hp-jasmine" alt=""><div><b>Jasmine T.</b><span>Cat parent, Riverbend</span></div></div>
</div>
<div class="testi">
<div class="stars" aria-label="5 stars">★★★★★</div>
<blockquote>"I've fostered 38 kittens through Hearth & Paw. They provide everything — food, litter, vet visits, and a 24/7 foster mentor. Fostering is the most rewarding thing I've ever done, and they make it easy to say yes."</blockquote>
<div class="who"><img src="https://i.pravatar.cc/96?u=hp-greg" alt=""><div><b>Greg M.</b><span>Foster volunteer since 2019</span></div></div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section" style="padding-top:0">
<div class="container faq-wrap">
<div>
<span class="eyebrow">FAQ</span>
<h2>Questions before you adopt?</h2>
<p>Bringing a pet home is a big, wonderful decision. These are the questions our adoption counselors hear most often — and if yours isn't here, we're happy to talk it through.</p>
<div class="faq-contact">
<h4>Talk to a counselor</h4>
<p>Mon–Sat, 9am–6pm · <a href="tel:+15035550182" style="color:var(--terracotta);font-weight:600">(503) 555-0182</a><br>or email <a href="mailto:adopt@hearthandpaw.org" style="color:var(--terracotta);font-weight:600">adopt@hearthandpaw.org</a></p>
</div>
</div>
<div>
<details open>
<summary>What does the adoption process look like?</summary>
<div class="answer"><p>Submit a short online application, then chat with an adoption counselor about your lifestyle and expectations. Next, you'll meet the pet at their shelter or foster home — we encourage bringing resident dogs for a supervised introduction. Most adoptions are finalized within 3–7 days.</p></div>
</details>
<details>
<summary>Do I need to own my home or have a fenced yard?</summary>
<div class="answer"><p>No. Renters are welcome to adopt — we simply ask for confirmation of your landlord's pet policy. A fenced yard is only required for a small number of dogs with specific needs, which is always noted on their profile.</p></div>
</details>
<details>
<summary>What if the adoption doesn't work out?</summary>
<div class="answer"><p>Our trainers offer free behavior support for the first 60 days, and most challenges can be resolved with guidance. If it truly isn't a fit, every animal adopted through our network can always return to us — we never want a pet surrendered to an unfamiliar shelter or left without a plan.</p></div>
</details>
<details>
<summary>How can I help if I'm not ready to adopt?</summary>
<div class="answer"><p>Fostering, volunteering at partner shelters, transporting animals, donating supplies, or sharing adoptable pets on social media all make a real difference. Even short-term "weekend fosters" give shelter dogs a vital break from kennel stress.</p></div>
</details>
<details>
<summary>Can you help me afford veterinary care?</summary>
<div class="answer"><p>Yes. Our Find Help directory lists sliding-scale clinics, and our Hearth Fund provides one-time grants of up to $500 toward urgent care for qualifying households. Apply online or ask our triage team when you call.</p></div>
</details>
</div>
</div>
</section>
<!-- Donate -->
<section class="container" id="donate" style="padding-bottom:40px">
<div class="donate">
<div style="position:relative;z-index:1">
<span class="eyebrow" style="color:#ffe1d3">Make a Difference Today</span>
<h2>Your gift funds the second chances.</h2>
<p>Hearth & Paw receives no government funding. Every surgery, transport, and foster supply kit is powered by people like you. Monthly donors — our "Hearthkeepers" — provide the steady support that lets us say yes to animals in crisis, including the medically complex cases other shelters can't take.</p>
<p style="margin-top:.8rem">Donations are tax-deductible. EIN 84-5550193.</p>
</div>
<div>
<div class="amounts" role="group" aria-label="Donation amount">
<button class="amount" data-amt="25">$25</button>
<button class="amount active" data-amt="75">$75</button>
<button class="amount" data-amt="250">$250</button>
</div>
<p class="impact" id="impact">$75 microchips, vaccinates, and deworms a rescued puppy.</p>
<a href="#" class="btn btn-light" id="donate-btn">Donate $75 →</a>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="container newsletter" aria-label="Newsletter signup">
<div>
<h3 style="font-size:1.6rem">The Weekly Wag</h3>
<p>New adoptable pets, seasonal health alerts, and training tips — every Thursday.</p>
</div>
<div style="flex:1;max-width:480px">
<form id="news-form">
<label for="email" class="sr-only" style="position:absolute;left:-9999px">Email address</label>
<input type="email" id="email" placeholder="you@example.com" required>
<button class="btn btn-primary" type="submit">Subscribe</button>
</form>
<div class="form-msg" id="form-msg" aria-live="polite"></div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-brand">
<img src="https://placehold.co/92x92/d9693f/ffffff?text=H%26P&font=playfair+display" alt="Hearth & Paw logo">
<span>Hearth & Paw</span>
</div>
<p>Every animal deserves a place to belong. We're a 501(c)(3) nonprofit uniting shelters, fosters, veterinarians, and pet lovers across the Cascade region.</p>
<div class="socials" aria-label="Social media">
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="Facebook">FB</a>
<a href="#" aria-label="TikTok">TT</a>
<a href="#" aria-label="YouTube">YT</a>
</div>
</div>
<div>
<h4>Get Involved</h4>
<ul>
<li><a href="#adopt">Adopt a Pet</a></li>
<li><a href="#">Become a Foster</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#donate">Donate</a></li>
<li><a href="#shop">Shop</a></li>
</ul>
</div>
<div>
<h4>Resources</h4>
<ul>
<li><a href="#find-help">Find Help</a></li>
<li><a href="#health">Pet Health Guides</a></li>
<li><a href="#training">Training Classes</a></li>
<li><a href="#">Lost & Found</a></li>
<li><a href="#">Rehoming Support</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li>1820 Willow Creek Road<br>Portland, OR 97214</li>
<li><a href="tel:+15035550182">(503) 555-0182</a></li>
<li><a href="mailto:hello@hearthandpaw.org">hello@hearthandpaw.org</a></li>
<li>Adoption Center: Tue–Sun, 11am–6pm</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2025</span> Hearth & Paw Animal Network. All rights reserved.</span>
<nav aria-label="Legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Accessibility</a>
</nav>
</div>
</div>
</footer>
<script>
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Mobile nav
const toggle = document.querySelector('.menu-toggle');
const nav = document.getElementById('primary-nav');
toggle.addEventListener('click', () => {
const open = nav.classList.toggle('open');
toggle.setAttribute('aria-expanded', open);
});
nav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
nav.classList.remove('open'); toggle.setAttribute('aria-expanded', false);
}));
// Pet filter
const filterBtns = document.querySelectorAll('.filter-btn');
const cards = document.querySelectorAll('.pet-card');
function applyFilter(f){
filterBtns.forEach(b => b.classList.toggle('active', b.dataset.filter === f));
cards.forEach(c => {
const types = c.dataset.type.split(' ');
c.style.display = (f === 'all' || types.includes(f)) ? '' : 'none';
});
}
filterBtns.forEach(btn => btn.addEventListener('click', () => applyFilter(btn.dataset.filter)));
// Health tabs
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
tab.classList.add('active');
document.getElementById(tab.dataset.tab).classList.add('active');
});
});
// Compatibility quiz
const questions = [
{ q: "How much time are you home on a typical weekday?",
o: [["Most of the day — I work from home", "", {active:2, calm:2}],
["Half the day, with a midday break", "", {calm:2, cat:1}],
["I'm out 8–10 hours", "Long workdays or commute", {cat:3, small:1}]] },
{ q: "What does your ideal weekend look like?",
o: [["Trail runs, hikes, or the dog park", "", {active:3}],
["A neighborhood stroll, then the couch", "", {calm:3}],
["Cozy at home with a book or a show", "", {cat:2, small:2}]] },
{ q: "What's your living space like?",
o: [["House with a yard", "", {active:2, calm:1}],
["Apartment or condo", "", {cat:2, calm:1, small:1}],
["Small studio or shared housing", "", {small:3, cat:1}]] },
{ q: "Who else shares your home?",
o: [["Young children", "", {calm:2, small:0, active:1}],
["Other pets", "", {cat:1, calm:1}],
["Just me or other adults", "", {active:1, cat:1, small:1}]] },
{ q: "How much experience do you have with pets?",
o: [["First-time pet parent", "", {cat:1, small:2, calm:1}],
["I've had pets before", "", {calm:1, cat:1, active:1}],
["Very experienced — bring on a challenge", "", {active:3}]] }
];
const results = {
active: { title: "An active, adventurous dog", img: "https://picsum.photos/193/193", filter: "dog",
desc: "You have the time, energy, and space for a dog who loves to move. Young retrievers, shepherd mixes, and herding breeds thrive with daily exercise plus mental work like nose games and training.",
tips: ["Plan 60–90 minutes of exercise and enrichment daily", "Enroll in a positive-reinforcement class in the first month", "Meet Biscuit or Luna — both crave an adventure buddy"] },
calm: { title: "A mellow adult or senior dog", img: "https://picsum.photos/194/194", filter: "senior",
desc: "Your lifestyle is a great fit for a dog past the puppy stage — already house-trained, happy with steady walks, and content to share the couch. Adult dogs also let you see their true personality from day one.",
tips: ["Look at dogs aged 4+; many are fee-waived", "Ask fosters about energy levels and alone-time comfort", "Walter the beagle might be your perfect couch companion"] },
cat: { title: "An independent, affectionate cat", img: "https://picsum.photos/195/195", filter: "cat",
desc: "A cat suits a busier schedule while still offering plenty of companionship. Adult cats are often the easiest match — their personalities are established, and many are lap-loving cuddle bugs.",
tips: ["Set up a quiet 'base camp' room for the first week", "Provide vertical space and daily interactive play", "Consider adopting two kittens together so they keep each other company"] },
small: { title: "A small companion animal", img: "https://picsum.photos/196/196", filter: "small",
desc: "Rabbits, guinea pigs, and other small animals are wonderful for smaller spaces and quieter homes. They're social, intelligent, and often overlooked in shelters.",
tips: ["Choose a spacious pen over a small cage", "Many small animals do best in bonded pairs", "Find an exotic-savvy vet before bringing them home"] }
};
let current = 0;
let answers = [];
const titleEl = document.getElementById('q-title');
const optsEl = document.getElementById('options');
const countEl = document.getElementById('q-count');
const progEl = document.getElementById('progress');
const backBtn = document.getElementById('back-btn');
const quizBody = document.getElementById('quiz-body');
const resultEl = document.getElementById('result');
function renderQ(){
const item = questions[current];
titleEl.textContent = item.q;
countEl.textContent = `Question ${current + 1} of ${questions.length}`;
progEl.style.width = `${(current / questions.length) * 100}%`;
backBtn.disabled = current === 0;
optsEl.innerHTML = '';
item.o.forEach((opt, i) => {
const b = document.createElement('button');
b.className = 'option';
b.innerHTML = opt[0] + (opt[1] ? `<small>${opt[1]}</small>` : '');
b.addEventListener('click', () => {
answers[current] = i;
if (current < questions.length - 1){ current++; renderQ(); }
else showResult();
});
optsEl.appendChild(b);
});
}
function showResult(){
progEl.style.width = '100%';
const score = {active:0, calm:0, cat:0, small:0};
answers.forEach((a, qi) => {
const pts = questions[qi].o[a][2];
for (const k in pts) score[k] += pts[k];
});
const best = Object.keys(score).reduce((a, b) => score[b] > score[a] ? b : a);
const r = results[best];
document.getElementById('r-title').textContent = r.title;
document.getElementById('r-desc').textContent = r.desc;
document.getElementById('r-img').src = r.img;
document.getElementById('r-tips').innerHTML = r.tips.map(t => `<li>${t}</li>`).join('');
document.getElementById('r-cta').onclick = () => applyFilter(r.filter);
quizBody.style.display = 'none';
resultEl.classList.add('show');
}
function restart(){
current = 0; answers = [];
resultEl.classList.remove('show');
quizBody.style.display = '';
renderQ();
}
backBtn.addEventListener('click', () => { if (current > 0){ current--; renderQ(); } });
document.getElementById('restart-btn').addEventListener('click', restart);
document.getElementById('restart-btn-inline').addEventListener('click', restart);
renderQ();
// Donation selector
const impacts = {
25: "$25 feeds a foster cat for a full month.",
75: "$75 microchips, vaccinates, and deworms a rescued puppy.",
250: "$250 covers a spay/neuter surgery and post-op care."
};
document.querySelectorAll('.amount').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.amount').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const amt = btn.dataset.amt;
document.getElementById('impact').textContent = impacts[amt];
document.getElementById('donate-btn').textContent = `Donate $${amt} →`;
});
});
// Newsletter
document.getElementById('news-form').addEventListener('submit', e => {
e.preventDefault();
document.getElementById('form-msg').textContent = "🐾 Thanks for subscribing! Check your inbox for a welcome treat.";
e.target.reset();
});
</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:51:51.828Z",
"url": "https://benchmark.aimac.invalid/369d3b202e32e007bd911d3eace2330e29d7bfb111de8c4ec66b6cf987c1bd92.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-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"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": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span class=\"pulse\" aria-hidden=\"true\"></span>",
"target": [
".pulse"
]
}
]
},
{
"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": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"tabs\" role=\"tablist\">",
"target": [
".tabs"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"tab active\" role=\"tab\" data-tab=\"puppy\">Puppies & Kittens</button>",
"target": [
"button[data-tab=\"puppy\"]"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"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": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"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": "<div class=\"alert-bar\" role=\"region\" aria-label=\"Emergency information\">",
"target": [
".alert-bar"
]
}
]
},
{
"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": "<a href=\"#\" class=\"btn btn-outline\" style=\"margin-top:14px;padding:.6rem 1.1rem;font-size:.88rem\">Support Them</a>",
"target": [
".spotlight > .btn-outline.btn[href=\"#\"]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"filter-btn active\" data-filter=\"all\">All Pets</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
]
},
{
"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>Helping pets and people find <em>home</em> \u2014 and thrive there.</h1>",
"target": [
"h1"
]
},
{
"html": "<h3>Adopt & Foster</h3>",
"target": [
".service[href$=\"#adopt\"] > h3"
]
},
{
"html": "<h3>Veterinary Resources</h3>",
"target": [
".service[href$=\"#health\"] > h3"
]
},
{
"html": "<h3>Training & Enrichment</h3>",
"target": [
".service[href$=\"#training\"] > h3"
]
},
{
"html": "<h3>Find Help</h3>",
"target": [
".service[href$=\"#find-help\"] > h3"
]
},
{
"html": "<h2>When minutes matter, know the warning signs.</h2>",
"target": [
".emergency-grid > div:nth-child(1) > h2"
]
},
{
"html": "<h3>24/7 Help Directory</h3>",
"target": [
".hotline-card > h3"
]
},
{
"html": "<h2>Ready for their second chapter.</h2>",
"target": [
"#adopt > .container > .section-head > h2"
]
},
{
"html": "<h3>Biscuit</h3>",
"target": [
".pet-card[data-type=\"dog\"]:nth-child(1) > .pet-body > h3"
]
},
{
"html": "<h3>Clementine</h3>",
"target": [
".pet-card[data-type=\"cat\"]:nth-child(2) > .pet-body > h3"
]
},
{
"html": "<h3>Walter</h3>",
"target": [
"article[data-type=\"dog senior\"] > .pet-body > h3"
]
},
{
"html": "<h3>Pepper & Sage</h3>",
"target": [
".pet-card[data-type=\"small\"]:nth-child(4) > .pet-body > h3"
]
},
{
"html": "<h3>Duchess</h3>",
"target": [
"article[data-type=\"cat senior\"] > .pet-body > h3"
]
},
{
"html": "<h3>Luna</h3>",
"target": [
".pet-card[data-type=\"dog\"]:nth-child(6) > .pet-body > h3"
]
},
{
"html": "<h3>Miso</h3>",
"target": [
".pet-card[data-type=\"cat\"]:nth-child(7) > .pet-body > h3"
]
},
{
"html": "<h3>Nugget</h3>",
"target": [
".pet-card[data-type=\"small\"]:nth-child(8) > .pet-body > h3"
]
},
{
"html": "<h2>Find the companion who fits your real life.</h2>",
"target": [
".quiz-grid > div:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"q-title\" id=\"q-title\">How much time are you home on a typical weekday?</h3>",
"target": [
"#q-title"
]
},
{
"html": "<h2>Prevention is the kindest medicine.</h2>",
"target": [
"div:nth-child(2) > h2"
]
},
{
"html": "<h3>Dental health</h3>",
"target": [
".care-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Healthy weight</h3>",
"target": [
".care-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Parasite prevention</h3>",
"target": [
".care-card:nth-child(3) > h3"
]
},
{
"html": "<h2>Happier pets through understanding.</h2>",
"target": [
"#training > .container > .section-head > h2"
]
},
{
"html": "<h3>The 3-3-3 rule: your rescue's first three months</h3>",
"target": [
".article:nth-child(1) > div > h3"
]
},
{
"html": "<h3>15 DIY enrichment ideas for indoor cats</h3>",
"target": [
".article:nth-child(2) > div > h3"
]
},
{
"html": "<h3>Leash reactivity: why it happens and how to help</h3>",
"target": [
".article:nth-child(3) > div > h3"
]
},
{
"html": "<h4>\ud83c\udf1f Rescue Spotlight</h4>",
"target": [
".spotlight > h4"
]
},
{
"html": "<h4>Make \"come\" the best word ever</h4>",
"target": [
".tip-box > h4"
]
},
{
"html": "<h4>Upcoming Classes</h4>",
"target": [
".widget:nth-child(3) > h4"
]
},
{
"html": "<h4>\ud83d\udecd\ufe0f The Paw Shop</h4>",
"target": [
"#shop > h4"
]
},
{
"html": "<h2>Families made, one paw at a time.</h2>",
"target": [
".section:nth-child(8) > .container > .section-head > h2"
]
},
{
"html": "<h2>Questions before you adopt?</h2>",
"target": [
".faq-wrap > div:nth-child(1) > h2"
]
},
{
"html": "<h4>Talk to a counselor</h4>",
"target": [
".faq-contact > h4"
]
},
{
"html": "<h2>Your gift funds the second chances.</h2>",
"target": [
".donate > div:nth-child(1) > h2"
]
},
{
"html": "<h3 style=\"font-size:1.6rem\">The Weekly Wag</h3>",
"target": [
".newsletter > div:nth-child(1) > h3"
]
},
{
"html": "<h4>Get Involved</h4>",
"target": [
".footer-grid > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
".footer-grid > div:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact</h4>",
"target": [
".footer-grid > div:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<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": "#e9f1ee",
"bgColor": "#1f3d36",
"contrastRatio": 10.27,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.27"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span><span class=\"pulse\" aria-hidden=\"true\"></span><strong>Pet emergency?</strong> Our 24/7 triage line is staffed by licensed vet techs: <a href=\"tel:+18005550199\">1-800-555-0199</a></span>",
"target": [
".container > span:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"primary\" id=\"primary-nav\" aria-label=\"Primary\">",
"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=\"email\" class=\"sr-only\" style=\"position:absolute;left:-9999px\">Email address</label>",
"target": [
"label"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"email\" placeholder=\"you@example.com\" required=\"\">",
"target": [
"#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/104x104/1f3d36/fbf7f0?text=H%26P&font=playfair+display\" alt=\"Hearth & Paw logo\">",
"target": [
".brand > img[alt=\"Hearth & Paw 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": null,
"relatedNodes": [
{
"html": "<label for=\"email\" class=\"sr-only\" style=\"position:absolute;left:-9999px\">Email address</label>",
"target": [
"label"
]
}
],
"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=\"email\" placeholder=\"you@example.com\" required=\"\">",
"target": [
"#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-style",
"data": null,
"relatedNodes": [
{
"html": "<span><span class=\"pulse\" aria-hidden=\"true\"></span><strong>Pet emergency?</strong> Our 24/7 triage line is staffed by licensed vet techs: <a href=\"tel:+18005550199\">1-800-555-0199</a></span>",
"target": [
".container > span:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"tel:+18005550199\">1-800-555-0199</a>",
"target": [
"span:nth-child(1) > a[href=\"tel:+18005550199\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"tel:+18005550199\">1-800-555-0199</a>",
"target": [
"span:nth-child(1) > a[href=\"tel:+18005550199\"]"
]
}
]
},
{
"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>",
"target": [
"#primary-nav > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#about\">About</a></li>",
"target": [
"#primary-nav > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.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/104x104/1f3d36/fbf7f0?text=H%26P&font=playfair+display\" alt=\"Hearth & Paw logo\">",
"target": [
".brand > img[alt=\"Hearth & Paw 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>What does the adoption process look like?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 306.6,
"height": 52
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (306.6px by 52px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"Hearth & Paw home\">",
"target": [
".brand"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "td-headers-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The headers attribute is exclusively used to refer to other cells in the table"
}
],
"none": [],
"impact": null,
"html": "<table class=\"schedule\">",
"target": [
"#puppy > table"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "th-has-data-cells",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "All table header cells refer to data cells"
}
],
"none": [],
"impact": null,
"html": "<table class=\"schedule\">",
"target": [
"#puppy > table"
]
}
]
}
],
"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=\"5 stars\">\u2605\u2605\u2605\u2605\u2605</div>",
"target": [
".testi:nth-child(1) > .stars[aria-label=\"5 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": {
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": "pseudoContent",
"expectedContrastRatio": "4.5:1"
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Rescue \u00b7 Adoption \u00b7 Care \u00b7 Community</span>",
"target": [
".hero-grid > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#donate\" class=\"btn btn-primary\">Donate</a>",
"target": [
".btn-primary.btn[href$=\"#donate\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#donate\" class=\"btn btn-primary\">Donate</a>",
"target": [
".btn-primary.btn[href$=\"#donate\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"services\" aria-label=\"What we offer\">",
"target": [
".services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"more\">Browse pets \u2192</span>",
"target": [
".service[href$=\"#adopt\"] > .more"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"services\" aria-label=\"What we offer\">",
"target": [
".services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"more\">Explore pet health \u2192</span>",
"target": [
".service[href$=\"#health\"] > .more"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"services\" aria-label=\"What we offer\">",
"target": [
".services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"more\">Start training \u2192</span>",
"target": [
".service[href$=\"#training\"] > .more"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"services\" aria-label=\"What we offer\">",
"target": [
".services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"more\">Get support \u2192</span>",
"target": [
".service[href$=\"#find-help\"] > .more"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "11.6pt (15.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"tel:+18005550199\" class=\"btn btn-primary\">Call Triage Line</a>",
"target": [
".btn-primary.btn[href=\"tel:+18005550199\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+18005550199\" class=\"btn btn-primary\">Call Triage Line</a>",
"target": [
".btn-primary.btn[href=\"tel:+18005550199\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#fbf7f0",
"contrastRatio": 3.25,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Available Pets</span>",
"target": [
"#adopt > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag urgent\">Senior \u00b7 Fee waived</span>",
"target": [
"article[data-type=\"dog senior\"] > .photo > .urgent.tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag urgent\">Senior \u00b7 Fee waived</span>",
"target": [
"article[data-type=\"dog senior\"] > .photo > .urgent.tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag urgent\">Senior</span>",
"target": [
"article[data-type=\"cat senior\"] > .photo > .urgent.tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag urgent\">Senior</span>",
"target": [
"article[data-type=\"cat senior\"] > .photo > .urgent.tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "11.6pt (15.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\">Contact Shelter</a>",
"target": [
".pets-footer > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\">Contact Shelter</a>",
"target": [
".pets-footer > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#1f3d36",
"contrastRatio": 3.39,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section quiz-section\" id=\"quiz\">",
"target": [
"#quiz"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.39 (foreground color: #d9693f, background color: #1f3d36, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Pet Compatibility Quiz</span>",
"target": [
".quiz-grid > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.39 (foreground color: #d9693f, background color: #1f3d36, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"stamp\"><strong>$45</strong>Wellness exams at partner clinics</div>",
"target": [
".stamp"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stamp\"><strong>$45</strong>Wellness exams at partner clinics</div>",
"target": [
".stamp"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#fbf7f0",
"contrastRatio": 3.25,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Pet Health & Preventive Care</span>",
"target": [
".health-grid > div:nth-child(2) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "11.6pt (15.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Vet Visit</a>",
"target": [
".health-ctas > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Vet Visit</a>",
"target": [
".health-ctas > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "13.2pt (17.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"care-card\">",
"target": [
".care-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">01</span>",
"target": [
".care-card:nth-child(1) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "13.2pt (17.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"care-card\">",
"target": [
".care-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">02</span>",
"target": [
".care-card:nth-child(2) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "13.2pt (17.6px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"care-card\">",
"target": [
".care-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">03</span>",
"target": [
".care-card:nth-child(3) > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section training\" id=\"training\">",
"target": [
"#training"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Training & Enrichment</span>",
"target": [
"#training > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section training\" id=\"training\">",
"target": [
"#training"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"meta\">New Adopters \u00b7 6 min read</span>",
"target": [
".article:nth-child(1) > div > .meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section training\" id=\"training\">",
"target": [
"#training"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"meta\">Enrichment \u00b7 5 min read</span>",
"target": [
".article:nth-child(2) > div > .meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#ffffff",
"contrastRatio": 3.47,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section training\" id=\"training\">",
"target": [
"#training"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"meta\">Dog Training \u00b7 8 min read</span>",
"target": [
".article:nth-child(3) > div > .meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #d9693f, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "11.6pt (15.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\" style=\"margin-top:16px;width:100%;justify-content:center\">Book a Class</a>",
"target": [
".widget:nth-child(3) > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\" style=\"margin-top:16px;width:100%;justify-content:center\">Book a Class</a>",
"target": [
".widget:nth-child(3) > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#fbf7f0",
"contrastRatio": 3.25,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Adoption Stories</span>",
"target": [
".section:nth-child(8) > .container > .section-head > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#fbf7f0",
"contrastRatio": 3.25,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">FAQ</span>",
"target": [
".faq-wrap > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.25 (foreground color: #d9693f, background color: #fbf7f0, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#f4e9d8",
"contrastRatio": 2.89,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-contact\">",
"target": [
".faq-contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.89 (foreground color: #d9693f, background color: #f4e9d8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15035550182\" style=\"color:var(--terracotta);font-weight:600\">(503) 555-0182</a>",
"target": [
"p > a[href=\"tel:+15035550182\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.89 (foreground color: #d9693f, background color: #f4e9d8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9693f",
"bgColor": "#f4e9d8",
"contrastRatio": 2.89,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-contact\">",
"target": [
".faq-contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.89 (foreground color: #d9693f, background color: #f4e9d8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"mailto:adopt@hearthandpaw.org\" style=\"color:var(--terracotta);font-weight:600\">adopt@hearthandpaw.org</a>",
"target": [
"a[href=\"mailto:adopt@hearthandpaw.org\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.89 (foreground color: #d9693f, background color: #f4e9d8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffe1d3",
"bgColor": "#d9693f",
"contrastRatio": 2.8,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"donate\">",
"target": [
".donate"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffe1d3, background color: #d9693f, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\" style=\"color:#ffe1d3\">Make a Difference Today</span>",
"target": [
".donate > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffe1d3, background color: #d9693f, font size: 9.4pt (12.48px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffe7dc",
"bgColor": "#d9693f",
"contrastRatio": 2.93,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"donate\">",
"target": [
".donate"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #ffe7dc, background color: #d9693f, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>",
"target": [
".donate > div:nth-child(1) > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #ffe7dc, background color: #d9693f, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffe7dc",
"bgColor": "#d9693f",
"contrastRatio": 2.93,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"donate\">",
"target": [
".donate"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #ffe7dc, background color: #d9693f, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"margin-top:.8rem\">Donations are tax-deductible. EIN 84-5550193.</p>",
"target": [
".donate > div:nth-child(1) > p:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #ffe7dc, background color: #d9693f, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#df805c",
"contrastRatio": 2.84,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"amount\" data-amt=\"25\">$25</button>",
"target": [
"button[data-amt=\"25\"]"
]
},
{
"html": "<div class=\"donate\">",
"target": [
".donate"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #df805c, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"amount\" data-amt=\"25\">$25</button>",
"target": [
"button[data-amt=\"25\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #df805c, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#df805c",
"contrastRatio": 2.84,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"amount\" data-amt=\"250\">$250</button>",
"target": [
"button[data-amt=\"250\"]"
]
},
{
"html": "<div class=\"donate\">",
"target": [
".donate"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #df805c, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"amount\" data-amt=\"250\">$250</button>",
"target": [
"button[data-amt=\"250\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #ffffff, background color: #df805c, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffe7dc",
"bgColor": "#d9693f",
"contrastRatio": 2.93,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"donate\">",
"target": [
".donate"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #ffe7dc, background color: #d9693f, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"impact\" id=\"impact\">$75 microchips, vaccinates, and deworms a rescued puppy.</p>",
"target": [
"#impact"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #ffe7dc, background color: #d9693f, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d9693f",
"contrastRatio": 3.47,
"fontSize": "11.6pt (15.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" type=\"submit\">Subscribe</button>",
"target": [
"button[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" type=\"submit\">Subscribe</button>",
"target": [
"button[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.47 (foreground color: #ffffff, background color: #d9693f, font size: 11.6pt (15.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 10334
},
{
"y": 576,
"height": 10334
},
{
"y": 1152,
"height": 10334
},
{
"y": 1728,
"height": 10334
},
{
"y": 2304,
"height": 10334
},
{
"y": 2880,
"height": 10334
},
{
"y": 3456,
"height": 10334
},
{
"y": 4032,
"height": 10334
},
{
"y": 4608,
"height": 10334
},
{
"y": 5184,
"height": 10334
},
{
"y": 5760,
"height": 10334
},
{
"y": 6336,
"height": 10334
},
{
"y": 6912,
"height": 10334
},
{
"y": 7488,
"height": 10334
},
{
"y": 8064,
"height": 10334
},
{
"y": 8640,
"height": 10334
},
{
"y": 9216,
"height": 10334
},
{
"y": 9614,
"height": 10334
}
],
"scans": 19,
"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: "About", "Find Help", "Shop".
- **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: "Emergency Info", "Pet Health", "Available Pets".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "rescue", "preventive care", "enrichment".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Donate", "Contact Shelter", "Schedule Vet Visit".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "pet compatibility quiz".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "rescue spotlights", "training advice", "featured pets".
- **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.