前面にラベル
このルールに人工知能をどのように活用しているかをご覧ください！
確認する項目
インタラクティブな要素に可視ラベルがある場合、支援技術（AT）によって発表される名前の先頭にこれが来るべきであり、余分な情報の前に配置されます。
失敗例 ❌
ボタン name は「アカウントサインイン」
TalkBack という、可視ラベル「サインイン」が最初に来ない
Voice Access - ユーザーは「サインイン」と発話
名前が「サインイン」ではなく「アカウント」で始まっているため、ボタンが有効にならない可能性があります
成功例 ✅
ボタン name は「アカウントにサインイン」
TalkBack と通知されますが、可視ラベル「サインイン」が最初に来ます
Voice Access - ユーザーは「サインイン」と発話
可視ラベルで名前が始まるため、ボタンが有効になります
一目でわかる情報
- このルールにはユーザーへの影響が小さく、WCAG ベストプラクティスを遵守します
- 最初に表示テキスト: 要素の名前は、常に視覚的なユーザーが画面で知覚するものから始めます
- 次にコンテキスト: 表示されたテキストの後に役立つ情報を要素の名前に追加します
ユーザーへの影響
支援技術を使用する人々は、要素の目的をすばやく理解し、簡単に操作できる必要があります。余分な言葉がアクセシブルネームの先にくると、ナビゲーションが遅くなり、ATユーザーにとってアプリが非効率になります。
- TalkBack - 一部のユーザーは画面リーダーと音声入力の両方を使用してモダリティを切り替えることがあります。可視テキストを名前の最初に配置することで、視覚的ユーザーが認識できるものとTalkbackで発表される内容を比較した場合の混乱を減らします。
- Voice Access - 音声認識エンジンは、ユーザーが対象としている要素を解決するために、アクセス可能な名前の最初に依存することがよくあります。アクセス可能な名前の最初に可視ラベルを置くことで、マッチングを曖昧にせず、ユーザーが要素を有効にできない可能性を減らします。 私たちの推奨する最良の方法は、要素の可視テキストのみを名前に含め、付加情報をアクセス可能な値、ヒント、または役割に含めることです。
注：プログラミング言語に応じて、要素の「name」プロパティは異なる呼び方をされることがあります。XMLやComposeの場合はコンテントディスクリプションと呼ばれます。React Nativeでは、アクセシビリティラベルと呼ばれます。
前面ラベルの問題を確認
- TalkBackをオンにする
- 要素にフォーカスする
- 次のいずれかが起こります：
- アクセス不可能：TalkBackにより最初に発表されたテキストが要素の可視テキストと異なる
- アクセス可能：TalkBackが要素の可視テキストを最初に発表します
問題を修正
前面ラベル問題を解決するには、できるだけテキストコンテンツとアクセシブルネームを正確に一致させます。「ここをクリックして...」や「タップして...」などの余分な言葉の使用を避け、ユーザーにそのアクションを明示的に伝えるように要素に名前をつけます。
要素のアクセシブルネームにより多くのコンテキストを含める必要がある場合もあります。例えば：
- 表示ラベル: 「受信箱、5」、名前: 「受信箱、未読メッセージ5件」
- 表示ラベル: 「削除」、名前: 「ユーザープロフィールを削除」
このような場合にLabel at Frontの問題を回避するために、要素の可視テキストがアクセス可能な名前の先頭に来るようにしてください。
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>このルールを無視できますか？
Label at Frontルールは、WCAG 2.1 2.5.3 Aの一部としてWCAGにより指摘されたベストプラクティスを強制します。このルールの影響は小さく、より深刻な問題を優先したい場合は無視できます。「ベストプラクティス」に分類されたルールをモバイルダッシュボードからオフにする、またはAndroid用に書かれたテストでルールを無視するすることができます。
リソース
- ウェブコンテンツアクセシビリティガイドライン（WCAG）2.1、W3C勧告
- WCAG 2.1 理解ドキュメント