最初のラベル

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	「アカウントにサインイン、ボタン」	「アカウントへのサインイン、ボタン」
音声コントロール	ユーザーが「サインイン」を音声で発話これではボタンがアクティブにならないかもしれない、なぜなら名前は「アカウントにサインイン」であり、「サインイン」ではないからです	ユーザーが「サインイン」を音声で発話これはボタンをアクティブにすべきです、なぜなら名前は「アカウントへのサインイン」だからです

一目でわかる

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

ユーザーへの影響

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

VoiceOver - 一部のユーザーはモードを切り替えます — スクリーンリーダーと音声入力の両方を使用します。名前の最初に視覚的テキストを置くことが一貫していれば、視覚的ユーザーが知覚することとVoiceOverによって発表されることを比較する際の混乱を減らします。
音声コントロール - 音声認識エンジンは、ユーザーが対象とする要素を解決するためにアクセシブルネームの冒頭に依存することが多いです。視覚的ラベルをアクセシブルネームの先頭に置くことで、一致が明確になり、ユーザーが要素をアクティブにできない可能性を減少させます。我々が推奨するベストプラクティスは、要素の視覚的テキストのみを名前の中に含め、二次的な情報はアクセシブル値、ヒント、またはロール内に含めることです。

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

最初のラベル問題の確認

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

問題の修正

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

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

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

これらのような場合に最初のラベル問題を避けるために、要素の視覚的テキストを 最初に アクセシブル名に含めます。

UIKit

ストーリーボードで：

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

コード内で：

アクセシビリティラベルが設定されている場所を見つけ、 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'
/>

カスタマイズする場合は、 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 Open'>
</View>

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

Label at Frontルールは、WCAGが WCAG 2.1 2.5.3 Aの一環として指摘したベストプラクティスを強化します。このルールは影響が軽微であり、より深刻な問題に優先順位を付けたい場合は無視できます。モバイルダッシュボードから「ベストプラクティス」に分類されたルールを無効にすることができます。または、 iOS向けに書かれたテストでルールを無視することができます。

リソース

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