アクセシビリティ改善スキル

iPhoneの VoiceOver を中心に、アクセシビリティ対応を実装する。

デザイン前提: Liquid Glass

本プロジェクトは @callstack/liquid-glass による Liquid Glass デザインを前提とする。 Liquid Glass はアクセシビリティ上の注意点が多い:

ガラス上テキストのコントラスト確保

• ガラスの背景ブラーにより、テキストの可読性が低下しやすい
• LiquidGlassView の高さが 65px超 の場合、テキスト色の自動適応が効かない。PlatformColor('labelColor') を明示的に使用する
• WCAG AA 基準（コントラスト比 4.5:1 以上）を満たすよう、必要に応じてテキストに影 (textShadowColor) やフォントウェイトの増加で補完する

「透明度を下げる」設定への対応

tsx
1import { AccessibilityInfo } from 'react-native';
2import { isLiquidGlassSupported } from '@callstack/liquid-glass';
3
4const [reduceTransparency, setReduceTransparency] = useState(false);
5
6useEffect(() => {
7  AccessibilityInfo.isReduceTransparencyEnabled().then(setReduceTransparency);
8  const sub = AccessibilityInfo.addEventListener(
9    'reduceTransparencyChanged',
10    setReduceTransparency,
11  );
12  return () => sub.remove();
13}, []);
14
15// reduceTransparency が true の場合、ガラスエフェクトを無効化し不透明背景にする

フォールバック

• isLiquidGlassSupported === false または reduceTransparency === true の場合は、ガラスを使わず十分なコントラストを持つ不透明背景を提供する

対象ファイル

• src/screens/**/*.tsx — 画面コンポーネント
• src/components/**/*.tsx — UIコンポーネント

引数が指定された場合はその画面のみ、省略時は全ファイルを対象とする。

手順

1. 対象要素の特定

以下の要素を検索し、アクセシビリティ属性の有無を確認する:

• Pressable, TouchableOpacity, TouchableHighlight — ボタン系
• Image — 画像
• TextInput — 入力フィールド
• Switch — トグル
• Text（見出し相当） — ヘッダー

2. アクセシビリティ属性の適用ルール

ボタン / Pressable

tsx
1<Pressable
2  accessibilityRole="button"
3  accessibilityLabel="戻る"           // VoiceOverが読み上げるテキスト
4  accessibilityHint="前の画面に戻ります"  // 操作の結果を説明（任意）
5  onPress={handleBack}
6>
7  <ChevronIcon />
8</Pressable>

画像

tsx
1// 意味のある画像
2<Image
3  source={{ uri: postImageUrl }}
4  accessibilityRole="image"
5  accessibilityLabel="投稿画像: カフェの外観写真"
6/>
7
8// 装飾的な画像（VoiceOverでスキップ）
9<Image
10  source={decorativeBlob}
11  accessible={false}
12/>

TextInput

tsx
1<TextInput
2  accessibilityLabel="メールアドレス"
3  accessibilityHint="ログイン用のメールアドレスを入力してください"
4  placeholder="example@mail.com"
5/>

見出し

tsx
1<Text
2  accessibilityRole="header"
3  style={styles.sectionTitle}
4>
5  基本情報
6</Text>

状態を持つ要素

tsx
1// いいねボタンの例
2<Pressable
3  accessibilityRole="button"
4  accessibilityLabel={`いいね、現在${likesCount}件`}
5  accessibilityState={{ selected: isLiked }}
6  onPress={handleLike}
7>

3. グループ化

関連する要素をまとめて1つの VoiceOver 項目にする:

tsx
1// カードをグループ化
2<View
3  accessible={true}
4  accessibilityRole="button"
5  accessibilityLabel={`${hirobaTitle}、メンバー${memberCount}人、投稿${postCount}件`}
6>
7  <Text>{hirobaTitle}</Text>
8  <Text>{memberCount}人</Text>
9  <Text>{postCount}件</Text>
10</View>

4. 読み上げ順序

重要な情報が先に読まれるよう、必要に応じて accessibilityElementsHidden や importantForAccessibility を使用:

tsx
1// 装飾要素をVoiceOverから除外
2<View accessibilityElementsHidden={true}>
3  <DecorativeBackground />
4</View>

5. 絵文字アイコンの対応

絵文字をアイコンとして使用している箇所に accessibilityLabel を追加:

tsx
1// Before
2<Text>🏠</Text>
3
4// After
5<Text accessible={false}>🏠</Text>
6// 親要素に accessibilityLabel を設定

ルール

• accessibilityLabel は簡潔に、スクリーンリーダーで自然に聞こえる日本語にする
• 装飾的な要素（背景画像、区切り線等）は accessible={false} で除外する
• 動的な値（カウント、状態）を含むラベルは変数で構築する
• accessibilityHint は必須ではない。操作結果が自明でない場合のみ追加する
• 既存の accessibilityRole="button" は維持し、accessibilityLabel が未設定の場合のみ追加する
• テスト: 変更後「VoiceOverで全画面を操作できるか」を基準とする