アクティブビュー名
This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data
インタラクティブなビューには、TalkBackやVoice Accessといった支援技術で利用可能な名前が付けられているべきです。
影響
TalkBackを使用する人々にとって最も影響があります。ビューにフォーカスを合わせられない、またはビューの名前がTalkBackを通じて発表されないことによってアクセスが難しくなります。
note
Androidのバージョン、デバイス、製造元が問題の検出に影響を及ぼす可能性があります。
確認
- TalkBackをオンにする
- コントロールにフォーカスを合わせてみる
- 次のいずれかが発生します:
- アクセス不可: コントロールにフォーカスできない。
- アクセス不可: フォーカスされたが、TalkBackで発表されない。
- アクセス可能: フォーカスされ、TalkBackで発表される。
修正方法
XML
TalkBackが正確な情報を共有できるように、コントロールのテキストプロパティやビューのコンテンツ説明を利用してください。
Button button = .......
button.setText("Button's Name");
ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");Compose
画像ボタンにはコンテンツ説明やテキストを組み合わせ、目的を示すようにします。
@Composable
fun EmailIconButton() {
IconButton(
onClick = { … },
) {
Icon(
painter = painterResource(id = R.drawable.email_icon),
contentDescription = “Send an Email”
)
}
}非画像ボタンはTalkBackのためにテキストを提供すべきです。
@Composable
fun EmailButton() {
Button(
modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
onClick = { … },
) {
Text(
text = “Email”
)
}
}React Native
このルールによって見つかった問題を修正するためには、コントロールコンポーネントに accessibilityLabel を追加してください。
<TextInput
...
accessibilityLabel="First Name"
/>要素が含むビュー内でグループ化されている場合、含むビューに accessible プロップと accessibilityLabel プロップを追加してください:
<View
importantForAccessibility='no-hide-descendants'
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel={"Dark Mode"}
accessibilityValue={{ text: "" + isEnabled }}
accessibilityRole='switch'
onPress={() => {
setIsEnabled(!isEnabled)
}}
>
<Switch
trackColor={{ false: 'lightgray', true: 'dimgray' }}
ios_backgroundColor={'lightgray'}
thumbColor={'white'}
onValueChange={ () => {
setIsEnabled(!isEnabled)
}}
value={isEnabled}
accessibilityElementsHidden={true}
/>
</View>