design-accessibility

WCAG AA and ARIA best practices — screen readers, keyboard navigation, focus management. Use when building any user-facing interface or reviewing accessibility compliance.

Install with Tessl CLI

npx tessl i github:ravnhq/ai-toolkit --skill design-accessibility

What are skills?

0.98x

Quality

73%

Does it follow best practices?

Impact

95%

0.98x

Average score across 3 eval scenarios

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/design/design-accessibility/SKILL.md

SKILL.md

Review

Evals

Evaluation results

92%

-8%

Team Asset Manager — Row Action Toolbar

Icon button accessibility

Criteria

Without context

With context

aria-label on icon buttons

100%

No unlabelled icon buttons

100%

Decorative icons hidden

100%

Semantic button elements

100%

No div/span as interactive

100%

sr-only text method used

100%

Single h1

100%

No skipped heading levels

100%

Semantic HTML over ARIA

100%

Links for navigation

100%

Alt text on images

100%

Without context: $0.3539 · 1m 34s · 14 turns · 19 in / 7,224 out tokens

With context: $0.4051 · 1m 45s · 17 turns · 943 in / 7,665 out tokens

100%

Community Event Registration Form

Form label accessibility

Criteria

Without context

With context

No placeholder-only labels

100%

htmlFor + id pairing

100%

All inputs labelled

100%

aria-labelledby used sparingly

100%

Submit uses button element

100%

focus-visible for focus styles

25%

100%

No outline removal

100%

Single h1 on page

100%

No skipped heading levels

100%

Semantic HTML over ARIA

100%

sr-only visually hidden labels

100%

Without context: $0.2682 · 1m 26s · 16 turns · 20 in / 4,178 out tokens

With context: $0.3694 · 1m 23s · 20 turns · 21 in / 4,702 out tokens

95%

Project Archive Confirmation Dialog

Modal keyboard navigation

Criteria

Without context

With context

Escape closes modal

100%

Focus moves into modal

100%

Focus trapped in modal

100%

Focus returns to trigger

70%

100%

focus-visible for focus ring

100%

No outline removal

100%

Semantic button for trigger

100%

Semantic HTML over ARIA

62%

100%

Single h1 on page

100%

No skipped heading levels

100%

Alt text on images

100%

Click outside closes modal

100%

Without context: $0.2482 · 1m 20s · 13 turns · 20 in / 4,949 out tokens

With context: $0.5557 · 2m 18s · 27 turns · 887 in / 7,751 out tokens

Evaluated: 4 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Team Asset Manager — Row Action Toolbar Community Event Registration Form Project Archive Confirmation Dialog

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.