skills.rest
JEO-tech-ai
JEO-tech-aiCOMMUNITY
Explore all skills by this author →
GitHub

web-accessibility

Apply WCAG 2.1 guidelines to identify and fix accessibility gaps in web UIs.

8|Updated Mar 9, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#aria#keyboard-navigation
One-click install
npx skills add https://github.com/JEO-tech-ai/oh-my-unity3d --skill web-accessibility-jeo-tech-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/JEO-tech-ai/oh-my-unity3d/tree/main/.unity-skills/web-accessibility
Command: npx skills add https://github.com/JEO-tech-ai/oh-my-unity3d --skill web-accessibility-jeo-tech-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web accessibility is often overlooked, leading to interfaces that are hard to use by people with disabilities. This skill provides a structured approach to implementing WCAG 2.1 compliant UI, ensuring semantic HTML, proper ARIA usage, keyboard navigation, and accessible testing.

Core Features & Use Cases

  • Ensure semantic HTML markup (proper headings, landmarks, labels) across React, Vue, Svelte, and vanilla JS components.
  • Implement comprehensive keyboard navigation and focus management, including skip links and ARIA roles, for modals, menus, and forms.
  • Provide validation and testing guidance using automated tools (axe-core, Lighthouse) and manual screen reader checks.

Quick Start

Train your UI team to audit and refactor a component library to meet WCAG 2.1 AA criteria, then run automated tests and perform keyboard navigation checks.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I make my UI components compliant with WCAG 2.1 AA criteria?▼

To make UI components compliant with WCAG 2.1 AA criteria, you must apply semantic HTML, proper ARIA attributes, and robust keyboard navigation. This ensures interfaces are accessible by default across React, Vue, Svelte, and vanilla JS.

What is the best way to implement keyboard navigation and focus management for modals?▼

The best way to implement keyboard navigation for modals is by applying proper ARIA roles, managing focus transitions, and utilizing skip links. This ensures dynamic content and menus remain fully accessible via keyboard input.

Does this accessibility testing approach work with React, Vue, and Svelte component libraries?▼

Yes, this accessibility testing approach works with React, Vue, Svelte, and vanilla JS component libraries. It audits existing sites and component libraries to identify gaps in semantic HTML and ARIA labeling across these frameworks.

How do I validate color contrast and screen reader compatibility for web UIs?▼

You validate color contrast and screen reader compatibility by running automated accessibility tests using tools like axe-core and Lighthouse, followed by manual screen reader checks to ensure robust UI navigation and testing coverage.

Why do my dynamic web interfaces fail keyboard accessibility checks?▼

Dynamic web interfaces fail keyboard accessibility checks due to missing semantic HTML landmarks, improper ARIA labeling, and unmanaged focus. Fixing these accessibility gaps ensures dynamic content meets WCAG 2.1 guidelines.

When do I need ARIA attributes for semantic HTML forms?▼

You need ARIA attributes for semantic HTML forms when native HTML elements cannot convey dynamic state changes or complex relationships. Implementing proper ARIA labeling ensures forms meet WCAG 2.1 requirements for robust accessibility.

Related Skills

Explore More Software Engineering Skills→
hospitaljobsinhospitaljobsin
7

frontend-design

Create production-grade frontend interfaces with React, Vue, Svelte, or vanilla HTML/CSS/JS.

Official
Advanced
a53alia53ali

accessibility-testing

Test web and mobile applications for WCAG 2.1/2.2 AA conformance using automated tools and manual techniques.

Community
Advanced
ksciuskscius
2

web-accessibility

Enforce WCAG 2.1 AA accessibility requirements for web UI components.

Community
Intermediate
cr330326cr330326

react-a11y-audit

Identify accessibility violations in React components across ARIA, keyboard, contrast, and screen reader checks.

Community
Advanced