MoonshotAI Kimi K2.7 Code – Pets

via Moonshot AI · Generated

  • AIMAC Debt 4.75
  • Cost $0.11
  • Total Violations 18
  • HTML Size 50 KB
  • Em Dashes 4

Screenshot

View MoonshotAI Kimi K2.7 Code Pets page View Live Page

Accessibility Issues Found

18 Serious

  • color-contrast serious 18 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#nutrition">Explore Nutrition →</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>PawHaven | Compassionate Pet Care, Adoption & Training Resources</title>
  <meta name="description" content="PawHaven is your trusted companion for pet adoption, expert pet care advice, positive reinforcement training, and veterinary resources.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #2a9d8f;
      --primary-dark: #21867a;
      --secondary: #e76f51;
      --secondary-dark: #d45d3f;
      --accent: #f4a261;
      --dark: #264653;
      --light: #f8f9fa;
      --cream: #fdf6f0;
      --text: #3d3d3d;
      --text-light: #6c757d;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
      --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
      --shadow-lg: 0 16px 40px rgba(0,0,0,0.12);
      --radius: 16px;
      --radius-sm: 10px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      color: var(--text);
      line-height: 1.7;
      background-color: #fff;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      line-height: 1.25;
      color: var(--dark);
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition);
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 50px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      border: none;
      transition: var(--transition);
      text-transform: capitalize;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
      box-shadow: 0 4px 14px rgba(42, 157, 143, 0.35);
    }

    .btn-primary:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(42, 157, 143, 0.45);
    }

    .btn-secondary {
      background: var(--secondary);
      color: white;
      box-shadow: 0 4px 14px rgba(231, 111, 81, 0.35);
    }

    .btn-secondary:hover {
      background: var(--secondary-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(231, 111, 81, 0.45);
    }

    .btn-outline {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-outline:hover {
      background: var(--primary);
      color: white;
    }

    .section-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 56px;
    }

    .section-header h2 {
      font-size: 2.25rem;
      margin-bottom: 16px;
      position: relative;
      display: inline-block;
    }

    .section-header h2::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: var(--accent);
      border-radius: 2px;
    }

    .section-header p {
      color: var(--text-light);
      font-size: 1.1rem;
      margin-top: 24px;
    }

    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow-sm);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: var(--shadow-sm);
    }

    .brand-text h1 {
      font-size: 1.5rem;
      color: var(--dark);
      letter-spacing: -0.5px;
    }

    .brand-text span {
      display: block;
      font-size: 0.75rem;
      color: var(--text-light);
      font-weight: 500;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-top: -2px;
    }

    nav ul {
      display: flex;
      list-style: none;
      gap: 32px;
      align-items: center;
    }

    nav a {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--dark);
      position: relative;
      padding: 6px 0;
    }

    nav a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: var(--transition);
    }

    nav a:hover {
      color: var(--primary);
    }

    nav a:hover::after {
      width: 100%;
    }

    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    .mobile-menu-btn span {
      display: block;
      width: 26px;
      height: 3px;
      background: var(--dark);
      margin: 5px 0;
      border-radius: 2px;
      transition: var(--transition);
    }

    /* Hero */
    .hero {
      background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
      padding: 80px 0 100px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 450px;
      height: 450px;
      background: rgba(42, 157, 143, 0.08);
      border-radius: 50%;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -120px;
      left: -80px;
      width: 350px;
      height: 350px;
      background: rgba(244, 162, 97, 0.1);
      border-radius: 50%;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .hero-content h2 {
      font-size: 3.2rem;
      margin-bottom: 24px;
      color: var(--dark);
    }

    .hero-content h2 span {
      color: var(--primary);
      position: relative;
    }

    .hero-content p {
      font-size: 1.15rem;
      color: var(--text-light);
      margin-bottom: 32px;
      max-width: 540px;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .hero-image {
      position: relative;
    }

    .hero-image img {
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      width: 100%;
      height: 480px;
      object-fit: cover;
    }

    .hero-badge {
      position: absolute;
      bottom: -24px;
      left: -24px;
      background: white;
      padding: 20px 24px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 260px;
    }

    .hero-badge img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
    }

    .hero-badge div h4 {
      font-size: 0.9rem;
      margin-bottom: 4px;
    }

    .hero-badge div p {
      font-size: 0.8rem;
      color: var(--text-light);
    }

    /* Stats Bar */
    .stats-bar {
      background: var(--dark);
      padding: 48px 0;
      margin-top: -40px;
      position: relative;
      z-index: 2;
      border-radius: var(--radius);
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      box-shadow: var(--shadow-lg);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
    }

    .stat-item h3 {
      font-size: 2.5rem;
      color: white;
      margin-bottom: 8px;
    }

    .stat-item p {
      color: rgba(255,255,255,0.8);
      font-size: 0.95rem;
    }

    /* Services */
    .services {
      padding: 100px 0;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .service-card {
      background: white;
      border-radius: var(--radius);
      padding: 36px 30px;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      border: 1px solid rgba(0,0,0,0.04);
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-md);
    }

    .service-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      margin-bottom: 24px;
      background: var(--cream);
    }

    .service-card h3 {
      font-size: 1.25rem;
      margin-bottom: 14px;
    }

    .service-card p {
      color: var(--text-light);
      font-size: 0.95rem;
      margin-bottom: 20px;
    }

    .service-card a {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      color: var(--primary);
      font-size: 0.9rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .service-card a:hover {
      gap: 10px;
      color: var(--primary-dark);
    }

    /* Adoption Section */
    .adoption {
      padding: 100px 0;
      background: var(--cream);
    }

    .adoption-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .adoption-content h2 {
      font-size: 2.25rem;
      margin-bottom: 24px;
    }

    .adoption-content p {
      color: var(--text-light);
      margin-bottom: 20px;
      font-size: 1.05rem;
    }

    .adoption-list {
      list-style: none;
      margin: 28px 0;
    }

    .adoption-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
      color: var(--text);
    }

    .adoption-list li::before {
      content: '✓';
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      background: var(--primary);
      color: white;
      border-radius: 50%;
      font-size: 0.8rem;
      margin-top: 2px;
    }

    .adoption-image {
      position: relative;
    }

    .adoption-image img {
      border-radius: var(--radius);
      width: 100%;
      height: 460px;
      object-fit: cover;
      box-shadow: var(--shadow-md);
    }

    .adoption-image .floating-card {
      position: absolute;
      top: -20px;
      right: -20px;
      background: white;
      padding: 18px 22px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
    }

    .adoption-image .floating-card h4 {
      color: var(--secondary);
      font-size: 1.5rem;
      margin-bottom: 4px;
    }

    .adoption-image .floating-card p {
      font-size: 0.85rem;
      color: var(--text-light);
    }

    /* Nutrition Section */
    .nutrition {
      padding: 100px 0;
    }

    .nutrition-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .nutrition-image {
      position: relative;
    }

    .nutrition-image img {
      border-radius: var(--radius);
      width: 100%;
      height: 460px;
      object-fit: cover;
      box-shadow: var(--shadow-md);
    }

    .nutrition-badge {
      position: absolute;
      bottom: 30px;
      left: 30px;
      background: white;
      padding: 16px 20px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .nutrition-badge img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }

    .nutrition-content h2 {
      font-size: 2.25rem;
      margin-bottom: 24px;
    }

    .nutrition-content p {
      color: var(--text-light);
      margin-bottom: 20px;
      font-size: 1.05rem;
    }

    .nutrition-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin: 32px 0;
    }

    .nutrition-mini-card {
      background: var(--cream);
      padding: 22px;
      border-radius: var(--radius-sm);
    }

    .nutrition-mini-card h4 {
      font-size: 1rem;
      margin-bottom: 8px;
      color: var(--primary-dark);
    }

    .nutrition-mini-card p {
      font-size: 0.9rem;
      margin: 0;
    }

    /* Name Generator */
    .generator-section {
      padding: 100px 0;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      color: white;
      position: relative;
      overflow: hidden;
    }

    .generator-section::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 300px;
      height: 300px;
      background: rgba(255,255,255,0.08);
      border-radius: 50%;
    }

    .generator-section .section-header h2,
    .generator-section .section-header p {
      color: white;
    }

    .generator-section .section-header h2::after {
      background: var(--accent);
    }

    .generator-box {
      max-width: 800px;
      margin: 0 auto;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border-radius: var(--radius);
      padding: 48px;
      border: 1px solid rgba(255,255,255,0.15);
    }

    .generator-controls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }

    .generator-controls label {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 10px;
      color: rgba(255,255,255,0.9);
    }

    .generator-controls select {
      width: 100%;
      padding: 14px 18px;
      border-radius: var(--radius-sm);
      border: none;
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      background: white;
      color: var(--dark);
      cursor: pointer;
    }

    .generator-result {
      background: white;
      border-radius: var(--radius-sm);
      padding: 36px;
      text-align: center;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .generator-result h3 {
      color: var(--text-light);
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 12px;
    }

    .generator-result .name-display {
      font-family: 'Poppins', sans-serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 8px;
      min-height: 60px;
    }

    .generator-result .name-meaning {
      color: var(--text-light);
      font-size: 0.95rem;
    }

    /* Testimonials */
    .testimonials {
      padding: 100px 0;
      background: var(--cream);
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .testimonial-card {
      background: white;
      padding: 36px 30px;
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      position: relative;
    }

    .testimonial-card::before {
      content: '"';
      position: absolute;
      top: 20px;
      right: 24px;
      font-family: 'Poppins', sans-serif;
      font-size: 5rem;
      color: var(--cream);
      line-height: 1;
    }

    .testimonial-card p {
      color: var(--text-light);
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .testimonial-author img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-author h4 {
      font-size: 1rem;
      margin-bottom: 2px;
    }

    .testimonial-author span {
      font-size: 0.85rem;
      color: var(--text-light);
    }

    /* FAQ */
    .faq {
      padding: 100px 0;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }

    .faq-content h2 {
      font-size: 2.25rem;
      margin-bottom: 24px;
    }

    .faq-content > p {
      color: var(--text-light);
      margin-bottom: 32px;
      font-size: 1.05rem;
    }

    .accordion {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .accordion-item {
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: white;
      transition: var(--transition);
    }

    .accordion-item.active {
      box-shadow: var(--shadow-sm);
      border-color: rgba(42, 157, 143, 0.2);
    }

    .accordion-header {
      width: 100%;
      padding: 22px 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      color: var(--dark);
    }

    .accordion-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: var(--primary);
      transition: var(--transition);
    }

    .accordion-item.active .accordion-icon {
      transform: rotate(45deg);
      background: var(--primary);
      color: white;
    }

    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .accordion-body p {
      padding: 0 26px 22px;
      color: var(--text-light);
      font-size: 0.95rem;
    }

    .faq-image img {
      border-radius: var(--radius);
      width: 100%;
      height: 520px;
      object-fit: cover;
      box-shadow: var(--shadow-md);
    }

    /* CTA Section */
    .cta-section {
      padding: 100px 0;
      background: var(--dark);
      color: white;
      text-align: center;
    }

    .cta-section h2 {
      color: white;
      font-size: 2.5rem;
      margin-bottom: 20px;
    }

    .cta-section p {
      color: rgba(255,255,255,0.85);
      max-width: 600px;
      margin: 0 auto 32px;
      font-size: 1.1rem;
    }

    .cta-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Footer */
    footer {
      background: #1a333b;
      color: rgba(255,255,255,0.8);
      padding: 72px 0 32px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 56px;
    }

    .footer-brand img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      margin-bottom: 20px;
    }

    .footer-brand h3 {
      color: white;
      font-size: 1.4rem;
      margin-bottom: 8px;
    }

    .footer-brand p {
      font-size: 0.95rem;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .social-links {
      display: flex;
      gap: 12px;
    }

    .social-links a {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
    }

    .social-links a:hover {
      background: var(--primary);
      transform: translateY(-3px);
    }

    .footer-links h4 {
      color: white;
      font-size: 1.05rem;
      margin-bottom: 24px;
    }

    .footer-links ul {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 12px;
    }

    .footer-links a {
      font-size: 0.95rem;
      transition: var(--transition);
    }

    .footer-links a:hover {
      color: var(--accent);
      padding-left: 4px;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 0.9rem;
    }

    .footer-bottom a {
      color: rgba(255,255,255,0.8);
    }

    .footer-bottom a:hover {
      color: var(--accent);
    }

    /* Responsive */
    @media (max-width: 992px) {
      .hero-grid,
      .adoption-grid,
      .nutrition-grid,
      .faq-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .services-grid,
      .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .hero-content h2 {
        font-size: 2.5rem;
      }

      .hero-image img,
      .adoption-image img,
      .nutrition-image img,
      .faq-image img {
        height: 380px;
      }

      .generator-controls {
        grid-template-columns: 1fr;
      }

      .mobile-menu-btn {
        display: block;
      }

      nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 20px 24px;
        box-shadow: var(--shadow-md);
        transform: translateY(-150%);
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
      }

      nav.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
      }

      nav ul {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
      }
    }

    @media (max-width: 576px) {
      .services-grid,
      .testimonials-grid,
      .footer-grid,
      .stats-grid,
      .nutrition-cards {
        grid-template-columns: 1fr;
      }

      .hero-content h2 {
        font-size: 2rem;
      }

      .section-header h2 {
        font-size: 1.8rem;
      }

      .generator-box {
        padding: 28px;
      }

      .hero-badge {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 20px;
      }

      .adoption-image .floating-card {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 16px;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <div class="header-inner">
        <a href="#" class="brand">
          <img src="https://placehold.co/100x100/2a9d8f/ffffff?text=PH&font=poppins" alt="PawHaven Logo">
          <div class="brand-text">
            <h1>PawHaven</h1>
            <span>Where Every Pet Finds Their People</span>
          </div>
        </a>
        <button class="mobile-menu-btn" aria-label="Toggle menu" onclick="toggleMenu()">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <nav id="mainNav">
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#adopt">Adopt</a></li>
            <li><a href="#pet-care">Pet Care</a></li>
            <li><a href="#training">Training</a></li>
            <li><a href="#veterinary">Veterinary</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#community">Community</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <main>
    <section class="hero" id="home">
      <div class="container">
        <div class="hero-grid">
          <div class="hero-content">
            <h2>Expert Care for Your <span>Beloved Companions</span></h2>
            <p>From nutrition requirements tailored to breed characteristics to positive reinforcement training guides and compassionate adoption services, PawHaven is your complete resource for happy, healthy pets. Join thousands of pet parents who trust us for expert advice, rescue support, and lifelong companionship.</p>
            <div class="hero-buttons">
              <a href="#adopt" class="btn btn-primary">Search Adoptables</a>
              <a href="#pet-care" class="btn btn-outline">Get Care Tips</a>
            </div>
          </div>
          <div class="hero-image">
            <img src="https://picsum.photos/600/480?random=1" alt="Happy dog and owner at a park">
            <div class="hero-badge">
              <img src="https://i.pravatar.cc/100?u=sarah" alt="Sarah M.">
              <div>
                <h4>Sarah M. & Cooper</h4>
                <p>Adopted through PawHaven in 2023</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="container">
      <div class="stats-bar">
        <div class="stats-grid">
          <div class="stat-item">
            <h3>2,400+</h3>
            <p>Pets Adopted</p>
          </div>
          <div class="stat-item">
            <h3>150+</h3>
            <p>Rescue Partners</p>
          </div>
          <div class="stat-item">
            <h3>18k</h3>
            <p>Pet Parents Helped</p>
          </div>
          <div class="stat-item">
            <h3>4.9/5</h3>
            <p>Community Rating</p>
          </div>
        </div>
      </div>
    </div>

    <section class="services" id="pet-care">
      <div class="container">
        <div class="section-header">
          <h2>Comprehensive Pet Care Services</h2>
          <p>Whether you are welcoming a new puppy, managing a senior cat's health, or seeking behavioral guidance, our resources cover every stage of your pet's life with compassion and evidence-based expertise.</p>
        </div>
        <div class="services-grid">
          <article class="service-card">
            <div class="service-icon">🥗</div>
            <h3>Nutrition Guidance</h3>
            <p>Understand species-specific nutrition requirements, from protein ratios for active working breeds to renal-support diets for aging cats. Our veterinary nutritionists help you decode labels and choose foods that support coat health, digestion, and longevity.</p>
            <a href="#nutrition">Explore Nutrition →</a>
          </article>
          <article class="service-card">
            <div class="service-icon">🎓</div>
            <h3>Training Programs</h3>
            <p>Build trust and good manners through positive reinforcement methods rooted in animal learning theory. We offer step-by-step guides for puppy socialization, leash reactivity, crate training, and enrichment activities that strengthen your bond.</p>
            <a href="#training">Start Training →</a>
          </article>
          <article class="service-card">
            <div class="service-icon">🏥</div>
            <h3>Veterinary Resources</h3>
            <p>Connect with licensed veterinarians, locate emergency clinics, and access symptom checklists for common concerns. Learn when to schedule routine wellness exams and how to prepare for your pet's appointments.</p>
            <a href="#veterinary">Find Vet Care →</a>
          </article>
          <article class="service-card">
            <div class="service-icon">🏠</div>
            <h3>Adoption Support</h3>
            <p>Browse adoptable pets from verified rescue partners, read detailed breed characteristics and personality profiles, and receive guidance on home preparation, introductions, and the first 30 days with your new companion.</p>
            <a href="#adopt">Meet Adoptables →</a>
          </article>
          <article class="service-card">
            <div class="service-icon">🚨</div>
            <h3>Emergency Preparedness</h3>
            <p>Be ready for the unexpected with first-aid tutorials, poison control hotlines, evacuation planning tips, and a customizable emergency kit checklist tailored to dogs, cats, birds, and small mammals.</p>
            <a href="#emergency">Be Prepared →</a>
          </article>
          <article class="service-card">
            <div class="service-icon">💬</div>
            <h3>Community Forum</h3>
            <p>Join a welcoming community of pet lovers to share adoption stories, ask training questions, and celebrate milestones. Our moderated forums ensure respectful, helpful conversations for every experience level.</p>
            <a href="#community">Join the Community →</a>
          </article>
        </div>
      </div>
    </section>

    <section class="adoption" id="adopt">
      <div class="container">
        <div class="adoption-grid">
          <div class="adoption-content">
            <h2>Find a Friend Who Changes Everything</h2>
            <p>Adoption is one of the most rewarding decisions a pet lover can make. At PawHaven, we partner with trusted shelters and foster networks to help homeless animals find forever families. Every adoptable pet on our platform has been assessed for temperament, health status, and compatibility with different lifestyles.</p>
            <p>We believe in transparent, ethical adoption practices. That is why each profile includes detailed information about the animal's history, known breed characteristics, energy level, and any special care needs. Our adoption counselors are available to guide you through every step, from application to homecoming.</p>
            <ul class="adoption-list">
              <li>Verified rescue partners with rigorous welfare standards</li>
              <li>Detailed pet profiles with photos, videos, and personality notes</li>
              <li>Post-adoption support including training and health resources</li>
              <li>Special programs for senior pets and bonded pairs</li>
            </ul>
            <a href="#" class="btn btn-secondary">Search Adoptables</a>
          </div>
          <div class="adoption-image">
            <img src="https://picsum.photos/600/460?random=2" alt="Rescue dog meeting new family">
            <div class="floating-card">
              <h4>340</h4>
              <p>Pets waiting for homes this week</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="nutrition" id="nutrition">
      <div class="container">
        <div class="nutrition-grid">
          <div class="nutrition-image">
            <img src="https://picsum.photos/600/460?random=3" alt="Healthy pet food and fresh ingredients">
            <div class="nutrition-badge">
              <img src="https://i.pravatar.cc/100?u=drmartinez" alt="Dr. Elena Martinez">
              <div>
                <h4 style="margin:0;color:var(--dark);font-size:0.95rem;">Dr. Elena Martinez</h4>
                <p style="margin:0;font-size:0.8rem;">Veterinary Nutritionist</p>
              </div>
            </div>
          </div>
          <div class="nutrition-content">
            <h2>Smart Nutrition for Every Life Stage</h2>
            <p>Feeding your pet well is about more than filling a bowl. Proper nutrition supports immune function, maintains healthy weight, promotes shiny coats, and can even influence behavior and energy levels. Our nutrition guides are written and reviewed by veterinary professionals to help you make informed decisions.</p>
            <p>We address the unique nutrition requirements of different species, breeds, and ages. Large-breed puppies need controlled calcium levels to support proper bone development, while senior cats often benefit from increased moisture and reduced phosphorus. Understanding these differences helps prevent chronic health issues down the road.</p>
            <div class="nutrition-cards">
              <div class="nutrition-mini-card">
                <h4>Age-Appropriate Diets</h4>
                <p>Puppy, adult, and senior formulas explained with feeding schedules.</p>
              </div>
              <div class="nutrition-mini-card">
                <h4>Special Needs</h4>
                <p>Guidance for allergies, weight management, and medical conditions.</p>
              </div>
            </div>
            <a href="#" class="btn btn-primary">Read Nutrition Guides</a>
          </div>
        </div>
      </div>
    </section>

    <section class="generator-section" id="name-generator">
      <div class="container">
        <div class="section-header">
          <h2>Pet Name Generator</h2>
          <p>Stuck on what to call your new companion? Tell us a little about them, and we will suggest a meaningful name that matches their personality and species.</p>
        </div>
        <div class="generator-box">
          <div class="generator-controls">
            <div>
              <label for="petSpecies">Pet Species</label>
              <select id="petSpecies">
                <option value="dog">Dog</option>
                <option value="cat">Cat</option>
                <option value="rabbit">Rabbit</option>
                <option value="bird">Bird</option>
              </select>
            </div>
            <div>
              <label for="petGender">Gender</label>
              <select id="petGender">
                <option value="any">Any</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
              </select>
            </div>
            <div>
              <label for="petPersonality">Personality</label>
              <select id="petPersonality">
                <option value="playful">Playful & Energetic</option>
                <option value="calm">Calm & Gentle</option>
                <option value="brave">Brave & Bold</option>
                <option value="curious">Curious & Clever</option>
              </select>
            </div>
          </div>
          <div class="generator-result">
            <h3>Your perfect pet name:</h3>
            <div class="name-display" id="nameDisplay">Click generate to begin</div>
            <p class="name-meaning" id="nameMeaning">Select your preferences above and discover a name with meaning.</p>
          </div>
          <div style="text-align:center;margin-top:28px;">
            <button class="btn btn-secondary" onclick="generateName()" style="min-width:180px;">Generate Name</button>
          </div>
        </div>
      </div>
    </section>

    <section class="testimonials" id="community">
      <div class="container">
        <div class="section-header">
          <h2>Stories from the PawHaven Family</h2>
          <p>Real experiences from pet parents, fosters, and rescue volunteers who have found guidance, support, and friendship through our community.</p>
        </div>
        <div class="testimonials-grid">
          <article class="testimonial-card">
            <p>"PawHaven made our adoption journey so much smoother. The breed characteristics guide helped us choose a dog that fit our apartment lifestyle, and the training articles turned a nervous rescue into a confident, happy companion."</p>
            <div class="testimonial-author">
              <img src="https://i.pravatar.cc/100?u=marcus" alt="Marcus T.">
              <div>
                <h4>Marcus T.</h4>
                <span>Adopted a mixed-breed rescue</span>
              </div>
            </div>
          </article>
          <article class="testimonial-card">
            <p>"As a first-time cat owner, I was overwhelmed by nutrition options. The veterinary-reviewed articles broke everything down clearly, and my vet even commented on how healthy my kitten looks at her checkups."</p>
            <div class="testimonial-author">
              <img src="https://i.pravatar.cc/100?u=jennifer" alt="Jennifer L.">
              <div>
                <h4>Jennifer L.</h4>
                <span>First-time cat parent</span>
              </div>
            </div>
          </article>
          <article class="testimonial-card">
            <p>"The positive reinforcement training resources here are fantastic. We used the step-by-step leash-reactivity plan with our reactive dog, and walks are now enjoyable for both of us. Highly recommend the community forum too!"</p>
            <div class="testimonial-author">
              <img src="https://i.pravatar.cc/100?u=amara" alt="Amara K.">
              <div>
                <h4>Amara K.</h4>
                <span>Dog trainer & foster volunteer</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="faq" id="emergency">
      <div class="container">
        <div class="faq-grid">
          <div class="faq-content">
            <h2>Frequently Asked Questions</h2>
            <p>Get quick answers to common questions about pet care, adoption, training, and emergency situations. For urgent medical concerns, always contact your veterinarian or the nearest emergency animal hospital immediately.</p>
            <div class="accordion">
              <div class="accordion-item">
                <button class="accordion-header" onclick="toggleAccordion(this)">
                  How do I choose the right food for my pet?
                  <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-body">
                  <p>Start by selecting a formula appropriate for your pet's species, age, size, and activity level. Look for products that meet AAFCO or FEDIAF nutritional standards and list a quality protein source as the first ingredient. Consult your veterinarian if your pet has health conditions, allergies, or special nutrition requirements.</p>
                </div>
              </div>
              <div class="accordion-item">
                <button class="accordion-header" onclick="toggleAccordion(this)">
                  What should I include in a pet emergency kit?
                  <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-body">
                  <p>Every pet emergency kit should include at least three days of food and water, medications, copies of medical records, a leash or carrier, first-aid supplies, blankets, photos of your pet, and contact information for your veterinarian and local emergency clinics. Update the kit seasonally and check expiration dates regularly.</p>
                </div>
              </div>
              <div class="accordion-item">
                <button class="accordion-header" onclick="toggleAccordion(this)">
                  How does positive reinforcement training work?
                  <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-body">
                  <p>Positive reinforcement training rewards desired behaviors, making them more likely to be repeated. Rewards can include treats, praise, toys, or playtime. This approach builds trust, reduces fear-based behaviors, and is effective for teaching everything from basic cues to complex tricks and behavioral modification.</p>
                </div>
              </div>
              <div class="accordion-item">
                <button class="accordion-header" onclick="toggleAccordion(this)">
                  What is the adoption process like?
                  <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-body">
                  <p>Most adoptions begin with an application and a conversation about your lifestyle, experience, and preferences. Approved adopters may meet the pet, complete an adoption contract, and pay an adoption fee that typically covers spay/neuter, vaccinations, and microchipping. PawHaven partners provide ongoing support after adoption.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="faq-image">
            <img src="https://picsum.photos/600/520?random=4" alt="Veterinarian examining a happy dog">
          </div>
        </div>
      </div>
    </section>

    <section class="cta-section" id="training">
      <div class="container">
        <h2>Ready to Give Your Pet the Best Life?</h2>
        <p>Join the PawHaven community today for free access to expert articles, training guides, nutrition tools, and a network of pet lovers who are here to help every step of the way.</p>
        <div class="cta-buttons">
          <a href="#" class="btn btn-primary">Join PawHaven Free</a>
          <a href="#blog" class="btn btn-secondary">Read the Blog</a>
        </div>
      </div>
    </section>
  </main>

  <footer id="blog">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <img src="https://placehold.co/100x100/2a9d8f/ffffff?text=PH&font=poppins" alt="PawHaven Logo">
          <h3>PawHaven</h3>
          <p>Your trusted companion for pet adoption, care, training, and veterinary resources. We believe every animal deserves a safe, loving home and every pet parent deserves reliable guidance.</p>
          <div class="social-links">
            <a href="#" aria-label="Facebook">f</a>
            <a href="#" aria-label="Instagram">📷</a>
            <a href="#" aria-label="Twitter">𝕏</a>
            <a href="#" aria-label="YouTube">▶</a>
          </div>
        </div>
        <div class="footer-links">
          <h4>Resources</h4>
          <ul>
            <li><a href="#pet-care">Pet Care Guides</a></li>
            <li><a href="#nutrition">Nutrition Advice</a></li>
            <li><a href="#training">Training Tips</a></li>
            <li><a href="#emergency">Emergency Info</a></li>
          </ul>
        </div>
        <div class="footer-links">
          <h4>Company</h4>
          <ul>
            <li><a href="#">About PawHaven</a></li>
            <li><a href="#">Our Rescue Partners</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
        <div class="footer-links">
          <h4>Contact</h4>
          <ul>
            <li>📍 124 Companion Way, Portland, OR 97201</li>
            <li>📞 (503) 555-PAWS</li>
            <li>✉️ hello@pawhaven.org</li>
            <li>🕐 Mon–Fri: 8am – 6pm PT</li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2025 PawHaven. All rights reserved.</p>
        <div>
          <a href="#" style="margin-right: 20px;">Privacy Policy</a>
          <a href="#">Terms of Service</a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // Mobile menu toggle
    function toggleMenu() {
      const nav = document.getElementById('mainNav');
      nav.classList.toggle('open');
    }

    // Close mobile menu when clicking a link
    document.querySelectorAll('nav a').forEach(link => {
      link.addEventListener('click', () => {
        document.getElementById('mainNav').classList.remove('open');
      });
    });

    // FAQ Accordion
    function toggleAccordion(button) {
      const item = button.parentElement;
      const body = button.nextElementSibling;
      const isActive = item.classList.contains('active');

      // Close all
      document.querySelectorAll('.accordion-item').forEach(acc => {
        acc.classList.remove('active');
        acc.querySelector('.accordion-body').style.maxHeight = null;
      });

      // Open clicked if not already active
      if (!isActive) {
        item.classList.add('active');
        body.style.maxHeight = body.scrollHeight + 'px';
      }
    }

    // Pet Name Generator
    const names = {
      dog: {
        playful: {
          male: [
            { name: 'Ziggy', meaning: 'A lively name for a dog who brings energy to every room.' },
            { name: 'Finn', meaning: 'Short for "finder" — perfect for an adventurous explorer.' },
            { name: 'Biscuit', meaning: 'A sweet, cheerful name for a dog with a sunny personality.' }
          ],
          female: [
            { name: 'Pepper', meaning: 'Spicy and spirited, just like a playful pup.' },
            { name: 'Luna', meaning: 'Bright and full of energy, like the moon lighting up the night.' },
            { name: 'Daisy', meaning: 'A cheerful, outdoorsy name for a dog who loves to run.' }
          ]
        },
        calm: {
          male: [
            { name: 'Milo', meaning: 'Gentle and kind, a classic name for a soothing companion.' },
            { name: 'Oliver', meaning: 'Peaceful and dignified, ideal for a relaxed, loving dog.' },
            { name: 'Teddy', meaning: 'Soft and cuddly — just like your gentle friend.' }
          ],
          female: [
            { name: 'Willow', meaning: 'Graceful and serene, inspired by the quiet willow tree.' },
            { name: 'Grace', meaning: 'A name that reflects poise, patience, and gentle love.' },
            { name: 'Hazel', meaning: 'Warm and earthy, perfect for a calm, steady companion.' }
          ]
        },
        brave: {
          male: [
            { name: 'Thor', meaning: 'Strong and protective, named after the Norse god of thunder.' },
            { name: 'Bruno', meaning: 'A bold name for a courageous, loyal guardian.' },
            { name: 'Ace', meaning: 'For the fearless leader of the pack.' }
          ],
          female: [
            { name: 'Xena', meaning: 'Warrior-like and brave, for a dog who protects her family.' },
            { name: 'Raven', meaning: 'Mysterious and strong, fitting for a confident protector.' },
            { name: 'Scout', meaning: 'Brave and always ready to explore new territory.' }
          ]
        },
        curious: {
          male: [
            { name: 'Sherlock', meaning: 'For the dog who investigates every sound and smell.' },
            { name: 'Marlowe', meaning: 'A clever, inquisitive name for a thinking dog.' },
            { name: 'Pixel', meaning: 'Modern and sharp — perfect for a curious, alert pup.' }
          ],
          female: [
            { name: 'Maple', meaning: 'Naturally curious and sweet, like a forest explorer.' },
            { name: 'Nova', meaning: 'A star-gazing name for a dog always looking for something new.' },
            { name: 'Juno', meaning: 'Intelligent and watchful, great for a curious companion.' }
          ]
        }
      },
      cat: {
        playful: {
          male: [
            { name: 'Mochi', meaning: 'Soft, bouncy, and full of sweet energy.' },
            { name: 'Pip', meaning: 'Tiny and full of pep — perfect for a lively kitten.' },
            { name: 'Sunny', meaning: 'Bright and playful, bringing warmth to every pounce.' }
          ],
          female: [
            { name: 'Bubbles', meaning: 'Light, airy, and endlessly entertaining.' },
            { name: 'Zoey', meaning: 'Full of life and always ready for a game.' },
            { name: 'Pixie', meaning: 'Mischievous and magical, ideal for a playful cat.' }
          ]
        },
        calm: {
          male: [
            { name: 'Casper', meaning: 'Gentle and ghost-quiet, perfect for a peaceful friend.' },
            { name: 'Smokey', meaning: 'Soft and mellow, like a quiet evening by the fire.' },
            { name: 'Benny', meaning: 'A relaxed, friendly name for a laid-back lap cat.' }
          ],
          female: [
            { name: 'Lily', meaning: 'Elegant and tranquil, like a blooming flower.' },
            { name: 'Pearl', meaning: 'Smooth, precious, and perfectly calm.' },
            { name: 'Iris', meaning: 'A gentle name inspired by the peaceful rainbow flower.' }
          ]
        },
        brave: {
          male: [
            { name: 'Leo', meaning: 'Lion-hearted and bold, fitting for a fearless feline.' },
            { name: 'Shadow', meaning: 'Sleek and mysterious, a brave protector of the night.' },
            { name: 'Blaze', meaning: 'Fiery and courageous, for a cat who stands his ground.' }
          ],
          female: [
            { name: 'Freya', meaning: 'Named after the Norse goddess of strength and love.' },
            { name: 'Rogue', meaning: 'Independent and daring, perfect for an adventurous cat.' },
            { name: 'Sable', meaning: 'Dark, sleek, and undeniably brave.' }
          ]
        },
        curious: {
          male: [
            { name: 'Nimbus', meaning: 'Always drifting toward new discoveries.' },
            { name: 'Cosmo', meaning: 'For a cat whose curiosity reaches the stars.' },
            { name: 'Puzzle', meaning: 'A clever name for a cat who figures everything out.' }
          ],
          female: [
            { name: 'Coco', meaning: 'Curious and charming, with a taste for adventure.' },
            { name: 'Mystic', meaning: 'Drawn to the unknown and always investigating.' },
            { name: 'Tinker', meaning: 'Always tinkering with objects and exploring corners.' }
          ]
        }
      },
      rabbit: {
        playful: {
          any: [
            { name: 'Hopscotch', meaning: 'Bouncy and fun, perfect for an energetic bunny.' },
            { name: 'Clover', meaning: 'Lucky and lively, always hopping into joy.' }
          ]
        },
        calm: {
          any: [
            { name: 'Cinnamon', meaning: 'Warm, sweet, and wonderfully calm.' },
            { name: 'Muffin', meaning: 'Soft and comforting, like a cozy morning treat.' }
          ]
        },
        brave: {
          any: [
            { name: 'Thumper', meaning: 'Bold and confident, with a powerful presence.' },
            { name: 'Rocket', meaning: 'Fearless and fast, ready for any adventure.' }
          ]
        },
        curious: {
          any: [
            { name: 'Whiskers', meaning: 'Always twitching with curiosity about the world.' },
            { name: 'Nibbles', meaning: 'Investigative and clever, exploring one bite at a time.' }
          ]
        }
      },
      bird: {
        playful: {
          any: [
            { name: 'Sunny', meaning: 'Bright and cheerful, singing through the day.' },
            { name: 'Peep', meaning: 'Tiny, vocal, and full of playful charm.' }
          ]
        },
        calm: {
          any: [
            { name: 'Sky', meaning: 'Peaceful and open, like a clear blue day.' },
            { name: 'Misty', meaning: 'Soft and gentle, perfect for a quiet companion.' }
          ]
        },
        brave: {
          any: [
            { name: 'Falcon', meaning: 'Strong and fearless, soaring with confidence.' },
            { name: 'Spark', meaning: 'Bold and bright, full of fiery spirit.' }
          ]
        },
        curious: {
          any: [
            { name: 'Echo', meaning: 'Mimics, learns, and explores with a curious mind.' },
            { name: 'Pip', meaning: 'Small and inquisitive, always watching the world.' }
          ]
        }
      }
    };

    function generateName() {
      const species = document.getElementById('petSpecies').value;
      const gender = document.getElementById('petGender').value;
      const personality = document.getElementById('petPersonality').value;

      let pool = names[species][personality];
      let selectedGender = gender === 'any' ? (Math.random() > 0.5 ? 'male' : 'female') : gender;

      // For rabbit and bird, use 'any' key
      if (species === 'rabbit' || species === 'bird') {
        pool = pool.any;
      } else {
        pool = pool[selectedGender] || pool[Object.keys(pool)[0]];
      }

      const result = pool[Math.floor(Math.random() * pool.length)];

      document.getElementById('nameDisplay').textContent = result.name;
      document.getElementById('nameMeaning').textContent = result.meaning;
    }
  </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:43:58.759Z",
  "url": "https://benchmark.aimac.invalid/6f4b304f908417d768fe3917da8efefd89fa633f78d885d242e1c4ad72250ab5.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": "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": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<h4 style=\"margin:0;color:var(--dark);font-size:0.95rem;\">Dr. Elena Martinez</h4>",
          "target": [
            ".nutrition-badge > div > h4"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-secondary\" onclick=\"generateName()\" style=\"min-width:180px;\">Generate Name</button>",
          "target": [
            "button[onclick=\"generateName()\"]"
          ]
        }
      ]
    },
    {
      "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>PawHaven</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Expert Care for Your <span>Beloved Companions</span></h2>",
                  "target": [
                    ".hero-content > h2"
                  ]
                },
                {
                  "html": "<h4>Sarah M. &amp; Cooper</h4>",
                  "target": [
                    ".hero-badge > div > h4"
                  ]
                },
                {
                  "html": "<h3>2,400+</h3>",
                  "target": [
                    ".stat-item:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>150+</h3>",
                  "target": [
                    ".stat-item:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>18k</h3>",
                  "target": [
                    ".stat-item:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>4.9/5</h3>",
                  "target": [
                    ".stat-item:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2>Comprehensive Pet Care Services</h2>",
                  "target": [
                    "#pet-care > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3>Nutrition Guidance</h3>",
                  "target": [
                    ".service-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Training Programs</h3>",
                  "target": [
                    ".service-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Veterinary Resources</h3>",
                  "target": [
                    ".service-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Adoption Support</h3>",
                  "target": [
                    ".service-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Emergency Preparedness</h3>",
                  "target": [
                    ".service-card:nth-child(5) > h3"
                  ]
                },
                {
                  "html": "<h3>Community Forum</h3>",
                  "target": [
                    ".service-card:nth-child(6) > h3"
                  ]
                },
                {
                  "html": "<h2>Find a Friend Who Changes Everything</h2>",
                  "target": [
                    ".adoption-content > h2"
                  ]
                },
                {
                  "html": "<h4>340</h4>",
                  "target": [
                    ".floating-card > h4"
                  ]
                },
                {
                  "html": "<h4 style=\"margin:0;color:var(--dark);font-size:0.95rem;\">Dr. Elena Martinez</h4>",
                  "target": [
                    ".nutrition-badge > div > h4"
                  ]
                },
                {
                  "html": "<h2>Smart Nutrition for Every Life Stage</h2>",
                  "target": [
                    ".nutrition-content > h2"
                  ]
                },
                {
                  "html": "<h4>Age-Appropriate Diets</h4>",
                  "target": [
                    ".nutrition-mini-card:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Special Needs</h4>",
                  "target": [
                    ".nutrition-mini-card:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h2>Pet Name Generator</h2>",
                  "target": [
                    "#name-generator > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h3>Your perfect pet name:</h3>",
                  "target": [
                    ".generator-result > h3"
                  ]
                },
                {
                  "html": "<h2>Stories from the PawHaven Family</h2>",
                  "target": [
                    "#community > .container > .section-header > h2"
                  ]
                },
                {
                  "html": "<h4>Marcus T.</h4>",
                  "target": [
                    ".testimonial-card:nth-child(1) > .testimonial-author > div > h4"
                  ]
                },
                {
                  "html": "<h4>Jennifer L.</h4>",
                  "target": [
                    ".testimonial-card:nth-child(2) > .testimonial-author > div > h4"
                  ]
                },
                {
                  "html": "<h4>Amara K.</h4>",
                  "target": [
                    ".testimonial-card:nth-child(3) > .testimonial-author > div > h4"
                  ]
                },
                {
                  "html": "<h2>Frequently Asked Questions</h2>",
                  "target": [
                    ".faq-content > h2"
                  ]
                },
                {
                  "html": "<h2>Ready to Give Your Pet the Best Life?</h2>",
                  "target": [
                    ".container > h2"
                  ]
                },
                {
                  "html": "<h3>PawHaven</h3>",
                  "target": [
                    ".footer-brand > h3"
                  ]
                },
                {
                  "html": "<h4>Resources</h4>",
                  "target": [
                    ".footer-links:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Company</h4>",
                  "target": [
                    ".footer-links:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".footer-links:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#264653",
                "bgColor": "#ffffff",
                "contrastRatio": 10.07,
                "fontSize": "18.0pt (24px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 10.07"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h1>PawHaven</h1>",
          "target": [
            "h1"
          ]
        }
      ]
    },
    {
      "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": "petSpecies",
              "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=\"petSpecies\">\n                <option value=\"dog\">Dog</option>\n                <option value=\"cat\">Cat</option>\n                <option value=\"rabbit\">Rabbit</option>\n                <option value=\"bird\">Bird</option>\n              </select>",
          "target": [
            "#petSpecies"
          ]
        }
      ]
    },
    {
      "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=\"petSpecies\">Pet Species</label>",
                  "target": [
                    "label[for=\"petSpecies\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"petSpecies\">\n                <option value=\"dog\">Dog</option>\n                <option value=\"cat\">Cat</option>\n                <option value=\"rabbit\">Rabbit</option>\n                <option value=\"bird\">Bird</option>\n              </select>",
          "target": [
            "#petSpecies"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/100x100/2a9d8f/ffffff?text=PH&amp;font=poppins\" alt=\"PawHaven Logo\">",
          "target": [
            ".brand > img[alt=\"PawHaven Logo\"]"
          ]
        }
      ]
    },
    {
      "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": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#nutrition\">Explore Nutrition \u2192</a>",
          "target": [
            ".service-card:nth-child(1) > a[href$=\"#nutrition\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"brand\">\n          <img src=\"https://placehold.co/100x100/2a9d8f/ffffff?text=PH&amp;font=poppins\" alt=\"PawHaven Logo\">\n          <div class=\"brand-text\">\n            <h1>PawHaven</h1>\n            <span>Where Every Pet Finds Their People</span>\n          </div>\n        </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            "#mainNav > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#home\">Home</a></li>",
          "target": [
            "#mainNav > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/100x100/2a9d8f/ffffff?text=PH&amp;font=poppins\" alt=\"PawHaven Logo\">",
          "target": [
            ".brand > img[alt=\"PawHaven 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": "Pet Species"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"petSpecies\">Pet Species</label>",
                  "target": [
                    "label[for=\"petSpecies\"]"
                  ]
                }
              ],
              "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=\"petSpecies\">\n                <option value=\"dog\">Dog</option>\n                <option value=\"cat\">Cat</option>\n                <option value=\"rabbit\">Rabbit</option>\n                <option value=\"bird\">Bird</option>\n              </select>",
          "target": [
            "#petSpecies"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 306.9,
                "height": 52
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (306.9px by 52px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"brand\">\n          <img src=\"https://placehold.co/100x100/2a9d8f/ffffff?text=PH&amp;font=poppins\" alt=\"PawHaven Logo\">\n          <div class=\"brand-text\">\n            <h1>PawHaven</h1>\n            <span>Where Every Pet Finds Their People</span>\n          </div>\n        </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    }
  ],
  "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": {
                "fontSize": "38.4pt (51.2px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "3:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"home\">",
                  "target": [
                    "#home"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h2>Expert Care for Your <span>Beloved Companions</span></h2>",
          "target": [
            ".hero-content > h2"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2a9d8f",
                "bgColor": "#ffffff",
                "contrastRatio": 3.32,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#nutrition\">Explore Nutrition \u2192</a>",
          "target": [
            ".service-card:nth-child(1) > a[href$=\"#nutrition\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2a9d8f",
                "bgColor": "#ffffff",
                "contrastRatio": 3.32,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#training\">Start Training \u2192</a>",
          "target": [
            ".service-card:nth-child(2) > a[href$=\"#training\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2a9d8f",
                "bgColor": "#ffffff",
                "contrastRatio": 3.32,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#veterinary\">Find Vet Care \u2192</a>",
          "target": [
            ".service-card:nth-child(3) > a[href$=\"#veterinary\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2a9d8f",
                "bgColor": "#ffffff",
                "contrastRatio": 3.32,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#adopt\">Meet Adoptables \u2192</a>",
          "target": [
            ".service-card:nth-child(4) > a[href$=\"#adopt\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2a9d8f",
                "bgColor": "#ffffff",
                "contrastRatio": 3.32,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#emergency\">Be Prepared \u2192</a>",
          "target": [
            ".service-card:nth-child(5) > a[href$=\"#emergency\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2a9d8f",
                "bgColor": "#ffffff",
                "contrastRatio": 3.32,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(6)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#community\">Join the Community \u2192</a>",
          "target": [
            ".service-card:nth-child(6) > a[href$=\"#community\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #2a9d8f, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c757d",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.38,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"adoption\" id=\"adopt\">",
                  "target": [
                    "#adopt"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>",
          "target": [
            ".adoption-content > p:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c757d",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.38,
                "fontSize": "12.6pt (16.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"adoption\" id=\"adopt\">",
                  "target": [
                    "#adopt"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>",
          "target": [
            ".adoption-content > p:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 12.6pt (16.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e76f51",
                "contrastRatio": 3.09,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-secondary\">Search Adoptables</a>",
                  "target": [
                    ".btn-secondary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-secondary\">Search Adoptables</a>",
          "target": [
            ".btn-secondary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#21867a",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.12,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"nutrition-mini-card\">\n                <h4>Age-Appropriate Diets</h4>\n                <p>Puppy, adult, and senior formulas explained with feeding schedules.</p>\n              </div>",
                  "target": [
                    ".nutrition-mini-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #21867a, background color: #fdf6f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h4>Age-Appropriate Diets</h4>",
          "target": [
            ".nutrition-mini-card:nth-child(1) > h4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #21867a, background color: #fdf6f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c757d",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.38,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"nutrition-mini-card\">\n                <h4>Age-Appropriate Diets</h4>\n                <p>Puppy, adult, and senior formulas explained with feeding schedules.</p>\n              </div>",
                  "target": [
                    ".nutrition-mini-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Puppy, adult, and senior formulas explained with feeding schedules.</p>",
          "target": [
            ".nutrition-mini-card:nth-child(1) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#21867a",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.12,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"nutrition-mini-card\">\n                <h4>Special Needs</h4>\n                <p>Guidance for allergies, weight management, and medical conditions.</p>\n              </div>",
                  "target": [
                    ".nutrition-mini-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #21867a, background color: #fdf6f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h4>Special Needs</h4>",
          "target": [
            ".nutrition-mini-card:nth-child(2) > h4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #21867a, background color: #fdf6f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c757d",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.38,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"nutrition-mini-card\">\n                <h4>Special Needs</h4>\n                <p>Guidance for allergies, weight management, and medical conditions.</p>\n              </div>",
                  "target": [
                    ".nutrition-mini-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Guidance for allergies, weight management, and medical conditions.</p>",
          "target": [
            ".nutrition-mini-card:nth-child(2) > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#2a9d8f",
                "contrastRatio": 3.32,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Read Nutrition Guides</a>",
                  "target": [
                    ".nutrition-content > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #ffffff, background color: #2a9d8f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Read Nutrition Guides</a>",
          "target": [
            ".nutrition-content > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #ffffff, background color: #2a9d8f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c757d",
                "bgColor": "#fdf6f0",
                "contrastRatio": 4.38,
                "fontSize": "13.2pt (17.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"testimonials\" id=\"community\">",
                  "target": [
                    "#community"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 13.2pt (17.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Real experiences from pet parents, fosters, and rescue volunteers who have found guidance, support, and friendship through our community.</p>",
          "target": [
            "#community > .container > .section-header > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #6c757d, background color: #fdf6f0, font size: 13.2pt (17.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#2a9d8f",
                "contrastRatio": 3.32,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Join PawHaven Free</a>",
                  "target": [
                    ".cta-buttons > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.32 (foreground color: #ffffff, background color: #2a9d8f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Join PawHaven Free</a>",
          "target": [
            ".cta-buttons > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.32 (foreground color: #ffffff, background color: #2a9d8f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e76f51",
                "contrastRatio": 3.09,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#blog\" class=\"btn btn-secondary\">Read the Blog</a>",
                  "target": [
                    ".btn-secondary.btn[href$=\"#blog\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#blog\" class=\"btn btn-secondary\">Read the Blog</a>",
          "target": [
            ".btn-secondary.btn[href$=\"#blog\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#6c757d",
                "bgColor": "#f6f8f8",
                "contrastRatio": 4.39,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header>",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"cta-section\" id=\"training\">",
                  "target": [
                    "#training"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.39 (foreground color: #6c757d, background color: #f6f8f8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Where Every Pet Finds Their People</span>",
          "target": [
            ".brand-text > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.39 (foreground color: #6c757d, background color: #f6f8f8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 7335
      },
      {
        "y": 576,
        "height": 7335
      },
      {
        "y": 1152,
        "height": 7335
      },
      {
        "y": 1728,
        "height": 7335
      },
      {
        "y": 2304,
        "height": 7335
      },
      {
        "y": 2880,
        "height": 7335
      },
      {
        "y": 3456,
        "height": 7335
      },
      {
        "y": 4032,
        "height": 7335
      },
      {
        "y": 4608,
        "height": 7335
      },
      {
        "y": 5184,
        "height": 7335
      },
      {
        "y": 5760,
        "height": 7335
      },
      {
        "y": 6336,
        "height": 7335
      },
      {
        "y": 6615,
        "height": 7335
      }
    ],
    "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 "Pets" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Pets"
- Description: Pet care, adoption, veterinary resources, training, and animal rescue information.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Pets" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Training", "Blog", "Pet Care".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Pets" category. Consider themes similar to: "Nutrition Advice", "Adoption Stories", "Emergency Info".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "positive reinforcement", "nutrition requirements", "breed characteristics".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Learn More", "Search Adoptables", "Get Supplies".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "pet name generator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "rescue spotlights", "featured pets", "adoption success stories".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.