skills.rest
rattamnoon
rattamnoonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

fixing-accessibility

Identify and fix UI accessibility issues for keyboard and screen-reader users.

Updated Apr 18, 2026
Search Tags:#ui#accessibility#a11y#forms#focus#keyboard#semantics
One-click install
npx skills add https://github.com/rattamnoon/our-third-story --skill fixing-accessibility-rattamnoon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fixing-accessibility
Source: https://github.com/rattamnoon/our-third-story/tree/main/.cursor/skills/fixing-accessibility
Command: npx skills add https://github.com/rattamnoon/our-third-story --skill fixing-accessibility-rattamnoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fix accessibility issues in UI components and interactions by providing a structured, rule-based approach to labeling, keyboard navigation, focus management, and semantic markup.

Core Features & Use Cases

  • Accessible naming: ensure every interactive control has an accessible name and decorative icons are aria-hidden.
  • Keyboard and focus: guarantee keyboard reachability, visible focus, and proper focus traps in dialogs.
  • Semantics and forms: prefer native elements, use aria attributes appropriately, and link errors to fields.

Quick Start

Run a quick accessibility review on the current UI component and apply the provided fixes following the rules.

Frequently Asked Questions about fixing-accessibility

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

FAQPage Schema
How do I fix accessibility issues in UI components like buttons and inputs?▼

Fix accessibility issues in UI components by applying structured rules for accessible naming, keyboard navigation, and native semantics to ensure proper labeling and screen-reader usability.

What is the best way to implement a focus trap in web dialogs?▼

A focus trap in web dialogs is implemented by applying guided rules for keyboard focus management, guaranteeing keyboard reachability and visible focus while keeping interaction contained within the modal window.

How do I link accessible error messages to form fields?▼

Link accessible error messages to form fields by using aria attributes appropriately and ensuring every interactive control has an accessible name, linking errors directly to their corresponding inputs.

Why do decorative icons cause keyboard navigation issues on web interfaces?▼

Decorative icons cause keyboard navigation issues when they lack proper aria-hidden attributes, interfering with screen-reader output and violating the rules for accessible naming and native semantics in web interfaces.

Can I use native semantics to improve screen-reader usability during code reviews?▼

Native semantics improve screen-reader usability during code reviews by preferring native elements over custom markup, applying aria attributes appropriately, and verifying keyboard reachability across all interactive UI controls.

Related Skills

Explore More Design & Creative Skills→
MaggieAppletonMaggieAppleton
160

fixing-accessibility

Identify and fix HTML accessibility issues to meet WCAG requirements.

Community
Intermediate
pacphipacphi
6

accessibility-testing

Perform WCAG 2.2 accessibility testing on web applications with axe-core.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

implementing-accessibility

Implement WCAG 2.1 AA compliant React interfaces with ARIA and keyboard navigation.

Community
Intermediate
Tahona-AITahona-AI

wcag-audit-patterns

Audit website compliance with WCAG 2.2 standards using automated scripts.

Official
Intermediate