accessibility

Build WCAG 2.2 AA compliant interfaces with semantic HTML, ARIA, keyboard navigation, focus management, color contrast, and screen reader support. Covers forms, dialogs, tabs, live regions, skip links, alt text, and data tables. Use when implementing accessible UIs, auditing WCAG compliance, fixing screen reader issues, keyboard navigation, focus traps, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast", "missing alt text", "heading hierarchy".

설치로 이동

저장소: oakoss/agent-skills
최근 소스 활동: 2026년 2월 24일 20:28
감지된 SKILL.md 언어: 영어
스타: 14
포크: 5

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

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

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/oakoss/agent-skills --skill accessibility

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

7 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

검색으로 돌아가기 설치로 돌아가기

better-auth

Self-hosted TypeScript auth framework with social auth, 2FA, passkeys, organizations, RBAC, and 15+ plugins. Supports Drizzle/Prisma/Kysely adapters. Self-hosted alternative to Clerk/Auth.js. Use when: configuring auth, adding plugins, social OAuth, multi-tenant SaaS, organizations with teams and RBAC, two-factor authentication (TOTP/OTP/backup codes), email verification, password reset flows, session management, rate limiting, CSRF and cookie security, Expo/mobile, D1 adapter errors, TanStack Start integration, additionalFields bugs, admin plugin, migrating from NextAuth, migrating from Clerk, migrating from Supabase Auth, or troubleshooting auth issues.

2026-08-17

meta-skill-creator

Create agent skills following the Agent Skills open standard. Use when building new skills for Claude Code, Cursor, Gemini CLI, or other agents. Use for skill structure, SKILL.md authoring, frontmatter configuration, progressive disclosure, reference files, validation, and distribution.

2026-08-17

opentofu

Infrastructure as code with OpenTofu (open-source Terraform fork) and Pulumi. Covers OpenTofu HCL syntax, providers, resources, data sources, modules, state management with remote backends, workspaces, importing existing infrastructure, plan/apply workflow, variable management, output values, provisioners, and state encryption (OpenTofu-exclusive). Includes Pulumi TypeScript/Python SDKs, stack management, component resources, config/secrets, state backends, policy as code, and automation API. Common patterns for multi-environment setups, module composition, CI/CD integration, drift detection, and secret management. Use when writing or reviewing HCL configurations, managing cloud infrastructure state, migrating from Terraform to OpenTofu, building Pulumi programs in TypeScript or Python, setting up multi-environment IaC pipelines, or implementing state encryption.

2026-08-17

이 저장소의 모든 Skills 보기

name	accessibility
description	Build WCAG 2.2 AA compliant interfaces with semantic HTML, ARIA, keyboard navigation, focus management, color contrast, and screen reader support. Covers forms, dialogs, tabs, live regions, skip links, alt text, and data tables. Use when implementing accessible UIs, auditing WCAG compliance, fixing screen reader issues, keyboard navigation, focus traps, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast", "missing alt text", "heading hierarchy".
license	MIT
metadata	{"author":"oakoss","version":"1.1"}
user-invocable	false

Web Accessibility (WCAG 2.2 AA)

Build for everyone — accessibility is a requirement, not a feature.

Contrast Ratios (WCAG AA)

Element	Minimum Ratio
Normal text (< 18pt)	4.5:1
Large text (>= 18pt or 14pt bold)	3:1
UI components and focus indicators	3:1

WCAG 2.2 New AA Criteria

Criterion	Requirement
Target Size Minimum (2.5.8)	Interactive targets at least 24x24 CSS pixels
Focus Not Obscured Minimum (2.4.11)	Focused element at least partially visible, not hidden by sticky headers or overlays
Focus Appearance (2.4.13)	Focus indicator has minimum area (2px perimeter) and 3:1 contrast change
Dragging Movements (2.5.7)	Provide single-pointer alternative for any drag interaction
Redundant Entry (3.3.7)	Do not require re-entering previously provided information
Consistent Help (3.2.6)	Help mechanisms (chat, phone, FAQ) appear in same relative order across pages
Accessible Authentication (3.3.8)	No cognitive function test for login (allow paste, autofill, or alternatives)

Essential Keyboard Patterns

Key	Action
Tab / Shift+Tab	Navigate between focusable elements
Enter / Space	Activate buttons and links
Arrow keys	Navigate within widgets (tabs, menus)
Escape	Close dialogs and menus
Home / End	Jump to first/last item in widget

Element Selection

Need	Element
Navigates to page	`<a href="...">`
Submits form	`<button type="submit">`
Opens dialog	`<button aria-haspopup="dialog">`
Other action	`<button type="button">`
Self-contained article	`<article>`
Navigation links	`<nav>`
Supplementary info	`<aside>`

Common ARIA Attributes

Attribute	Purpose
`aria-label`	Name when no visible label exists
`aria-labelledby`	Reference existing text as label
`aria-describedby`	Additional description (hints, errors)
`aria-live`	Announce dynamic updates (`polite` or `assertive`)
`aria-expanded`	Collapsible/expandable state
`aria-hidden="true"`	Hide decorative elements from screen readers
`aria-invalid`	Mark form fields with errors
`aria-required="true"`	Mark required fields
`aria-busy`	Indicate loading state

WCAG 2.2 AA Checklist Summary

Principle	Key Requirements
Perceivable	Alt text on images, contrast >= 4.5:1, color not sole indicator, text resizable to 200%, captions on video, `prefers-reduced-motion` support
Operable	Keyboard accessible, visible focus not obscured, focus appearance meets minimum, targets >= 24px, skip links, dragging alternatives
Understandable	`<html lang="en">`, consistent navigation, consistent help placement, form labels, error identification, no redundant entry, accessible auth
Robust	Valid HTML, name/role/value on all UI components, `aria-live` for status messages (SC 4.1.1 Parsing is obsolete in WCAG 2.2)

Anti-Patterns

Anti-Pattern	Fix
`<div onClick>` instead of `<button>`	Use semantic HTML elements
`outline: none` without replacement	Use `:focus-visible` with visible outline
Placeholder as label	Use `<label>` element
`tabindex` > 0	Use DOM order or `tabindex="0"` / `tabindex="-1"`
Color-only state indicators	Add icon and text label
Skipped heading levels	Use sequential h1-h6, style with CSS
`role="button"` on `<button>`	Remove redundant ARIA
`aria-hidden` on interactive elements	Never hide interactive content
Fixed font sizes (px)	Use `rem` units
No focus trap in modal dialogs	Trap focus, close on Escape

Common Mistakes

Mistake	Correct Pattern
Adding `aria-label` to elements that already have visible text	Use `aria-labelledby` to reference existing visible text instead
Using `aria-live="assertive"` for non-urgent updates	Use `aria-live="polite"` for most dynamic content; reserve `assertive` for errors and alerts
Setting `alt=""` on informative images	Provide descriptive alt text; only use empty alt on purely decorative images
Adding keyboard handlers to non-focusable elements	Use native interactive elements or add `tabindex="0"` plus `role` and key handlers
Testing only with automated tools like axe	Automated scans catch ~30% of issues; always supplement with keyboard-only and screen reader testing

Screen Reader and Browser Pairings

Screen Reader	Browser	Platform
JAWS	Chrome	Windows
NVDA	Chrome	Windows (free)
NVDA	Firefox	Windows (free)
VoiceOver	Safari	macOS / iOS
TalkBack	Chrome	Android
Narrator	Edge	Windows (built-in)

Testing Quick Guide

Method	Tool	Effort
Keyboard-only	Hide mouse, Tab through page	5 min
Screen reader	JAWS + Chrome or NVDA + Chrome/Firefox	10 min
Screen reader	VoiceOver + Safari (macOS)	10 min
Automated scan	axe DevTools browser extension	2 min
Lighthouse	Chrome F12 > Lighthouse > Accessibility	2 min
Unit tests	jest-axe (Jest) or vitest-axe (Vitest)	Ongoing

Delegation

When working on accessibility, delegate to:

design-system — Color tokens and contrast verification
react-patterns — Component patterns and hooks
testing — jest-axe integration and test patterns

Resources

References

Semantic HTML and Structure — Document landmarks, heading hierarchy, element selection, skip links
Focus Management — Focus indicators, focus not obscured, dialog focus traps, SPA route focus, focus-visible patterns
ARIA Patterns — Accessible tabs, live regions, data tables with ARIA attributes
Forms and Validation — Label association, error announcement, redundant entry, accessible authentication
Color and Media — Contrast requirements, reduced motion, dragging alternatives, video captions, alt text
Testing — Keyboard testing, screen reader pairings, axe DevTools, jest-axe and vitest-axe unit tests

accessibility

소스 정보

설치 방법

소스 파일 검토

이 저장소의 다른 Skills

이 저장소의 다른 Skills

Web Accessibility (WCAG 2.2 AA)

Contrast Ratios (WCAG AA)

WCAG 2.2 New AA Criteria

Essential Keyboard Patterns

Element Selection

Common ARIA Attributes

WCAG 2.2 AA Checklist Summary

Anti-Patterns

Common Mistakes

Screen Reader and Browser Pairings

Testing Quick Guide

Delegation

Resources

References

Web Accessibility (WCAG 2.2 AA)

Contrast Ratios (WCAG AA)

WCAG 2.2 New AA Criteria

Essential Keyboard Patterns

Element Selection

Common ARIA Attributes

WCAG 2.2 AA Checklist Summary

Anti-Patterns

Common Mistakes

Screen Reader and Browser Pairings

Testing Quick Guide

Delegation

Resources

References