Communitygithub.com

無障礙開發 (YepAPI/skills)

遵循 WCAG 2.1 AA 標準:使用語意化 HTML、鍵盤導航及螢幕閱讀器。

skills) 是什麼?

此技能旨在協助開發者建立符合 WCAG 2.1 AA 等級的無障礙網頁。它提供一套精簡且強制執行的規則,涵蓋語意化 HTML、ARIA 屬性、鍵盤導航、焦點管理、色彩對比、圖片替代文字、表單標籤、跳過導覽連結以及螢幕閱讀器測試。該技能適用於任何支援技能檔案的 AI 代理平台(如 Claude Code、Cursor 等)。透過規則清單與程式碼範例,它能幫助開發者自動檢查並修正常見的無障礙問題,確保網頁對所有使用者(包括使用輔助科技者)都易於存取。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/accessibility

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

無障礙開發

規則

  • 語意化 HTML:使用 <button>、<nav>、<main>、<article>,而不是 <div onClick>
  • ARIA 屬性:僅在語意化 HTML 無法表達該模式時才使用
  • 鍵盤導航:每個可互動元素都必須可以透過鍵盤到達並操作
  • 焦點管理:彈出視窗應鎖定焦點,路由切換時將焦點移至內容區
  • 色彩對比:一般文字需 4.5:1,大文字(18px+ 或 14px+ 粗體)需 3:1
  • 圖片替代文字:所有圖片都需提供 alt 屬性,裝飾性圖片使用空 alt=""
  • 表單標籤:每個輸入項目都需有可見的 <label>,並使用 htmlFor 關聯
  • 跳過導覽連結:作為頁面上第一個可聚焦的元素
  • 螢幕閱讀器測試:使用 VoiceOver (Mac) 或 NVDA (Windows) 進行測試

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Tenant isolation (row-level vs schema), subdomain routing, per-tenant config, and data partitioning.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

相關技能