画面タイトル

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

検査項目

アプリケーション内の各画面には、支援技術によって発表されるためのユニークで説明的なタイトルを提供する必要があります。

失敗例 ❌

Android cart screen where TalkBack announces only 'ShopEase' (the app name) instead of a descriptive screen title

screen title = {アプリ名のみ}

TalkBack 画面を開くときにアプリ名のみが発表される
"ShopEase"

成功例 ✅

Android cart screen where TalkBack announces 'ShopEase, Cart', clearly identifying the current screen

screen title = "ShopEase, カート"

TalkBack 画面を開くときに説明的な画面タイトルが発表される
"ShopEase, カート"

一目でわかる情報

このルールはユーザーに中程度の影響があります
各画面にはユニークで説明的なタイトルが必要で、アプリケーション名だけではいけません
ネイティブAndroid: Activity.setTitle() を使用して画面タイトルを設定
React Native: 各 Stack.Screen に options={{title: 'Screen Title'}} を追加

ユーザーへの影響

画面タイトルは、視覚、認知、運動障害を持つユーザーや短期記憶が限られているユーザーがアプリ内で自分の位置を確認し、画面のタイトルでコンテンツを識別し、オーディオに依存した操作モードで画面間をナビゲートすることを可能にします。

画面にタイトルがない場合、TalkBackは各画面でアプリケーション名のみを発表します。これにより、支援技術ユーザーはコンテンツ全体を探索しなければならず、画面を区別することができません。

画面タイトルの問題を確認

TalkBackをオンにする
アプリケーションを開いて画面をナビゲートします
以下のいずれかが発生します。
- アクセス不能: TalkBackはアプリケーション名のみを発表
- アクセス可能: TalkBackはアプリケーション名ではなく画面の特定のタイトルを発表

問題を修正

画面タイトルの問題を解決するには、各画面にユニークで説明的なタイトルを設定し、支援技術が画面を開いたときにそれを発表できるようにします。これにより、ユーザーはコンテンツ全体を探索することなく自分の位置を確認できます。

ネイティブAndroid

画面のタイトルを Activity 内で設定します。タイトルは画面の目的または内容を説明すべきです。

Activity.this.setTitle("Settings");

React Native

画面タイトルの問題を解決するために、次のアプローチを試してみてください:

React Navigationのスクリーンオプションで画面タイトルを設定します。React Navigationを使用する場合、画面の options propでタイトルを設定すると、ネイティブヘッダーが更新されます。Androidでは、これがActivity/Fragmentのタイトルにマッピングされ、TYPE_WINDOW_STATE_CHANGEDアクセシビリティイベントが発生し、TalkBackが自動的に発表します。これは、ルートパラメーターに基づいて静的または動的に設定できます。
スクリーンがマウントされた後に後にタイトルを設定または更新する必要がある場合は、スクリーン内からnavigation.setOptions()を使用してください。画面コンポーネント内でタイトル値とsetOptionsを呼び出すと、ネイティブヘッダーのタイトルも更新され、TalkBackの発表がトリガーされます。
以前のアプローチでTalkBackの発表がトリガーされない場合はAccessibilityInfo.announceForAccessibility()を使用してください。React NavigationのuseFocusEffectフックとannounceForAccessibilityを組み合わせると、ユーザーがその画面に遷移するたびに発表が行われるように確実にします。
最後の手段として、ネイティブモジュールを介してネイティブActivityタイトルを設定してください。React Navigationのヘッダーが発表をトリガーしない場合、ネイティブのAndroidレイヤーにブリッジしてactivity.setTitle()を直接呼び出すことができ、TYPE_WINDOW_STATE_CHANGEDイベントが発生し、TalkBackが認識します。

カスタムナビゲーションバー

React Nativeで構築されたアプリケーションで真にアクセシブルな体験を得るには、ナビゲーションヘッダーは<Stack.Navigator>をtitleオプションとともに使用する必要があります。カスタムナビゲーションバーは、支援技術がアナウンスし、要素と対話する方法を変更し、ナビゲーション要素であると正確にプログラムされる方法がありません。header属性を設定しても、画面タイトルの基準を満たすことはできないとよく推奨されます。

<Stack.Navigator>
      <Stack.Screen
          name="CartScreen"
          component={CartScreen}
          options={{title: 'Cart'}}
      />
</Stack.Navigator>

このルールを無視できますか？

画面タイトルはユーザーに中程度の影響ほどの影響があり、各画面に説明的なタイトルを設定することをお勧めします。コンテンツへのアクセスを妨げることはありませんが、スクリーンリーダーユーザーのナビゲーションを大幅に低下させます。アプリケーション名自体が画面を明確に識別する単一の画面アプリのような稀な場合を除き、このルールを無視することを検討できます。ルールの無視についてさらに詳しく学びましょう。

よくある質問

このルールに既知の制限はありますか？
はい。Flutterアプリは、Flutterがネイティブの画面タイトルへのマッピングではなく、セマンティックツリー内でAppBar.titleを見出し要素として公開するため、画面タイトル規則に普遍的に不合格ですActivity.setTitle。これにより、開発者にとって難しい不合格が生じます。
スクリーンリーダーは、ナビゲーション時にタイトルを自動的に発表することはなく、ユーザーはAppBarに手動でフォーカスを合わせて聞かなければなりません。これはすべてのFlutterアプリに影響し、説明的なAppBar.titleが存在するかどうかにかかわらず、画面タイトル（WCAG 2.4.2）に失敗します。

リソース

Deque Universityコースページ

注意: Deque Universityのリソースへの完全なアクセスにはサブスクリプションが必要です。

その他のリソース

ウェブコンテンツアクセシビリティガイドライン（WCAG）2.0、W3C勧告
- 2.4.2 ページにタイトル - レベルA
WCAG 2.0 理解ドキュメント
- SC 2.4.2 - ページにタイトル（レベルA）について