lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Updated Mar 19, 2026

Search Tags:#html #accessibility #frontend #wcag #semantic markup #aria

Ready to run

npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-html

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lang-html
Source: https://github.com/dragoscirjan/opencode-config/tree/main/skills/lang-html
Command: npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-html

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes HTML authoring so teams can build cleaner, more accessible, and more maintainable web interfaces without drifting into inconsistent markup patterns.

Core Features & Use Cases

Semantic Structure: Encourages meaningful elements like nav, main, and article for clearer document outlines.
Accessibility Standards: Applies WCAG 2.1 AA expectations, keyboard navigation, and careful ARIA usage only when native elements are not enough.
Use Case: Use it when reviewing or writing landing pages, dashboards, or application shells that need consistent frontend structure and accessibility discipline.

Quick Start

Ask the skill to review your HTML and rewrite it to follow semantic, accessible, and keyboard-friendly standards.

Frequently Asked Questions about lang-html

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

FAQPage Schema

How do I write semantic HTML for better document structure?▼

Semantic HTML uses meaningful elements like nav, main, and article to create clearer document outlines. This approach improves maintainability and ensures frontend page layouts follow consistent markup conventions rather than relying on generic div tags.

How do I make my web pages meet WCAG 2.1 AA accessibility standards?▼

Meeting WCAG 2.1 AA accessibility standards requires keyboard navigability, adequate color contrast, and careful ARIA usage. You should prioritize native HTML controls before adding ARIA attributes to ensure components are accessible and maintainable.

When should I use ARIA roles instead of native HTML elements?▼

Use ARIA roles only when native HTML elements are not enough to convey the required semantics. Prioritize native controls for keyboard navigation and accessibility to maintain cleaner, more maintainable markup conventions across your frontend components.

What is the best way to review HTML for accessibility and keyboard navigation?▼

The best way to review HTML for accessibility is to check for semantic structure, WCAG 2.1 AA compliance, and keyboard navigability. Rewriting existing markup to follow these standards ensures consistent frontend structures for dashboards and application shells.

Can I use semantic HTML standards for building application shells and dashboards?▼

Yes, semantic HTML standards apply to building application shells and dashboards. Using meaningful elements and enforcing accessibility discipline ensures these complex frontend interfaces remain maintainable and keyboard-friendly.