前面にラベル
このルールのために私たちがどのように人工知能を使っているかを学びましょう！
確認する項目
インタラクティブな要素に可視ラベルがある場合、支援技術（AT）によって発表される名前の先頭にこれが来るべきであり、余分な情報の前に配置されます。
| 要素 | 失敗 ❌ | 合格 ✅ |
|---|---|---|
| テキスト付きのボタン |  name = "アカウント サインイン" |
name = "アカウントにサインイン" |
| 一致 | 名前 がテキストで始まっていません 可視ラベルの中の | 名前 がテキストで始まっています 可視ラベルの中の |
| TalkBack | 「アカウント サインイン、ボタン」 | 「アカウントにサインイン、ボタン」 |
| Voice Access | ユーザーが「サインイン」と声に出して言う これはボタンをアクティブにしない可能性があります、なぜなら 名前は「アカウント サインイン」であり、「サインイン」ではないため |
ユーザーが「サインイン」と声に出して言う これはボタンをアクティブにするはずです、なぜなら名前が「アカウントにサインイン」であるため |
一目でわかる情報
- このルールにはユーザーへの影響が小さく、WCAG ベストプラクティスを遵守します
- 最初に表示テキスト: 要素の名前は、常に視覚的なユーザーが画面で知覚するものから始めます
- 次にコンテキスト: 表示されたテキストの後に役立つ情報を要素の名前に追加します
ユーザーへの影響
支援技術を使用する人々は、要素の目的をすばやく理解し、簡単に操作できる必要があります。余分な言葉がアクセシブルネームの先にくると、ナビゲーションが遅くなり、ATユーザーにとってアプリが非効率になります。
- TalkBack - 一部のユーザーはモダリティを切り替えて、スクリーンリーダーと音声入力の両方を使用します。名前の先頭に表示テキストを配置することで、視覚ユーザーが知覚できるものとTalkbackが発表するものを比較する際の混乱を減らします。
- Voice Access - 音声認識エンジンはしばしば、ユーザーがどの要素を対象としているのかを解決するために、アクセシブルネームの先頭に依存しています。アクセシブルネームの先頭に可視ラベルを置くことで、一致が明確となり、ユーザーが要素をアクティブにできない可能性を減らします。 私たちがお勧めするベストプラクティスは、要素の可視テキストのみをネーム内に含め、付加情報はアクセシブルバリュー、ヒント、またはロール内に配置することです。
注：プログラミング言語に応じて、要素の「name」プロパティは異なる呼び方をされることがあります。XMLやComposeの場合はコンテントディスクリプションと呼ばれます。React Nativeでは、アクセシビリティラベルと呼ばれます。
前面ラベルの問題を確認
- TalkBackをオンにする
- 要素にフォーカスする
- 次のいずれかが起こります：
- アクセス不可能：TalkBackにより最初に発表されたテキストが要素の可視テキストと異なる
- アクセス可能：TalkBackが要素の可視テキストを最初に発表します
問題を修正
前面ラベル問題を解決するには、できるだけテキストコンテンツとアクセシブルネームを正確に一致させます。「ここをクリックして...」や「タップして...」などの余分な言葉の使用を避け、ユーザーにそのアクションを明示的に伝えるように要素に名前をつけます。
要素のアクセシブルネームにより多くのコンテキストを含める必要がある場合もあります。例えば：
- 表示ラベル: 「受信箱、5」、名前: 「受信箱、未読メッセージ5件」
- 表示ラベル: 「削除」、名前: 「ユーザープロフィールを削除」
これらのような場合に前面ラベルの問題を回避するために、要素の可視テキストが 先頭 その利用可能な名前に含まれます。
XML
「送信」と書かれたボタンの場合は次のようになります。
<Button
android:id="@+id/email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/xlg"
android:text="Send"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider2" />ボタンの可視テキストがコンテンツ記述の最初に来て、追加情報が続きます。
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"作成
「送信」と書かれたクリック可能なテキスト要素の場合、ボタンの可視テキストがその contentDescriptionの最初に来て、追加情報が続きます。
Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")React Native
この accessibilityLabel プロパティは要素の可視テキストから始まるべきです。
デフォルトでは、ボタンはそのタイトルを accessibilityLabelとして使用し、このルールを満たします。
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>ボタンの accessibilityLabel をカスタマイズする場合は、 titleのテキストから始めることを確認してください。
<Button
title={'Log In'}
mode='contained'
accessibilityLabel='Log In to Transfer Money'
/>この accessibilityLabel を明示的に設定する場合、 accessibilityLabel が要素の可視テキストから始まることを確認してください。
<View style={styles.container}>
<Button title='Menu' accessibilityLabel='Menu: Tap to expand/collapse'>
</View>このルールを無視できますか？
ラベルを前に出すルールは、WCAGが一部として示したベストプラクティスを強制します。 WCAG 2.1 2.5.3 A。このルールは軽微な影響しかないため、より深刻な問題を優先したい場合は無視できます。 「ベストプラクティス」に分類されたルールをモバイルダッシュボードからオフにする、または Android用に書かれたテストでルールを無視することができます。
リソース
- ウェブコンテンツアクセシビリティガイドライン（WCAG）2.1、W3C勧告
- WCAG 2.1 理解ドキュメント