skills.rest
dragoscirjan
dragoscirjanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/dragoscirjan/opencode-config --skill lang-html
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
raybargasraybargas

Frontend Accessibility

Enforce frontend accessibility compliance in web UI code.

Community
Basic
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
eventua11yeventua11y
1

fixing-accessibility-issues

Automates remediation of accessibility defects in UI code from linting tools.

Official
Advanced