名前にラベル

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）が読み上げる名前は同じであるべきです。

要素	不合格 ❌	合格 ✅
テキスト付きボタン	名 = 「ログイン」	名 = 「サインイン」
一致	名前は一致しません見えるラベル	名前は一致します見えるラベル
VoiceOver	「ログイン、ボタン」	「サインイン、ボタン」
Voice Access	ユーザーが「サインイン」と話すこれはボタンをアクティブにしません。なぜなら名前は「ログイン」であって、「サインイン」ではないからです	ユーザーが「サインイン」と話すこれはボタンをアクティブにするはずです。なぜなら名前は「サインイン」であるからです

一目で理解

このルールはユーザーに重大な影響を与えます
目に見えるテキストに一致させること：視覚ユーザーが「サインイン」ボタンを見ることができる場合、スクリーンリーダーも「サインイン」を読み上げるようにしてください
追加のコンテキストを加えるのは大丈夫：「保存」が「ドキュメントを保存」になることがあります
目に見える言葉を省略しないこと：スクリーンリーダーは「カタログを検索」ボタンを読み上げるべきで、「検索」だけではいけません

ユーザーへの影響

VoiceOverのような支援技術を利用している人々や低視力の人々は、検出された問題に特に大きな影響を受けます。名前にラベルの問題は、VoiceOverの発表と画面上のコンテンツの間で混乱や矛盾を生じさせる可能性があります。

を参照してください。表上記で。ボタンに目に見えるテキストで「サインイン」と書かれている場合、VoiceOverも「サインイン」を発表すべきで、「ログイン」などの異なるものではありません。

注：プログラミング言語によって、要素の「名前」プロパティは異なる呼び方がされることがあります。例えば、SwiftやReact Nativeではアクセシビリティラベルと呼ばれます。

名前にラベル問題の確認

VoiceOverをオンにする
要素にフォーカスを当てようとする
次のいずれかが発生します：

利用不可: VoiceOverが読み上げるテキストが要素の目に見えるテキストと異なる
- 利用可能: VoiceOverが読み上げるテキストが要素の目に見えるテキストと同じか、含んでいる
利用可能: VoiceOverが要素の目に見えるテキストを読み上げます。

問題の修正

名前にラベル問題を解決するには、要素の見えるテキストと一致または含むように名前を設定します。

見えるテキストが説明的でユニークな場合、名前をテキストと正確に一致させることが推奨されます。

見えるテキストそのものがATユーザー（例：スクリーンリーダー）に要素の動作を明確に伝えない場合、アクセシブルな名前をより多くのコンテキストを含むように拡張することが良い考えです。例えば：

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

important

利用可能な名前を拡張して、ユーザーにより多くのコンテキストを提供することは許容されます。ベストプラクティスとして、最初に名前が来るようにして、次のような先頭ラベルの問題を避けましょう。可視ラベルが「受信トレイ、5」となっている場合、それを「受信トレイ、5件の未読メッセージ」と拡張することができます。要素の名前で順序を逆にすることを避けてください（「ユーザー受信トレイに5件の未読メッセージ」など）、「名前中ラベル」 および 先頭ラベルのルールに合わせるため。

UIKit

ストーリーボードで:

に問題がある要素を選択します LabelInName 問題を特定
インスペクターパネルが表示されていることを確認します
アイデンティティインスペクターを選択します
アクセシビリティの下に「ラベル」と呼ばれるカテゴリがあります。可視テキストと完全に一致するかすべてを含むラベルを入力してください。

コードで:

アクセシビリティラベルが設定された場所を見つけ、アクセシビリティラベルの値が要素の可視テキストのすべてと一致するか含むことを確認します。

button.title = "Search"
button.accessibilityLabel = "Search the store"
// Not an exact match, but the accessibilityLabel includes all the visible text

SwiftUI

可視テキストと一致するか含むアクセシビリティラベルを設定します。

Button(action: {
    openMenu()
}) {
    Text("Sign in")
}.accessibility(label: Text("Sign in"))
// The visible text and accessibility label match exactly

React Native

プロパティは可視テキストと一致するか含むべきです。 accessibilityLabel プロパティは可視テキストと一致するか含むべきです。

デフォルトでは、ボタンはタイトルをそのまま使っており、 accessibilityLabel両対応になっています。

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

タイトルのないインタラクティブな要素には、コントロールとテキストコンポーネントを含むタッチ可能なビューを使用してください。この方法により、テキスト要素がコントロールの可視ラベルになります。その後、含む要素の 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' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>

このルールを無視できますか？

名前中ラベルは、ユーザーに重大な影響を及ぼすため、まれなケースを除いてこの問題に対処するステップをお勧めします。たとえば、「Visa Card xxxx-xxxx-xxxx-1234」と表示されているボタンの場合、VoiceOverで「Visa Card ending in 1-2-3-4」と発表するように設定したいかもしれません。ボタンのテキストがVoiceOverによって発表される名前と一致していないため、これは名前中ラベルの違反となりますが、このようなケースではルールを無視することが意味を持つでしょう。「ルールの無視」について詳細を学ぶルールの無視方法を学びましょう。

リソース

Deque University コースページ

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

他のリソース

Web Content Accessibility Guidelines (WCAG) 2.1, W3C勧告
- 成功基準 2.5.3 - 名前中ラベル

WCAG 2.1 理解文書
- 理解 2.5.3 A - 名前中ラベル