accessibility-a11y

Implements WCAG web accessibility features including semantic HTML, ARIA roles, color contrast, and keyboard navigation.

Updated Feb 23, 2026
One-click install
npx skills add https://github.com/mkloz/teamforge-frontend --skill accessibility-a11y-mkloz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-a11y
Source: https://github.com/mkloz/teamforge-frontend/tree/main/.agents/skills/accessibility-a11y
Command: npx skills add https://github.com/mkloz/teamforge-frontend --skill accessibility-a11y-mkloz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill implements web accessibility (a11y) best practices following WCAG guidelines to ensure inclusive user interfaces and improve user experience for all abilities.

Core Features & Use Cases

  • Semantic HTML: Utilizes proper semantic elements for screen reader compatibility.
  • ARIA Implementation: Enhances accessibility where semantic HTML is insufficient.
  • Visual and Keyboard Accessibility: Manages focus states and responsive designs.
  • Testing and Validation: Employs automated and manual testing for accessibility.

Quick Start

Run the 'accessibility-a11y' script on the HTML files within the project folder.

Frequently Asked Questions about accessibility-a11y

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

FAQPage Schema
How do I make my web UI accessible with WCAG compliance and ARIA roles?

To make your web UI accessible, implement WCAG guidelines using semantic HTML and ARIA roles to enhance screen reader compatibility, color contrast, and keyboard navigation for users with disabilities.

What is the best way to test web accessibility for inclusive design?

The best way to test web accessibility is by employing both automated and manual testing methods to validate WCAG compliance, ensuring proper ARIA implementation, focus states, and keyboard navigation across your project.

How do I add ARIA roles to HTML for screen reader compatibility?

Add ARIA roles to HTML elements to enhance accessibility where semantic HTML is insufficient, ensuring screen readers correctly interpret UI components and interactions for users with disabilities.

Can I use this to fix keyboard navigation and focus states in my web project?

Yes, you can use this to fix keyboard navigation by managing focus states and implementing responsive designs, ensuring visual and keyboard accessibility according to WCAG guidelines.

Do I need semantic HTML or ARIA attributes for web accessibility compliance?

You need both: utilize proper semantic HTML elements for baseline screen reader compatibility, then enhance accessibility with ARIA attributes where semantic HTML alone is insufficient for WCAG compliance.