skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

form-labelling

Normalize accessible form labeling with for/id associations and fieldset grouping.

3|Updated Mar 28, 2026
Search Tags:#accessibility#a11y#usability#aria#screen-readers#web-accessibility#form-labeling
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill form-labelling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-labelling
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/accessible-content--form-labelling
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill form-labelling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Every form field needs a visible, persistent label that is programmatically associated with the input. This is the single most common accessibility failure on the web — and the easiest to fix.

Core Features & Use Cases

  • Ensure every input has a visible label with for/id association.
  • Use fieldsets and legends to group related fields (radio groups, checkboxes, address blocks).
  • Indicate required fields visually and programmatically with aria-required attributes and clear labeling.
  • Provide accessible help text via aria-describedby and ensure error messages are linked to their fields.
  • Structure complex forms with headings and logical sections to improve screen reader navigation.

Quick Start

Begin by adding a visible label for each input using for/id associations and grouping related fields with fieldset and legend.

Frequently Asked Questions about form-labelling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make web forms accessible for screen readers?▼

To make web forms accessible for screen readers, ensure every input has a visible label with a for/id association and group related fields using fieldset and legend elements for proper programmatic identification.

What is the best way to label required form fields for accessibility?▼

The best way to label required form fields for accessibility is to indicate them visually and programmatically using aria-required attributes alongside clear, visible text labels associated via for/id attributes.

How do I link help text and error messages to form inputs?▼

Link help text and error messages to form inputs by using the aria-describedby attribute, ensuring screen readers correctly announce contextual assistance and validation errors mapped to their specific fields.

When do I need to use fieldset and legend in form labeling?▼

You need to use fieldset and legend in form labeling when grouping related inputs like radio groups, checkboxes, or address blocks, ensuring screen readers correctly interpret the collective field grouping.

Why does my screen reader not identify my form checkboxes correctly?▼

Screen readers fail to identify form checkboxes correctly when inputs lack visible, persistent labels programmatically associated via for/id attributes, which is the most common web accessibility failure.

Can I use aria-required on inputs for checkout and survey forms?▼

Yes, you can use aria-required attributes on inputs across onboarding, surveys, and checkout contexts to programmatically indicate mandatory fields while maintaining accessible screen reader navigation.

Related Skills

Explore More Design & Creative Skills→
rafifosrafifos
6

fixing-accessibility

Audit HTML documents for accessibility issues and provide code-level fixes.

Community
Intermediate
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced
jykimjykim
31

obsidian-markdown-structure

Validate Markdown structure with frontmatter, heading hierarchy, and quote formatting.

Community
Advanced
mouayadakelmouayadakel

accessibility-checker

Check UI components and forms for accessibility attributes and markup suggestions.

Community
Intermediate