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 uses semantic landmarks, labels, live regions, and heading hierarchy when building a search results page. The task only describes functional requirements with no mention of accessibility, ARIA, or screen readers.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Search input has a label",
"description": "The search input has an associated label -- either a visible <label> with htmlFor/id linking, or an aria-label attribute. The placeholder attribute alone is not sufficient as a label.",
"max_score": 18
},
{
"name": "Live region for results updates",
"description": "The search results area or a status element uses aria-live=\"polite\" (or role=\"status\") to announce when results update, so screen reader users are informed when new results load.",
"max_score": 18
},
{
"name": "Semantic main landmark",
"description": "The page content is wrapped in a <main> element rather than only generic <div> elements.",
"max_score": 14
},
{
"name": "Logical heading hierarchy",
"description": "The page uses a logical heading hierarchy -- h1 for the page title, h2 for sections or result items. No heading levels are skipped.",
"max_score": 14
},
{
"name": "Descriptive link text on results",
"description": "Result items use <a> links with the article title as the link text. No generic link text like 'click here', 'read more', or 'link'.",
"max_score": 14
},
{
"name": "Empty state announced",
"description": "The 'no results found' empty state is inside an aria-live region or uses role=\"status\" so screen readers announce it when search returns no results.",
"max_score": 12
},
{
"name": "Focus visible styles",
"description": "Interactive elements (search input, links, pagination buttons) have visible focus indicators. outline:none is not used without a :focus-visible replacement.",
"max_score": 10
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
skills
web-accessibility-essentials
verifiers