画面タイトル

確認ポイント

アプリケーション内のすべての画面には、支援技術によって読み上げられる一意で説明的なタイトルが必要です。

失敗例 ❌

screen title = {アプリ名のみ}

VoiceOver 画面を開いたときにアプリ名のみを読み上げます
「ShopEase」

成功例 ✅

screen title = 「ShopEase, カート」

VoiceOver 画面を開いたときに説明的な画面タイトルを読み上げます
「ShopEase, カート」

概要

• このルールはユーザーに中程度の影響を与えます
• すべての画面には一意で説明的なタイトルが必要です — アプリ名だけでは不十分です
• UIKit: ViewController にnavigationController?.titleまたはtitleプロパティを設定します
• SwiftUI: ビューの body に.navigationTitle()モディファイアを追加します
• React Native: 各Stack.Screenにoptions={{title: 'Screen Title'}}を追加します

ユーザーへの影響

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

画面にタイトルがない場合、VoiceOver はその画面に移動したときにタイトルを読み上げません。これにより、支援技術のユーザーは、コンテンツ全体を探索しない限り、一つの画面を他の画面と区別することが不可能になります。

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

1. VoiceOver をオンにする
2. アプリ内の画面に移動する
3. 次のうちのいずれかが発生します：
   • 非アクセシブル：VoiceOverは画面タイトルを読み上げません
   • アクセシブル：VoiceOverは画面タイトルを読み上げます

問題を解決する

画面タイトルの問題を解決するには、各画面に一意で説明的なタイトルを設定し、支援技術が画面が開いたときにそれを読み上げられるようにします。これにより、ユーザーはすべての画面のコンテンツを探索することなく自分の位置を把握できます。

UIKit

ルールをクリアしていないViewControllerを見つけ、navigationControllerのタイトルプロパティを設定します。

navigationController?.title = "Screen Title Here"

あるいは、ViewControllerに直接titleプロパティを設定することもできます。

title = "Screen Title Here"

SwiftUI

ビューのbodyプロパティ内の最後の要素に.navigationTitleビュー修飾子を追加します。

var body: some View {
    VStack {
        Text("Below is a stepper in SwiftUI")
        StepperView()
    }.navigationTitle("Screen Title")
}

React Native

各Stack.Screenコンポーネントに説明的な名前があることを確認してください。意味のある画面タイトルを定義するためにoptions={{title: 'Screen Title'}}を追加します。

<Stack.Screen
    name="SettingsScreen"
    component={SettingsScreen}
    options={{title: 'Settings'}}
/>

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

React Native で構築されたアプリケーションの本当にアクセシブルな体験を得るには、ナビゲーションヘッダーがtitleオプションを使った<Stack.Navigator>を使用する必要があります。カスタムナビゲーションバーは、通常のビューではなく適切なナビゲーション要素であることをプログラム上で示す方法がありません。これにより、支援技術が要素を発表し、操作する方法が変更されます。header属性を設定するだけでは、画面タイトルの基準を満たさないことに留意してください。

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

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

スクリーンタイトルはユーザーに中程度の影響があります。すべての画面に説明的なタイトルを設定することをお勧めします。ごく稀に – アプリ名自体が画面を明確に識別する単一画面のアプリの場合などに限り、このルールを無視することを検討してもよいでしょう。ルールを無視するについてさらに学んでください。

よくある質問

このルールには既知の制限がありますか？
Yes. Flutter apps universally fail the Screen Title rule because Flutter exposes AppBar.title as a heading element in the semantics tree rather than mapping it to the native screen title, UIViewController.title. This results in unactionable failures for developers.
Screen readers never announce the title automatically on navigation; users must manually focus the AppBar to hear it. This affects all Flutter apps and causes Screen Title (WCAG 2.4.2) failures regardless of whether a descriptive AppBar.title is present.

リソース

Deque University コースページ

• セマンティック構造とナビゲーション (WCAG 2.1) - ビデオチュートリアル
• 成功基準 2.4.2 - ページタイトル
• 要件 - 2.4.2.a ページのタイトル

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

他のリソース

• ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0、W3C 勧告
  • 2.4.2 ページタイトル - レベル A
• WCAG 2.0 解説ドキュメント
  • SC 2.4.2 を理解する - ページタイトル (レベル A)