画像にアクセシビリティラベルがある
ルール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=""
/>