affaan-m/accessibility

使用 WCAG 2.2 AA 级标准来设计、实施和审计包容性数字产品。用于为 Web 生成语义化 ARIA，以及为 Web 和原生平台（iOS/Android）生成无障碍特性。

研究分析开发 Agent Agent 技能调研无障碍设计 WCAG 合规审计 ARIA 语义映射移动端可访问性辅助技术支持

技术栈: cursor24万+许可证: MIT开发者: affaan-m

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

アクセシビリティ（WCAG 2.2）

このスキルは、スクリーンリーダー、スイッチコントロール、キーボードナビゲーションを使用するユーザーを含む、すべてのユーザーにとってデジタルインターフェースが知覚可能・操作可能・理解可能・堅牢（POUR）であることを保証します。WCAG 2.2 達成基準の技術的な実装に焦点を当てています。

使用タイミング

Web、iOS、Android 向け UI コンポーネント仕様の定義。
アクセシビリティの障壁やコンプライアンスのギャップについて既存コードを監査する。
Target Size（最小）や Focus Appearance など新しい WCAG 2.2 基準を実装する。
高水準な設計要件を技術属性（ARIA ロール、トレイト、ヒント）にマッピングする。

コアコンセプト

POUR 原則: WCAG の基盤（知覚可能・操作可能・理解可能・堅牢）。
セマンティックマッピング: 汎用コンテナよりネイティブ要素を使用して組み込みのアクセシビリティを提供する。
アクセシビリティツリー: 支援技術が実際に「読み取る」UI の表現。
フォーカス管理: キーボード・スクリーンリーダーカーソルの順序と可視性を制御する。
ラベリングとヒント: aria-label、accessibilityLabel、contentDescription を通じてコンテキストを提供する。

仕組み

ステップ 1: コンポーネントロールの特定

機能的な目的を決定します（例：これはボタンか、リンクか、タブか）。カスタムロールに頼る前に、利用可能な最もセマンティックなネイティブ要素を使用します。

ステップ 2: 知覚可能属性の定義

テキストのコントラストが 4.5:1（通常）または 3:1（大きいテキスト・UI）を満たすことを確認。
非テキストコンテンツ（画像、アイコン）にテキスト代替を追加。
レスポンシブリフロー（機能を損なわずに最大 400% ズーム）を実装。

ステップ 3: 操作可能なコントロールの実装

最小 24x24 CSS ピクセルのターゲットサイズを確保（WCAG 2.2 SC 2.5.8）。
すべてのインタラクティブ要素がキーボードで到達可能で、可視のフォーカスインジケーターを持つことを確認（SC 2.4.11）。
ドラッグ操作の単一ポインター代替手段を提供。

ステップ 4: 理解可能なロジックの確保

一貫したナビゲーションパターンを使用。
修正のための説明的なエラーメッセージと提案を提供（SC 3.3.3）。
同じデータを二…

以下为摘要预览，完整内容请查看 GitHub 原文。

无障碍（WCAG 2.2）

本技能确保数字界面对于所有用户（包括使用屏幕阅读器、开关控制和键盘导航的用户）是可感知、可操作、可理解和健壮的（POUR）。重点是 WCAG 2.2 成功标准的技术实现。

何时使用

为 Web、iOS、Android 定义 UI 组件规范。
审计现有代码中的无障碍障碍或合规性差距。
实施新的 WCAG 2.2 标准，例如 Target Size（最小）和 Focus Appearance。
将高层次设计需求映射到技术属性（ARIA 角色、特性、提示）。

核心概念

POUR 原则：WCAG 的基础（可感知、可操作、可理解、健壮）。
语义映射：使用原生元素而非通用容器，以获得内置的无障碍支持。
无障碍树：辅助技术实际"读取"的 UI 表示。
焦点管理：控制键盘和屏幕阅读器光标的顺序与可见性。
标签与提示：通过 aria-label、accessibilityLabel、contentDescription 提供上下文。

工作方式

步骤 1：识别组件角色

确定功能目的（例如：这是按钮、链接还是选项卡）。在依赖自定义角色之前，优先使用可用的最具语义的原生元素。

步骤 2：定义可感知属性

确保文本对比度满足 4.5:1（常规）或 3:1（大文本/UI）。
为非文本内容（图像、图标）提供文本替代。
实现响应式回流（最大 400% 缩放，不损失功能）。

步骤 3：实现可操作的控件

确保最小 24x24 CSS 像素的目标尺寸（WCAG 2.2 SC 2.5.8）。
确保所有交互元素可通过键盘到达，并具有可见的焦点指示器（SC 2.4.11）。
为拖拽操作提供单一指针的替代方式。

步骤 4：确保可理解的逻辑

使用一致的导航模式。
提供描述性的错误消息和修正建议（SC 3.3.3）。
实现"冗余输入"防护，避免重复要求相同数据（SC 3.3.7）。

步骤 5：验证健壮的兼容性

使用正确的 Name, Role, Value 模式。
为动态状态更新实现 aria-live 或直播区域。

无障碍架构图

flowchart TD
  UI["UI 组件"] --> Platform{平台?}
  Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
  Platform -->|iOS| SwiftUI["无障碍特性 + 标签"]
  Platform -->|Android| Compose["语义 + 内容描述"]

  ARIA -…

重要提示：源文件不在本站托管，请通过 GitHub 查看与下载。

索引更新于 8/25/2026, 9:18:05 PMGitHub ↗

SKILL.md8.0 KB在 GitHub 查看 ↗