skills.rest
akavinashsingh
akavinashsinghCOMMUNITY
Explore all skills by this author →
GitHub

ACCESSIBILITY.md

Provide guidelines for designing WCAG-compliant accessible web interfaces.

Updated Dec 21, 2025
Search Tags:#inclusive design#accessibility#screen reader#keyboard navigation#ARIA#WCAG#color contrast
One-click install
npx skills add https://github.com/akavinashsingh/campus-mart --skill accessibility-md
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ACCESSIBILITY.md
Source: https://github.com/akavinashsingh/campus-mart/tree/main/.claude/skills/bencium-controlled-ux-designer
Command: npx skills add https://github.com/akavinashsingh/campus-mart --skill accessibility-md

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It provides comprehensive guidance on designing web interfaces that are perceivable, operable, understandable, and robust for all users, including those with disabilities.

Core Features & Use Cases

  • Semantic HTML Best Practices: Ensuring proper element use for clarity and accessibility.
  • Keyboard Navigation: Managing focus, skip links, and ARIA roles for seamless keyboard interaction.
  • ARIA Attributes: Applying roles, labels, and states to improve assistive technology compatibility.
  • Color Contrast & Visual Accessibility: Guidelines to meet WCAG standards for text and UI elements.
  • Forms & Error Handling: Clear labels, described inputs, and accessible validation messages.
  • Screen Reader Testing: Techniques to verify content is perceivable and narratable.
  • Focus Indicators & Skip Links: Visible cues for focus state and shortcuts to skip repetitive content.
  • Accessible Components & Patterns: Modals, tabs, tooltips designed with accessibility in mind.
  • Best Practices & Testing Tools: Use of web accessibility tools and manual techniques.

Quick Start

Implement accessible components using semantic HTML elements, ARIA labels, and keyboard-friendly focus management to ensure all users can navigate and understand your web interface efficiently.

Frequently Asked Questions about ACCESSIBILITY.md

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

FAQPage Schema
How do I make web interfaces accessible with ARIA and semantic HTML?▼

Ensure keyboard navigation accessibility by managing focus, implementing skip links, and applying ARIA roles for seamless interaction. This allows users to navigate and understand web interfaces efficiently without a mouse.

What are the WCAG standards for color contrast in UI design?▼

Implement accessible forms and error handling by providing clear labels, described inputs, and accessible validation messages. This ensures that all users can understand and complete form interactions efficiently.

How do I test if my web content is compatible with a screen reader?▼

Design accessible components like modals, tabs, and tooltips by applying semantic HTML, ARIA attributes, and keyboard-friendly focus management. This ensures complex UI patterns remain operable for users with disabilities.

Why do I need focus indicators and skip links for accessible web design?▼

Focus indicators and skip links are needed to provide visible cues for focus state and shortcuts to skip repetitive content. These features ensure keyboard users can navigate web interfaces without getting stuck in navigation menus.

Related Skills

Explore More Design & Creative Skills→
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
zenobi-uszenobi-us
68

accessibility-tester

Audit digital interfaces for WCAG 2.1 compliance and accessibility gaps.

Official
Advanced
efekrbasefekrbas
41

radix-ui-design-system

Design accessible React component systems with Radix UI primitives.

Community
Advanced
adrien-barretadrien-barret
8

accessibility-audit

Audit frontend code for WCAG 2.1 AA accessibility issues.

Community
Intermediate