Skills
.Work. You
Rest

a11y-semantic-html

Community

Ensure accessible web semantics and ARIA.

Software Engineering#html#accessibility#web development#wcag#semantic html#aria
Authortsuji-tomonori
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses issues with HTML semantics, ARIA attributes, and accessible names, ensuring that web interfaces are usable by everyone, including those using assistive technologies.

Core Features & Use Cases

  • Semantic HTML Correction: Replaces non-semantic elements (like div or span) used for interactive purposes with appropriate native HTML elements (button, a).
  • Accessible Name Provision: Ensures all interactive elements have a clear and programmatically determinable name using aria-label, aria-labelledby, or visible text.
  • ARIA Best Practices: Corrects improper ARIA attribute usage and ensures state synchronization for dynamic components.
  • Use Case: When developing a custom dropdown menu, this Skill helps ensure it's implemented with the correct ARIA roles (listbox, option) and states (aria-expanded, aria-selected) so screen readers can interpret it accurately.

Quick Start

Use the a11y-semantic-html skill to refactor the button element on the provided webpage to use native HTML semantics and ensure it has an accessible name.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: a11y-semantic-html
Download link: https://github.com/tsuji-tomonori/diopside-v3/archive/main.zip#a11y-semantic-html

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.