Web accessibility from the start — always apply semantic HTML, form labels, ARIA attributes, keyboard navigation, live regions, alt text, and heading hierarchy when building any UI component
93
90%
Does it follow best practices?
Impact
98%
1.24xAverage score across 5 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent proactively implements accessible form patterns when building a contact form. The task does not mention accessibility, ARIA attributes, screen readers, or keyboard navigation.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Labels linked to inputs via for/id",
"description": "Every input, select, and textarea has a visible <label> element with htmlFor/id linking in JSX (or for/id in HTML). Placeholder text alone is not sufficient as a label.",
"max_score": 16
},
{
"name": "aria-required on required fields",
"description": "The name, email, and message fields have aria-required=\"true\" in addition to the HTML required attribute.",
"max_score": 14
},
{
"name": "aria-invalid on error state",
"description": "When validation fails, invalid inputs have aria-invalid=\"true\" set dynamically (conditionally applied when the field has an error).",
"max_score": 14
},
{
"name": "aria-describedby links errors to inputs",
"description": "Each inline error message element has an id, and the corresponding input has aria-describedby pointing to that error element's id.",
"max_score": 14
},
{
"name": "role=alert on error messages",
"description": "Validation error message elements use role=\"alert\" so screen readers announce them immediately when they appear.",
"max_score": 12
},
{
"name": "Semantic form element",
"description": "The form uses a <form> element with an onSubmit handler, not a <div> with a click handler on the button.",
"max_score": 10
},
{
"name": "Button type=submit",
"description": "The submit action uses a <button type=\"submit\"> element, not a <div>, <span>, or <a> styled as a button.",
"max_score": 10
},
{
"name": "Focus visible styles preserved",
"description": "Focus outlines are not removed (no outline:none without a visible replacement). If custom focus styles are applied, :focus-visible is used.",
"max_score": 10
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
skills
web-accessibility-essentials
verifiers