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

Evaluation results

100%

33%

Build a Contact Form

Criteria
Without context
With context

Labels linked to inputs via for/id

100%

100%

aria-required on required fields

0%

100%

aria-invalid on error state

0%

100%

aria-describedby links errors to inputs

100%

100%

role=alert on error messages

100%

100%

Semantic form element

100%

100%

Button type=submit

100%

100%

Focus visible styles preserved

50%

100%

100%

34%

Build a Delete Confirmation Modal

Criteria
Without context
With context

Dialog role and aria-modal

100%

100%

aria-labelledby on dialog

100%

100%

Focus trap inside modal

0%

100%

Escape key closes modal

100%

100%

Focus returns to trigger on close

0%

100%

Close/icon button has accessible label

100%

100%

Buttons are semantic elements

100%

100%

100%

24%

Build a Toast Notification System

Criteria
Without context
With context

Live region for success/info toasts

50%

100%

role=alert for error toasts

100%

100%

Close button is a semantic button

100%

100%

Close button has accessible label

100%

100%

Decorative icons use aria-hidden

0%

100%

Focus visible on close button

100%

100%

100%

6%

Build a Product Card Component

Criteria
Without context
With context

Image has descriptive alt text

100%

100%

Semantic heading for product name

100%

100%

Button element for Add to Cart

100%

100%

Focus visible styles on interactive elements

62%

100%

Price is screen-reader friendly

100%

100%

Decorative icons use aria-hidden

100%

100%

91%

-3%

Build a Search Results Page

Criteria
Without context
With context

Search input has a label

100%

100%

Live region for results updates

100%

100%

Semantic main landmark

100%

100%

Logical heading hierarchy

100%

50%

Descriptive link text on results

100%

100%

Empty state announced

83%

100%

Focus visible styles

60%

80%

Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents