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

このルールに人工知能をどのように活用しているかを学びましょう！

チェック内容

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

失敗例 ❌

TalkBack focuses each entire card as a single unit

各カード内にネストされた「カートに追加」、ウィッシュリスト、および共有ボタンは到達不能です

TalkBackユーザーはカード内の個々のコントロールをアクティベートできません

成功例 ✅

カード内の各コントロールは individually focusable TalkBackによって

TalkBackはイメージ、商品名、「カートに追加」、ウィッシュリスト、および共有ボタンを別個の要素としてナビゲートします

ユーザーはそれぞれのアクションを独立してアクティベートできます

概要

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

ユーザーへの影響

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

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

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

問題を修正する

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

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 の理解 - キーボード