CtrlK
BlogDocsLog inGet started
Tessl Logo

aria-live-regions

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic content with ARIA live regions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

60

Quality

71%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/aria-live-regions/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, token-efficient overview that correctly defers implementation detail to a real, one-level-deep reference file. The main gaps are the absence of any explicit verification step in the body and a vague "use aria-live regions appropriately" check directive.

Suggestions

Add an explicit verification step to the body, e.g., "Verify: run axe/Lighthouse on the rendered state, then trigger the update with a screen reader to confirm the announcement" rather than deferring all verification detail to the reference.

Tighten the Check section from "use aria-live regions appropriately" to the specific checks (politeness level per use case, region in DOM before content changes, role=alert vs role=status).

Drop the opening why-it-matters sentence and the Explain section — both restate knowledge Claude already has and duplicate references/rule.md.

DimensionReasoningScore

Conciseness

The body is lean: the Quick Reference bullets ("Use aria-live='polite' for non-urgent updates", "The live region must exist in DOM before content changes") earn their tokens. Not 5: the opening "Without live regions, screen reader users miss dynamic updates entirely" sentence and the Explain section restate concepts Claude already knows (and the opening is duplicated verbatim in references/rule.md).

4 / 5

Actionability

Concrete attribute-level guidance throughout — politeness levels with use cases, "Use role='alert' or role='status' for semantic live regions", and the DOM-before-content rule give actionable direction, with examples one level deeper. Not 5: the Check directive "use aria-live regions appropriately" is soft and the body itself contains no good/bad markup example.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections form a coherent sequence, but validation is only gestured at ("note how to verify the fix with browser accessibility tooling or assistive tech"); no concrete verification step appears in the body — the actual verification steps live in references/rule.md. Fits anchor 3: sequence present, checkpoints missing or implicit.

3 / 5

Progressive Disclosure

A short, well-sectioned overview with a clearly signaled one-level-deep pointer — "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — and the reference file exists, is appropriately split (code examples, politeness table, verification), and contains no nested references. This matches the anchor-5 example structure.

5 / 5

Total

16

/

20

Passed

Description

71%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A solid description with an explicit "Use when..." trigger and several concrete inspection actions, weakened by template-style boilerplate. The embedded rule title inside the when-clause reads unnaturally and the generic second sentence creates overlap risk with sibling accessibility skills.

Suggestions

Replace the generic second sentence with live-region-specific capability language (e.g., verify politeness levels, role=alert vs role=status usage, and that regions exist in the DOM before content changes).

Rewrite the when-clause so the rule title is not embedded mid-sentence — e.g., "Use when reviewing HTML or components that announce dynamic content (notifications, form errors, cart updates) to screen readers."

Add natural trigger synonyms such as "accessibility", "a11y", or "screen reader announcements" to broaden keyword coverage.

DimensionReasoningScore

Specificity

Lists several concrete actions — "Check native semantics first", "inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — tied to the ARIA live-region domain. Not 5: it never states the core capability (adding/verifying live-region markup) and the actions are review-procedural rather than comprehensive.

4 / 5

Completeness

Both what ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") and when ("Use when reviewing rendered HTML, interactive components, or design-system patterns") are present. Not 5: the awkward mid-sentence rule title "patterns related to Announce dynamic content with ARIA live regions" and the hedge "where relevant" make the trigger less crisp than the anchor-5 example.

4 / 5

Trigger Term Quality

Good natural-term coverage: "rendered HTML", "interactive components", "ARIA live regions", "screen-reader output". Not 5: common synonyms like "accessibility", "a11y", "dynamic content updates", or "screen reader announcements" are missing; not 3: coverage goes well beyond a couple of relevant keywords.

4 / 5

Distinctiveness Conflict Risk

The broad when-clause "reviewing rendered HTML, interactive components, or design-system patterns" plus the generic second sentence (native semantics, keyboard behavior, accessible names) reads as boilerplate shared with sibling accessibility rules, so it co-triggers with closely related skills. Not 4: the overlap risk exceeds minor because nearly any rendered-HTML review matches; not 2: the "ARIA live regions" qualifier does anchor it to this niche.

3 / 5

Total

15

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

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.