skills.rest
tsuji-tomonori
tsuji-tomonoriCOMMUNITY
Explore all skills by this author →
GitHub

a11y-semantic-html

Correct HTML semantics, ARIA attributes, and accessible names to meet WCAG 2.2 AA.

1|Updated Feb 11, 2026
Search Tags:#html#accessibility#web development#wcag#semantic html#aria
One-click install
npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-semantic-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-semantic-html
Source: https://github.com/tsuji-tomonori/diopside-v3/tree/main/.opencode/skills/a11y-semantic-html
Command: npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-semantic-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about a11y-semantic-html

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

FAQPage Schema
How do I fix HTML semantics for custom interactive elements to meet WCAG 2.2 AA standards?▼

ARIA attributes should be used to correct non-semantic HTML by applying appropriate roles like listbox and option, and synchronizing states such as aria-expanded and aria-selected so screen readers can interpret dynamic components accurately.

How do I provide accessible names for interactive elements without visible text?▼

Semantic HTML and ARIA are critical for web accessibility because they provide the proper Name, Role, and Value of interactive elements. This semantic structure allows assistive technologies to accurately interpret and navigate web interfaces.

When do I need to use ARIA attributes instead of native HTML elements?▼

You need ARIA attributes when developing custom interactive components like a dropdown menu that cannot use native HTML elements. ARIA provides the necessary roles and state synchronization for these custom web accessibility implementations.

Can I review existing UI implementations to resolve missing label and incorrect ARIA usage issues?▼

You can review existing UI implementations to resolve missing labels and incorrect ARIA usage. This process corrects HTML semantics and accessible names to ensure web interfaces meet WCAG 2.2 AA standards.

Related Skills

Explore More Software Engineering Skills→
hdkz-devhdkz-dev

accessibility-ally

Audit web applications for semantic HTML, keyboard navigation, and color contrast issues.

Community
Intermediate
7a336e6e7a336e6e
1

ensuring-accessibility

Ensure WCAG 2.2 AA compliance for UI components and web pages.

Community
Intermediate
faacuromanofaacuromano

frontend-design

Create styled web interfaces with HTML, CSS, and JavaScript.

Community
Advanced
vecearvecear

accessibility-auditor

Audit web applications for WCAG 2.1 accessibility issues.

Community
Advanced