원클릭으로 Manus에서 모든 스킬 실행

a11y

스타3

포크0

업데이트2026년 6월 13일 11:37

Accessibility conventions — semantic HTML, keyboard support, focus management, ARIA, testing. Use when building UI components, forms, dialogs, navigation, or fixing a11y violations. 日本語の依頼例:「アクセシビリティ対応して」「キーボード操作できるように」「フォーカス管理」「スクリーンリーダー対応」「コントラスト」。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Syo-M

Syo-M/fable-frontend-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Accessibility

Target: WCAG 2.2 AA. A11y is a build-time concern, not an audit-time patch.

Semantic HTML first

Use the element that does the job: <button> for actions, <a href> for navigation, <label>+input for forms, <nav>/<main>/<header> landmarks, real heading hierarchy (one <h1>, no level skipping).
A <div onClick> is never acceptable for an action — it has no keyboard support, no role, no focus. If a design demands a non-button look, style a <button>.
First rule of ARIA: don't use ARIA when an HTML element provides the semantics. ARIA adds promises (keyboard behavior) that you must then implement by hand.

Keyboard

Everything operable by mouse is operable by keyboard: Tab reaches it, Enter/Space activates it, Escape dismisses overlays, arrow keys move within composite widgets (menus, tabs, listboxes).
Visible focus indicator always — never outline: none without an equal-or-better :focus-visible style (use a token, see css-modules).
DOM order = visual order = tab order. Don't fix layout problems with tabindex > 0 (banned).

Focus management (SPAs & overlays)

Dialogs/drawers: focus moves in on open, is trapped while open, returns to the trigger on close. Prefer native <dialog> or a headless library (React Aria, Radix) over hand-rolling — focus traps are notoriously buggy.
Client-side route change: move focus to the new page's heading (or announce via live region) — silent navigation strands screen-reader users.
Content removal: if the focused element disappears, move focus somewhere sensible, not <body>.

Forms

Every input has a programmatic label (<label htmlFor>); placeholder is not a label.
Errors: associate with the field via aria-describedby, set aria-invalid, and on submit failure move focus to the first error or an error summary. Error text says how to fix, not just "invalid".
Don't disable the submit button as the only validation feedback — disabled buttons explain nothing.

Content & visuals

Contrast: text ≥ 4.5:1 (3:1 for large text), UI component boundaries ≥ 3:1. Check tokens once in tokens.css, inherit everywhere.
Color never the sole signal — pair with text/icon (error = red AND icon + message).
Meaningful images need alt describing function; decorative ones alt="". Icon-only buttons need aria-label.
Async updates (toasts, validation, loading→loaded) announce via aria-live="polite" regions that exist in the DOM before the update.
Respect prefers-reduced-motion for any significant animation.

Testing

Automated catches ~30–40%: axe in Storybook (a11y addon, failing) + @axe-core/playwright on key pages. Zero serious/critical violations.
The rest is manual: keyboard-walk every new interactive component (Tab/Enter/Escape/arrows) as part of done.
Writing tests with getByRole(…, { name }) (per testing-vitest) doubles as an a11y check — if the role query can't find it, assistive tech can't either.

이 저장소의 다른 Skills

같은 저장소

astro

Syo-M/fable-frontend-skills

Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

2026-07-123

nextjs

Syo-M/fable-frontend-skills

Next.js App Router conventions — routing and adding pages, Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, env vars. Use for any work inside a Next.js app. 日本語の依頼例:「Next.jsで〜」「ページを追加/新規作成して」「ルーティング」「Server Action」「ルートハンドラ」「RSC/サーバーコンポーネント」「キャッシュ」。

2026-07-123

codex-imagegen

Syo-M/fable-frontend-skills

Generate or AI-edit images by delegating to the Codex CLI ($imagegen / gpt-image) — sample banners, hero visuals, demo assets, image-to-image edits. Use whenever a task needs image GENERATION or AI photo editing (Claude Code cannot generate images itself). 日本語の依頼例:「画像を生成して」「サンプル画像を作って」「この写真を加工して」「バナー/ヒーロー画像が必要」。NOT for resizing/compressing existing assets (use `images-media`).

2026-07-073

css-modules

Syo-M/fable-frontend-skills

CSS Modules and styling conventions — design tokens, naming, variants, responsive design, layout, dark mode/theming. Use when styling or visually adjusting components, or editing any *.module.css, tokens, or global styles. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」「CSS書いて」。

2026-07-073

governance

Syo-M/fable-frontend-skills

Repository governance — CI merge gates, toolchain pinning, dependency lifecycle and license policy, secrets scanning, change control for rules and sensitive paths, Git/PR conventions, observability, performance budgets, browser support. Use when setting up CI/CD, repo configuration, releases, adding dependencies, or defining team policy. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス確認」「秘密情報スキャン」「リポジトリ設定」「ブランチ/PR運用」「パフォーマンスバジェット」。

2026-07-073

motion

Syo-M/fable-frontend-skills

Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。

2026-07-073

name	a11y
description	Accessibility conventions — semantic HTML, keyboard support, focus management, ARIA, testing. Use when building UI components, forms, dialogs, navigation, or fixing a11y violations. 日本語の依頼例:「アクセシビリティ対応して」「キーボード操作できるように」「フォーカス管理」「スクリーンリーダー対応」「コントラスト」。

Accessibility

Target: WCAG 2.2 AA. A11y is a build-time concern, not an audit-time patch.

Semantic HTML first

Use the element that does the job: <button> for actions, <a href> for navigation, <label>+input for forms, <nav>/<main>/<header> landmarks, real heading hierarchy (one <h1>, no level skipping).
A <div onClick> is never acceptable for an action — it has no keyboard support, no role, no focus. If a design demands a non-button look, style a <button>.
First rule of ARIA: don't use ARIA when an HTML element provides the semantics. ARIA adds promises (keyboard behavior) that you must then implement by hand.

Keyboard

Everything operable by mouse is operable by keyboard: Tab reaches it, Enter/Space activates it, Escape dismisses overlays, arrow keys move within composite widgets (menus, tabs, listboxes).
Visible focus indicator always — never outline: none without an equal-or-better :focus-visible style (use a token, see css-modules).
DOM order = visual order = tab order. Don't fix layout problems with tabindex > 0 (banned).

Focus management (SPAs & overlays)

Dialogs/drawers: focus moves in on open, is trapped while open, returns to the trigger on close. Prefer native <dialog> or a headless library (React Aria, Radix) over hand-rolling — focus traps are notoriously buggy.
Client-side route change: move focus to the new page's heading (or announce via live region) — silent navigation strands screen-reader users.
Content removal: if the focused element disappears, move focus somewhere sensible, not <body>.

Forms

Every input has a programmatic label (<label htmlFor>); placeholder is not a label.
Errors: associate with the field via aria-describedby, set aria-invalid, and on submit failure move focus to the first error or an error summary. Error text says how to fix, not just "invalid".
Don't disable the submit button as the only validation feedback — disabled buttons explain nothing.

Content & visuals

Contrast: text ≥ 4.5:1 (3:1 for large text), UI component boundaries ≥ 3:1. Check tokens once in tokens.css, inherit everywhere.
Color never the sole signal — pair with text/icon (error = red AND icon + message).
Meaningful images need alt describing function; decorative ones alt="". Icon-only buttons need aria-label.
Async updates (toasts, validation, loading→loaded) announce via aria-live="polite" regions that exist in the DOM before the update.
Respect prefers-reduced-motion for any significant animation.

Testing

Automated catches ~30–40%: axe in Storybook (a11y addon, failing) + @axe-core/playwright on key pages. Zero serious/critical violations.
The rest is manual: keyboard-walk every new interactive component (Tab/Enter/Escape/arrows) as part of done.
Writing tests with getByRole(…, { name }) (per testing-vitest) doubles as an a11y check — if the role query can't find it, assistive tech can't either.