ネストされた要素名

チェックする内容

フォーカス可能な要素は、すべての表示テキストがVoiceOverやVoice Controlなどの支援技術向けに利用可能でなければなりません。

失敗例 ❌

カードはフォーカス可能ですが、子のテキスト要素は not included in the container's accessible name

VoiceOver は "Group" だけを読み上げ、表示されているテキスト（タイトル、著者、日付など）は一切読み上げません

スクリーンリーダーユーザーは視覚ユーザーが読めるコンテンツにアクセスできません

成功例 ✅

カード内のすべての表示されたテキストは included in the container's accessible name

VoiceOver により完全に読み上げられます：タイトル、著者、発行日、ページ数、形式、ISBN

スクリーンリーダーユーザーは視覚ユーザーと同じ情報を得ます

概要

• このルールはユーザーにとって重要な影響を持ちます
• フォーカス可能なコンテナ内のすべての表示テキストは、VoiceOverとVoice Controlで利用可能でなければなりません
• UIKitでは、すべてのネストされたテキストを含めるために、明示的にコンテナにaccessibilityLabelを設定します
• SwiftUIでは、すべての子テキストが読み上げられるように.accessibilityElement(children: .combine)を使用します
• React Nativeでは、表示されたテキスト要素にaccessibilityElementsHiddenをtrueに設定することを避けます

ユーザーへの影響

VoiceOverを使用する人々は、ネストされた要素名の問題によって最も影響を受けます。複数の要素がコンテナ内で一緒にグループ化されている場合、VoiceOverはコンテナ内のすべてのテキストを読み上げないかもしれません。特に、個々のテキスト要素が支援技術から隠されている場合です。これは、VoiceOverに依存する人々が視覚ユーザーが利用できる重要な画面上のコンテンツを知らない可能性があることを意味します。

ネストされた要素名問題を確認する

1. VoiceOverをオンにします
2. テキストを含むアクセシビリティ要素にフォーカスします
3. 次のいずれかが発生します:
   • アクセス不可: VoiceOverはフォーカスエリア内のすべての表示テキストを読みません
   • アクセス可能: VoiceOverはフォーカスエリア内のすべてのテキストを読みます

問題を修正する

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

UIKit

このルールによって見つかった問題は、複数のテキスト要素を含むアクセシビリティ要素にデフォルトのaccessibilityLabelを使用することによって引き起こされます。

修正するには、コンテナのaccessibilityLabelを明示的に設定して、すべての表示されているテキストを含めます：

let paragraphOne = UILabel()
let paragraphTwo = UILabel()
let accessibilityElement = UIView()

paragraphOne.text = "One paragraph of text about something."
paragraphTwo.text = "A second paragraph of text about something."

accessibilityElement.addSubviews([paragraphOne, paragraphTwo])

// Update the accessibility element's accessibilityLabel, so both paragraphs are read by VoiceOver.
view.accessibilityLabel = "\(paragraphOne.text) \(paragraphTwo.text)"

SwiftUI

SwiftUIでこのルールによって見つかった問題は、accessibilityElementモディファイアをaccessibilityElement(children:..)モディファイアと併用する誤用を示しています。

これらのモディファイアは、個別の要素ではなく、グループ化ビューに使用してください。以下に示す順序とAccessibilityChildBehaviorに注意してください。

VStack(alignment: .leading) {
    HStack {
      Text("Title:")
      book.title.map({ title in
        Text(title)
      })
    }
    HStack {
      Text("Author:")
      book.author.map({ author in
        Text(author)
      })
    }

    HStack {
      Text("Genre:")
      book.genre.map({ genre in
        Text(genre)
      })
    }
}
.accessibilityElement()
.accessibilityElement(children: .combine)

React Native

React Nativeでこのルールによって見つかった問題は、accessibleプロパティおよび／またはaccessibilityElementsHiddenプロパティの誤用を示しています。これらのプロパティを明示的に設定している場合は、支援技術から表示されたテキストを隠さないように設定されていることを確認してください。

Flutter

コンテナが複数のテキストをグループ化している場合、すべての表示されたテキストがスクリーンリーダーに公開されていることを確認してください。MergeSemanticsを使用して子テキストノードを単一のアクセシブルネームに結合します。

// 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 - 意味のある順序