Skills ZICQ category：Agent Workflows frontend-accessibility-best-practices

Frontend Accessibility Best Practices

Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

711 installs

Official URL：skills.sh

What this skill does

Intro in this page language first. The official description stays in its original wording; we do not rewrite SKILL.md.

What it does

Accessibility (a11y) best practices for React components

When to use it

creating UI components, forms, interactive elements, or reviewing code for accessibility compliance

How agents load it

Per Agent Skills progressive disclosure: name and description load at startup (~100 tokens); the full SKILL.md body loads when the skill activates; scripts/, references/, and assets/ load only as needed. This file's sections: Accessibility Best Practices; When to Apply; Rules Summary; Semantic HTML & Structure (HIGH); Screen Readers (MEDIUM); Keyboard & Focus (HIGH).

File analysis

File analysis: instruction-only skill (SKILL.md). The agent loads the full body when activated.

Accessibility Best PracticesWhen to ApplyRules SummarySemantic HTML & Structure (HIGH)Screen Readers (MEDIUM)Keyboard & Focus (HIGH)User Preferences (MEDIUM)Key Files

Source category：skills.sh agent-skill

Sources & links

Market sources：skills.sh

Full package on GitHub

OSS Skill ranking

SKILL.md & Agent activation

Official spec ↗

name: frontend-accessibility-best-practices
description: Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

DiscoverThe client exposes names and descriptions to the agent.
ActivateYour request or the task context selects the skill and loads its instructions.
Load resourcesReferenced scripts, documentation and assets are used when needed.

Invocation syntax and available tools depend on your Agent client. Client integration guide ↗

Install this skill

Skills CLI ↗

Choose the target agent and installation scope, keep referenced package files, then verify the skill appears in the client's catalog.

Ask your Agent to install

Copy these instructions to a compatible agent and confirm the target directory matches your client.

Install the agent skill "frontend-accessibility-best-practices" into my project. The full SKILL.md and official description are at https://zicq.com/en/skills/skl-11eeb4d1962622cf-Frontend-Accessibility-Best-Practices.html
Save it as .cursor/skills/frontend-accessibility-best-practices/SKILL.md or .claude/skills/frontend-accessibility-best-practices/SKILL.md and keep the frontmatter name and description exactly as-is.

Full package on GitHub ↗

Install from the terminal · Skills CLI

Requires Node.js and npx. First inspect the repository's skill list to confirm the name.

npx skills add 'https://github.com/sergiodxa/agent-skills' --list

npx skills add 'https://github.com/sergiodxa/agent-skills' --skill 'frontend-accessibility-best-practices'

The CLI lets you choose the agent interactively. The default scope is the project; use -g for user scope. Confirm package availability with the discovery command, then use npx skills list to inspect installed skills.

SKILL.md source Copy freely; the source file is unchanged

# Accessibility Best Practices

Accessibility patterns for building inclusive React applications following WCAG standards. Contains 7 rules across 4 categories focused on semantic HTML, screen reader support, keyboard navigation, and user preferences.

## When to Apply

Reference these guidelines when:

- Creating new UI components
- Building forms and interactive elements
- Adding dynamic content or notifications
- Implementing navigation patterns
- Reviewing code for accessibility

## Rules Summary

### Semantic HTML & Structure (HIGH)

#### semantic-html-landmarks - @rules/semantic-html-landmarks.md

Use semantic HTML elements for page structure.

```tsx
// Bad: divs with class names
<div className="header">...</div>
<div className="nav">...</div>
<div className="content">...</div>

// Good: semantic elements
<header>...</header>
<nav aria-label={t("Primary")}>...</nav>
<main>...</main>
<footer>...</footer>
```

### Screen Readers (MEDIUM)

#### screen-reader-sr-only - @rules/screen-reader-sr-only.md

Use sr-only class for visually hidden text.

```tsx
// Icon-only buttons need accessible labels
<Button variant="icon" onPress={onClose}>
  <XMarkIcon aria-hidden="true" />
  <span className="sr-only">{t("Close")}</span>
</Button>

// Visually hidden section headings
<section>
  <h2 className="sr-only">{t("Search results")}</h2>
  <SearchResultsList />
</section>
```

#### aria-live-regions - @rules/aria-live-regions.md

Announce dynamic content changes to screen readers.

```tsx
// Error messages - announced immediately
{
  error && (
    <p role="alert" className="text-failure-600">
      {error}
    </p>
  );
}

// Status updates - announced politely
<div role="status" aria-live="polite">
  {t("{{count}} results found", { count })}
</div>;
```

### Keyboard & Focus (HIGH)

#### keyboard-navigation - @rules/keyboard-navigation.md

Use semantic elements for built-in keyboard support.

```tsx
// Bad: div with onClick not keyboard accessible
<div onClick={handleClick}>Click me</div>

// Good: button has Enter/Space support
<button onClick={handleClick}>Click me</button>

// Good: react-aria Button handles everything
import { Button } from "react-aria-components";
<Button onPress={handlePress}>Click me</Button>
```

#### focus-management - @rules/focus-management.md

Show visible focus indicators and trap focus in modals.

```tsx
// Always use focus-visible for focus styles
<button className="focus-visible:ring-2 focus-visible:ring-teal-600">
  Click me
</button>;

// react-aria Modal handles focus trapping automatically
import { Modal, Dialog } from "react-aria-components";
<Modal isOpen={isOpen}>
  <Dialog>{/* Focus automatically trapped here */}</Dialog>
</Modal>;
```

### User Preferences (MEDIUM)

#### reduced-motion - @rules/reduced-motion.md

Respect prefers-reduced-motion setting.

```tsx
import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";

// CSS approach
<div className="animate-bounce motion-reduce:animate-none">
  Bouncing content
</div>;

// JS approach
function AnimatedCounter({ value }) {
  let prefersReducedMotion = usePrefersReducedMotion();
  if (prefersReducedMotion) return <span>{value}</span>;
  return <CountUp target={value} />;
}
```

#### touch-targets - @rules/touch-targets.md

Ensure 44x44px minimum touch targets.

```tsx
// Icon buttons need explicit sizing
<Button variant="icon" className="h-11 w-11">
  <XMarkIcon className="h-5 w-5" />
  <span className="sr-only">{t("Close")}</span>
</Button>

// Links need padding for tappable area
<Link to={href} className="block py-3 px-4">
  {label}
</Link>
```

## Key Files

- `app/components/heading.tsx` - Region, Heading, Main components
- `app/hooks/use-prefers-reduced-motion.ts` - Reduced motion hook
- `app/components/field/field.tsx` - Accessible form field component

Readable layout

--- name: frontend-accessibility-best-practices description: Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance. --- # Accessibility Best Practices Accessibility patterns for building inclusive React applications following WCAG standards. Contains 7 rules across 4 categories focused on semantic HTML, screen reader support, keyboard navigation, and user preferences. ## When to Apply Reference these guidelines when: - Creating new UI components - Building forms and interactive elements - Adding dynamic content or notifications - Implementing navigation patterns - Reviewing code for accessibility ## Rules Summary ### Semantic HTML & Structure (HIGH) #### semantic-html-landmarks - @rules/semantic-html-landmarks.md Use semantic HTML elements for page structure. ```tsx // Bad: divs with class names

...

// Good: semantic elements ... ... ... ... ``` ### Screen Readers (MEDIUM) #### screen-reader-sr-only - @rules/screen-reader-sr-only.md Use sr-only class for visually hidden text. ```tsx // Icon-only buttons need accessible labels {t("Close")} // Visually hidden section headings

{t("Search results")}

``` #### aria-live-regions - @rules/aria-live-regions.md Announce dynamic content changes to screen readers. ```tsx // Error messages - announced immediately { error && (

{error}

); } // Status updates - announced politely

{t("{{count}} results found", { count })}

; ``` ### Keyboard & Focus (HIGH) #### keyboard-navigation - @rules/keyboard-navigation.md Use semantic elements for built-in keyboard support. ```tsx // Bad: div with onClick not keyboard accessible

Click me

// Good: button has Enter/Space support Click me // Good: react-aria Button handles everything import { Button } from "react-aria-components"; Click me ``` #### focus-management - @rules/focus-management.md Show visible focus indicators and trap focus in modals. ```tsx // Always use focus-visible for focus styles Click me ; // react-aria Modal handles focus trapping automatically import { Modal, Dialog } from "react-aria-components"; {/* Focus automatically trapped here */} ; ``` ### User Preferences (MEDIUM) #### reduced-motion - @rules/reduced-motion.md Respect prefers-reduced-motion setting. ```tsx import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion"; // CSS approach

Bouncing content

; // JS approach function AnimatedCounter({ value }) { let prefersReducedMotion = usePrefersReducedMotion(); if (prefersReducedMotion) return {value}; return ; } ``` #### touch-targets - @rules/touch-targets.md Ensure 44x44px minimum touch targets. ```tsx // Icon buttons need explicit sizing {t("Close")} // Links need padding for tappable area {label} ``` ## Key Files - `app/components/heading.tsx` - Region, Heading, Main components - `app/hooks/use-prefers-reduced-motion.ts` - Reduced motion hook - `app/components/field/field.tsx` - Accessible form field component

Related skills

Agent Workflows