accessibility

Files (2)

• SKILL.md
• reference.md

SKILL.md (first lines)

# Accessibility Skill

## 概要
WCAG 2.1/2.2 およびモバイルプラットフォーム固有のアクセシビリティガイドラインに基づき、誰もが使えるアプリを設計・実装・検証するための専門知識を提供します。仕様チェック、計画、デザインレビュー、コードレビュー、VRT、E2Eテストの各フェーズで参照されます。

詳細な基準値テーブル・チェックリストは `reference.md` を参照してください。

## WCAG 2.1 / 2.2 標準規格

### 4つの原則（POUR）
| 原則 | 意味 | モバイルでの代表例 |
|------|------|-------------------|
| Perceivable（知覚可能） | 情報・UIをユーザーが知覚できる | 代替テキスト、十分なコントラスト、字幕 |
| Operable（操作可能） | 操作可能なUIとナビゲーション | タッチターゲット、キーボード操作、十分な操作時間 |
| Understandable（理解可能） | 情報とUI操作が理解可能 | 一貫したナビゲーション、エラー特定と修正提案 |
| Robust（堅牢） | 支援技術を含む多様な環境で解釈可能 | 適切なARIA/Semantics、標準コントロールの活用 |

### 適合レベル
- **A**: 最低限満たすべき
- **AA**: 一般的な目標水準（**プロダクトの既定目標**）
- **AAA**: 最高水準（コンテンツ全体への適用は通常困難）

### 主要な数値基準（AA基準）
| 項目 | 基準 |
|------|------|
| テキストコントラスト比（通常） | **4.5:1** 以上 |
| テキストコントラスト比（大文字 18pt以上 / 14pt太字以上） | **3:1** 以上 |
| 非テキストコントラスト（UIコンポーネント、グラフィカル要素） | **3:1** 以上 |
| 文字サイズ拡大耐性 | **200%** までレイアウト破綻なし |
| タッチターゲット（WCAG 2.2 Target Size Minimum） | **24×24 CSS px** 以上（推奨 44×44） |

### WCAG 2.2 で追加された主な達成基準（モバイル関連）
- **2.4.11 Focus Not Obscured (Minimum)**: フォーカス時のUI要素が他のコンテンツに隠されない
- **2.5.7 Dragging Movements**: ドラッグ操作には単一ポインタの代替手段を提供
- **2.5.8 Target Size (Minimum)**: 24×24 CSS px以上
- **3.3.7 Redundant Entry**: 一度入力した情報の再入力を避ける
- **3.3.8 Accessible Authentication**: 認知機能テスト（パスワードの記憶など）に依存しない認証手段の提供

## iOS アクセシビリティ

### VoiceOver
```swift
// SwiftUI
Image(systemName: "trash")
    .accessibilityLabel("削除")
    .accessibilityHint("選択中のアイテムを削除します")
    .accessibilityAddTraits(.isButton)

// グルーピング: 関連要素をまとめて1つのアクセシビリティ要素に
HStack {
    Image("user-avatar")
    VStack {
        Text("山田太郎")
        Text("オンライン")
    }
}
.accessibilityElement(children: .combine)
.accessibilityLabel("山田太郎、オンライン")

// UIKit
button.accessibilityLabel = "削除"
button.accessibilityHint = "選択中のアイテムを削除します"
button.accessibilityTraits = .button
```

**ラベル付けの原則**:
- **何を**（ラベル）と**何が起きるか**（ヒント）を分離
- 「ボタン」「画像」など要素タイプを含めない（traitsで自動付与される）
- 装飾画像は `.accessibilityHidden(true)` で除外

### Dynamic Type
```swift
// SwiftUI: 自動でDynamic Type対応
Text("見出し")
    .font(.headline)  // システムフォントスタイルを使う

// カスタムサイズ: @ScaledMetric で拡大に追従
@ScaledMetric var iconSize: CGFloat = 24
Image(systemName: "star")
    .frame(width: iconSize, height: iconSize)

// UIKit: UIFontMetrics で拡大に追従
let font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: UIFont.systemFont(ofSize: 17))
label.font = font
label.adjustsFontForContentSizeCategory = true
```

**チェックポイント**:
- 固定 `font(.system(size:))` を避け、`font(.body)` 等のテキストスタイルを使う
- 拡大時にレイアウト崩れがないか（XL3 / AccessibilityXL までテスト）
- アイコンサイズも `@ScaledMetric` で追従

### Reduce Motion / Differentiate Without Color
```swift
@Environment(\.accessibilityReduceMotion) var reduceMotion
@Environment(\.accessibilityDifferentiateWithoutColor) var differentiate

withAnimation(reduceMotion ? nil : .spring()) {
    isExpanded.toggle()
}

// 色 + 形/アイコンで状態を伝える
HStack {
    Image(systemName: status.iconName)  // 形でも区別
    Text(status.label).foregroundColor(status.color)
}
```

### その他
- **Switch Control / Voice Control**: 標準コントロール（`Button`, `Toggle`等）を使えば自動対応
- **SF Symbols**: 意味のあるシンボルには `accessibilityLabel` を付与（装飾は隠す）
- **VoiceOverのローター**: 見出し階層は `.accessibilityAddTraits(.isHeader)` で示す
- **動的コンテンツ通知**: `UIAccessibility.post(notification: .announcement, argument: "保存しました")`

## Android アクセシビリティ

### TalkBack
```kotlin

From ohzono/native-app-fullcycle, MIT.

More from ohzono/native-app-fullcycle