ImageViewの名前
フォーカス可能な画像要素は、TalkBackやVoice Accessなどの支援技術に利用可能な意味のあるアクセシブルな名前を提供すべきです。
影響
TalkBackを使用する人々は、見つかった問題の影響を最も受けます。もしも ImageView が視覚障害者に情報を提供し、名前が提供されていない場合、TalkBackは何もアナウンスしません。その情報はTalkBackのユーザー体験に欠けています。
情報を提供する画像は contentDescription を利用して、TalkBackを通じて必要なコンテキストと詳細を提供するべきです。
確認
- TalkBackをオンにする
- コントロールで「タッチして探索」のジェスチャーを行う
- 情報を提供する画像の場合:
- アクセシブル: フォーカスを受け、意味のある説明をアナウンスします。
装飾的な画像の場合: - アクセシブル: 個別にはフォーカスを受けません。グループ内であれば許容されます。
- アクセシブル: フォーカスを受け、意味のある説明をアナウンスします。
修正方法
ネイティブAndroid
ImageView image = .......;
image.setContentDescription("A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted.");React Native
React Nativeは多くの要素に自動的にアクセシビリティロールを追加しません。 accessibilityRole="image" すべての画像に、支援技術で利用可能にするために追加してください。 axe Accessibility Linter VSCode拡張機能 と axe DevTools Linter は、React Nativeのサポートを含んでおり、UIテスト前にこのようなバグをキャッチするのに役立ちます。
画像がユーザーに必要な情報を示す場合は、説明的な accessibilityLabel を与え、その情報を伝え、アクセシブルプロパティをtrueに設定してください。
<Image
...
accessible={true}
accessibilityLabel="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>バックグラウンドや装飾画像などユニークな情報を示さない場合は、フォーカス不可に設定してください。
<Image
...
accessible={false}
/>.NET MAUI
.NET MAUIでは、内容記述が与えられていない画像は自動的にアクセシビリティにおいて重要でないとマークされます。これにより、意図せず装飾画像としてマークされた画像がaxe DevTools Mobileで通過することになります。情報やコンテキストを伝える画像には、適切な説明を確実に提供してください。
オプション1: 画像がユーザーに必要な情報を示す場合は、説明的な SemanticProperties.Description を与えてその情報を伝えるようにしてください。
<Image
...
SemanticProperties.Description="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/> オプション2: 画像がユーザーに必要な情報を示す場合は、 Label の下に Image 要素を追加してその情報を伝えるようにしてください。
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand">
<Image
BindingContext="{x:Reference imageLabel}"
SemanticProperties.Description="{Binding Path=Text}"
...
/>
<Label
x:Name="imageLabel"
Text="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
...
/>
</StackLayout>