スイッチ名

確認する項目

すべてのSwitch要素は、TalkBackやVoice Accessなどの支援技術に対してその目的を説明するアクセシブルな名前を持つべきです。

失敗例 ❌

スイッチにはアクセシブルな名前がありません。

TalkBack が読み取る内容は "Off, Switch."

Voice Access — ユーザーはスイッチをアクティブにするために話すべきラベルが見えません。

成功例 ✅

スイッチは⟦0⟧またはグルーピングを介して見えるテキストでラベル付けされています。 labelFor も読み取る内容は

TalkBack — ユーザーは「ダークモード」と話してスイッチをアクティブにします。 "Dark Mode, Off, Switch."

Voice Access — user speaks "Dark Mode" to activate the switch.

概要

• このルールはユーザーに重大な影響を及ぼします
• すべてのスイッチには、それが制御する内容を説明するアクセシブルな名前が必要です
• 「ダークモード」のような名前は、名前がない場合よりもはるかに有用です
• 名前は可能な限り、labelForやグルーピング技術を使用して、目に見えるラベルから取るべきです
• スイッチに直接コンテンツ説明を設定するのは避けてください。ただし、状態（例：「オン」/「オフ」）が保持されている場合を除きます

ユーザーへの影響

視覚障害者やスイッチアクセスを使用する人々は、スイッチを操作する前にそれが何をするかを理解するためにアクセシブルな名前に依存しています。名前がないと、TalkBackは「オン」または「オフ」としか通知しません。このため、ユーザーは何を制御しているのかコンテキストを得られません。

スイッチ名の問題を確認する

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を行のようなマージされたレイアウトにまとめます。スイッチの役割とトグル可能なモディファイアをTextに適用し、SwitchのセマンティクスをModifier.clearAndSetSemantics { }でクリアします。こうすることで、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にaccessible={true}を設定します
• TouchableOpacityのaccessibilityLabelプロパティが可視テキストラベルと正確に一致していることを確認してください
• 正しい制御タイプを伝えるためにswitchにaccessibilityRoleを設定します
• Switch要素にimportantForAccessibility='no-hide-descendants'を設定して、個別にフォーカスできないようにします
• スイッチがアクティブ化されたときの動作を処理するためにonPressアクションを追加します

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

スイッチ名はユーザーに重大な影響を持ちます。アクセシブルな名前がないスイッチは、スクリーンリーダーのユーザーに理解または使用されません。私たちはこの問題をすべてのケースで修正することを強くお勧めします。ルール無視について詳細を学ぶ。

リソース

Deque University コースページ

• 4.1.2 名前、役割、値 (A)でネイティブモバイルAndroidを参照してください

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

その他のリソース

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