アクティブコントロール名
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
すべてのインタラクティブビューには、VoiceOverや音声コントロールなどの支援技術のためにアクセス可能な名前が必要です。
影響
VoiceOverを使用している人々に最も影響があります。名前のないコントロール要素は、コントロールを操作する人にその文脈や目的を十分に伝えることができません。
確認
- VoiceOverをオンにする
- コントロールをフォーカスする
- 次のいずれかが起こります。
- アクセス不可: 名前をアナウンスせず、存在する場合はその役割と値のみをアナウンスします。
- アクセス可能: VoiceOverで名前をアナウンスします。
修正方法
UIKit
このルールで見つかった問題を修正するには、 accessibilityLabel をコントロールに追加します。
button.accessibilityLabel = "Deque Systems Website"SwiftUI
コントロールのテキストが有意義であることを確認するか、 accessibilityLabel が必要な場合には追加してください。
使用例: ラベルに画像があるボタン
画像に有意義な名前を付けてください。複数の言語をサポートする場合、それが選択肢にならないことを理解しておいてください。名前が適切でない場合は、 accessibilityLabel を画像に設定します。
あるいは、コントロールとそのサブビューを組み合わせて一つの要素にします。有意義なテキストがない場合には、 accessibilityLabel を以下のようにビュー全体に設定します。
var body: some View {
HStack(alignment: .center, spacing: 10,
content: {
Text("axe DevTools for iOS")
Spacer()
Button(action: { openLink() },
label: {
Image(systemName: "arrow.up.forward.app")
.accessibilityHidden(true)
.frame(minWidth: 50, minHeight: 50)
})
.accessibility(removeTraits: .isStaticText)
.accessibility(removeTraits: .isButton)
.accessibility(addTraits: .isLink)
}).padding(16)
.accessibilityElement(children: .combine)
}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>