名前にラベル

このルールに人工知能をどのように活用しているか学びましょう！

私たちが検査すること

インタラクティブな要素に目に見えるラベルがある場合、支援技術（AT）が読み上げる名前は同じであるべきです。

失敗例 ❌

ボタンは name 「Log in」です

VoiceOver 「Log in, button」とアナウンスされますが、表示されているラベル「Sign In」と一致していません

Voice Control - ユーザーが「Sign In」と発言
ボタン名が「Sign In」ではなく「Log in」なので、このボタンはアクティブになりません

成功例 ✅

ボタンは name 「Sign In」です

VoiceOver 「Sign In, button」とアナウンスされ、表示されているラベルと一致しています

Voice Control - ユーザーが「Sign In」と発言
ボタン名が表示ラベルと一致しているため、このボタンはアクティブになります

一目で理解

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

ユーザーへの影響

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

ボタンの表示が「Sign In」となっている場合、VoiceOverも「Sign In」とアナウンスすべきであり、「Log in」などとは異なるべきではありません。

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

名前にラベル問題の確認

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

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

問題の修正

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

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

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

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

UIKit

ストーリーボードで:

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

コードで:

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

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>

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

Label In Nameには重大な影響があり、滅多にないケースを除いてはこの問題を解決するための対策を講じることをお勧めします。例えば、「Visa Card xxxx-xxxx-xxxx-1234」と書かれたボタンがある場合、VoiceOverによって「Visa Card ending in 1-2-3-4」とアナウンスされるように設定することがあります。ボタンのテキストがVoiceOverによってアナウンスされる名前と一致しないため、Label in Nameの失敗となりますが、このような場合、ルールを無視することが理にかなっています。ルールの無視について詳しく学びましょう。

リソース

Deque University コースページ

• 2.5.3 名前内のラベル (A)
• 成功基準 2.5.3 - 名前内のラベル
• 要件 - 2.5.3.a 名前内のラベル

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

他のリソース

• Web Content Accessibility Guidelines (WCAG) 2.1, W3C勧告
  • 成功基準 2.5.3 - 名前内のラベル
• WCAG 2.1 理解文書
  • 理解 2.5.3 A - 名前内のラベル