ラベル・イン・ネーム

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

チェックポイント

インタラクティブな要素に可視のラベルがある場合、支援技術（AT）によって発表される名前が同じであるべきです。

要素	失敗 ❌	合格 ✅
テキストを含むボタン	name = 「ログイン」	name = 「サインイン」
一致	名前一致しない可視ラベル	名前一致する可視ラベル
TalkBack	「ログイン、ボタン」	「サインイン、ボタン」
Voice Access	ユーザーが「サインイン」と声に出して言うこれはボタンをアクティブにしません。なぜなら、名前が「ログイン」であり、「サインイン」ではないからです。	ユーザーが「サインイン」と声に出して言うこれはボタンをアクティブにするはずです。なぜなら、名前が「サインイン」だからです。

クイックビュー

このルールはユーザーに重大な影響を与えます
可視テキストを一致させる: 視覚的なユーザーが「サインイン」ボタンを見た場合、スクリーンリーダーも「サインイン」と発表するようにしてください
追加のコンテキストを追加してもかまいません: 「保存」を「文書を保存」と変更することができます
可視の語句を省略しない: スクリーンリーダーは「カタログを検索」ボタンを発表するべきであり、単に「検索」とのみで終わらせてはいけません

ユーザーへの影響

TalkBackなどの支援技術を使用している人や、視力が低下している人々に最も影響があります。「ラベル・イン・ネーム」の問題は、TalkBackが発表する内容と画面のコンテンツの間で混乱や矛盾を招くことがあります。

次のテーブルを参照してください。ボタンに「サインイン」と記載されている場合、TalkBackも「サインイン」と発表するべきであり、例えば「ログイン」のような別の名称ではいけません。

注: プログラミング言語によっては、要素の 'name' プロパティが異なる名前で呼ばれることがあります。XMLまたはComposeではコンテントディスクリプションと呼ばれ、React Nativeではアクセシビリティラベルと呼ばれます。

ラベル・イン・ネーム問題の確認

TalkBackをオンにする
要素にフォーカスをあてる
次のいずれかが発生します:
- アクセシブルでない: TalkBackによって発表されるテキストが要素の可視テキストと異なる
- アクセシブル: TalkBackによって発表されるテキストが要素の可視テキストと同じまたはそれを含んでいる

問題の修正

「ラベル・イン・ネーム」の問題を解決するには、要素の名前を要素の可視テキストと一致させるか、それを含むように設定します。

可視テキストが説明的であり、かつユニークな場合、名前はそのテキストと正確に一致させるのが推奨されます。

可視テキストだけではATユーザー（例えばスクリーンリーダー）に要素の動作を明示的に伝えられない場合、アクセシブルネームを拡張してより多くのコンテキストを含めることが良い考えです。例えば:

可視ラベル: 「受信トレイ、5」、名前: 「受信トレイ、5件の未読メッセージ」
可視ラベル: 「削除」、名前: 「ユーザープロフィールを削除」

important

ユーザーにより多くのコンテキストを与えるためにアクセシブルネームを拡張することは許容されます。ベストプラクティスとして、名前は常に先頭に配置するべきです。前にラベルの問題。表示されているラベルが「受信トレイ、5」となっている場合、それを展開して「受信トレイ、5件の未読メッセージ」と表示させることができます。要素名での順序を逆にしないようにしてください（「ユーザーの受信トレイに5件の未読メッセージ」）。「名前内のラベル」 および 「前にラベル」のルールに沿うようにしてください。

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>

このルールを無視してもいいでしょうか？

「名前内のラベル」は、ユーザーに深刻な影響を及ぼしますが、まれなケースを除いてこの問題の修正を推奨します。たとえば、「ビザカード xxxx-xxxx-xxxx-1234」と表示されるボタンがある場合、「ビザカード、末尾は1-2-3-4」とTalkBackで読み上げるテキストを設定した方がよいです。ボタンのテキストがTalkBackで読み上げられる名前と一致しないため、これは「名前内のラベル」での失敗になりますが、このような場合ではルールを無視する方が合理的です。詳細はルール無視についてを学んでください。

リソース

Deque University コースページ

注意: Deque Universityのリソースにフルアクセスするにはサブスクリプションが必要です。

その他のリソース

ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.1、W3C勧告
- 成功基準 2.5.3 - 名前内のラベル

WCAG 2.1 解説ドキュメント
- 2.5.3 A - 名前内のラベルを理解する