Swiftui Accessibility

SwiftUI Accessibility Guide

SwiftUIアプリのアクセシビリティ実装ガイド。

ディレクトリ構成

swiftui-accessibility/
├── SKILL.md (このファイル)
└── references/
    └── accessibility.md

リファレンスファイル

references/accessibility.md

アクセシビリティ実装ガイド：

• VoiceOver対応:
  • accessibilityLabel: 要素の説明
  • accessibilityHint: 操作のヒント
  • accessibilityValue: 現在の値
  • accessibilityTraits: 要素の種類
• Dynamic Type:
  • フォントスケーリング
  • レイアウト対応
• 色のコントラスト:
  • WCAG基準
  • ダークモード対応
• モーション:
  • reduceMotion対応
  • アニメーション代替
• テストとツール:
  • Accessibility Inspector
  • VoiceOverテスト方法

使用方法

アクセシビリティ実装時

1. references/accessibility.mdで実装パターンを確認
2. VoiceOverでテスト
3. Dynamic Typeでレイアウト確認

PRレビュー時

1. アクセシビリティラベルの有無を確認
2. 画像にaltテキストがあるか確認
3. タップ領域が十分か確認

クイック実装ガイド

VoiceOver基本

// ラベル（必須）
Image(systemName: "heart.fill")
    .accessibilityLabel("お気に入り")

// ヒント（操作説明）
Button("削除") { }
    .accessibilityHint("この項目を削除します")

// 値（現在の状態）
Slider(value: $volume)
    .accessibilityValue("\(Int(volume))パーセント")

Dynamic Type対応

// 推奨: システムフォント
Text("Hello")
    .font(.body)

// カスタムフォントのスケーリング
Text("Hello")
    .font(.custom("MyFont", size: 16, relativeTo: .body))

reduceMotion対応

@Environment(\.accessibilityReduceMotion) var reduceMotion

var body: some View {
    content
        .animation(reduceMotion ? nil : .default, value: isExpanded)
}

チェックリスト

• 全てのインタラクティブ要素にaccessibilityLabelがあるか
• 画像に適切な説明があるか
• Dynamic Typeでレイアウトが崩れないか
• 色だけに依存した情報伝達がないか
• タップ領域は44pt以上あるか

関連スキル

• swiftui-coding-guidelines: 基本的なベストプラクティス
• swiftui-code-review-checklist: PRレビュー時のアクセシビリティチェック