スイッチ名

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

すべてのスイッチ要素には、TalkBackやVoice Accessなどの支援技術に対応するために、アクセス可能な名前が必要です。

影響

スイッチには、オンまたはオフにした時の状況や期待される結果を提供する名前が必要です。特に視覚障害者や視覚に障害のある方にとって、これが重要です。

note

スイッチとその名前のフォーカス順序によって、問題が生じる可能性があります。

確認

  1. TalkBackをオンにする
  2. コントロールにフォーカスしようとします Switch 。
  3. 次のいずれかが発生します。
    • アクセス不可: TalkBackは「オン」または「オフ」としか読み上げません。
    • アクセス可能: TalkBackはスイッチの名前と「オン」または「オフ」を読み上げます。

修正方法

XML

隣接する要素にラベルを提供するか、スイッチとラベルを一緒にラップします。また、 contentDescriptionを操作することも可能ですが、TalkBackの読み上げに「オン」と「オフ」状態を保持するようにしてください。

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

以下の例では、TextとSwitchをRowのような結合されたComposeレイアウトにまとめます。テキストにスイッチロールとトグル可能なモディファイアを追加し、 Modifier.clearAndSetSemantics { } を使用してSwitchのセマンティクスをクリアすると、TalkBackはラベルにフォーカスし、スイッチにはフォーカスしません。

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

React Nativeでスイッチとラベルを組み合わせるには、次のように両方のコンポーネントを TouchableOpacity コンポーネント内にラップします。

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</TouchableOpacity>

これが正しく機能し、支援技術と非支援技術のユーザーの両方に必要なコンテキストを提供することを確認します：

  • ビューが TouchableOpacity プロパティをtrueに設定し、支援技術ユーザーのためにグループが一緒にフォーカスされるようにします。 accessible Ensure the

  • コンポーネントのプロパティがテキストラベルとまったく同じ値に設定されていることを確認します。 accessibilityLabel TouchableOpacity

  • コンポーネントの TouchableOpacity を accessibilityRole に設定して、支援技術ユーザーに正しいコンテキストを提供してください。 switch

  • コンポーネントの Switch プロパティを importantForAccessibility に設定して、コンポーネントが個別にフォーカスされないようにします。 no-hide-descendants

  • を通してアクションを追加し、 onPress コンポーネントにスイッチがアクティブになった際の動作を処理させます。 TouchableOpacity

Is this page helpful?

Help us improve this page

Still need help?