SwiftUIにおけるaccessibilityLabelの使い方

SwiftUIを使用してアプリを開発する際、アクセシビリティを向上させるためにaccessibilityLabelを使用することが出来ます。この記事では、accessibilityLabelの基本的な使い方と実際のコード例を交えて解説します。

accessibilityLabelとは？
1. 参考：アクセシビリティとは？
accessibilityLabelの基本的な使い方
動的なaccessibilityLabelの使用
accessibilityLabelの動作確認
1. Accessibility Inspectorの操作方法
まとめ

accessibilityLabelとは？

accessibilityLabelは、視覚障がいのあるユーザーにとって、画面上の要素に対する情報を提供するためのプロパティです。VoiceOverやその他の補助機能がこの情報を利用し、ユーザーに正確な説明を提供します。

参考：アクセシビリティとは？

アクセシビリティは、主に身体的・認知的・感覚的な障がいを持つ人々が情報や技術を利用できるようにするための取り組みやアプリ開発においては設計原則などを指します。

VoiceOver: iOSデバイスでのアクセシビリティを強化する

iOSデバイスは、視覚障がいのあるユーザーにとってもアクセシビリティに優れた環境を提供しています。その中でも特に重要な機能の一つが「VoiceOver」です。この記事では、VoiceOverの基本的な使い方とその恩恵について解説します。Vo...

新しいタブで開く)

accessibilityLabelの基本的な使い方

SwiftUIでaccessibilityLabelを使用するには、対象のビューにこのプロパティを設定します。以下は基本的な使い方の例です。

import SwiftUI

struct AccessibilitySmpView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .accessibilityLabel("Hello, SwiftUI")
    }
}

上記の例では、TextビューとaccessibilityLabelが設定されています。これにより、VoiceOverなどが画面上の要素を正確に認識し、ユーザーに適切な情報を提供します。

動的なaccessibilityLabelの使用

動的な情報を含むビューにaccessibilityLabelを設定することもできます。例えば、変数の値を組み込む場合です。

import SwiftUI

struct AccessibilitySmpView: View {
    @State var tapCount = 0
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .accessibilityLabel("Hello, SwiftUI")
            Text("\(tapCount)")
                .accessibilityLabel("counter \(tapCount)")

            Button("Add Count") {
                tapCount+=1
            }
            .accessibilityLabel("Add Count")
        }
    }
}

このようにすることで、VoiceOverが正確な情報を提供し、ユーザーがアプリをより効果的に操作できるようになります。

シミュレーター画面の左下部分に「Accessibility inspector」が表示されています。accessibilityLabelで設定した内容の動作確認ができます。