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 modal patterns (dialog role, focus trap, escape to close, focus return) when building a delete confirmation modal. The task describes only UX behavior with no mention of accessibility, ARIA, or screen readers.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Dialog role and aria-modal",
"description": "The modal element has role=\"dialog\" and aria-modal=\"true\", or uses the native HTML <dialog> element.",
"max_score": 16
},
{
"name": "aria-labelledby on dialog",
"description": "The dialog has aria-labelledby pointing to the modal title/heading element's id, giving the dialog an accessible name.",
"max_score": 14
},
{
"name": "Focus trap inside modal",
"description": "Focus is trapped inside the modal while it is open -- Tab and Shift+Tab cycle through only the modal's focusable elements and do not escape to elements behind the overlay.",
"max_score": 18
},
{
"name": "Escape key closes modal",
"description": "Pressing the Escape key closes the modal without performing the delete action.",
"max_score": 12
},
{
"name": "Focus returns to trigger on close",
"description": "When the modal closes (via Cancel, Escape, or clicking outside), focus returns to the delete button that originally opened the modal.",
"max_score": 16
},
{
"name": "Close/icon button has accessible label",
"description": "If there is an icon-only close button (X), it has an aria-label like 'Close' or 'Close dialog'. The delete icon button in each task row also has an aria-label identifying the action.",
"max_score": 12
},
{
"name": "Buttons are semantic elements",
"description": "The Cancel and Delete action buttons use <button> elements, not <div> or <span> with click handlers.",
"max_score": 12
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
skills
web-accessibility-essentials
verifiers