アクティブビュー名
チェック内容
インタラクティブな要素には、TalkBackやVoice Accessなどの支援技術に利用可能なアクセシブルな名前が必要です。
失敗例 ❌
インタラクティブな要素に名前が設定されていない
TalkBack の読み上げ "Button"
Voice Access — ユーザーが「検索」と発話
要素は名前がないため応答しない
成功例 ✅
`contentDescription="Search"`
TalkBack の読み上げ "Search, button"
Voice Access — ユーザーが「検索」と発話
名前が一致したため要素がアクティブになる
概要
- このルールはユーザーにとって非常に重要です
- すべてのインタラクティブ要素には名前が必要です。ボタン、リンク、カスタムコントロールなどは、TalkBackがアナウンスできるアクセシブルな名前を持つ必要があります
- インタラクティブ要素に可視テキストがない場合は、
contentDescriptionまたはaccessibilityLabelプロパティを使用して明示的に設定します - TalkBackが何もアナウンスするものがない状態にしないこと：名前がないと、要素はその役割や値だけをアナウンスし、ユーザーにその機能のコンテキストを提供しません
ユーザーへの影響
TalkBackを使用している人々が最も影響を受けます。名前のないインタラクティブ要素では、使用者にその要素の完全なコンテキストや目的を伝えることができません。
ボタンや画像ボタン、カスタムコントロールなどのインタラクティブ要素にアクセシブルな名前がない場合、TalkBackはその要素がフォーカスされたときに何もアナウンスしません。 たとえば、ユーザーがダウンロードできることを示す下線付き矢印の画像を持つボタンがあるとします。アクセシブルな名前がない場合、TalkBackは「ボタン、ダブルタップでアクティブ化」としかアナウンスしません。
このルールは、Voice Accessを使用している人々にも影響を及ぼします。Voice Accessユーザーが表示されているラベルを発話して要素をアクティブにしようとすると、要素が応答しないことがあります。
アクティブ ビュー名の問題を確認
- TalkBackをオンにする
- インタラクティブな要素にフォーカスする
- 次のいずれかが発生します:
- 非アクセシブル：名前ではなく役割や値のみがアナウンスされる
- アクセシブル：その名前が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"
/>要素がView内でグループ化されている場合は、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>Flutter
IconButtonにtooltipプロパティを使用してアクセシブルな名前を提供します。これにより、名前がTalkBackでアナウンスされ、長押しで視覚ツールチップも表示されます。
IconButton(
icon: const Icon(Icons.search),
tooltip: 'Search',
onPressed: () {},
)アイコンのみの子を持つインタラクティブ要素には、semanticLabelを直接Iconに設定します：
ElevatedButton(
onPressed: () {},
child: const Icon(Icons.add, semanticLabel: 'Add item'),
)インタラクティブ要素と可視ラベルをグループ化するときは、MergeSemanticsでそれらをラップして、TalkBackがそれらを単一の焦点可能な要素として組み合わせるようにします：
MergeSemantics(
child: Row(
children: [
const Text("Dark mode"),
Switch(
value: _darkMode,
onChanged: (value) => setState(() => _darkMode = value),
),
],
),
)このルールを無視してもよいですか？
このルールはユーザーにとって非常に重要であり、無視すべきではありません。名前のないインタラクティブ要素は、最も基本的なアクセシビリティの失敗の一つです。TalkBackやVoice Accessのユーザーは、アクセシブルな名前がない要素を使用することが事実上できません。この問題のすべてのインスタンスを優先して解決し、より低い優先度の問題に取り組んでください。
よくある質問
TalkBackを使用しているときに、要素にフォーカスした後で内容を読み上げられます。このルールがまだ失敗するのはなぜですか？ 要素に定義された名前がない場合、スクリーンリーダーはしばしばその値をアナウンスします。しかし、値は欠けているアクセシブルな名前の代わりにはなりません。
リソース
Deque Universityコースページ
-
4.1.2a 名、役割、値 (A)の下にネイティブ モバイル Androidを参照
注意: Deque Universityのリソースにフルアクセスするにはサブスクリプションが必要です。
その他のリソース
- ウェブコンテンツアクセシビリティガイドライン（WCAG）2.1
- SC 4.1.2 を理解する, 名前、役割、値（レベルA）