フォーカスポイントのあるテキスト
JustBackでテキスト要素が到達可能であることを確認してください
人工知能をこのルールにどのように活用しているのかをご覧ください！
確認事項
テキストを含むすべての要素は、TalkBackなどの支援技術に対してフォーカスポイントのあるものでなければなりません。テキスト要素は支援技術から隠されるべきではなく、ユーザーが画面上のテキストに移動して読むことができるようにする必要があります。
失敗例 ❌
price and description text are hidden from assistive technology
TalkBackは「Premium Headphones」から直接「カートに追加」にスキップし、価格や説明は一切アナウンスされない
スクリーンリーダー利用者は画面に表示される重要な商品情報を見逃すことになる
成功例 ✅
すべてのテキスト要素は available to assistive technology TalkBackで到達可能です
TalkBackは見出し、価格、説明、ボタンの4つの要素を順番にナビゲートします
スクリーンリーダー利用者は、論理的な読み順で完全な商品情報を受け取ることができます
要約
- このルールは、ユーザーにとって重要な影響を与えます
- TalkBackが読み取るために、テキスト要素を支援技術から隠してはなりません
- XMLで、テキスト要素に
importantForAccessibility="no"を設定しないでください - Composeでは、テキスト要素を
invisibleToUser()としてマークしないでください - React Nativeでは、テキスト要素はデフォルトでアクセス可能です。そのため、支援技術から隠さないようにしてください
ユーザーへの影響
視覚障害を持つ人々に最も影響があります。テキスト要素がアクセシビリティから隠されていると、TalkBackはそれにフォーカスすることができません。その結果、スクリーンリーダーの利用者は画面上に表示される情報を完全に見逃し、混乱を引き起こしたり、重要なコンテンツへのアクセスを妨げることがあります。
フォーカスポイントのあるテキスト問題の確認
- TalkBackをオンにする
- テキスト要素にフォーカスを合わせてみる
- 以下のいずれかが発生します：
- アクセス不可：TalkBackはテキスト要素にフォーカスできません
- アクセス可能：テキスト要素にフォーカスされ、TalkBackにより読み取られます
問題の修正
フォーカスポイントのあるテキストの問題を解決するには、テキスト要素が支援技術から明示的に隠されていないことを確認してください。テキストがフォーカスポイントのある親要素の一部（例えばボタンやラベル付きコントロール）である場合、親のアクセシブル名にはテキストが含まれている必要があります。その場合、テキスト要素自体が個別にフォーカスポイントを持つ必要はありません。
XML
テキスト要素にimportantForAccessibilityプロパティを"no"として設定しないでください。この属性が存在する場合は、削除するか"yes"または"auto"に設定してください。
Compose
Composeのテキスト要素をinvisibleToUser()としてマークしないでください。この修飾子を削除して、要素がTalkBackで利用可能になるようにしてください。
Text("Digital equality for all.", modifier = Modifier.semantics {
// Remove invisibleToUser() to make this element accessible to TalkBack
invisibleToUser()
})React Native
React Nativeでは、テキスト要素はデフォルトでアクセシブルです。テキストが意味を持ち、文脈を提供することを確認してください。Text要素に直接accessible={false}プロパティを使用するか、親要素にimportantForAccessibility='no-hide-descendants'プロパティを設定してアクセシビリティを無効にしないでください。
Flutter
Flutterでは、Text要素はデフォルトでアクセシビリティツリーに含まれています。テキストが意味を持ち、文脈を提供することを確認してください。ExcludeSemanticsまたはSemantics(excludeSemantics: true)でラップして可視テキストをアクセシビリティツリーから除外しないでください。
このルールを無視しても良いですか？
フォーカス可能なテキストにはユーザーにとっての重大な影響をがあります。これらの問題を修正することを強くお勧めします。テキストがすでにTalkBackによってフォーカス可能な親要素内に含まれ、かつそのアクセシブルネームに含まれている場合（ボタンラベルやコントロールの説明テキストなど）、テキスト要素自体をフォーカス可能にしないことが許容されるかもしれません。ルールを無視する方法についての詳細について詳しく学んでください。
リソース
Deque Universityコースページ
*注: Deque Universityのリソースにフルアクセスするには、サブスクリプションが必要です。*
その他のリソース
- ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.0、W3C勧告
- WCAG 2.0 理解ドキュメント