画面タイトル

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

WCAG 2.0 - 2.4.2 Moderate Impact - Moderate

アプリケーション内のすべての画面には、支援技術によって読み上げられるタイトルを提供する必要があります。

影響

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

確認

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

修正方法

この問題は、画面にタイトルが設定されていない場合に発生します。

UIKit

コード内で:

ルールに違反しているViewControllerを見つけ、Navigation Controllerのタイトルプロパティを設定します。

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: 'New Screen Title'}} を追加して、より良い画面タイトルを定義します。

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

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

React Nativeで構築されたアプリケーションで見つかったのは、真にアクセシブルな体験を実現するには、ナビゲーションヘッダーを <Stack.Navigator> タイトルのオプションで設定する必要があるということです。カスタムナビゲーションバーは、プログラム的に正しいナビゲーション要素であることを示す方法がなく、通常のビューと区別されません。これは、支援技術が要素を読み上げ、相互作用する方法を変更します。しばしば推奨されるように、ヘッダー属性を設定することは、画面タイトルの基準を満たしません。