ImageView 名称
フォーカス可能な画像要素は、VoiceOverやVoice Controlなどの支援技術向けに有意味なアクセシブルネームを提供する必要があります。
影響
VoiceOverを使用する人々が最も影響を受けます。有益な画像は、VoiceOverによってフォーカスされた際に、そのコンテキスト、情報、または目的を読み上げる必要があります。
確認
- VoiceOverをオンにする
- 画像にフォーカスしようとする
- 次のうちいずれかが発生します：
- アクセシブルでない：画像にフォーカスできるが、VoiceOverで名前がアナウンスされません。
- アクセシブル：画像はユニークな情報を提示していないのでフォーカスできません。
- アクセシブル：画像はフォーカス可能で、名前を持っています。
修正方法
UIKit
このルールによって見つかった問題は、 accessibilityLabelを使用していないこと、または画像をアクセシビリティ要素として誤ってマークしたことが原因です。
Storyboardで：
- 画像に移動する
- インスペクターパネルが表示されていることを確認する
- Identity Inspectorを選択する
- ユーザーに必要な情報を画像が提示している場合は、「Accessibility」セクションの「Label」テキストフィールドに情報を書きます。
- 画像がユーザーに必要な情報を提示していない場合は、「Accessibility」セクションで「Enabled」チェックボックスの選択を解除します。
コードで：
画像がユーザーに必要な情報を提示している場合は、記述的な accessibilityLabel を与えてその情報を伝えます：
image.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.isAccessibilityElement = falseUIKitアプリでは、 accessibilityLabel がない画像は、デフォルトで支援技術でフォーカスできません。
Appleのプロパティを使用してフォーカス可能性を確認する際、 accessibilityIdentifier が画像に設定されていると、正確でない場合があります。この予期しない動作により、UIKitアプリでのImageView名称の問題は、レビューが必要として報告されます。Appleにバグ報告が提出されています。
SwiftUI
画像がユーザーに必要な情報を提供する場合は、 .accessibility(label: Text("Accessibility Label Here")) ビューモディファイアを画像に設定するか、ラベルパラメータを含むImageイニシャライザを利用できます。
Image("format_info", label: 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."))
画像がユーザーに必要な情報を提示していない場合（背景または装飾画像など）は、以下のビューモディファイアで非表示にします：
Image("background_blue")
.accessibility(hidden: true)React Native
React Nativeは、多くの要素に自動でアクセシビリティロールを追加しません。支援技術で利用できるようにしたいすべての画像に accessibilityRole="image" を必ず追加してください。 axe Accessibility Linter VSCode Extension と 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>