関連テキスト

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

WCAG 2.0 - 4.1.2 A Impact - Critical Impact - Serious

コントロールはVoiceOverやVoice Controlなどの支援技術に利用可能な近くのラベルからアクセス可能な名前を取得する必要があります。

info

2つの影響? 表示されるテキストがフォーカス可能でなく、その名前やフォーカス可能な親の名前を介してコントロールに利用可能でない場合、このルールは重大な影響があると見なされます。

影響

VoiceOverを使用する人々が最も影響を受けます。視覚的に記述要素に結びつけられたコントロールは、支援技術に対してもその関係をテキストで伝えなければなりません。

確認

  1. VoiceOverをオンにする
  2. コントロールにフォーカスを当てる
  3. 次のいずれかが発生します:
    • アクセス不可:コントロールの名前として関連付けられたラベルをアナウンスせず、役割と値のみをアナウンスします(存在すれば)。
    • アクセス可能:関連付けられたラベルをコントロールの名前として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).accessibility(label: Text(sliderLabel))
    }
}

React Native

コントロールを補完する表示テキストをコントロールの accessibilityLabel プロップに含めることを確認してください:

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

フォーカス可能な含むビュー内にグループ化されている場合、表示テキストがビューの accessibilityLabel プロップに含まれていることを確認してください:

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