最初のラベル

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

チェックすること

インタラクティブな要素に視覚的なラベルがある場合、それは支援技術（AT）によって読み上げられる名前の冒頭に来るべきです。追加の情報の前に置いてください。

不具合の例 ❌

ボタン name は「アカウントにサインイン」です

VoiceOver 「アカウントにサインイン、ボタン」とアナウンスされますが、見えるラベル「サインイン」は先頭にありません

Voice Control ユーザーは「サインイン」と話します
名前が「サインイン」ではなく「アカウント」から始まるため、これはボタンをアクティブにしないかもしれません

成功例 ✅

ボタン name は「アカウントにサインイン」です

VoiceOver 「アカウントにサインイン、ボタン」とアナウンスされますが、見えるラベル「サインイン」が先頭にあります

Voice Control ユーザーは「サインイン」と話します
名前が見えるラベルで始まるため、これはボタンをアクティブにします

一目でわかる

• このルールはユーザーへの影響が軽微で、WCAGのベストプラクティスを強化します
• 視覚的テキストを最初に：要素の名前は、常に画面上で視覚的なユーザーが認識するものから始めるべきです
• コンテキストを次に：視覚的テキストの後に、要素の名前に有用な情報を追加します

ユーザーへの影響

支援技術を利用する人々は、要素が何をするのかを素早く理解し、簡単に操作できる必要があります。追加の言葉がアクセシブルネームの前に来ると、ナビゲーションが遅くなり、ATユーザーにとってアプリが効率的でなくなります。

• VoiceOver - 一部のユーザーは画面リーダーと音声入力の両方を使用してモダリティを切り替えます。名前の先頭に見えるテキストを配置する一貫性は、視覚ユーザーが認識できるものとVoiceOverでアナウンスされるものを比較する際の混乱を減らします。
• 音声コントロール - 音声認識エンジンは、ユーザーが対象としている要素を解決するために、アクセシブルネームの冒頭に頼ることがよくあります。アクセシブルネームの最初に見えるラベルを置くことで、一致があいまいでなくなり、ユーザーが要素をアクティブにできない可能性を減少させます。 私たちがおすすめするベストプラクティスは、要素の見えるテキストだけを名前内に置き、付加情報をアクセシブルな値、ヒント、または役割内に置くことです。

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

最初のラベル問題の確認

1. VoiceOverをオンにする
2. 要素にフォーカスする
3. 次のいずれかが発生します:
   • アクセス不可能: VoiceOverが最初に発表するテキストが要素の視覚的なテキストと異なる
   • アクセス可能: VoiceOverが要素の視覚的なテキストを最初に発表する

問題の修正

最初のラベル問題を解決するには、できるだけテキストコンテンツとアクセシブルネームを正確に一致させます。「ここをクリックして...」や「タップして...」といった不必要な言葉を避けて、ユーザーにそのアクションを明示するように要素に名前を付けます。

場合によっては、より多くのコンテキストを含めるために要素のアクセシブルネームを拡張する必要があります。例えば：

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

このような例でラベルが先頭にないという問題を避けるために、要素の見えるテキストがアクセシブルネームの最初にに来るようにしてください。

UIKit

ストーリーボードで：

1. LabelAtFront問題のある要素を選択する
2. インスペクターパネルが表示されていることを確認します。
3. Identity Inspectorを選択します。
4. アクセシビリティの下に、「ラベル」というカテゴリがあります。表示されているテキストと完全に一致するか先頭部分が一致するラベルを入力します。

コード内で：

アクセシビリティラベルが設定されている場所を見つけ、accessibilityLabelの値がその要素のすべての見えるテキストと一致しているか、またはそれで始まっていることを確認します。

button.title = "Send"
button.accessibilityLabel = "Send email"

SwiftUI

要素のすべての表示テキストと一致するか先頭部分が一致するアクセシビリティラベルを設定することを確認します。

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

React Native

accessibilityLabelプロパティは、要素の見えるテキストで始まるべきです。

デフォルトでは、ボタンはそのタイトルをaccessibilityLabelとして使用し、したがってこのルールを満たします。

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

If you choose to customize the accessibilityLabel for a button, ensure it starts with the text of the 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 Open'>
</View>

このルールを無視しても良いですか？

先頭ラベルのルールは、WCAG 2.1 2.5.3 Aの一部としてWCAGによって指摘されたベストプラクティスを強制します。このルールの影響は軽微であり、より重大な問題に優先順位を付けたい場合は無視してもかまいません。モバイルダッシュボードから「ベストプラクティス」に分類されたルールを無効にするまたはiOS向けに書かれたテストでルールを無視するを使用して。

リソース

• ウェブコンテンツアクセシビリティガイドライン（WCAG）2.1、W3C勧告
  • 成功基準 2.5.3 - 名前にラベル
• WCAG 2.1 解説文書
  • SC 2.5.3を理解する：名前にラベル