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

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

tile.json