Meta Muse Spark Open – Real Estate
via Modal · Generated
- AIMAC Debt 52.28
- Cost $0.05
- Total Violations 33
- HTML Size 39 KB
- Em Dashes 16
Screenshot
View Live Page
Accessibility Issues Found
15 Critical 18 Serious
-
button-name critical 6 instances
Buttons must have discernible text
Example HTML
<button class="save" onclick="toggleSave(this)"> -
color-contrast serious 18 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<div class="mono">◆ Trusted by 40,000+ families since 2008</div> -
image-alt critical 3 instances
Images must have alternative text
Example HTML
<img src="https://i.pravatar.cc/100?u=client1"> -
label critical 3 instances
Form elements must have labels
Example HTML
<input type="range" id="priceRange" min="200000" max="2000000" step="25000" value="750000"> -
select-name critical 3 instances
Select element must have an accessible name
Example HTML
<select><option>$400k - $900k</option><option>$900k - $1.5M</option><option>$1.5M+</option></select>
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>Domicile — Find Where You Belong | Premier Real Estate</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root{
--cream:#FDF9F3;
--paper:#FFFFFF;
--ink:#0F172A;
--muted:#64748B;
--line:#E2E8F0;
--accent:#C45B2A;
--accent-dark:#A64A20;
--accent-light:#FFF0E6;
--sage:#12372A;
--sage-light:#1a4d3a;
--radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500}
.serif{font-family:'Instrument Serif',serif}
/* Header */
.topbar{background:var(--sage);color:#E8F0E8;font-size:13px;padding:8px 0;text-align:center}
.topbar span{opacity:.8}
.topbar strong{color:white;font-weight:600}
header{position:sticky;top:0;z-index:50;background:rgba(253,249,243,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:42px;height:42px;background:var(--ink);color:white;display:grid;place-items:center;font-family:'Instrument Serif',serif;font-size:20px;border-radius:10px}
.brand h1{margin:0;font-family:'Instrument Serif',serif;font-size:22px;line-height:1;font-weight:400}
.brand p{margin:2px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
nav{flex:1;display:flex;justify-content:center}
nav ul{display:flex;list-style:none;margin:0;padding:0;gap:28px;font-size:14px;font-weight:500}
nav a{position:relative;padding:6px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:.3s}
nav a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
.btn{border:none;cursor:pointer;font-family:inherit;font-weight:600;border-radius:999px;padding:10px 20px;font-size:14px;transition:.2s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary{background:var(--accent);color:white}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-ghost{background:white;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:white}
.btn-dark:hover{background:#1e293b}
.hamburger{display:none;background:none;border:none;cursor:pointer}
/* Hero */
.hero{padding:32px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .85fr;gap:32px;align-items:center}
.hero h2{font-family:'Instrument Serif',serif;font-size:56px;line-height:.95;font-weight:400;margin:12px 0 16px}
.hero h2 em{font-style:italic;color:var(--accent)}
.hero p.lead{color:var(--muted);font-size:18px;line-height:1.6;max-width:520px}
.hero-image{position:relative;border-radius:24px;overflow:hidden;height:520px;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-card{position:absolute;bottom:18px;left:18px;right:18px;background:white;border-radius:16px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.hero-card .price{font-family:'Instrument Serif',serif;font-size:24px}
.hero-card small{color:var(--muted);font-size:12px}
/* Search Bar */
.search-bar{background:white;border:1px solid var(--line);border-radius:20px;padding:10px;display:flex;align-items:center;gap:10px;margin-top:24px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.search-tabs{display:flex;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:4px}
.search-tabs button{border:none;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;font-size:13px;cursor:pointer}
.search-tabs button.active{background:var(--ink);color:white}
.search-field{flex:1;display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding:0 16px}
.search-field input,.search-field select{border:none;outline:none;font-size:14px;width:100%;background:transparent;font-family:inherit}
.search-bar .btn{padding:14px 22px;white-space:nowrap}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.stat{background:white;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.stat strong{font-family:'Instrument Serif',serif;font-size:28px;line-height:1}
.stat span{display:block;font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}
/* Section */
section{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.section-head h3{font-family:'Instrument Serif',serif;font-size:42px;line-height:1;margin:6px 0 0;font-weight:400}
.section-head p{color:var(--muted);max-width:480px;margin:0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.chip{border:1px solid var(--line);background:white;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer}
.chip.active{background:var(--ink);color:white;border-color:var(--ink)}
/* Property Cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prop{position:relative;background:white;border-radius:20px;overflow:hidden;border:1px solid var(--line);transition:.3s}
.prop:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,23,42,.12)}
.prop-img{height:220px;position:relative;overflow:hidden}
.prop-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.prop:hover .prop-img img{transform:scale(1.05)}
.badge{position:absolute;top:12px;left:12px;background:white;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.badge.rent{background:var(--sage);color:white}
.badge.sold{background:var(--accent);color:white}
.save{position:absolute;top:12px;right:12px;width:36px;height:36px;background:rgba(255,255,255,.95);border-radius:999px;display:grid;place-items:center;cursor:pointer;border:none}
.prop-body{padding:18px}
.prop-price{font-family:'Instrument Serif',serif;font-size:22px}
.prop-price span{font-size:13px;color:var(--muted);font-family:'Inter',sans-serif}
.prop-meta{display:flex;gap:14px;color:var(--muted);font-size:13px;margin:8px 0 14px;align-items:center}
.prop-meta i{width:16px;height:16px}
.prop-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px}
.prop-foot small{color:var(--muted);font-size:12px}
.compare-check{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.card-white{background:white;border:1px solid var(--line);border-radius:20px;padding:28px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.input-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.input-group input[type=range]{width:100%;accent-color:var(--accent)}
.input-group output{font-weight:700}
.calc-result{background:var(--sage);color:white;border-radius:16px;padding:20px;text-align:center;margin-top:18px}
.calc-result strong{font-family:'Instrument Serif',serif;font-size:36px;display:block}
.mortgage-rates{margin-top:18px;border:1px dashed var(--line);border-radius:12px;padding:14px;background:var(--accent-light)}
.rates-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid #f1d9c6}
.rates-row:last-child{border:none}
/* Market */
.market{background:var(--sage);color:#E2E8F0;border-radius:24px;padding:32px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.market h3{font-family:'Instrument Serif',serif;font-size:38px;color:white;line-height:1;margin:8px 0 12px}
.market p{color:#A7C4BC}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.feature{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px}
.feature h4{margin:6px 0;color:white;font-size:15px}
.open-houses{background:white;color:var(--ink);border-radius:16px;padding:20px}
.oh-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.oh-item:last-child{border:none}
.oh-item img{width:72px;height:56px;object-fit:cover;border-radius:10px}
/* Agents */
.agents-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.agent{background:white;border:1px solid var(--line);border-radius:20px;padding:18px;text-align:center;transition:.2s}
.agent:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.agent img{width:96px;height:96px;border-radius:999px;object-fit:cover;margin:0 auto 14px;border:3px solid var(--cream)}
.agent h4{margin:0;font-size:16px}
.agent small{color:var(--muted)}
.agent-stats{display:flex;justify-content:center;gap:16px;margin:12px 0;font-size:12px;font-weight:600}
.agent-stats span{color:var(--muted);font-weight:400}
/* Testimonials */
.testimonials-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:white;border:1px solid var(--line);border-radius:20px;padding:22px}
.quote p{font-size:14px;color:#334155;line-height:1.7}
.quote-foot{display:flex;gap:12px;align-items:center;margin-top:16px}
.quote-foot img{width:40px;height:40px;border-radius:999px}
.stars{color:#F59E0B;font-size:14px}
/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 0;background:none;border:none;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.faq-a{color:var(--muted);font-size:14px;line-height:1.7;max-height:0;overflow:hidden;transition:.3s;padding-right:20px}
.faq-item.open .faq-a{max-height:300px;padding-bottom:18px}
.compare-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 18px;border-radius:999px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:60;opacity:0;pointer-events:none;transition:.3s}
.compare-bar.show{opacity:1;pointer-events:auto}
.compare-bar span{background:var(--accent);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
footer{background:#0B1F16;color:#A7C4BC;padding:48px 0 24px;margin-top:40px}
footer a{color:#A7C4BC}
footer a:hover{color:white}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:32px}
.footer-grid h4{color:white;margin:0 0 14px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.newsletter{display:flex;gap:8px;margin-top:14px}
.newsletter input{flex:1;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:white;outline:none}
.newsletter button{background:var(--accent);color:white;border:none;padding:10px 16px;border-radius:999px;font-weight:700;cursor:pointer}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
@media(max-width:980px){
.hero-grid,.split,.market,.footer-grid{grid-template-columns:1fr}
.grid-3,.agents-grid,.testimonials-wrap{grid-template-columns:1fr 1fr}
nav{display:none}
.hamburger{display:block}
.hero h2{font-size:42px}
.hero-image{height:420px}
.search-bar{flex-wrap:wrap}
.search-field{border-left:none;border-top:1px solid var(--line);padding-top:10px;width:100%}
.stats{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.grid-3,.agents-grid,.testimonials-wrap{grid-template-columns:1fr}
}
</style>
</head>
<body>
<div class="topbar">✦ Summer Market Update: Inventory up 18% nationwide — <strong>It's a great time to make a move</strong> <span> • Free valuation in 24 hours</span></div>
<header>
<div class="container nav-wrap">
<div class="brand">
<div class="logo">D</div>
<div>
<h1>DOMICILE</h1>
<p>Find where you belong</p>
</div>
<img src="https://placehold.co/88x32/0F172A/FFFFFF?text=DOMICILE&font=playfair display" alt="logo" style="border-radius:8px;opacity:0">
</div>
<nav aria-label="Primary">
<ul>
<li><a href="#buy">Buy</a></li>
<li><a href="#rent">Rent</a></li>
<li><a href="#sell">Sell</a></li>
<li><a href="#agents">Agents</a></li>
<li><a href="#about">About</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="nav-cta">
<button class="btn btn-ghost" style="padding:10px 16px" onclick="document.getElementById('valuation').scrollIntoView()">Get Valuation</button>
<button class="btn btn-dark">Sign In</button>
<button class="hamburger" id="menuBtn"><i data-lucide="menu"></i></button>
</div>
</div>
<div id="mobileNav" style="display:none;border-top:1px solid var(--line);background:white;padding:12px 24px">
<div style="display:flex;flex-direction:column;gap:10px;font-weight:600">
<a href="#buy">Buy</a><a href="#rent">Rent</a><a href="#sell">Sell</a><a href="#agents">Agents</a><a href="#about">About</a>
</div>
</div>
</header>
<main>
<section class="hero container">
<div class="hero-grid">
<div>
<div class="mono">◆ Trusted by 40,000+ families since 2008</div>
<h2>Real estate, <br>made <em>remarkably</em> human.</h2>
<p class="lead">We combine local expertise with data-driven pricing to help you buy, sell and invest with absolute clarity. From first-time buyers to seasoned portfolios — your next chapter starts here.</p>
<div class="search-bar" role="search">
<div class="search-tabs">
<button class="active" data-tab="buy">Buy</button>
<button data-tab="rent">Rent</button>
<button data-tab="sold">Sold</button>
</div>
<div class="search-field">
<i data-lucide="map-pin" style="width:18px;color:var(--muted)"></i>
<input type="text" placeholder="City, neighborhood, ZIP or address" value="Austin, TX">
</div>
<div class="search-field" style="max-width:160px">
<i data-lucide="sliders-horizontal" style="width:18px;color:var(--muted)"></i>
<select><option>$400k - $900k</option><option>$900k - $1.5M</option><option>$1.5M+</option></select>
</div>
<button class="btn btn-primary" onclick="filterProps()"><i data-lucide="search" style="width:16px"></i> Start Search</button>
</div>
<div class="stats">
<div class="stat"><strong>12.4k+</strong><span>Active listings</span></div>
<div class="stat"><strong>98.2%</strong><span>Listing price achieved</span></div>
<div class="stat"><strong>4.9/5</strong><span>Client satisfaction</span></div>
<div class="stat"><strong>21 days</strong><span>Avg. days on market</span></div>
</div>
</div>
<div class="hero-image">
<img src="https://picsum.photos/800/900?random=10" alt="Modern home exterior">
<div class="hero-card">
<div>
<div style="font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase">Featured Estate</div>
<div class="serif" style="font-size:18px">Cedar Modern • Tarrytown</div>
<div style="display:flex;gap:8px;font-size:12px;color:var(--muted);margin-top:4px"><span>4 bd</span>•<span>3.5 ba</span>•<span>3,240 sqft</span></div>
</div>
<div style="text-align:right">
<div class="price">$1,245,000</div>
<small>Est. $6,120/mo</small>
</div>
</div>
</div>
</div>
</section>
<section id="buy" class="container">
<div class="section-head">
<div>
<div class="mono">Curated Listings</div>
<h3>Find your next<br><span class="serif" style="font-style:italic;color:var(--accent)">favorite address</span></h3>
</div>
<p>Every Domicile listing includes a verified comparative market analysis, 3D tour, and transparent disclosure. Compare, save, and schedule tours instantly.</p>
</div>
<div class="filters">
<button class="chip active" data-filter="all">All Properties</button>
<button class="chip" data-filter="buy">For Sale</button>
<button class="chip" data-filter="rent">For Rent</button>
<button class="chip" data-filter="luxury">Luxury</button>
<button class="chip" data-filter="new">New Construction</button>
<div style="margin-left:auto;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)"><i data-lucide="arrow-up-down" style="width:16px"></i> Sort: Recommended</div>
</div>
<div class="grid-3" id="propertyGrid">
<!-- Cards injected by JS -->
</div>
<div style="text-align:center;margin-top:24px">
<button class="btn btn-ghost" onclick="loadMore()">View All 12,400 Listings <i data-lucide="arrow-right" style="width:16px"></i></button>
</div>
</section>
<section class="container">
<div class="split">
<div class="card-white" id="sell">
<div class="mono">Interactive Tool • Mortgage Calculator</div>
<h3 class="serif" style="font-size:30px;margin:8px 0">Know your number before you fall in love.</h3>
<p style="color:var(--muted);font-size:14px">Adjust price, down payment and rate to see principal, interest, taxes and insurance. Our rates are updated daily from 40+ lenders. This is not a pre-approval — speak to a loan officer for a formal contingency clause.</p>
<div class="calc-grid">
<div class="input-group">
<label>Listing Price — $<output id="priceOut">750,000</output></label>
<input type="range" id="priceRange" min="200000" max="2000000" step="25000" value="750000">
</div>
<div class="input-group">
<label>Down Payment — <output id="downOut">20</output>%</label>
<input type="range" id="downRange" min="3" max="40" value="20">
</div>
<div class="input-group">
<label>Interest Rate — <output id="rateOut">6.75</output>%</label>
<input type="range" id="rateRange" min="3" max="9" step="0.05" value="6.75">
</div>
<div class="input-group">
<label>Term</label>
<select id="termSelect" style="width:100%;padding:10px;border:1px solid var(--line);border-radius:10px"><option value="30">30 Years</option><option value="15">15 Years</option></select>
</div>
</div>
<button class="btn btn-primary" style="width:100%" onclick="calculate()">Calculate Payment</button>
<div class="calc-result">
<small style="letter-spacing:.1em;text-transform:uppercase;opacity:.8">Estimated Monthly Payment</small>
<strong id="monthlyPay">$4,102</strong>
<div style="display:flex;justify-content:center;gap:18px;font-size:13px;opacity:.9;margin-top:8px"><span>Principal & Interest: <b id="piVal">$3,892</b></span><span>Taxes & Fees: $210</span></div>
</div>
<div class="mortgage-rates">
<strong style="font-size:13px">Today's Mortgage Rates <span style="font-weight:400;color:var(--muted)">• Updated 5 min ago</span></strong>
<div class="rates-row"><span>30-Year Fixed</span><b>6.72% APR</b></div>
<div class="rates-row"><span>15-Year Fixed</span><b>5.98% APR</b></div>
<div class="rates-row"><span>7/1 ARM</span><b>6.15% APR</b></div>
</div>
</div>
<div>
<div class="market" id="about">
<div>
<div class="mono" style="color:#7EC8A9">Market Analysis • Austin Metro — Q2 2025</div>
<h3>Beyond the listing price: clarity that closes.</h3>
<p>Our comparative market analysis evaluates 90 days of closed comparables, pending contingency ratios, and neighborhood absorption. Whether you're a first-time buyer navigating earnest money or an investor modeling cap rates, we surface the truth.</p>
<div class="feature-grid">
<div class="feature"><div class="mono" style="color:#7EC8A9">01</div><h4>Investment Properties</h4><p style="font-size:13px;color:#A7C4BC">Cash-flow modeling, 1031 exchanges, and off-market duplex/triplex inventory.</p></div>
<div class="feature"><div class="mono" style="color:#7EC8A9">02</div><h4>First-Time Buyers</h4><p style="font-size:13px;color:#A7C4BC">Down-payment assistance, FHA/VA guidance, and closing-cost workshops.</p></div>
<div class="feature"><div class="mono" style="color:#7EC8A9">03</div><h4>Relocation</h4><p style="font-size:13px;color:#A7C4BC">School, commute and lifestyle matching with virtual neighborhood tours.</p></div>
<div class="feature"><div class="mono" style="color:#7EC8A9">04</div><h4>Luxury Portfolio</h4><p style="font-size:13px;color:#A7C4BC">Private viewings, discreet listings, and international buyer network.</p></div>
</div>
</div>
<div class="open-houses">
<h4 style="margin:0 0 6px">Open Houses This Weekend</h4>
<small style="color:var(--muted)">Tour without an appointment — RSVP recommended.</small>
<div class="oh-item">
<img src="https://picsum.photos/200/150?random=21" alt="">
<div style="flex:1"><b style="font-size:14px">1240 Westlake Hills</b><div style="font-size:12px;color:var(--muted)">Sat 11am–2pm • $1.85M • 5bd/4ba</div></div>
<button class="btn btn-ghost" style="padding:8px 12px;font-size:12px">RSVP</button>
</div>
<div class="oh-item">
<img src="https://picsum.photos/200/150?random=22" alt="">
<div style="flex:1"><b style="font-size:14px">810 South Congress Loft</b><div style="font-size:12px;color:var(--muted)">Sun 1–4pm • $3,400/mo • 2bd/2ba</div></div>
<button class="btn btn-ghost" style="padding:8px 12px;font-size:12px">RSVP</button>
</div>
<div class="oh-item">
<img src="https://picsum.photos/200/150?random=23" alt="">
<div style="flex:1"><b style="font-size:14px">4500 Balcones Estate</b><div style="font-size:12px;color:var(--muted)">Sat–Sun 12–3pm • $965,000</div></div>
<button class="btn btn-ghost" style="padding:8px 12px;font-size:12px">RSVP</button>
</div>
<button class="btn btn-dark" style="width:100%;margin-top:12px">View Full Calendar</button>
</div>
</div>
<div class="card-white" style="margin-top:18px;display:flex;align-items:center;gap:16px">
<img src="https://picsum.photos/120/120?random=30" style="width:72px;height:72px;border-radius:14px;object-fit:cover" alt="">
<div><b>Free Home Valuation — Comparative Market Analysis</b><div style="font-size:13px;color:var(--muted)">Get your estimated market value, days-on-market forecast, and recommended listing price in 24 hours.</div></div>
<button class="btn btn-primary" id="valuation" style="white-space:nowrap">Get Valuation</button>
</div>
</div>
</div>
</section>
<section id="agents" class="container">
<div class="section-head">
<div>
<div class="mono">Featured Agents</div>
<h3>Humans who hustle<br><span class="serif" style="font-style:italic">for your closing day.</span></h3>
</div>
<a href="#" class="btn btn-ghost">Join Our Brokerage</a>
</div>
<div class="agents-grid">
<div class="agent"><img src="https://i.pravatar.cc/200?u=agent1" alt=""><div class="mono" style="font-size:10px">Austin • Luxury</div><h4>Sarah Chen, REALTOR®</h4><small>12 years • $420M closed</small><div class="agent-stats"><div><b>4.98</b><span> ★ 127 reviews</span></div></div><button class="btn btn-ghost" style="width:100%;padding:8px">View Profile</button></div>
<div class="agent"><img src="https://i.pravatar.cc/200?u=agent2" alt=""><div class="mono" style="font-size:10px">Investment Specialist</div><h4>Marcus Del Toro</h4><small>Certified Investor • CCIM</small><div class="agent-stats"><div><b>4.96</b><span> ★ 98 reviews</span></div></div><button class="btn btn-ghost" style="width:100%;padding:8px">View Profile</button></div>
<div class="agent"><img src="https://i.pravatar.cc/200?u=agent3" alt=""><div class="mono" style="font-size:10px">First-Time Buyer Advocate</div><h4>Priya Nair</h4><small>FHA/VA Expert • 9 years</small><div class="agent-stats"><div><b>5.0</b><span> ★ 84 reviews</span></div></div><button class="btn btn-ghost" style="width:100%;padding:8px">View Profile</button></div>
<div class="agent"><img src="https://i.pravatar.cc/200?u=agent4" alt=""><div class="mono" style="font-size:10px">Rentals & Relocation</div><h4>James Whitfield</h4><small>Property Manager • 15 yrs</small><div class="agent-stats"><div><b>4.92</b><span> ★ 143 reviews</span></div></div><button class="btn btn-ghost" style="width:100%;padding:8px">View Profile</button></div>
</div>
</section>
<section class="container">
<div class="section-head">
<div><div class="mono">Client Stories</div><h3>Love where you live.</h3></div>
<p>Verified reviews from buyers, sellers and renters who closed with Domicile in the last 12 months.</p>
</div>
<div class="testimonials-wrap">
<div class="quote"><div class="stars">★★★★★</div><p>“Sarah’s comparative market analysis was spot-on. We listed $15k over asking, had 11 offers in 48 hours, and waived no contingencies. The data made us confident.”</p><div class="quote-foot"><img src="https://i.pravatar.cc/100?u=client1"><div><b>Emily & Josh Rivera</b><div style="font-size:12px;color:var(--muted)">Sold • Hyde Park • $875,000</div></div></div></div>
<div class="quote"><div class="stars">★★★★★</div><p>“As first-time buyers, the mortgage calculator and first-time buyer workshops were invaluable. No jargon, just clear guidance on contingencies and earnest money.”</p><div class="quote-foot"><img src="https://i.pravatar.cc/100?u=client2"><div><b>David Kim</b><div style="font-size:12px;color:var(--muted)">Bought • East Austin • $642,000</div></div></div></div>
<div class="quote"><div class="stars">★★★★★</div><p>“Our investor duplex was off-market. Marcus found it, modeled the cap rate, and we closed in 19 days. Already cash-flow positive.”</p><div class="quote-foot"><img src="https://i.pravatar.cc/100?u=client3"><div><b>Alisha Thompson</b><div style="font-size:12px;color:var(--muted)">Investor • 4-unit • $1.2M</div></div></div></div>
</div>
</section>
<section id="resources" class="container">
<div class="split">
<div>
<div class="mono">Resources & FAQ</div>
<h3 class="serif" style="font-size:36px;margin:8px 0">Real estate, demystified.</h3>
<p style="color:var(--muted)">Straight answers from licensed brokers — no fluff.</p>
<div style="margin-top:18px">
<div class="faq-item open">
<button class="faq-q">What’s the difference between pre-qualification and pre-approval? <span>+</span></button>
<div class="faq-a">Pre-qualification is an informal estimate based on self-reported finances. Pre-approval involves verified income, assets, credit and a hard pull — sellers and their agents weigh it far more heavily, especially in a multiple-offer situation where contingencies matter.</div>
</div>
<div class="faq-item">
<button class="faq-q">How is listing price determined? <span>+</span></button>
<div class="faq-a">We run a comparative market analysis (CMA) using closed sales within 0.5 miles and 90 days, adjusting for condition, lot, and upgrades. We also factor active inventory and absorption rates to position you strategically.</div>
</div>
<div class="faq-item">
<button class="faq-q">Should I waive the inspection contingency? <span>+</span></button>
<div class="faq-a">Rarely for primary residences. In competitive markets we sometimes use an informational inspection or a pass/fail addendum instead of waiving outright — protecting your earnest money while staying competitive.</div>
</div>
<div class="faq-item">
<button class="faq-q">How does your property comparison work? <span>+</span></button>
<div class="faq-a">Select up to 3 listings with the “Compare” checkbox. See price per square foot, HOA, taxes, days on market, and estimated payment side-by-side before you tour.</div>
</div>
</div>
</div>
<div class="card-white" style="background:var(--sage);color:white;border:none">
<h4 class="serif" style="font-size:26px;margin:0;color:white">Ready to make a move?</h4>
<p style="color:#A7C4BC;font-size:14px">Talk to a local expert today. No pressure — just data, comps and honest advice.</p>
<form onsubmit="event.preventDefault();alert('Thank you! An agent will contact you within 2 hours.')" style="display:grid;gap:10px;margin-top:16px">
<input placeholder="Full name" required style="padding:12px;border-radius:10px;border:none">
<input placeholder="Email or phone" required style="padding:12px;border-radius:10px;border:none">
<select style="padding:12px;border-radius:10px;border:none"><option>I want to Buy</option><option>I want to Sell</option><option>I want to Rent</option><option>Investment Property</option></select>
<button class="btn" style="background:var(--accent);color:white;padding:14px">Schedule Free Consultation</button>
</form>
<div style="display:flex;gap:12px;margin-top:14px;font-size:12px;opacity:.8"><span>⌁ No spam</span><span>⌁ Unsubscribe anytime</span></div>
</div>
</div>
</section>
</main>
<div class="compare-bar" id="compareBar">
<span id="compareCount">0</span> properties selected for comparison
<button class="btn btn-primary" style="padding:8px 14px;font-size:13px" onclick="showComparison()">Compare Now</button>
<button onclick="clearCompare()" style="background:none;border:none;color:white;cursor:pointer;font-size:13px;opacity:.7">Clear</button>
</div>
<footer id="contact">
<div class="container">
<div class="footer-grid">
<div>
<div style="display:flex;gap:10px;align-items:center"><div class="logo" style="background:var(--accent)">D</div><div><b style="color:white;letter-spacing:.08em">DOMICILE</b><div style="font-size:11px;letter-spacing:.1em;opacity:.6">FIND WHERE YOU BELONG</div></div></div>
<p style="font-size:14px;line-height:1.6;margin:16px 0">Boutique expertise, national reach. Licensed brokerage serving Austin, Denver, Nashville and Miami. Equal Housing Opportunity.</p>
<div style="display:flex;gap:10px">
<a href="#" style="width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:999px;display:grid;place-items:center">IG</a>
<a href="#" style="width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:999px;display:grid;place-items:center">in</a>
<a href="#" style="width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:999px;display:grid;place-items:center">▶</a>
<a href="#" style="width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:999px;display:grid;place-items:center">𝕏</a>
</div>
</div>
<div>
<h4>Explore</h4>
<div style="display:flex;flex-direction:column;gap:8px;font-size:14px"><a href="#buy">Buy a Home</a><a href="#rent">Rentals</a><a href="#sell">Sell</a><a href="#">Mortgage Center</a><a href="#">Neighborhood Guides</a></div>
</div>
<div>
<h4>Company</h4>
<div style="display:flex;flex-direction:column;gap:8px;font-size:14px"><a href="#about">About Us</a><a href="#agents">Agents</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Contact</a></div>
</div>
<div>
<h4>Stay in the market</h4>
<p style="font-size:13px">Weekly inventory, price cuts and open houses in your inbox.</p>
<div class="newsletter"><input placeholder="Your email"><button>Join</button></div>
<div style="margin-top:16px;font-size:13px;line-height:1.6"><div>📍 701 W 7th St, Austin, TX 78701</div><div>📞 (512) 555-0148</div><div>✉ hello@domicile.co</div></div>
</div>
</div>
<div class="copy">
<div>© 2025 Domicile Collective, LLC. All rights reserved. TREC # 1234567</div>
<div style="display:flex;gap:18px"><a href="#">Privacy Policy</a><a href="#">Terms of Service</a><a href="#">Sitemap</a><a href="#">Accessibility</a></div>
</div>
</div>
</footer>
<script>
lucide.createIcons();
const properties=[
{id:1,title:"Modern Farmhouse on Maple",addr:"124 Maple Grove, Austin, TX",price:895000,beds:4,baths:3,sqft:2810,tag:"For Sale",type:"buy",img:"https://picsum.photos/600/400?random=31",days:6},
{id:2,title:"SoCo Warehouse Loft",addr:"810 S Congress Ave #4B",price:3400,beds:2,baths:2,sqft:1280,tag:"For Rent",type:"rent",img:"https://picsum.photos/600/400?random=32",days:2,rent:true},
{id:3,title:"Balcones Canyon Estate",addr:"4500 Balcones Dr, Austin",price:1245000,beds:5,baths:4.5,sqft:4200,tag:"Luxury",type:"luxury",img:"https://picsum.photos/600/400?random=33",days:11},
{id:4,title:"East Side New Build",addr:"1802 E 12th St, Austin",price:725000,beds:3,baths:2.5,sqft:2100,tag:"New Construction",type:"new",img:"https://picsum.photos/600/400?random=34",days:4},
{id:5,title:"Tarrytown Brick Tudor",addr:"3201 Windsor Rd, Austin",price:1120000,beds:4,baths:3,sqft:3150,tag:"For Sale",type:"buy",img:"https://picsum.photos/600/400?random=35",days:9},
{id:6,title:"Rainey District Penthouse",addr:"70 Rainey St #2903",price:5200,beds:2,baths:2.5,sqft:1480,tag:"For Rent",type:"rent",img:"https://picsum.photos/600/400?random=36",days:1,rent:true},
];
let compareSet=new Set();
const grid=document.getElementById('propertyGrid');
function render(filter='all'){
grid.innerHTML=properties.filter(p=> filter==='all' ? true : p.type===filter).map(p=>`
<div class="prop">
<div class="prop-img">
<img src="${p.img}" alt="${p.title}">
<div class="badge ${p.rent?'rent':''}">${p.tag}</div>
<button class="save" onclick="toggleSave(this)"><i data-lucide="heart" style="width:16px"></i></button>
</div>
<div class="prop-body">
<div style="display:flex;justify-content:space-between;align-items:center">
<div class="prop-price">${p.rent? '$'+p.price.toLocaleString()+'/mo' : '$'+p.price.toLocaleString()} <span>${p.rent?'rent':''}</span></div>
<small style="color:var(--muted)">${p.days} days ago</small>
</div>
<div style="font-weight:600;margin:6px 0 2px">${p.title}</div>
<div style="font-size:12px;color:var(--muted)">${p.addr}</div>
<div class="prop-meta"><span>🛏 ${p.beds} bd</span><span>🛁 ${p.baths} ba</span><span>◧ ${p.sqft.toLocaleString()} sqft</span><span>$${Math.round((p.rent?p.price*12:p.price)/p.sqft)}/sqft</span></div>
<div class="prop-foot">
<small>MLS# 8${p.id}29 • Open Sat 1-3pm</small>
<label class="compare-check"><input type="checkbox" onchange="toggleCompare(${p.id},this.checked)"> Compare</label>
</div>
<button class="btn btn-dark" style="width:100%;margin-top:12px;padding:10px">Schedule Tour <i data-lucide="arrow-right" style="width:14px"></i></button>
</div>
</div>
`).join('');
lucide.createIcons();
}
render();
document.querySelectorAll('.chip').forEach(c=>c.addEventListener('click',()=>{
document.querySelectorAll('.chip').forEach(x=>x.classList.remove('active'));c.classList.add('active');
render(c.dataset.filter);
}));
function toggleSave(btn){btn.style.color= btn.style.color==='rgb(196, 91, 42)'? '' : '#C45B2A';}
function toggleCompare(id,checked){
if(checked) compareSet.add(id); else compareSet.delete(id);
const bar=document.getElementById('compareBar');
document.getElementById('compareCount').textContent=compareSet.size;
bar.classList.toggle('show', compareSet.size>0);
}
function clearCompare(){compareSet.clear();document.getElementById('compareBar').classList.remove('show');render(document.querySelector('.chip.active').dataset.filter)}
function showComparison(){alert('Comparison: '+[...compareSet].map(id=> properties.find(p=>p.id===id).title).join(' vs ')+'\n\nPrice per sqft, HOA, taxes and payment modeled side-by-side (demo).');}
function loadMore(){alert('Pagination demo — 12,400 listings would load here with infinite scroll & map view.');}
function filterProps(){const v=document.querySelector('.search-bar input').value;alert('Searching near: '+v+' — applying filters for price, beds, and listing status.');}
// Calculator
const priceRange=document.getElementById('priceRange'),downRange=document.getElementById('downRange'),rateRange=document.getElementById('rateRange'),termSel=document.getElementById('termSelect');
function calculate(){
const price=+priceRange.value, downPct=+downRange.value, rate=+rateRange.value, term=+termSel.value;
const principal=price*(1-downPct/100), monthlyRate=rate/100/12, n=term*12;
const pi= monthlyRate ? principal*monthlyRate*Math.pow(1+monthlyRate,n)/(Math.pow(1+monthlyRate,n)-1) : principal/n;
document.getElementById('priceOut').textContent=price.toLocaleString();
document.getElementById('downOut').textContent=downPct;
document.getElementById('rateOut').textContent=rate.toFixed(2);
document.getElementById('monthlyPay').textContent='$'+Math.round(pi+210).toLocaleString();
document.getElementById('piVal').textContent='$'+Math.round(pi).toLocaleString();
}
[priceRange,downRange,rateRange,termSel].forEach(el=> el.addEventListener('input',calculate));
calculate();
// FAQ
document.querySelectorAll('.faq-q').forEach(btn=> btn.addEventListener('click',()=>{
const item=btn.parentElement; item.classList.toggle('open');
btn.querySelector('span').textContent=item.classList.contains('open')?'−':'+';
}));
document.querySelectorAll('.search-tabs button').forEach(b=> b.addEventListener('click',()=>{
document.querySelectorAll('.search-tabs button').forEach(x=>x.classList.remove('active'));b.classList.add('active');
}));
document.getElementById('menuBtn').addEventListener('click',()=>{
const m=document.getElementById('mobileNav'); m.style.display=m.style.display==='none'?'block':'none';
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:09:36.435Z",
"url": "https://benchmark.aimac.invalid/b5b215e1bac6ec579114b143465ab9f6f5031e781fd6a3f320d0e5afbb72f6e9.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"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": "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": []
},
{
"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": "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": "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": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<nav aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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": "<nav aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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=\"search-bar\" role=\"search\">",
"target": [
".search-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": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-lucide=\"menu\" aria-hidden=\"true\" class=\"lucide lucide-menu\">",
"target": [
".lucide-menu"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"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": "<nav aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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=\"search-bar\" role=\"search\">",
"target": [
".search-bar"
]
}
]
},
{
"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=\"search-bar\" role=\"search\">",
"target": [
".search-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": "<nav aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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": "<nav aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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": "<button class=\"btn btn-ghost\" style=\"padding:10px 16px\" onclick=\"document.getElementById('valuation').scrollIntoView()\">Get Valuation</button>",
"target": [
".nav-cta > .btn-ghost.btn"
]
}
]
},
{
"id": "button-name",
"impact": "critical",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn btn-ghost\" style=\"padding:10px 16px\" onclick=\"document.getElementById('valuation').scrollIntoView()\">Get Valuation</button>",
"target": [
".nav-cta > .btn-ghost.btn"
]
}
]
},
{
"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>DOMICILE</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Real estate, <br>made <em>remarkably</em> human.</h2>",
"target": [
"h2"
]
},
{
"html": "<h3>Find your next<br><span class=\"serif\" style=\"font-style:italic;color:var(--accent)\">favorite address</span></h3>",
"target": [
"#buy > .section-head > div > h3"
]
},
{
"html": "<h3 class=\"serif\" style=\"font-size:30px;margin:8px 0\">Know your number before you fall in love.</h3>",
"target": [
"#sell > h3"
]
},
{
"html": "<h3>Beyond the listing price: clarity that closes.</h3>",
"target": [
"#about > div:nth-child(1) > h3"
]
},
{
"html": "<h4>Investment Properties</h4>",
"target": [
".feature:nth-child(1) > h4"
]
},
{
"html": "<h4>First-Time Buyers</h4>",
"target": [
".feature:nth-child(2) > h4"
]
},
{
"html": "<h4>Relocation</h4>",
"target": [
".feature:nth-child(3) > h4"
]
},
{
"html": "<h4>Luxury Portfolio</h4>",
"target": [
".feature:nth-child(4) > h4"
]
},
{
"html": "<h4 style=\"margin:0 0 6px\">Open Houses This Weekend</h4>",
"target": [
".open-houses > h4"
]
},
{
"html": "<h3>Humans who hustle<br><span class=\"serif\" style=\"font-style:italic\">for your closing day.</span></h3>",
"target": [
"#agents > .section-head > div > h3"
]
},
{
"html": "<h4>Sarah Chen, REALTOR\u00ae</h4>",
"target": [
".agent:nth-child(1) > h4"
]
},
{
"html": "<h4>Marcus Del Toro</h4>",
"target": [
".agent:nth-child(2) > h4"
]
},
{
"html": "<h4>Priya Nair</h4>",
"target": [
".agent:nth-child(3) > h4"
]
},
{
"html": "<h4>James Whitfield</h4>",
"target": [
".agent:nth-child(4) > h4"
]
},
{
"html": "<h3>Love where you live.</h3>",
"target": [
"section:nth-child(5) > .section-head > div > h3"
]
},
{
"html": "<h3 class=\"serif\" style=\"font-size:36px;margin:8px 0\">Real estate, demystified.</h3>",
"target": [
"#resources > .split > div:nth-child(1) > h3"
]
},
{
"html": "<h4 class=\"serif\" style=\"font-size:26px;margin:0;color:white\">Ready to make a move?</h4>",
"target": [
"#resources > .split > .card-white > .serif"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
".footer-grid > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Company</h4>",
"target": [
".footer-grid > div:nth-child(3) > h4"
]
},
{
"html": "<h4>Stay in the market</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": "#e8f0e8",
"bgColor": "#12372a",
"contrastRatio": 11.24,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.24"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"topbar\">\u2726 Summer Market Update: Inventory up 18% nationwide \u2014 <strong>It's a great time to make a move</strong> <span> \u2022 Free valuation in 24 hours</span></div>",
"target": [
".topbar"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"City, neighborhood, ZIP or address\" value=\"Austin, TX\">",
"target": [
"input[type=\"text\"]"
]
}
]
},
{
"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": "critical",
"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/88x32/0F172A/FFFFFF?text=DOMICILE&font=playfair display\" alt=\"logo\" style=\"border-radius:8px;opacity:0\">",
"target": [
"img[alt=\"logo\"]"
]
}
]
},
{
"id": "label",
"impact": "critical",
"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": "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=\"text\" placeholder=\"City, neighborhood, ZIP or address\" value=\"Austin, TX\">",
"target": [
"input[type=\"text\"]"
]
}
]
},
{
"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=\"#buy\">Buy</a>",
"target": [
"li:nth-child(1) > a[href$=\"#buy\"]"
]
}
]
},
{
"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": [
"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=\"#buy\">Buy</a></li>",
"target": [
"li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/88x32/0F172A/FFFFFF?text=DOMICILE&font=playfair display\" alt=\"logo\" style=\"border-radius:8px;opacity:0\">",
"target": [
"img[alt=\"logo\"]"
]
}
]
},
{
"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": 25.7,
"height": 29
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (25.7px by 29px, 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=\"#buy\">Buy</a>",
"target": [
"li:nth-child(1) > a[href$=\"#buy\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stars\">\u2605\u2605\u2605\u2605\u2605</div>",
"target": [
".quote:nth-child(1) > .stars"
],
"failureSummary": "Fix any of the following:\n Element content contains only non-text characters"
}
]
}
],
"violations": [
{
"id": "button-name",
"impact": "critical",
"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 does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"save\" onclick=\"toggleSave(this)\">",
"target": [
".prop:nth-child(1) > .prop-img > .save[onclick=\"toggleSave(this)\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"save\" onclick=\"toggleSave(this)\">",
"target": [
".prop:nth-child(2) > .prop-img > .save[onclick=\"toggleSave(this)\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"save\" onclick=\"toggleSave(this)\">",
"target": [
".prop:nth-child(3) > .prop-img > .save[onclick=\"toggleSave(this)\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"save\" onclick=\"toggleSave(this)\">",
"target": [
".prop:nth-child(4) > .prop-img > .save[onclick=\"toggleSave(this)\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"save\" onclick=\"toggleSave(this)\">",
"target": [
".prop:nth-child(5) > .prop-img > .save[onclick=\"toggleSave(this)\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"save\" onclick=\"toggleSave(this)\">",
"target": [
".prop:nth-child(6) > .prop-img > .save[onclick=\"toggleSave(this)\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"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": "#c45b2a",
"bgColor": "#fdf9f3",
"contrastRatio": 4.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\">\u25c6 Trusted by 40,000+ families since 2008</div>",
"target": [
".hero-grid > div:nth-child(1) > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c45b2a",
"contrastRatio": 4.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" onclick=\"filterProps()\">",
"target": [
"button[onclick=\"filterProps()\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" onclick=\"filterProps()\">",
"target": [
"button[onclick=\"filterProps()\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#fdf9f3",
"contrastRatio": 4.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\">Curated Listings</div>",
"target": [
"#buy > .section-head > div > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"card-white\" id=\"sell\">",
"target": [
"#sell"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\">Interactive Tool \u2022 Mortgage Calculator</div>",
"target": [
"#sell > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c45b2a",
"contrastRatio": 4.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" style=\"width:100%\" onclick=\"calculate()\">Calculate Payment</button>",
"target": [
"button[onclick=\"calculate()\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" style=\"width:100%\" onclick=\"calculate()\">Calculate Payment</button>",
"target": [
"button[onclick=\"calculate()\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#fff0e6",
"contrastRatio": 4.27,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mortgage-rates\">",
"target": [
".mortgage-rates"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.27 (foreground color: #64748b, background color: #fff0e6, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-weight:400;color:var(--muted)\">\u2022 Updated 5 min ago</span>",
"target": [
"strong > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.27 (foreground color: #64748b, background color: #fff0e6, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c45b2a",
"contrastRatio": 4.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" id=\"valuation\" style=\"white-space:nowrap\">Get Valuation</button>",
"target": [
"#valuation"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" id=\"valuation\" style=\"white-space:nowrap\">Get Valuation</button>",
"target": [
"#valuation"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#fdf9f3",
"contrastRatio": 4.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\">Featured Agents</div>",
"target": [
"#agents > .section-head > div > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"agent\">",
"target": [
".agent:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\" style=\"font-size:10px\">Austin \u2022 Luxury</div>",
"target": [
".agent:nth-child(1) > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"agent\">",
"target": [
".agent:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\" style=\"font-size:10px\">Investment Specialist</div>",
"target": [
".agent:nth-child(2) > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"agent\">",
"target": [
".agent:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\" style=\"font-size:10px\">First-Time Buyer Advocate</div>",
"target": [
".agent:nth-child(3) > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"agent\">",
"target": [
".agent:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\" style=\"font-size:10px\">Rentals & Relocation</div>",
"target": [
".agent:nth-child(4) > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #c45b2a, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#fdf9f3",
"contrastRatio": 4.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\">Client Stories</div>",
"target": [
"section:nth-child(5) > .section-head > div > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c45b2a",
"bgColor": "#fdf9f3",
"contrastRatio": 4.1,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mono\">Resources & FAQ</div>",
"target": [
"#resources > .split > div:nth-child(1) > .mono"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.1 (foreground color: #c45b2a, background color: #fdf9f3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c45b2a",
"contrastRatio": 4.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn\" style=\"background:var(--accent);color:white;padding:14px\">Schedule Free Consultation</button>",
"target": [
"form > .btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn\" style=\"background:var(--accent);color:white;padding:14px\">Schedule Free Consultation</button>",
"target": [
"form > .btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69827a",
"bgColor": "#0b1f16",
"contrastRatio": 4.15,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #69827a, background color: #0b1f16, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div style=\"font-size:11px;letter-spacing:.1em;opacity:.6\">FIND WHERE YOU BELONG</div>",
"target": [
".footer-grid > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #69827a, background color: #0b1f16, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c45b2a",
"contrastRatio": 4.3,
"fontSize": "10.0pt (13.3333px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button>Join</button>",
"target": [
".newsletter > button"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.0pt (13.3333px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button>Join</button>",
"target": [
".newsletter > button"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #c45b2a, font size: 10.0pt (13.3333px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#eae9e3",
"contrastRatio": 3.91,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header>",
"target": [
"header"
]
},
{
"html": "<div class=\"calc-result\">",
"target": [
".calc-result"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.91 (foreground color: #64748b, background color: #eae9e3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Find where you belong</p>",
"target": [
".brand > div:nth-child(2) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.91 (foreground color: #64748b, background color: #eae9e3, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "image-alt",
"impact": "critical",
"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 does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://i.pravatar.cc/100?u=client1\">",
"target": [
".quote:nth-child(1) > .quote-foot > img"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://i.pravatar.cc/100?u=client2\">",
"target": [
".quote:nth-child(2) > .quote-foot > img"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://i.pravatar.cc/100?u=client3\">",
"target": [
".quote:nth-child(3) > .quote-foot > img"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "label",
"impact": "critical",
"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": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"range\" id=\"priceRange\" min=\"200000\" max=\"2000000\" step=\"25000\" value=\"750000\">",
"target": [
"#priceRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"range\" id=\"downRange\" min=\"3\" max=\"40\" value=\"20\">",
"target": [
"#downRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"range\" id=\"rateRange\" min=\"3\" max=\"9\" step=\"0.05\" value=\"6.75\">",
"target": [
"#rateRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "select-name",
"impact": "critical",
"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": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select><option>$400k - $900k</option><option>$900k - $1.5M</option><option>$1.5M+</option></select>",
"target": [
".search-field:nth-child(3) > select"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"termSelect\" style=\"width:100%;padding:10px;border:1px solid var(--line);border-radius:10px\"><option value=\"30\">30 Years</option><option value=\"15\">15 Years</option></select>",
"target": [
"#termSelect"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select style=\"padding:12px;border-radius:10px;border:none\"><option>I want to Buy</option><option>I want to Sell</option><option>I want to Rent</option><option>Investment Property</option></select>",
"target": [
"form > select"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 4697
},
{
"y": 576,
"height": 4697
},
{
"y": 1152,
"height": 4697
},
{
"y": 1728,
"height": 4697
},
{
"y": 2304,
"height": 4697
},
{
"y": 2880,
"height": 4697
},
{
"y": 3456,
"height": 4697
},
{
"y": 3977,
"height": 4697
}
],
"scans": 9,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Real Estate" 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: "Real Estate"
- Description: Property listings, real estate agencies, home buying, rentals, and mortgage resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Real Estate" 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", "Agents", "Rent".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Real Estate" category. Consider themes similar to: "First-Time Buyers", "Market Analysis", "Investment Properties".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "listing price", "contingency", "comparative market analysis".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Calculate Payment", "Get Valuation", "Start Search".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Real Estate" sector. Ideas similar but not limited to: "property comparison".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "mortgage rates", "open houses", "featured agents".
- **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.