入れ子要素の名前

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

チェックする事項

フォーカス可能な要素は、そのアクセス可能な名前内のすべての可視テキストが、TalkBackやVoice Accessなどの支援技術に利用可能であるべきです。

失敗例 ❌

カードはフォーカス可能ですが、子テキスト要素は hidden from assistive technology

TalkBack は "Group" のみを読み上げ、可視テキスト（タイトル、著者、日付など）は読み上げられません

スクリーンリーダー利用者は、視覚的に閲覧可能な内容にアクセスできません

成功例 ✅

カード内のすべての可視テキストは available to assistive technology

TalkBack が完全な内容を読み上げます：タイトル、著者、出版日、ページ数、形式、ISBN

スクリーンリーダー利用者は視覚的に閲覧可能な内容と同じ情報を受け取ります

概要

• このルールはユーザーに重大な影響を与えます
• フォーカス可能なコンテナ内のすべての可視テキストは、TalkBackやVoice Accessで利用可能である必要があります
• 視覚的に認識されるテキスト要素にimportantForAccessibility="no"を設定することは避けてください
• Composeでは、画面上に表示されるテキスト要素にinvisibleToUser()を使用しないようにしてください
• React Nativeでは、可視テキストにimportantForAccessibilityをno-hide-descendantsと設定することを避けてください

ユーザーへの影響

TalkBackを使用している人々は、入れ子要素名の問題の影響を最も受けます。コンテナ内に複数の要素がグループ化されている場合、個々のテキスト要素が支援技術から隠されると、TalkBackはコンテナ内のすべてのテキストを読み上げない可能性があります。これは、TalkBackに依存している人々が、視覚的に情報を得るユーザーがアクセスできる重要な画面上の内容に気付かない可能性を意味します。

入れ子要素名の問題を確認する

1. TalkBackをオンにする
2. アクセス要素をフォーカスし、そのテキストを確認する
3. 次の場合のいずれかが発生します：
   • アクセス不可: TalkBackはフォーカスエリア内のすべての可視テキストを読み上げません
   • アクセス可能: TalkBackはフォーカスエリア内のすべてのテキストを読み上げます

問題を修正する

入れ子要素名の問題を解決するには、フォーカス可能なコンテナ内のすべての可視テキストが支援技術に利用可能であることを確認してください。視覚的に認識されるコンテンツを含む場合、TalkBackやVoice Accessからテキスト要素を明示的に隠さないようにしましょう。

XML

テキストビューにimportantForAccessibilityプロパティをnoとして設定することを避けてください。支援技術の有無にかかわらず、すべてのユーザーが画面上のテキストに同じアクセスを持つべきです。

Compose

Composeテキスト要素をinvisibleToUserとしてマークすることを避けてください。支援技術の有無にかかわらず、すべてのユーザーが画面上のテキストに同じアクセスを持つべきです。

以下の例では、invisibleToUserを削除して、支援技術を使用する人々にもビューが利用可能であることを確認してください。

Row {
    Text("Welcome to Deque")
    Text("I am a text element.", modifier = Modifier.semantics {
        // Omit the API below to make your Text elements accessible
        invisibleToUser()
    })
}

React Native

React Nativeで構築されたアプリでこのルールにより見つかった問題は、importantForAccessibilityプロパティの誤用を示しています。プロパティを使用する場合は、no-hide-descendantsに設定しないようにしてください。

Flutter

コンテナが複数のテキストをグループ化する場合、すべての可視テキストがスクリーンリーダーに露出されることを確認してください。MergeSemanticsを使用して子テキストノードを1つのアクセシブルな名前にまとめます。

// Failing — ExcludeSemantics hides visible text from the screen reader
Semantics(
  label: 'Item name: Widget',
  child: Column(
    children: [
      const Text('Item name: Widget'),
      ExcludeSemantics(child: const Text('Price: \$9.99')),
      ExcludeSemantics(child: const Text('In stock')),
    ],
  ),
)

// Passing — MergeSemantics combines all child text into one node
// Screen reader announces "Item name: Widget, Price: $9.99, In stock"
MergeSemantics(
  child: Column(
    children: [
      const Text('Item name: Widget'),
      const Text('Price: \$9.99'),
      const Text('In stock'),
    ],
  ),
)

このルールを無視してよいか？

ネストされた要素名がユーザーに対して重大な影響を持ち、この問題を改善するための措置を講じることを強くお勧めします。まれにコンテナ内のいくつかのテキストが意図的に装飾的または冗長である場合がありますが、これは例外であり、標準ではありません。ルールを無視することについて詳しく学んでください。

リソース

Deque University コースページ

• 成功基準 1.3.2 - 意味のある順序 (A)

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

その他のリソース

• ウェブコンテンツ アクセシビリティ ガイドライン (WCAG) 2.0, W3C 勧告
  • 成功基準 1.3.2 - 意味のある順序
• WCAG 2.0 理解ドキュメント
  • 理解 1.3.2 A - 意味のある順序