CtrlK
BlogDocsLog inGet started
Tessl Logo

aria-labels

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for all interactive elements. 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-labels/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 body with exemplary progressive disclosure: it stays lean, points to a real one-level-deep reference, and covers a clear check/fix/review sequence. The main weakness is actionability of the body itself — concrete code, tooling, and audit mechanics are entirely deferred to the reference file, leaving the standalone guidance at the level of direction.

Suggestions

Move one minimal inline example into the Fix section (e.g. `<button aria-label="Download PDF report">` icon button) so the body is actionable without opening the reference.

Name the audit tooling directly in the Check section — "inspect the browser accessibility tree" or "run axe/Lighthouse" — instead of leaving all verification detail in the reference.

Trim the 'mystery meat' opener and the generic Explain section, or make the Explain section concrete (e.g. cite the screen-reader elements-list and voice-control use cases from the reference).

DimensionReasoningScore

Conciseness

The body is lean and assumes competence — the Check/Fix/Code Review sections are one to three lines each with no concept explanations. Minor padding keeps it from a 5: the "mystery meat" motivational opener and the generic "Explain how clear labels... improve accessibility and general usability" line add little an expert needs.

4 / 5

Actionability

Some concrete guidance exists ("Add descriptive text content or `aria-label` attributes", "Flag exact elements, roles, labels, focus behavior, or keyboard interactions"), but the body itself contains no code, no tooling commands, and no specifics on how to audit — the executable HTML examples and axe/Lighthouse verification steps all live in references/rule.md. It is not a 4 because the in-body guidance stops at the level of direction rather than executable instruction; it is above a 2 because the fix and flagging targets are specific.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review section order forms a coherent, unambiguous sequence for a simple single-purpose audit skill, and verification is addressed ("note how to verify the fix with browser accessibility tooling or assistive tech", with a detailed Verification section in the reference). Not a 5 because there is no explicit validate-the-fix checkpoint or feedback loop stated as a step in the body itself.

4 / 5

Progressive Disclosure

The body is a well-organized overview (Quick Reference, Check, Fix, Explain, Code Review) that defers all implementation detail to references/rule.md — a real file, verified to exist, one level deep, and clearly signposted ("For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`"). Navigation is easy and nothing that belongs in a separate file is inlined.

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 explicit trigger guidance and several concrete inspection actions, weakened by an embedded rule title that reads as a sentence fragment and by trigger phrasing broad enough to overlap with sibling accessibility rules. Tightening the grammar and adding accessibility-specific keywords (ARIA, a11y) would lift it into the top band.

Suggestions

Rewrite the embedded rule title into a proper capability statement, e.g. "Verify all interactive elements have accessible names. Use when reviewing rendered HTML..." instead of "related to Provide accessible names for all interactive elements".

Add the natural keywords users would actually say when needing this skill — "accessibility", "a11y", "ARIA", "aria-label", "icon button" — to the trigger clause.

Narrow the trigger scope or drop the keyboard-behavior/focus-flow enumeration from the description, since those belong to sibling accessibility rules and raise conflict risk.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — giving it real specificity. It falls short of a 5 because the embedded, ungrammatical rule title ("related to Provide accessible names for all interactive elements") muddles the core capability, and coverage drifts beyond naming into keyboard/focus territory without tying them together.

4 / 5

Completeness

Both components exist: the "what" is the check/inspect procedure and the "when" is an explicit "Use when reviewing rendered HTML, interactive components, or design-system patterns" clause, so it clears the level-3 cap. It is not a 5 because the "what" is expressed as a garbled embedded sentence rather than a clear capability statement, leaving the 'when' clause doing awkward double duty.

4 / 5

Trigger Term Quality

Natural trigger phrases like "reviewing rendered HTML, interactive components, or design-system patterns" and "screen-reader output" are present and phrased the way users would say them. A few obvious natural terms are missing — "accessibility", "a11y", "ARIA", "aria-label", "icon button" — which keeps it at 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

"Reviewing rendered HTML, interactive components, or design-system patterns" is broad enough that many other frontend/accessibility review skills (keyboard navigation, focus order, ARIA roles) would trigger on the same phrasing, and the description itself enumerates keyboard behavior and focus flow that belong to sibling rules. It is not a 2 because the accessible-names/screen-reader angle does anchor a recognizable 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.