関連テキスト

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

チェックする項目

インタラクティブ要素は、VoiceOverやVoice Controlなどの支援技術で利用可能な近くのラベルからアクセシブルな名前を取得する必要があります。

note

二つの影響？ 視覚的なテキストがフォーカス可能でなく、コントロールの名前やフォーカス可能な親の名前を通じて利用できない場合、それは支援技術に完全に利用できず、このルールは重大な影響を持つと見なされます。

不合格の例 ❌

「メールアドレス」フィールドがフォーカスされていますが、視覚的に利用できるテキストは not announced by VoiceOver

VoiceOverがアナウンスするのは "Text field, blank" - 名前なしで役割と値のみ

ユーザーにはフィールドが何を期待しているか分かりません

合格の例 ✅

表示された「メールアドレス」ラベルがVoiceOverのアナウンスと一致します

VoiceOverがアナウンスするのは "Email address, text field, blank" - 名前、役割、値がすべて含まれています

ユーザーはフィールドが何を期待しているのかを正確に知っています

一目でわかる

このルールの影響は、視覚的ラベルがフォーカス可能かどうかによって重大からクリティカルに及びます
インタラクティブ要素は、それらを説明する視覚的ラベルからアクセシブルな名前を導き出さなければなりません
VoiceOverは要素の役割と値だけをアナウンスしますが、アクセシブルな名前がない場合に限ります

ユーザーへの影響

VoiceOverを使用する人々に最も影響します。インタラクティブ要素は、視覚的に記述ラベルに関連付けられている場合、支援技術でもその関係性をテキストで伝える必要があります。

スライダー、トグル、またはその他のコントロールが近くに視覚的なラベルがあるが、そのラベルに一致するアクセシブルな名前が設定されていない場合、VoiceOverユーザーはその要素の役割と値のみを聞いて、目的を理解できません。Voice Controlユーザーも、発音されたラベルがコントロールのアクセシブルな名前に一致しない場合に影響を受ける可能性があります。

問題を修正

関連するテキストの問題を解決するには、視覚的なラベルのテキストをインタラクティブ要素のアクセシブルな名前として割り当てます。これにより、VoiceOverが正しい名前をアナウンスし、支援技術の体験が視覚ユーザーの知覚と一致します。スタンドアロンのラベル要素をアクセシビリティツリーから隠して、二重にアナウンスされることを防ぎます。

UIKit

インタラクティブ要素にaccessibilityLabelを設定し、近くのラベルのテキストと一致させ、ラベルをアクセシビリティツリーから隠します：

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

インタラクティブ要素に.accessibilityLabel()モディファイアを使用し、視覚的ラベルのテキストをアクセシブルな名前として渡します：

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibilityLabel(sliderLabel)
    }
}

React Native

インタラクティブ要素を伴う視覚的テキストがコントロールのaccessibilityLabelプロップに含まれることを確認します：

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

When visible text and an interactive element are grouped within a focusable containing View, ensure the visible text is included in the accessibilityLabel prop of the containing View:

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel='Light Level'
>
  <Text
    style={{ color: 'black', fontSize: 22 }}
    accessible={false}
  >
    Light Level
  </Text>
  <Slider accessible={false}/>
</View>

Flutter

視覚的ラベルとインタラクティブ要素をMergeSemanticsウィジェットでラップして、支援技術に単一のフォーカス可能なノードとして露出されるようにします。VoiceOverは要素のアクセシブルな名前の一部として視覚的ラベルをアナウンスします：

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

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

関連するテキストはユーザーに重大からクリティカルな影響影響を及ぼし、この問題の修正を強くお勧めします。VoiceOverユーザーはインタラクティブ要素が何をするのかを理解するために完全にアクセシブルな名前に依存しているため、関連付けがないと、これらの要素は支援技術にとって機能的に使用不可能になります。ルールの無視の詳細をご覧ください。

リソース

Deque大学のコースページ

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

その他のリソース

Webコンテンツアクセシビリティガイドライン (WCAG) 2.0、W3C勧告
- 成功基準 4.1.2 - 名前、役割、値
WCAG 2.0 理解文書
- 4.1.2 A を理解する - 名前、役割、値