ラベル・イン・ネーム
アプリのボタンや操作を誰にでも分かりやすくする
このルールのためにどのように人工知能を活用しているか学びましょう！
チェックポイント
インタラクティブな要素に可視のラベルがある場合、支援技術（AT）によって発表される名前が同じであるべきです。
失敗例 ❌
ボタンは name 「ログイン」と表示されている
TalkBack が「ログイン、ボタン」とアナウンスされ、一方で表示されているラベルは「サインイン」と不一致です
Voice Access - ユーザーは「サインイン」と言う
ボタンの名前が「ログイン」であり、「サインイン」ではないため、これではボタンは作動しません
成功例 ✅
ボタンは name 「サインイン」と表示されている
TalkBack が「サインイン、ボタン」とアナウンスされ、表示ラベルと一致する
Voice Access - ユーザーは「サインイン」と言う
名前が表示ラベルと一致するため、ボタンが作動します
クイックビュー
- このルールはユーザーに重大な影響を与えます
- 可視テキストを一致させる: 視覚的なユーザーが「サインイン」ボタンを見た場合、スクリーンリーダーも「サインイン」と発表するようにしてください
- 追加のコンテキストを追加してもかまいません: 「保存」を「文書を保存」と変更することができます
- 可視の語句を省略しない: スクリーンリーダーは「カタログを検索」ボタンを発表するべきであり、単に「検索」とのみで終わらせてはいけません
ユーザーへの影響
TalkBackなどの支援技術を使用している人や、視力が低下している人々に最も影響があります。「ラベル・イン・ネーム」の問題は、TalkBackが発表する内容と画面のコンテンツの間で混乱や矛盾を招くことがあります。
ボタンに「サインイン」と表示されている場合、TalkBackも「サインイン」とアナウンスする必要があります。異なる言葉、例えば「ログイン」などは使わないでください。
注: プログラミング言語によっては、要素の 'name' プロパティが異なる名前で呼ばれることがあります。XMLまたはComposeではコンテントディスクリプションと呼ばれ、React Nativeではアクセシビリティラベルと呼ばれます。
ラベル・イン・ネーム問題の確認
- TalkBackをオンにする
- 要素にフォーカスをあてる
- 次のいずれかが発生します:
- アクセシブルでない: TalkBackによって発表されるテキストが要素の可視テキストと異なる
- アクセシブル: TalkBackによって発表されるテキストが要素の可視テキストと同じまたはそれを含んでいる
問題の修正
「ラベル・イン・ネーム」の問題を解決するには、要素の名前を要素の可視テキストと一致させるか、それを含むように設定します。
可視テキストが説明的であり、かつユニークな場合、名前はそのテキストと正確に一致させるのが推奨されます。
可視テキストだけではATユーザー（例えばスクリーンリーダー）に要素の動作を明示的に伝えられない場合、アクセシブルネームを拡張してより多くのコンテキストを含めることが良い考えです。例えば:
- 可視ラベル: 「受信トレイ、5」、名前: 「受信トレイ、5件の未読メッセージ」
- 可視ラベル: 「削除」、名前: 「ユーザープロフィールを削除」
ユーザーにより多くのコンテキストを提供するために、アクセス可能な名前を拡張しても構いません。ベストプラクティスとして、名前は常に最初に来るべきです。名前を先頭に配置する問題を防ぐためです。表示ラベルが「受信トレイ、5」の場合、「受信トレイ、未読メッセージ5件」と拡張できます。要素の名前で順序を逆にしないように（「ユーザーの受信トレイに未読メッセージ5件」）、「Label in Name」および「名前を先頭に」ルールと一致させてください。
XML
内容説明を設定し、目に見えるテキストと完全に一致するか、含まれるようにしてください。
要素がButtonまたはクリック可能なTextViewの場合:
Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");
TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");
// Not an exact match, but the accessibilityLabel includes all the visible text要素がCheckBoxの場合、チェックボックス名を参照してください。
作成
要素のcontentDescriptionが目に見えるテキストと完全に一致するか、含まれていることを確認してください。
@Composable
fun EmailButton() {
Button(
modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
onClick = { … },
) {
Text(
text = “Send”
)
}
}React Native
accessibilityLabelプロパティは、要素の目に見えるテキストと一致するか、含むべきです。
デフォルトでは、ボタンはそのタイトルをaccessibilityLabelとして使用するため、このルールに適合します。
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>
// The visible text and accessibility label match exactlyタイトルのないインタラクティブな要素の場合、要素とテキストコンポーネントを含むタッチ可能なビューを使用します。この方法で提供されたテキストが要素の表示ラベルになります。含まれる要素のaccessibilityLabelを見えるテキストと一致するか、含まれるように設定します。
<TouchableOpacity
style={styles.switchRow}
importantForAccessibility='no-hide-descendants'
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel='Subscribe to notifications'
accessibilityValue={{ text: "" + isEnabled }}
accessibilityRole='switch'
onPress={() => {
setIsEnabled(!isEnabled)
}}>
<Text style={{ fontSize: 22 }}>
Subscribe
</Text>
<Switch
trackColor={{ false: 'lightgray', true: 'dimgray' }}
thumbColor={'white'}
accessibilityElementsHidden={true}
importantForAccessibility='no-hide-descendants'
value={isEnabled}
onValueChange={() => {
setIsEnabled(!isEnabled);
}}
/>
</TouchableOpacity>このルールを無視してもいいでしょうか？
「Label In Name」にはユーザーにとってのユーザーに深刻な影響があり、これを修正する手順を取ることをお勧めします。ただし、稀な場合を除いて。例えば、「Visaカード xxxx-xxxx-xxxx-1234 」と表示されているボタンがある場合、TalkBackで「Visaカード -1-2-3-4で終わる」とアナウンスするように設定したいかもしれません。ボタンに表示されているテキストが、TalkBackによってアナウンスされる名前と一致しないため、これは「Label in Name」に失敗を引き起こします。しかしこのようなケースでは、ルールを無視するのが理にかなっています。詳細はルール無視についてをご覧ください。
リソース
Deque University コースページ
注意: Deque Universityのリソースにフルアクセスするにはサブスクリプションが必要です。
その他のリソース
- ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.1、W3C勧告
- WCAG 2.1 解説ドキュメント