skills.rest
V4-Company
V4-CompanyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

marsai:dev-frontend-accessibility

Run axe-core accessibility scans on React/TypeScript UI components.

2|Updated Apr 10, 2026
Search Tags:#testing#accessibility#frontend#qa#axe-core#keyboard-navigation
One-click install
npx skills add https://github.com/V4-Company/marsai --skill marsai-dev-frontend-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: marsai:dev-frontend-accessibility
Source: https://github.com/V4-Company/marsai/tree/main/dev-team/skills/dev-frontend-accessibility
Command: npx skills add https://github.com/V4-Company/marsai --skill marsai-dev-frontend-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams must ensure all UI components meet WCAG 2.1 AA accessibility standards, catching issues early in the development cycle.

Core Features & Use Cases

  • Axe-core automated scans across all component states (default, loading, error, empty, disabled).
  • Keyboard navigation testing (Tab, Enter, Escape, Arrow keys).
  • Focus management validation (focus trap, restoration, auto-focus).
  • ARIA attributes checks and semantic HTML validation.
  • Integration as Gate 2 in the frontend Dev Cycle, paving the way to unit testing.

Quick Start

Trigger Gate 2 accessibility testing after DevOps completion to validate axe-core results and keyboard focus flows.

Frequently Asked Questions about marsai:dev-frontend-accessibility

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

FAQPage Schema
How do I automate WCAG 2.1 AA accessibility testing in a React project?▼

You can automate frontend accessibility validation by running axe-core scans on React UI components to verify WCAG 2.1 AA compliance, checking keyboard navigation, focus management, ARIA attributes, and semantic HTML across all component states.

What is the best way to test keyboard navigation and focus management for UI components?▼

Testing keyboard navigation and focus management involves validating Tab, Enter, Escape, and Arrow key flows, ensuring focus traps, restoration, and auto-focus function correctly across default, loading, error, empty, and disabled component states.

When should I run axe-core accessibility checks in the frontend development cycle?▼

Run axe-core accessibility checks as Gate 2 in the frontend development cycle, immediately after DevOps setup is complete and before unit testing begins, to catch and resolve WCAG 2.1 AA compliance issues early.

Does this automated accessibility validation work with TypeScript projects?▼

Yes, this automated accessibility validation is applicable to frontend development tasks in React and TypeScript projects, running axe-core scans to verify ARIA attributes and semantic HTML across various UI component states.

Can I use axe-core scans to test disabled and empty UI component states?▼

Yes, axe-core scans can be executed across all UI component states including default, loading, error, empty, and disabled, ensuring comprehensive WCAG 2.1 AA accessibility validation and focus management coverage.

Related Skills

Explore More Software Engineering Skills→
marcussheppmarcusshepp
3

initialize-azure-devops

Configures Azure DevOps organization and project context with a PAT.

Community
Intermediate
NEXTAltairNEXTAltair
1

lorairo-test-generator

Generate pytest unit, integration, and GUI tests for LoRAIro with fixtures, mocks, and coverage.

Community
Intermediate
guichefferguicheffer
3

web-accessibility

Enforce WCAG 2.1 AA compliance using semantic HTML, ARIA attributes, axe-core, and jest-axe automated tests.

Community
Intermediate
theofernandezztheofernandezz

accessibility

Identify and fix accessibility gaps in web applications to meet WCAG 2.1 AA standards.

Community
Advanced