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-1/

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

criteria.json

task.md

tile.json