入れ子要素の名前

このルールにおける人工知能の使用法を学びましょう！

チェックする事項

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

概要

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

ユーザーへの影響

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

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

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

問題を修正する

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

XML

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

Compose

ComposeのText要素に 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 - 意味のある順序 の理解