Frontend Accessibility Best Practices

sergiodxa/agent-skills/skills/frontend-accessibility-best-practices

作者 sergiodxa40e21b46189d無授權條款90 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫8 個月前更新

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

僅含說明Software Development

AI 產生的概覽

針對 React UI 元件的無障礙最佳實務，涵蓋語意化 HTML、螢幕閱讀器、鍵盤焦點與動效偏好。

功能: 這個技能為 React 應用程式提供七條無障礙規則，分成語意化 HTML 與結構、螢幕閱讀器、鍵盤與焦點、使用者偏好四類。每條規則各自有一份參考文件，並以程式碼範例展示不建議與建議的寫法。它只提供指引，不會產生檔案或成品。
適用情境: 適合在建立新的 UI 元件、打造表單與互動元素、加入動態內容或通知、實作導覽模式，或審查程式碼的無障礙合規性時使用。
執行需求: 不需要指令碼或工具，僅為說明與參考文件。範例假設使用 React 專案，部分程式碼片段會用到 react-aria-components、usePrefersReducedMotion 鉤子以及 Tailwind 風格的類別名稱。

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>

// 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>

// 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>;

// 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 everythingimport { Button } from "react-aria-components";<Button onPress={handlePress}>Click me</Button>

// 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 everythingimport { 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 automaticallyimport { Modal, Dialog } from "react-aria-components";<Modal isOpen={isOpen}>  <Dialog>{/* Focus automatically trapped here */}</Dialog></Modal>;

// 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 automaticallyimport { 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 approachfunction AnimatedCounter({ value }) {  let prefersReducedMotion = usePrefersReducedMotion();  if (prefersReducedMotion) return <span>{value}</span>;  return <CountUp target={value} />;}

import { usePrefersReducedMotion } from "~/hooks/use-prefers-reduced-motion";
// CSS approach<div className="animate-bounce motion-reduce:animate-none">  Bouncing content</div>;
// JS approachfunction 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>

// 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

來源與署名

來源：sergiodxa/agent-skills位於skills/frontend-accessibility-best-practices提交40e21b4

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Frontend Accessibility Best Practices

Accessibility Best Practices

When to Apply

Rules Summary

Semantic HTML & Structure (HIGH)

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

Screen Readers (MEDIUM)

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

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

Keyboard & Focus (HIGH)

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

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

User Preferences (MEDIUM)

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

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

Key Files

來源與署名

更多來自 sergiodxa/agent-skills 的技能

Frontend React Best Practices

Frontend Testing Best Practices

Frontend Tailwind Best Practices

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices