フォーカスポイントのあるテキスト
JustBackでテキスト要素が到達可能であることを確認してください
このルールに対して人工知能をどのように活用しているか学びましょう!
確認事項
テキストを含むすべての要素は、TalkBackなどの支援技術に対してフォーカスポイントのあるものでなければなりません。テキスト要素は支援技術から隠されるべきではなく、ユーザーが画面上のテキストに移動して読むことができるようにする必要があります。
要約
- このルールは、ユーザーにとって重要な影響を与えます
- 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では、テキスト要素はデフォルトでアクセス可能です。テキストが意味を持ち、文脈を提供することを確認してください。 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 理解ドキュメント
