Qwen Qwen3.7 Plus – Automotive
via Alibaba · Generated
- AIMAC Debt 4.58
- Cost $0.02
- Total Violations 15
- HTML Size 46 KB
- Em Dashes 17
Screenshot
View Live Page
Accessibility Issues Found
15 Serious
-
color-contrast serious 15 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#inventory" class="btn btn-primary">View Inventory →</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DrivePulse — Your Engine for Automotive Intelligence</title>
<meta name="description" content="DrivePulse delivers expert automotive news, in-depth car reviews, maintenance tips, and dealership resources to keep you in the driver's seat.">
<style>
:root {
--bg: #0b0b0d;
--bg-elev: #141418;
--bg-elev-2: #1c1c22;
--line: #26262e;
--text: #eaeaf0;
--muted: #9a9aa6;
--accent: #e63946;
--accent-2: #ff6b3d;
--gold: #d4a24c;
--radius: 14px;
--max: 1280px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* ---------- HEADER ---------- */
.topbar {
background: #000;
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--muted);
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 24px;
max-width: var(--max);
margin: 0 auto;
}
.topbar a:hover { color: var(--accent); }
.topbar-links { display: flex; gap: 18px; }
header.site {
background: linear-gradient(180deg, #0f0f13 0%, #0b0b0d 100%);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
}
.header-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
padding: 18px 24px;
max-width: var(--max);
margin: 0 auto;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
}
.brand-logo {
width: 48px;
height: 48px;
border-radius: 10px;
border: 1px solid var(--line);
}
.brand-text h1 {
font-size: 22px;
letter-spacing: -0.5px;
font-weight: 800;
line-height: 1;
}
.brand-text h1 span { color: var(--accent); }
.brand-text p {
font-size: 11px;
color: var(--muted);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 4px;
}
nav.primary {
display: flex;
justify-content: center;
gap: 6px;
}
nav.primary a {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--text);
border-radius: 8px;
transition: all 0.2s;
position: relative;
}
nav.primary a:hover { background: var(--bg-elev); color: var(--accent); }
nav.primary a.active { color: var(--accent); }
nav.primary a.active::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.header-cta {
display: flex;
gap: 10px;
align-items: center;
}
.btn {
padding: 11px 22px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover { background: #c52f3b; transform: translateY(-1px); }
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- HERO ---------- */
.hero {
position: relative;
overflow: hidden;
padding: 60px 0 80px;
background:
radial-gradient(1000px 500px at 80% 20%, rgba(230,57,70,0.15), transparent 60%),
radial-gradient(800px 400px at 10% 80%, rgba(255,107,61,0.08), transparent 60%),
var(--bg);
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(230,57,70,0.12);
color: var(--accent);
padding: 6px 14px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 24px;
border: 1px solid rgba(230,57,70,0.3);
}
.hero-eyebrow::before {
content: '';
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero h2 {
font-size: clamp(36px, 5vw, 60px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -1.5px;
margin-bottom: 24px;
}
.hero h2 em {
font-style: normal;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero p.lead {
font-size: 18px;
color: var(--muted);
margin-bottom: 32px;
max-width: 540px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats {
display: flex;
gap: 40px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
.hero-stats div strong {
display: block;
font-size: 28px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.5px;
}
.hero-stats div span {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-visual {
position: relative;
aspect-ratio: 4/3;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-badge {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(11,11,13,0.85);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hero-badge strong { font-size: 16px; }
.hero-badge span { color: var(--muted); font-size: 13px; display: block; }
.hero-badge .price {
color: var(--accent);
font-weight: 800;
font-size: 20px;
}
/* ---------- SECTION COMMON ---------- */
section { padding: 80px 0; }
.section-head {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 48px;
gap: 24px;
flex-wrap: wrap;
}
.section-head h3 {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.1;
}
.section-head h3 span { color: var(--accent); }
.section-head p {
color: var(--muted);
max-width: 520px;
margin-top: 10px;
}
.section-tag {
font-size: 12px;
color: var(--accent);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
display: block;
}
/* ---------- FEATURED STORIES ---------- */
.stories-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 260px 260px;
gap: 20px;
}
.story-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-elev);
transition: transform 0.3s, border-color 0.3s;
cursor: pointer;
}
.story-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.story-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.story-card:hover img { transform: scale(1.05); }
.story-card.featured { grid-row: span 2; }
.story-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
}
.story-cat {
display: inline-block;
background: var(--accent);
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
align-self: flex-start;
}
.story-overlay h4 {
font-size: 20px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 8px;
}
.story-card.featured .story-overlay h4 { font-size: 30px; }
.story-overlay .meta {
font-size: 12px;
color: rgba(255,255,255,0.7);
display: flex;
gap: 12px;
}
/* ---------- TRADE-IN CALCULATOR ---------- */
.calculator-section {
background:
linear-gradient(135deg, rgba(230,57,70,0.08) 0%, transparent 50%),
var(--bg-elev);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.calc-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
}
.calc-intro h3 {
font-size: 40px;
font-weight: 800;
letter-spacing: -1px;
line-height: 1.1;
margin-bottom: 20px;
}
.calc-intro h3 span { color: var(--accent); }
.calc-intro p {
color: var(--muted);
font-size: 16px;
margin-bottom: 20px;
}
.calc-features {
list-style: none;
margin-top: 24px;
}
.calc-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
font-size: 15px;
}
.calc-features li::before {
content: '✓';
width: 24px;
height: 24px;
background: rgba(230,57,70,0.15);
color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.calculator {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 20px;
padding: 32px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.calc-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.calc-subtitle {
color: var(--muted);
font-size: 14px;
margin-bottom: 24px;
}
.calc-form { display: grid; gap: 16px; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.calc-field input,
.calc-field select {
width: 100%;
padding: 12px 14px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--text);
font-size: 14px;
font-family: inherit;
transition: border-color 0.2s;
}
.calc-field input:focus,
.calc-field select:focus {
outline: none;
border-color: var(--accent);
}
.calc-result {
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, rgba(230,57,70,0.12) 0%, rgba(255,107,61,0.08) 100%);
border: 1px solid rgba(230,57,70,0.3);
border-radius: 12px;
text-align: center;
}
.calc-result-label {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 6px;
}
.calc-result-value {
font-size: 38px;
font-weight: 800;
color: var(--accent);
letter-spacing: -1px;
}
.calc-result-note {
font-size: 12px;
color: var(--muted);
margin-top: 8px;
}
.calc-submit {
width: 100%;
padding: 14px;
background: var(--accent);
color: #fff;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
margin-top: 8px;
transition: background 0.2s;
}
.calc-submit:hover { background: #c52f3b; }
/* ---------- MAINTENANCE TIPS ---------- */
.tips-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.tips-image {
position: relative;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4/3;
border: 1px solid var(--line);
}
.tips-image img { width: 100%; height: 100%; object-fit: cover; }
.tips-image .stat-overlay {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(11,11,13,0.9);
backdrop-filter: blur(10px);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 22px;
display: flex;
gap: 24px;
}
.tips-image .stat-overlay div strong {
display: block;
font-size: 22px;
color: var(--accent);
font-weight: 800;
}
.tips-image .stat-overlay div span {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.tips-content h3 {
font-size: 36px;
font-weight: 800;
letter-spacing: -1px;
line-height: 1.15;
margin-bottom: 20px;
}
.tips-content > p {
color: var(--muted);
font-size: 16px;
margin-bottom: 28px;
}
.tips-list {
display: grid;
gap: 16px;
}
.tip-item {
display: flex;
gap: 16px;
padding: 18px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 12px;
transition: all 0.2s;
}
.tip-item:hover { border-color: var(--accent); transform: translateX(4px); }
.tip-num {
flex-shrink: 0;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px;
}
.tip-item h5 {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.tip-item p {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
/* ---------- CPO INVENTORY ---------- */
.cpo-section { background: var(--bg-elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inventory-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.vehicle-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s;
}
.vehicle-card:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.vehicle-img {
aspect-ratio: 16/10;
overflow: hidden;
position: relative;
}
.vehicle-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.vehicle-card:hover .vehicle-img img { transform: scale(1.08); }
.vehicle-badge {
position: absolute;
top: 14px;
left: 14px;
background: var(--gold);
color: #000;
padding: 4px 10px;
border-radius: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.vehicle-body { padding: 22px; }
.vehicle-body h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
}
.vehicle-body .trim {
color: var(--muted);
font-size: 13px;
margin-bottom: 16px;
}
.vehicle-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.vehicle-specs div {
font-size: 12px;
}
.vehicle-specs div span {
display: block;
color: var(--muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}
.vehicle-specs div strong { font-weight: 600; }
.vehicle-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.vehicle-price {
font-size: 22px;
font-weight: 800;
color: var(--accent);
}
.vehicle-price small {
font-size: 11px;
color: var(--muted);
font-weight: 400;
display: block;
}
.btn-sm {
padding: 8px 14px;
font-size: 13px;
border-radius: 6px;
background: var(--bg-elev-2);
color: var(--text);
border: 1px solid var(--line);
transition: all 0.2s;
}
.btn-sm:hover { background: var(--accent); border-color: var(--accent); }
/* ---------- SERVICE SPECIALS ---------- */
.specials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.special-card {
background: linear-gradient(145deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px;
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.special-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.special-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.special-discount {
display: inline-block;
background: rgba(230,57,70,0.15);
color: var(--accent);
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
margin-bottom: 16px;
}
.special-card h4 {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
}
.special-card p {
color: var(--muted);
font-size: 14px;
margin-bottom: 20px;
line-height: 1.6;
}
.special-card .expires {
font-size: 12px;
color: var(--muted);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 6px;
}
.special-card .expires::before {
content: '⏱';
}
/* ---------- TESTIMONIALS ---------- */
.testimonials-section { background: var(--bg-elev); border-top: 1px solid var(--line); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px;
position: relative;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 10px;
right: 20px;
font-size: 80px;
color: var(--accent);
opacity: 0.2;
font-family: Georgia, serif;
line-height: 1;
}
.stars {
color: var(--gold);
font-size: 14px;
margin-bottom: 14px;
letter-spacing: 2px;
}
.testimonial-card p {
font-size: 15px;
line-height: 1.65;
margin-bottom: 20px;
color: var(--text);
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.testimonial-author img {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--accent);
}
.testimonial-author strong {
display: block;
font-size: 14px;
font-weight: 700;
}
.testimonial-author span {
font-size: 12px;
color: var(--muted);
}
/* ---------- NEWSLETTER CTA ---------- */
.newsletter {
padding: 80px 0;
}
.newsletter-box {
background:
radial-gradient(600px 300px at 20% 50%, rgba(230,57,70,0.2), transparent 60%),
radial-gradient(600px 300px at 80% 50%, rgba(255,107,61,0.15), transparent 60%),
var(--bg-elev);
border: 1px solid var(--line);
border-radius: 24px;
padding: 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.newsletter-box h3 {
font-size: 38px;
font-weight: 800;
letter-spacing: -1px;
margin-bottom: 14px;
}
.newsletter-box h3 span { color: var(--accent); }
.newsletter-box p {
color: var(--muted);
font-size: 16px;
max-width: 560px;
margin: 0 auto 32px;
}
.newsletter-form {
display: flex;
gap: 10px;
max-width: 500px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
.newsletter-form input {
flex: 1;
min-width: 240px;
padding: 14px 18px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--text);
font-size: 15px;
font-family: inherit;
}
.newsletter-form input:focus { outline: none; border-color: var(--accent); }
/* ---------- FOOTER ---------- */
footer {
background: #050506;
border-top: 1px solid var(--line);
padding: 60px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-brand p {
color: var(--muted);
font-size: 14px;
margin: 16px 0 20px;
max-width: 300px;
}
.social-links {
display: flex;
gap: 10px;
}
.social-links a {
width: 38px;
height: 38px;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.2s;
}
.social-links a:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-2px);
}
.footer-col h5 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 18px;
color: var(--text);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
color: var(--muted);
font-size: 14px;
transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-contact p {
color: var(--muted);
font-size: 14px;
margin-bottom: 8px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.footer-contact strong { color: var(--text); display: block; margin-bottom: 10px; }
.footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
color: var(--muted);
font-size: 13px;
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a:hover { color: var(--accent); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.hero-grid, .calc-grid, .tips-grid { grid-template-columns: 1fr; gap: 40px; }
.stories-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.story-card.featured { grid-column: span 2; grid-row: auto; }
.inventory-grid, .specials-grid, .testimonials-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
nav.primary { display: none; }
}
@media (max-width: 640px) {
.stories-grid { grid-template-columns: 1fr; }
.story-card.featured { grid-column: auto; }
.inventory-grid, .specials-grid, .testimonials-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero-stats { flex-wrap: wrap; gap: 24px; }
.calc-row { grid-template-columns: 1fr; }
.newsletter-box { padding: 40px 24px; }
.topbar-links { display: none; }
}
</style>
</head>
<body>
<!-- TOP BAR -->
<div class="topbar">
<div class="topbar-inner">
<span>📍 Serving the Greater Metro Area — 3 Locations</span>
<div class="topbar-links">
<a href="#">Service Hours: Mon–Sat 7AM–7PM</a>
<a href="#">☎ (555) 247-8900</a>
</div>
</div>
</div>
<!-- HEADER -->
<header class="site">
<div class="header-inner">
<a href="#" class="brand">
<img class="brand-logo" src="https://placehold.co/48x48/e63946/ffffff?text=DP&font=montserrat" alt="DrivePulse logo">
<div class="brand-text">
<h1>Drive<span>Pulse</span></h1>
<p>Your Engine for Automotive Intelligence</p>
</div>
</a>
<nav class="primary">
<a href="#" class="active">Home</a>
<a href="#news">News</a>
<a href="#reviews">Reviews</a>
<a href="#inventory">Inventory</a>
<a href="#trade-in">Trade-In</a>
<a href="#specials">Specials</a>
<a href="#service">Service</a>
</nav>
<div class="header-cta">
<a href="#trade-in" class="btn btn-ghost">Get Offer</a>
<a href="#inventory" class="btn btn-primary">View Inventory →</a>
</div>
</div>
</header>
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<span class="hero-eyebrow">Live • New Model Drop</span>
<h2>Drive Smarter. <em>Drive Informed.</em></h2>
<p class="lead">From expert reviews and maintenance deep-dives to certified pre-owned finds and exclusive service specials — DrivePulse is the single source every driver trusts to make confident, well-informed decisions at every mile.</p>
<div class="hero-actions">
<a href="#inventory" class="btn btn-primary">Browse Inventory</a>
<a href="#" class="btn btn-ghost">Schedule Test Drive</a>
</div>
<div class="hero-stats">
<div><strong>12,400+</strong><span>Vehicles Reviewed</span></div>
<div><strong>340K</strong><span>Monthly Readers</span></div>
<div><strong>4.9★</strong><span>Service Rating</span></div>
</div>
</div>
<div class="hero-visual">
<img src="https://picsum.photos/800/600?random=1" alt="Featured vehicle">
<div class="hero-badge">
<div>
<strong>2024 Apex GT Sport</strong>
<span>Certified Pre-Owned • 18,240 mi</span>
</div>
<div class="price">$38,495</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURED STORIES -->
<section id="news">
<div class="container">
<div class="section-head">
<div>
<span class="section-tag">Latest Coverage</span>
<h3>Stories From the <span>Front Lines</span> of the Road</h3>
<p>Our editors test-drive, tear down, and rank the vehicles that matter — so you never have to guess what's worth your time, your money, or your driveway.</p>
</div>
<a href="#" class="btn btn-ghost">All Stories →</a>
</div>
<div class="stories-grid">
<a href="#" class="story-card featured">
<img src="https://picsum.photos/900/900?random=10" alt="Feature story">
<div class="story-overlay">
<span class="story-cat">Long-Term Review</span>
<h4>12 Months With the 2024 Solara EV: Does the Real-World Range Match the EPA Claims?</h4>
<div class="meta"><span>By Marcus Hale</span><span>•</span><span>14 min read</span></div>
</div>
</a>
<a href="#" class="story-card">
<img src="https://picsum.photos/600/400?random=11" alt="Story">
<div class="story-overlay">
<span class="story-cat">Comparison</span>
<h4>Midsize SUV Showdown: Three Contenders, One Winner</h4>
<div class="meta"><span>8 min</span></div>
</div>
</a>
<a href="#" class="story-card">
<img src="https://picsum.photos/600/400?random=12" alt="Story">
<div class="story-overlay">
<span class="story-cat">First Drive</span>
<h4>The Turbo Four That Refuses to Feel Turbocharged</h4>
<div class="meta"><span>6 min</span></div>
</div>
</a>
<a href="#" class="story-card">
<img src="https://picsum.photos/600/400?random=13" alt="Story">
<div class="story-overlay">
<span class="story-cat">Industry</span>
<h4>Why Dealerships Are Rethinking the Service Drive Experience</h4>
<div class="meta"><span>5 min</span></div>
</div>
</a>
<a href="#" class="story-card">
<img src="https://picsum.photos/600/400?random=14" alt="Story">
<div class="story-overlay">
<span class="story-cat">Buying Guide</span>
<h4>Trade-In Value in 2025: What Your Car Is Really Worth Right Now</h4>
<div class="meta"><span>10 min</span></div>
</div>
</a>
</div>
</div>
</section>
<!-- TRADE-IN CALCULATOR -->
<section class="calculator-section" id="trade-in">
<div class="container">
<div class="calc-grid">
<div class="calc-intro">
<span class="section-tag">Interactive Tool</span>
<h3>Get Your <span>Instant Trade-In</span> Estimate</h3>
<p>Our calculator uses real-time market data, mileage rating adjustments, and regional demand signals to give you a fair, transparent offer — no haggling, no surprises, no pressure. Apply your estimate directly toward any vehicle in our certified pre-owned inventory.</p>
<ul class="calc-features">
<li>Instant estimate based on live market conditions</li>
<li>Guaranteed offer valid for 7 days</li>
<li>Apply toward purchase or take cash</li>
<li>No obligation, no appointment needed</li>
</ul>
</div>
<div class="calculator">
<div class="calc-title">Trade-In Valuator</div>
<div class="calc-subtitle">Fill in your vehicle details below for an instant estimate.</div>
<form class="calc-form" onsubmit="calculateTradeIn(event)">
<div class="calc-row">
<div class="calc-field">
<label for="year">Year</label>
<select id="year" required>
<option value="">Select year</option>
<option>2024</option><option>2023</option><option>2022</option>
<option>2021</option><option>2020</option><option>2019</option>
<option>2018</option><option>2017</option><option>2016</option>
<option>2015</option><option>2014</option><option>2013</option>
</select>
</div>
<div class="calc-field">
<label for="make">Make</label>
<select id="make" required>
<option value="">Select make</option>
<option>Toyota</option><option>Honda</option><option>Ford</option>
<option>Chevrolet</option><option>BMW</option><option>Mercedes-Benz</option>
<option>Audi</option><option>Tesla</option><option>Hyundai</option>
</select>
</div>
</div>
<div class="calc-row">
<div class="calc-field">
<label for="model">Model</label>
<input type="text" id="model" placeholder="e.g. Camry" required>
</div>
<div class="calc-field">
<label for="mileage">Mileage</label>
<input type="number" id="mileage" placeholder="e.g. 45000" min="0" required>
</div>
</div>
<div class="calc-field">
<label for="condition">Condition</label>
<select id="condition" required>
<option value="">Select condition</option>
<option value="1.15">Excellent — Like new, no wear</option>
<option value="1.0">Clean — Normal wear, no damage</option>
<option value="0.85">Average — Minor cosmetic issues</option>
<option value="0.7">Rough — Mechanical or body work needed</option>
</select>
</div>
<div class="calc-result">
<div class="calc-result-label">Estimated Trade-In Value</div>
<div class="calc-result-value" id="result">$—</div>
<div class="calc-result-note">Final offer subject to in-person inspection</div>
</div>
<button type="submit" class="calc-submit">Trade In My Vehicle →</button>
</form>
</div>
</div>
</div>
</section>
<!-- MAINTENANCE TIPS -->
<section id="service">
<div class="container">
<div class="tips-grid">
<div class="tips-image">
<img src="https://picsum.photos/800/600?random=20" alt="Maintenance bay">
<div class="stat-overlay">
<div><strong>92%</strong><span>Issues Preventable</span></div>
<div><strong>$1,200</strong><span>Avg. Saved/Year</span></div>
</div>
</div>
<div class="tips-content">
<span class="section-tag">Maintenance Playbook</span>
<h3>Five Habits That Add 100,000 Miles to Your Vehicle</h3>
<p>Most drivers don't realize that the difference between a car that dies at 120,000 miles and one that cruises past 250,000 isn't luck — it's routine. Our master technicians have compiled the habits they see in every long-running vehicle on the road. Follow these five, and you'll spend less at the pump, less at the shop, and less time worrying about breakdowns.</p>
<div class="tips-list">
<div class="tip-item">
<div class="tip-num">1</div>
<div>
<h5>Follow the Severe Schedule</h5>
<p>Most owners manuals include a "severe" service interval for stop-and-go driving, short trips, and extreme temperatures. If that sounds like your commute, use it — not the standard schedule — as your baseline for oil, filter, and fluid changes.</p>
</div>
</div>
<div class="tip-item">
<div class="tip-num">2</div>
<div>
<h5>Rotate Tires Every 5,000 Miles</h5>
<p>Uneven tread wear is the single biggest killer of tire lifespan and fuel economy. A $30 rotation every other oil change pays for itself within a single set of tires and keeps your mileage rating where the manufacturer intended.</p>
</div>
</div>
<div class="tip-item">
<div class="tip-num">3</div>
<div>
<h5>Never Ignore Warning Lights</h5>
<p>A flashing check-engine light is a "pull over now." A solid one is a "call us today." The longer you wait, the more likely a $200 sensor job becomes a $2,000 catalytic converter replacement.</p>
</div>
</div>
<div class="tip-item">
<div class="tip-num">4</div>
<div>
<h5>Flush Fluids on Schedule</h5>
<p>Transmission, coolant, and brake fluids break down chemically over time, even when the car sits. Sticking to manufacturer flush intervals protects the most expensive components under your hood.</p>
</div>
</div>
<div class="tip-item">
<div class="tip-num">5</div>
<div>
<h5>Keep a Paper Trail</h5>
<p>A complete service history boosts your trade-in value by 8–12% on average. Keep receipts, log mileage, and note every repair — future buyers (and our appraisers) will reward you for it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CERTIFIED PRE-OWNED -->
<section class="cpo-section" id="inventory">
<div class="container">
<div class="section-head">
<div>
<span class="section-tag">Certified Pre-Owned</span>
<h3>Handpicked. <span>Inspected.</span> Guaranteed.</h3>
<p>Every certified pre-owned vehicle in our inventory has passed a rigorous 172-point inspection, comes with a remaining factory warranty, and includes a complimentary vehicle history report. These are the vehicles our own staff would drive home.</p>
</div>
<a href="#" class="btn btn-primary">View Full Inventory →</a>
</div>
<div class="inventory-grid">
<div class="vehicle-card">
<div class="vehicle-img">
<img src="https://picsum.photos/600/400?random=30" alt="Vehicle">
<span class="vehicle-badge">CPO Certified</span>
</div>
<div class="vehicle-body">
<h4>2023 Solara EV Premium</h4>
<div class="trim">Long Range AWD • Pearl White</div>
<div class="vehicle-specs">
<div><span>Mileage</span><strong>14,280 mi</strong></div>
<div><span>Mpg Eq</span><strong>120 combined</strong></div>
<div><span>Transmission</span><strong>Single-Speed</strong></div>
<div><span>Drivetrain</span><strong>AWD</strong></div>
</div>
<div class="vehicle-footer">
<div class="vehicle-price">$42,900<small>or $589/mo</small></div>
<a href="#" class="btn-sm">View Details</a>
</div>
</div>
</div>
<div class="vehicle-card">
<div class="vehicle-img">
<img src="https://picsum.photos/600/400?random=31" alt="Vehicle">
<span class="vehicle-badge">CPO Certified</span>
</div>
<div class="vehicle-body">
<h4>2022 Crestline Touring</h4>
<div class="trim">3.5L V6 • Midnight Black</div>
<div class="vehicle-specs">
<div><span>Mileage</span><strong>28,410 mi</strong></div>
<div><span>Mpg</span><strong>22 / 31</strong></div>
<div><span>Transmission</span><strong>10-Speed Auto</strong></div>
<div><span>Drivetrain</span><strong>FWD</strong></div>
</div>
<div class="vehicle-footer">
<div class="vehicle-price">$31,750<small>or $439/mo</small></div>
<a href="#" class="btn-sm">View Details</a>
</div>
</div>
</div>
<div class="vehicle-card">
<div class="vehicle-img">
<img src="https://picsum.photos/600/400?random=32" alt="Vehicle">
<span class="vehicle-badge">CPO Certified</span>
</div>
<div class="vehicle-body">
<h4>2024 Ridgeline Sport 4x4</h4>
<div class="trim">2.7T High Output • Granite Gray</div>
<div class="vehicle-specs">
<div><span>Mileage</span><strong>9,640 mi</strong></div>
<div><span>Mpg</span><strong>18 / 24</strong></div>
<div><span>Transmission</span><strong>10-Speed Auto</strong></div>
<div><span>Drivetrain</span><strong>4WD</strong></div>
</div>
<div class="vehicle-footer">
<div class="vehicle-price">$54,200<small>or $729/mo</small></div>
<a href="#" class="btn-sm">View Details</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICE SPECIALS -->
<section id="specials">
<div class="container">
<div class="section-head">
<div>
<span class="section-tag">Service Specials</span>
<h3>This Month's <span>Exclusive Offers</span></h3>
<p>Limited-time pricing on the maintenance services that keep your vehicle running at factory spec. All work performed by factory-trained technicians using OEM parts.</p>
</div>
<a href="#" class="btn btn-ghost">Book Appointment →</a>
</div>
<div class="specials-grid">
<div class="special-card">
<span class="special-discount">Save 25%</span>
<h4>Complete Brake Service</h4>
<p>Includes front and rear pad replacement, rotor inspection and resurfacing, brake fluid flush, and a full safety check. Most vehicles completed same-day with our loaner fleet available on request.</p>
<div class="expires">Expires March 31</div>
<a href="#" class="btn btn-primary">Schedule Now</a>
</div>
<div class="special-card">
<span class="special-discount">$39.95</span>
<h4>Synthetic Oil & Multi-Point</h4>
<p>Full-synthetic oil change with premium filter, topped off with all essential fluids, plus our 50-point multi-point inspection covering belts, hoses, battery, tires, and all safety-critical systems.</p>
<div class="expires">Ongoing offer</div>
<a href="#" class="btn btn-primary">Schedule Now</a>
</div>
<div class="special-card">
<span class="special-discount">Buy 3, Get 1 Free</span>
<h4>Tire Rotation & Alignment</h4>
<p>Pre-purchase a package of four rotations and receive your fifth free — plus a complimentary four-wheel alignment with every second visit. Keeps your tires wearing evenly and your mileage rating optimized.</p>
<div class="expires">Limited quantities</div>
<a href="#" class="btn btn-primary">Schedule Now</a>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials-section" id="reviews">
<div class="container">
<div class="section-head">
<div>
<span class="section-tag">Reader & Customer Reviews</span>
<h3>What Drivers Are <span>Saying About Us</span></h3>
<p>From first-time buyers to lifelong enthusiasts, our community trusts DrivePulse for honest coverage and transparent deals.</p>
</div>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>I'd been shopping for a certified pre-owned SUV for three months and was getting burned by every dealership I walked into. DrivePulse's trade-in tool gave me a real number before I even stepped on the lot, and their review of the exact trim I wanted saved me from a costly options mistake. Bought the car the same weekend.</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/88?u=jenna.m" alt="Jenna M.">
<div>
<strong>Jenna M.</strong>
<span>2023 Crestline Owner</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>The long-term review they ran on the Solara EV matched my real-world experience almost to the mile. That kind of honesty is rare in automotive media. I now check DrivePulse before every major car decision — and I've recommended them to half my office.</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/88?u=david.r" alt="David R.">
<div>
<strong>David R.</strong>
<span>EV Enthusiast</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>The maintenance playbook section literally paid for itself. I followed their fluid flush schedule on my 2016 truck and my mechanic said the transmission looked better than trucks half its age. Worth bookmarking for anyone who plans to keep their vehicle past 100k.</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/88?u=priya.k" alt="Priya K.">
<div>
<strong>Priya K.</strong>
<span>Long-time Reader</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section class="newsletter">
<div class="container">
<div class="newsletter-box">
<h3>Get the <span>Weekly Drive</span> in Your Inbox</h3>
<p>Every Thursday, our editors deliver the week's most important reviews, the best deals on certified pre-owned inventory, and one maintenance tip you can use this weekend. No spam, unsubscribe anytime.</p>
<form class="newsletter-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Subscribed ✓';">
<input type="email" placeholder="your@email.com" required>
<button type="submit" class="btn btn-primary">Subscribe Free</button>
</form>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="brand">
<img class="brand-logo" src="https://placehold.co/48x48/e63946/ffffff?text=DP&font=montserrat" alt="DrivePulse logo">
<div class="brand-text">
<h1>Drive<span>Pulse</span></h1>
<p>Your Engine for Automotive Intelligence</p>
</div>
</a>
<p>Independent automotive news, reviews, and dealership resources — built by drivers, for drivers, since 2014.</p>
<div class="social-links">
<a href="#" aria-label="Facebook">f</a>
<a href="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="Instagram">◉</a>
<a href="#" aria-label="YouTube">▶</a>
<a href="#" aria-label="LinkedIn">in</a>
</div>
</div>
<div class="footer-col">
<h5>Explore</h5>
<ul>
<li><a href="#">Latest News</a></li>
<li><a href="#">Car Reviews</a></li>
<li><a href="#">Buying Guides</a></li>
<li><a href="#">Maintenance Tips</a></li>
<li><a href="#">EV Hub</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Dealership</h5>
<ul>
<li><a href="#">New Inventory</a></li>
<li><a href="#">Certified Pre-Owned</a></li>
<li><a href="#">Trade-In Value</a></li>
<li><a href="#">Service Specials</a></li>
<li><a href="#">Financing</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Company</h5>
<ul>
<li><a href="#">About DrivePulse</a></li>
<li><a href="#">Editorial Team</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press Kit</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="footer-col footer-contact">
<h5>Get in Touch</h5>
<strong>DrivePulse Headquarters</strong>
<p>📍 1420 Motor Parkway, Suite 300<br>Metro City, ST 45678</p>
<p>☎ (555) 247-8900</p>
<p>✉ hello@drivepulse.auto</p>
<p>🕐 Mon–Sat: 7AM – 7PM<br>Sun: 9AM – 5PM</p>
</div>
</div>
<div class="footer-bottom">
<div>© 2025 DrivePulse Media, Inc. All rights reserved.</div>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Preferences</a>
<a href="#">Accessibility</a>
<a href="#">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
function calculateTradeIn(e) {
e.preventDefault();
const year = parseInt(document.getElementById('year').value);
const mileage = parseInt(document.getElementById('mileage').value);
const condition = parseFloat(document.getElementById('condition').value);
// Base value by age
const currentYear = new Date().getFullYear();
const age = currentYear - year;
const baseValues = {
'Toyota': 28000, 'Honda': 27000, 'Ford': 24000, 'Chevrolet': 23500,
'BMW': 38000, 'Mercedes-Benz': 40000, 'Audi': 36000, 'Tesla': 42000, 'Hyundai': 22000
};
const make = document.getElementById('make').value;
let base = baseValues[make] || 25000;
// Depreciation: ~15% first year, then ~10% annually
let value = base;
if (age >= 1) value *= 0.85;
for (let i = 1; i < age; i++) value *= 0.90;
// Mileage adjustment: -$0.08 per mile over 12,000/year average
const expectedMiles = age * 12000;
const mileDelta = mileage - expectedMiles;
value -= mileDelta * 0.08;
// Condition multiplier
value *= condition;
// Floor
value = Math.max(value, 500);
value = Math.round(value / 50) * 50;
document.getElementById('result').textContent = '$' + value.toLocaleString();
}
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:42:57.157Z",
"url": "https://benchmark.aimac.invalid/b6e49d17ebdce09068f8f2f45172e464cdf6a99d2e0c703f83b540f0d917edc0.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-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": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "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": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"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-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": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\">f</a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\" class=\"calc-submit\">Trade In My Vehicle \u2192</button>",
"target": [
".calc-submit"
]
}
]
},
{
"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>Drive<span>Pulse</span></h1>",
"target": [
".header-inner > .brand[href=\"#\"] > .brand-text > h1"
]
},
{
"html": "<h2>Drive Smarter. <em>Drive Informed.</em></h2>",
"target": [
"h2"
]
},
{
"html": "<h3>Stories From the <span>Front Lines</span> of the Road</h3>",
"target": [
"#news > .container > .section-head > div > h3"
]
},
{
"html": "<h4>12 Months With the 2024 Solara EV: Does the Real-World Range Match the EPA Claims?</h4>",
"target": [
".featured > .story-overlay > h4"
]
},
{
"html": "<h4>Midsize SUV Showdown: Three Contenders, One Winner</h4>",
"target": [
".story-card[href=\"#\"]:nth-child(2) > .story-overlay > h4"
]
},
{
"html": "<h4>The Turbo Four That Refuses to Feel Turbocharged</h4>",
"target": [
".story-card[href=\"#\"]:nth-child(3) > .story-overlay > h4"
]
},
{
"html": "<h4>Why Dealerships Are Rethinking the Service Drive Experience</h4>",
"target": [
".story-card[href=\"#\"]:nth-child(4) > .story-overlay > h4"
]
},
{
"html": "<h4>Trade-In Value in 2025: What Your Car Is Really Worth Right Now</h4>",
"target": [
".story-card[href=\"#\"]:nth-child(5) > .story-overlay > h4"
]
},
{
"html": "<h3>Get Your <span>Instant Trade-In</span> Estimate</h3>",
"target": [
".calc-intro > h3"
]
},
{
"html": "<h3>Five Habits That Add 100,000 Miles to Your Vehicle</h3>",
"target": [
".tips-content > h3"
]
},
{
"html": "<h5>Follow the Severe Schedule</h5>",
"target": [
".tip-item:nth-child(1) > div:nth-child(2) > h5"
]
},
{
"html": "<h5>Rotate Tires Every 5,000 Miles</h5>",
"target": [
".tip-item:nth-child(2) > div:nth-child(2) > h5"
]
},
{
"html": "<h5>Never Ignore Warning Lights</h5>",
"target": [
".tip-item:nth-child(3) > div:nth-child(2) > h5"
]
},
{
"html": "<h5>Flush Fluids on Schedule</h5>",
"target": [
".tip-item:nth-child(4) > div:nth-child(2) > h5"
]
},
{
"html": "<h5>Keep a Paper Trail</h5>",
"target": [
".tip-item:nth-child(5) > div:nth-child(2) > h5"
]
},
{
"html": "<h3>Handpicked. <span>Inspected.</span> Guaranteed.</h3>",
"target": [
"#inventory > .container > .section-head > div > h3"
]
},
{
"html": "<h4>2023 Solara EV Premium</h4>",
"target": [
".vehicle-card:nth-child(1) > .vehicle-body > h4"
]
},
{
"html": "<h4>2022 Crestline Touring</h4>",
"target": [
".vehicle-card:nth-child(2) > .vehicle-body > h4"
]
},
{
"html": "<h4>2024 Ridgeline Sport 4x4</h4>",
"target": [
".vehicle-card:nth-child(3) > .vehicle-body > h4"
]
},
{
"html": "<h3>This Month's <span>Exclusive Offers</span></h3>",
"target": [
"#specials > .container > .section-head > div > h3"
]
},
{
"html": "<h4>Complete Brake Service</h4>",
"target": [
".special-card:nth-child(1) > h4"
]
},
{
"html": "<h4>Synthetic Oil & Multi-Point</h4>",
"target": [
".special-card:nth-child(2) > h4"
]
},
{
"html": "<h4>Tire Rotation & Alignment</h4>",
"target": [
".special-card:nth-child(3) > h4"
]
},
{
"html": "<h3>What Drivers Are <span>Saying About Us</span></h3>",
"target": [
"#reviews > .container > .section-head > div > h3"
]
},
{
"html": "<h3>Get the <span>Weekly Drive</span> in Your Inbox</h3>",
"target": [
".newsletter-box > h3"
]
},
{
"html": "<h1>Drive<span>Pulse</span></h1>",
"target": [
".footer-brand > .brand[href=\"#\"] > .brand-text > h1"
]
},
{
"html": "<h5>Explore</h5>",
"target": [
".footer-col:nth-child(2) > h5"
]
},
{
"html": "<h5>Dealership</h5>",
"target": [
".footer-col:nth-child(3) > h5"
]
},
{
"html": "<h5>Company</h5>",
"target": [
".footer-col:nth-child(4) > h5"
]
},
{
"html": "<h5>Get in Touch</h5>",
"target": [
".footer-contact > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"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": "#9a9aa6",
"bgColor": "#000000",
"contrastRatio": 7.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 7.54"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>\ud83d\udccd Serving the Greater Metro Area \u2014 3 Locations</span>",
"target": [
".topbar-inner > span"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "year",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<select id=\"year\" required=\"\">",
"target": [
"#year"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"year\">Year</label>",
"target": [
"label[for=\"year\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"year\" required=\"\">",
"target": [
"#year"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img class=\"brand-logo\" src=\"https://placehold.co/48x48/e63946/ffffff?text=DP&font=montserrat\" alt=\"DrivePulse logo\">",
"target": [
".header-inner > .brand[href=\"#\"] > .brand-logo[alt=\"DrivePulse logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Model"
},
"relatedNodes": [
{
"html": "<label for=\"model\">Model</label>",
"target": [
"label[for=\"model\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"model\" placeholder=\"e.g. Camry\" required=\"\">",
"target": [
"#model"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"special-card\">",
"target": [
".special-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(1) > .btn-primary.btn[href=\"#\"]"
]
}
]
},
{
"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=\"#\">Service Hours: Mon\u2013Sat 7AM\u20137PM</a>",
"target": [
".topbar-links > a[href=\"#\"]:nth-child(1)"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"calc-features\">\n <li>Instant estimate based on live market conditions</li>\n <li>Guaranteed offer valid for 7 days</li>\n <li>Apply toward purchase or take cash</li>\n <li>No obligation, no appointment needed</li>\n </ul>",
"target": [
".calc-features"
]
}
]
},
{
"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>Instant estimate based on live market conditions</li>",
"target": [
".calc-features > 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 class=\"brand-logo\" src=\"https://placehold.co/48x48/e63946/ffffff?text=DP&font=montserrat\" alt=\"DrivePulse logo\">",
"target": [
".header-inner > .brand[href=\"#\"] > .brand-logo[alt=\"DrivePulse logo\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Year"
},
"relatedNodes": [
{
"html": "<label for=\"year\">Year</label>",
"target": [
"label[for=\"year\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"year\" required=\"\">",
"target": [
"#year"
]
}
]
},
{
"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-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=\"#\">Service Hours: Mon\u2013Sat 7AM\u20137PM</a>",
"target": [
".topbar-links > a[href=\"#\"]:nth-child(1)"
]
}
]
}
],
"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": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "16.5pt (22px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site\">",
"target": [
"header"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h1>Drive<span>Pulse</span></h1>",
"target": [
".header-inner > .brand[href=\"#\"] > .brand-text > h1"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#inventory\" class=\"btn btn-primary\">View Inventory \u2192</a>",
"target": [
".header-cta > .btn-primary.btn[href$=\"#inventory\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#inventory\" class=\"btn btn-primary\">View Inventory \u2192</a>",
"target": [
".header-cta > .btn-primary.btn[href$=\"#inventory\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#inventory\" class=\"btn btn-primary\">Browse Inventory</a>",
"target": [
".hero-actions > .btn-primary.btn[href$=\"#inventory\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#inventory\" class=\"btn btn-primary\">Browse Inventory</a>",
"target": [
".hero-actions > .btn-primary.btn[href$=\"#inventory\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"story-cat\">Long-Term Review</span>",
"target": [
".featured > .story-overlay > .story-cat"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"story-cat\">Long-Term Review</span>",
"target": [
".featured > .story-overlay > .story-cat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"story-cat\">Comparison</span>",
"target": [
".story-card[href=\"#\"]:nth-child(2) > .story-overlay > .story-cat"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"story-cat\">Comparison</span>",
"target": [
".story-card[href=\"#\"]:nth-child(2) > .story-overlay > .story-cat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"story-cat\">First Drive</span>",
"target": [
".story-card[href=\"#\"]:nth-child(3) > .story-overlay > .story-cat"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"story-cat\">First Drive</span>",
"target": [
".story-card[href=\"#\"]:nth-child(3) > .story-overlay > .story-cat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"story-cat\">Industry</span>",
"target": [
".story-card[href=\"#\"]:nth-child(4) > .story-overlay > .story-cat"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"story-cat\">Industry</span>",
"target": [
".story-card[href=\"#\"]:nth-child(4) > .story-overlay > .story-cat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"story-cat\">Buying Guide</span>",
"target": [
".story-card[href=\"#\"]:nth-child(5) > .story-overlay > .story-cat"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"story-cat\">Buying Guide</span>",
"target": [
".story-card[href=\"#\"]:nth-child(5) > .story-overlay > .story-cat"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "11.3pt (15px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"calc-submit\">Trade In My Vehicle \u2192</button>",
"target": [
".calc-submit"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"calc-submit\">Trade In My Vehicle \u2192</button>",
"target": [
".calc-submit"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e63946",
"bgColor": "#141418",
"contrastRatio": 4.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"cpo-section\" id=\"inventory\">",
"target": [
"#inventory"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #e63946, background color: #141418, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-tag\">Certified Pre-Owned</span>",
"target": [
"#inventory > .container > .section-head > div > .section-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #e63946, background color: #141418, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\">View Full Inventory \u2192</a>",
"target": [
".section-head > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\">View Full Inventory \u2192</a>",
"target": [
".section-head > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(1) > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(1) > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(2) > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(2) > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(3) > .btn-primary.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-primary\">Schedule Now</a>",
"target": [
".special-card:nth-child(3) > .btn-primary.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e63946",
"bgColor": "#141418",
"contrastRatio": 4.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"testimonials-section\" id=\"reviews\">",
"target": [
"#reviews"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.4 (foreground color: #e63946, background color: #141418, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-tag\">Reader & Customer Reviews</span>",
"target": [
"#reviews > .container > .section-head > div > .section-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.4 (foreground color: #e63946, background color: #141418, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e63946",
"contrastRatio": 4.16,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"btn btn-primary\">Subscribe Free</button>",
"target": [
".newsletter-form > button"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"btn btn-primary\">Subscribe Free</button>",
"target": [
".newsletter-form > button"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #ffffff, background color: #e63946, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7092
},
{
"y": 576,
"height": 7092
},
{
"y": 1152,
"height": 7092
},
{
"y": 1728,
"height": 7092
},
{
"y": 2304,
"height": 7092
},
{
"y": 2880,
"height": 7092
},
{
"y": 3456,
"height": 7092
},
{
"y": 4032,
"height": 7092
},
{
"y": 4608,
"height": 7092
},
{
"y": 5184,
"height": 7092
},
{
"y": 5760,
"height": 7092
},
{
"y": 6336,
"height": 7092
},
{
"y": 6372,
"height": 7092
}
],
"scans": 14,
"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 "Automotive" 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: "Automotive"
- Description: Automotive news, car reviews, repair tips, and dealership resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Automotive" 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: "Trade-In", "Specials", "Reviews".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Automotive" category. Consider themes similar to: "Maintenance Tips", "Service Specials", "Certified Pre-Owned".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "mileage rating", "certified pre-owned", "trade-in value".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "View Inventory", "Schedule Test Drive", "Trade In".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Automotive" sector. Ideas similar but not limited to: "trade-in calculator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "featured inventory", "customer reviews", "new arrivals".
- **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.