web-accessibility

Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.

1.09x

Quality

88%

Does it follow best practices?

Impact

93%

1.09x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

Patient Intake Form for a Healthcare Portal

Accessible form with validation and ARIA attributes

Criteria

Without context

With context

Semantic form elements

100%

Label-input connection

100%

No placeholder-only labels

100%

aria-required on required fields

100%

aria-invalid on error state

100%

aria-describedby for error messages

100%

aria-live for dynamic feedback

100%

Specific error messages

62%

100%

No outline: none

50%

100%

Color not sole indicator

100%

jest-axe test included

100%

Decorative icons aria-hidden

100%

80%

16%

Product Deletion Confirmation Modal

Accessible modal dialog with focus management

Criteria

Without context

With context

role=dialog

100%

aria-modal=true

100%

aria-labelledby on dialog

100%

aria-describedby on dialog

100%

Focus trap implemented

100%

Focus moved into modal on open

100%

ESC key closes modal

100%

Focus returns on close

100%

tabindex=-1 on modal container

Close button accessible label

Overlay aria-hidden

50%

No outline:none in CSS

50%

100%

Documentation Site Navigation and Tabbed Content

Accessible tab navigation with skip links and semantic HTML

Criteria

Without context

With context

Skip link present

100%

Semantic page structure

100%

Nav landmark labeled

100%

Correct heading hierarchy

100%

role=tablist on tab container

100%

role=tab on tab buttons

100%

role=tabpanel on content panels

100%

aria-selected on active tab

100%

aria-controls linking tab to panel

100%

Arrow key navigation in tablist

100%

tabIndex roving pattern

100%

No tabindex > 0 used

100%

Semantic HTML over ARIA divs

100%

Repository: supercent-io/skills-template
Commit: c033769

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

Table of Contents

Patient Intake Form for a Healthcare Portal Product Deletion Confirmation Modal Documentation Site Navigation and Tabbed Content

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.