ネストされた要素名

チェックする内容

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

概要

• このルールはユーザーにとって重要な影響を持ちます
• フォーカス可能なコンテナ内のすべての表示テキストは、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 - 意味のある順序の理解