画像にアクセシビリティラベルがある
React Native の Image コンポーネントに、スクリーンリーダー利用者のための代替テキストを持たせることを要求するルール
ルールID: image-has-accessibility-label
すべての画像は、その目的や意味をスクリーンリーダーのユーザーに伝えるために代替テキストを持たなければなりません。
なぜ重要なのか
スクリーンリーダーは、デフォルトでは画像を単語に翻訳する方法を持っていません。VoiceOverやTalkBackの新しいバージョンは、画像に対してテキストを提供しようとする高度な機能を持っていますが、常に正確であるとは限りません。そのため、スクリーンリーダーのユーザーが画像の内容と目的を明確に理解するためには、画像に短くて説明的な代替テキストが必要です。
視覚に障害がある場合、画像のような視覚情報は、デジタルテキストの代替が提供されない限り完全に無意味です。スクリーンリーダーはそのテキストをサウンドや点字に変換します。このことは、視力が低い人や色盲の人にとっても程度の差はあれ同様です。
問題を修正する方法
全ての Image コンポーネントで accessible プロップが true に設定されている場合、accessibilityLabel プロップも含まれていることを確認してください。また、全ての Image コンポーネントに accessibilityLabel プロップがある場合、スクリーンリーダーで利用可能であるために accessible プロップも true に設定されていることを確認してください。
成功例
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel="A small fawn pug"
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
accessibilityLabel="A small fawn pug"
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible="true"
accessibilityLabel="A small fawn pug"
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={false}
/><Image
source={require("pug.jpg")}
style={styles.image}
/>失敗例
Image コンポーネントには accessible プロップがありますが、accessibilityLabel プロップがありません。
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>Image コンポーネントには accessibilityLabel プロップがありますが、accessible プロップがありません。
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>Image コンポーネントに accessible プロップがある場合、空の accessibilityLabel を持たせないでください。
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>