CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/web-accessibility-essentials

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

1.24x
Quality

90%

Does it follow best practices?

Impact

98%

1.24x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-2/

{
  "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

tile.json