ネストされたアクティブコントロール

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

1つのアクセシビリティ要素内に複数のアクティブコントロールを埋め込まない

Not for use with personal data

note

これは実験的なルールであるため、その結果はベータテスト中と見なされます。詳しくは、実験的なルールおよび、それらを改善する方法について学んでください。

チェック内容

アクセシビリティ要素には複数のアクティブコントロールを埋め込んではいけません。TalkBackは1つのアクセシビリティ要素内で複数のコントロールをアクティブ化できないため、ユーザーは各アクティブコントロールに個別にフォーカスし、操作できる必要があります。

概要

このルールはユーザーに重大な影響を与えます
アクセシビリティ要素には、支援技術から隠された状態で個別にクリック可能な複数のインタラクティブコントロールを含めるべきではありません
TalkBackはフォーカスされた要素ごとに1つのアクションしかアクティブ化できません。複数のコントロールがネストされ隠されている場合、ユーザーはそれらに独立してアクセスできません

ユーザーへの影響

TalkBackを使用する人々が最も影響を受けます。1つのアクセシビリティ要素内に複数のアクティブコントロールがネストされている場合、TalkBackはそれらのうちの1つしかアクティブ化できないか、全く別のものをアクティブ化してしまう可能性があります。これにより、ユーザーは意図しないアクションを起こしたり、全く反応がなくなったり、特定のコントロールにアクセスできなくなったりすることがあります。

ネストされたアクティブコントロールの問題を確認する

TalkBackをオンにします
コントロールにフォーカスしようとします
コントロールをアクティブ化しようとします
次のいずれかが発生します：
- アクセス不可: 何も起こらない
- アクセス不可: コントロールがアクティブ化されるが、そのフォーカスボックスに別のコントロールが含まれている
- アクセス不可: 別のコントロールがアクティブ化される
- アクセス可能: コントロールがアクティブ化され、それがフォーカスボックス内の唯一のコントロールである

問題を修正する

ネストされたクリック可能な要素を避けます。各クリック可能なアイテムが支援技術によって個別にフォーカス可能であることを確認します。親要素が全体のアクションを処理する必要がある場合、子コントロールは支援技術から隠されるべきです。こうすることで、ユーザーに対して矛盾したり、到達不能なインタラクションを提示することを防ぎます。

XML

次のプロパティを設定しないでください: importantForAccessibility クリック可能な要素がレイアウト内にネストされている場合。子コントロールが個別にアクセス可能であるべきでない場合、親がアクションを処理し、唯一のフォーカス可能な要素であることを確認してください。 "no" クリック可能な要素がレイアウト内にネストされている場合。子コントロールが個別にアクセス可能であるべきでない場合、親がアクションを処理し、唯一のフォーカス可能な要素であることを確認してください。

Compose

以下のパターンを避けます。ここでは、親がクリック可能で、 invisibleToUser() とともに子が隠されています — TalkBackユーザーは隠された子コントロールにアクセスできません：

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

子に個別のアクションがある場合、親がクリック可能でないことを確認してください。以下の例では、各子が独立してクリック可能であり、親はクリック不可であることを示しています：

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

React Native

子コントロールが個別にフォーカスされるべきでない場合、親要素がアクセス可能でアクションを処理することを確認してください。以下のプロパティを子に設定して、支援技術から隠します： importantForAccessibility='no-hide-descendants' 以下のプロパティを子に設定して、支援技術から隠します：

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>

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

ネストされたアクティブコントロールは、重大な影響をユーザーに与えるため、これらの問題を修正することを強くお勧めします。これは実験的なルールであるため、結果を手動で確認する必要があります。要素内のすべてのアクティブコントロールが個別に到達可能で、TalkBackによってアクティブ化可能であることを確認した場合は、発見を無視してもかまいません。詳しくは、ルールの無視について学んでください。

リソース

Deque University コースページ

2.1.1 キーボード (A)

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

その他のリソース

Webコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.1、W3C勧告
- 成功基準 2.1.1 - キーボード
WCAG 2.1 解説ドキュメント
- 理解 2.1.1 A - キーボード