skills.rest
fcsonline
fcsonlineCOMMUNITY
Explore all skills by this author →
Website𝕏@openfcsonlineGitHub

accessibility

Apply WCAG 2.1 AA accessibility patterns to the DroneRoute UI.

49|15|Updated Apr 6, 2026
Search Tags:#ui#accessibility#a11y#wcag#keyboard#leaflet#aria
One-click install
npx skills add https://github.com/fcsonline/droneroute --skill accessibility-fcsonline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/fcsonline/droneroute/tree/main/.opencode/skills/accessibility
Command: npx skills add https://github.com/fcsonline/droneroute --skill accessibility-fcsonline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WCAG 2.1 AA accessibility patterns for the droneroute UI help ensure color contrast, keyboard navigation, and semantic markup are usable by people with disabilities. This skill provides guidance for implementing accessible components, ARIA attributes, and accessible map interactions across Leaflet maps, Radix UI primitives, and Tailwind styled elements.

Core Features & Use Cases

  • WCAG 2.1 AA compliance patterns for color contrast, focus management, and keyboard operability across the UI.
  • Leaflet map accessibility with focusable map container, ARIA labels, and descriptive tooltips for markers to support screen readers and keyboard users.
  • Radix UI and ARIA patterns covering accessible dialogs, selects, tooltips, and form controls with proper labeling and keyboard support.
  • Audit and remediation workflows to identify violations, implement fixes, and verify improvements with keyboard and screen reader users.

Quick Start

Audit and implement WCAG 2.1 AA compliance across the DroneRoute UI, focusing on map accessibility, ARIA labeling, and keyboard navigation.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make Leaflet maps accessible for keyboard and screen reader users?▼

Make Leaflet maps accessible by applying focusable map containers, ARIA labels, and descriptive marker tooltips to support keyboard operability and screen reader navigation effectively.

What WCAG 2.1 AA patterns do I need for Radix UI components?▼

WCAG 2.1 AA patterns for Radix UI require proper ARIA attributes, focus management, and keyboard support across dialogs, selects, tooltips, and form controls to ensure full accessibility compliance.

How do I audit and remediate WCAG 2.1 AA violations in a web UI?▼

Audit WCAG 2.1 AA violations by identifying issues in color contrast, keyboard navigation, and semantic markup, then remediate with accessible components, ARIA attributes, and compliance verification workflows.

Can I use Tailwind styled elements while maintaining WCAG 2.1 AA compliance?▼

Yes, Tailwind styled elements can maintain WCAG 2.1 AA compliance by ensuring proper color contrast, focus management, and semantic markup are applied across all rendered UI components.

What's the best way to implement keyboard operability across a map-based UI?▼

Implement keyboard operability by making map containers focusable, adding ARIA labels, and ensuring interactive elements like markers and controls are reachable and operable via keyboard navigation.

Why does my screen reader skip interactive map markers?▼

Screen readers skip map markers when ARIA labels and descriptive tooltips are missing, so adding proper ARIA attributes and semantic markup to Leaflet markers ensures they are announced correctly.

Related Skills

Explore More Software Engineering Skills→
CJ-1981CJ-1981

moai-library-shadcn

Implement shadcn/ui components in React applications using Tailwind CSS.

Community
Advanced
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
yonatangrossyonatangross
217

ui-components

Build accessible UI component libraries with shadcn/ui and Radix Primitives.

Community
Advanced
jnlanahanjnlanahan

accessibility

Audit UI codebases for WCAG 2.1 AA violations and generate prioritized remediation plans.

Community
Intermediate