accessibility

Name: accessibility
Availability: InStock
Author: Gabriel

Identify and resolve accessibility gaps in web user interfaces using ARIA guidelines.

2|Updated Mar 18, 2026

Search Tags:#accessibility #a11y #semantic-html #screen-reader #color-contrast #aria #keyboard-navigation

Ready to run

npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill accessibility-nattergabriel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.claude/skills/accessibility
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill accessibility-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility patterns and best practices for web apps. Use when building UI components, forms, modals, dropdowns, tabs, toggles, or any interactive elements. Also use when the user mentions ARIA, screen readers, keyboard navigation, focus management, color contrast, or accessible HTML.

Core Features & Use Cases

Semantic HTML and proper labeling for form controls
ARIA roles and attributes to communicate dynamic content and states
Focus management for modals, menus, and custom widgets
Keyboard navigation and readable color contrast across components
Use Case: ensure interactive elements are reachable via keyboard and announced correctly by screen readers

Quick Start

Audit the current UI for accessibility gaps and implement recommended a11y patterns for forms, modals, tabs, and navigation.

Frequently Asked Questions about accessibility

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

FAQPage Schema

How do I make web modals and dropdowns accessible with keyboard navigation and ARIA?▼

Make modals and dropdowns accessible by applying ARIA roles, managing focus traps, and enforcing keyboard navigation. Semantic HTML and proper labeling ensure interactive elements are reachable and announced correctly by screen readers.

What is the best way to fix color-contrast compliance in web UI components?▼

Fix color-contrast compliance by auditing interactive elements and applying readable contrast ratios across components. Enforce accessible patterns to ensure text remains legible for users with visual impairments and meets a11y guidelines.

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

You need ARIA attributes for semantic HTML forms when communicating dynamic content and states. Proper labeling and ARIA roles ensure form controls are fully accessible and correctly announced by screen readers.

How do I resolve accessibility gaps in custom tabs and toggles?▼

Resolve accessibility gaps in tabs and toggles by applying a11y patterns for focus management and keyboard navigation. Ensure proper ARIA attributes communicate dynamic states so custom widgets are usable with assistive technologies.

Can I audit my current UI for screen-reader support and focus management issues?▼

You can audit your current UI for screen-reader support by identifying accessibility gaps in focus management and component patterns. Implement recommended a11y patterns to ensure interactive elements are reachable and announced correctly.

Why does my custom widget lose keyboard navigation and focus management?▼

Custom widgets lose keyboard navigation and focus management when lacking proper ARIA patterns and semantic HTML. Apply focus management techniques for menus and modals to restore keyboard accessibility and screen-reader support.