{
  "context": "Tests whether the agent proactively includes accessible markup when building a product card component. The task describes only visual and functional requirements with no mention of accessibility, alt text, semantic HTML, or ARIA.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Image has descriptive alt text",
      "description": "The product image has a descriptive alt attribute using the product name or a meaningful description (e.g., alt={name} or alt={`Photo of ${name}`}). Not an empty alt or missing alt attribute.",
      "max_score": 20
    },
    {
      "name": "Semantic heading for product name",
      "description": "The product name uses a heading element (h2, h3, etc.) appropriate to the page context, not a styled <div> or <span>.",
      "max_score": 18
    },
    {
      "name": "Button element for Add to Cart",
      "description": "The 'Add to Cart' action uses a <button> element, not a <div>, <span>, or <a> without href styled to look like a button.",
      "max_score": 20
    },
    {
      "name": "Focus visible styles on interactive elements",
      "description": "The button (and any links) have visible focus indicators. The CSS does not set outline:none without providing a :focus-visible replacement style.",
      "max_score": 16
    },
    {
      "name": "Price is screen-reader friendly",
      "description": "The price is presented in a way that screen readers can understand -- either as plain text content (e.g., '$29.99' in a <span>) or with a visually hidden label prefix like 'Price:'. Not conveyed purely through visual styling or font size.",
      "max_score": 14
    },
    {
      "name": "Decorative icons use aria-hidden",
      "description": "Any decorative SVG icons or images that don't convey information use aria-hidden=\"true\" so screen readers skip them.",
      "max_score": 12
    }
  ]
}