フォーカス可能なテキスト

私たちがこのルールに人工知能をどのように使用しているかを学ぶ

確認のポイント

テキストを含むすべての要素は、VoiceOverなどの支援技術でフォーカス可能であるべきです。テキスト要素はアクセシビリティ要素としてマークされ、VoiceOverユーザーが画面上のテキストに移動して読むことができるようにします。

失敗例 ❌

VoiceOver は「プレミアムヘッドホン」から直接「カートに追加」にスキップしますが、 price and description text are not marked as accessibility elements

価格と説明が告知されることはありません
スクリーンリーダーユーザーは画面に表示されている重要な製品情報を見逃します

Screen reader users miss critical product information displayed on screen

成功例 ✅

すべてのテキスト要素が marked as accessibility elements VoiceOver によってアクセス可能です

VoiceOver は、見出し、価格、説明、ボタンという順序で4つの要素すべてを順に移動します

スクリーンリーダーユーザーは、論理的な読み順で製品情報を完全に受け取ります

概要

• このルールはユーザーにとって重要な影響を与えます
• テキスト要素はVoiceOverを使って読み上げるために、アクセシビリティ要素としてマークされている必要があります
• UIKit では、テキスト要素をフォーカス可能にするためにisAccessibilityElement = trueを設定します
• SwiftUIとReact Nativeでは、テキスト要素はデフォルトでアクセス可能です——支援技術から非表示にしないでください

ユーザーへの影響

視覚障害者や低視力の人々に最も影響があります。テキスト要素がアクセシビリティ要素としてマークされていない場合、VoiceOverがフォーカスできません。その結果、スクリーンリーダーのユーザーは画面上で表示されている情報を見逃してしまい、混乱を招くか、重要なコンテンツにアクセスできないことがあります。

フォーカス可能なテキストの問題を確認する

1. VoiceOverをオンにする
2. テキスト要素にフォーカスを当てることを試みる
3. 次のいずれかが発生します：
   • アクセス不可：テキスト要素がVoiceOverでフォーカスされません
   • アクセス可能：テキスト要素がVoiceOverでフォーカスされ読み上げられます

問題の修正

フォーカス可能なテキストの問題を解決するためには、テキスト要素をアクセシビリティ要素としてマークし、VoiceOverが到達しアナウンスできるようにします。テキストがフォーカス可能な親要素（ボタンやラベル付きのコントロールなど）の一部である場合、親のアクセシブル名にテキストが含まれるはずです。その場合、テキスト要素自体は個別にフォーカス可能である必要はありません。

UIKit

Storyboardで修正するには：

1. テキスト要素に移動します。
2. インスペクターパネルが表示されていることを確認します。
3. Identity Inspectorを選択します。
4. アクセシビリティの下で、「有効」チェックボックスを選択します。

コードで修正するには、テキスト要素をVoiceOverでフォーカス可能にします：

label.isAccessibilityElement = true

SwiftUI

SwiftUIでは、テキスト要素はデフォルトでアクセス可能です。テキストが意味を持ち、コンテキストを提供していることを確認し、accessibility hiddenビュー修飾子を使用して非表示にしないでください。

React Native

React Native では、テキスト要素はデフォルトでアクセス可能です。テキストが有意義で文脈を提供していることを確認してください。テキスト要素にaccessible={false}プロパティを直接使用したり、親要素にaccessibilityElementsHidden=trueプロパティを使用したりして、アクセシビリティをオフにしないでください。

Flutter

Flutter では、Text要素はデフォルトでアクセシビリティツリーに含まれています。テキストが有意義で文脈を提供していることを確認してください。ExcludeSemanticsまたはSemantics(excludeSemantics: true)でラップして、表示テキストをアクセシビリティツリーから除外しないでください。

このルールを無視しても良いですか？

フォーカス可能なテキストには重大な影響があり、これらの問題を解決することを強くお勧めします。テキストがすでに VoiceOver によってフォーカス可能で、アクセシブルな名前に含まれている親要素内に含まれている場合、たとえばボタンラベルやコントロールの説明テキストのような場合、テキスト要素自体をフォーカス不可能なままにしておくことは許容されるかもしれません。ルールの無視についてさらに詳しく学ぶ。

リソース

Deque University コースページ

• 1.3.2 意味のある順序 (A)

注意: Deque University のリソースにフルアクセスするには、サブスクリプションが必要です。

その他のリソース

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C 勧告
  • 成功基準 1.3.2 - 意味のある順序
• WCAG 2.0 理解文書
  • 1.3.2 A の理解 - 意味のある順序