SwiftUI Essentials:iOS アプリにおける 9 つの主要なアクセシビリティのハードルを克服する

モバイル アプリは日常生活に不可欠なツールであり、アクセシビリティが最優先事項となっています。しかし、多くのアプリは依然として障害のある人々に包括的なエクスペリエンスを提供していません。

この記事では、モバイル アプリにおける 9 つの一般的なアクセシビリティの課題に焦点を当て、SwiftUI 機能が開発者がこれらの問題に効果的に対処するのにどのように役立つかを示します。

各課題は、SwiftUI ソリューション、サンプル コード、テストのヒントと組み合わされており、開発者がアクセシビリティ対応でユーザーフレンドリーなアプリを作成できるようガイドします。

目次

• モバイル アプリのアクセシビリティの問題と SwiftUI の解決策

  • ラベルと説明がありません

  • 色のコントラストが不十分です

  • スモールタッチターゲット

  • アクセスできないナビゲーション

  • アクションに対するフィードバックの欠如

  • 複雑またはわかりにくいユーザー インターフェイス

  • 支援テクノロジーのサポートが不足している

  • アクセシビリティ機能の実装が不十分

  • 不十分なカスタマイズオプション

  • 参考文献

モバイル アプリのアクセシビリティの問題と SwiftUI の解決策

ラベルと説明が欠落している

• チャレンジ ：多くのアプリには、ボタン、画像、その他のインタラクティブな要素に適切なラベルや説明が欠けており、スクリーン リーダーが視覚障害のあるユーザーにその目的を伝えることが困難になっています。これらのラベルがないと、ユーザーはアプリの機能を理解するのに苦労する可能性があります。

• SwiftUI ソリューション :SwiftUI の .accessibilityLabel(_:) 修飾子を使用すると、開発者はインタラクティブな要素に明確で説明的なラベルを割り当てることができます。これらのラベルは、スクリーン リーダーに必要なコンテキストを提供することで、ナビゲーションと理解を向上させます。

• 例 :

   Label("Shop", systemImage: "cart")
   .accessibilityLabel("Go to Shop")
  

• テスト :iOS デバイスで VoiceOver を有効にし、アプリ内を移動して、各要素に正確なラベルが付いていることを確認します。 VoiceOver では、ユーザーが追加の説明を必要とせずに各要素の目的を理解できるように、ラベルを明確に読み取る必要があります。

色のコントラストが不十分です

• チャレンジ :テキストと背景の色のコントラストが低いと、視覚障害を持つユーザー、特に色覚異常や弱視を持つユーザーがコンテンツを読むことが困難になる可能性があります。

• SwiftUI ソリューション :SwiftUI の動的システム カラーを使用します (.primary) と .secondary ）、デバイスのライト モードまたはダーク モード設定に自動的に適応し、良好な可読性を確保します。

• 例 :

   Text("Shop")
   .foregroundColor(.primary) // Adapts to light or dark mode automatically
  

• カスタム カラーが必要な場合は、カラー コントラスト アナライザーなどのツールを使用して、カラー コントラストに関する WCAG 標準に対してテストします。

• テスト :Xcode の Accessibility Inspector を使用してコントラストを検証し、ライト モードとダーク モードの両方でテキストが読みやすいことを確認します。 WCAG ガイドラインでは、通常のテキストに対して最小コントラスト比 4.5:1 を推奨しています。

小さなタッチ ターゲット

• チャレンジ :小さなボタンやその他のタッチ領域は、運動障害を持つユーザーにとって正確に操作することが難しい場合があります。要素が小さすぎる場合、一部のユーザーが提供できる以上の精度が必要になる場合があります。

• SwiftUI ソリューション :パディングを追加するか、.frame(minWidth:minHeight:) を使用して、最小タッチ サイズを設定します。 快適なタッチ ターゲット サイズを確保するため。

• 例 :

   Button(action: { /* Action */ }) {
   Text("Tap Me")
   .frame(minWidth: 44, minHeight: 44)
   }.padding()
  

• テスト :iOS デバイス上のアプリでタッチ要素を手動で操作します。正確な力を必要とせずに簡単にタップできるようにしてください。アクセシビリティ インスペクターを使用してタッチ ターゲットのサイズを検証し、推奨される最小値 (44x44 ポイント) を満たしていることを確認します。

アクセスできないナビゲーション

• チャレンジ :ナビゲーション機能が制限されたアプリは、スクリーン リーダーやキーボードに依存するユーザーにフラストレーションを引き起こす可能性があります。明確な読み取り順序がないと、インターフェース内を移動するのが困難になります。

• アクセシブルなナビゲーションのための SwiftUI テクニック :

  • グループ要素 .accessibilityElement(children:) を使用 :関連する要素を 1 つのアクセス可能な単位に結合して、ナビゲーションをより合理化します。

     VStack {
     Text("Profile")
     Image("profile_picture")
     }
     .accessibilityElement(children: .combine)
    

  • フォーカスを設定 .accessibilityFocused を使用 :特定の要素へのフォーカスをプログラムで制御します。

     Text("Special Announcement")
     .accessibilityFocused($isFocused)
    

  • カスタム アクション .accessibilityAction を使用 :スライダーやステッパーなどのインタラクティブ コントロールに特定のアクションを追加します。

     Slider(value: $value)
     .accessibilityAction(named: "Increase") { value += 10 }
    

  • 装飾要素を非表示にする .accessibilityHidden を使用 :スクリーン リーダーから重要でないビジュアルを除外します。

     Image("decorative_image")
     .accessibilityHidden(true)
    

• テスト :VoiceOver を有効にし、スワイプ ジェスチャを使用して、意図したフォーカス順序を確認します。また、接続されたキーボードまたはスイッチ コントロールを使用して、スムーズな移行をテストし、操作性を確認します。

アクションに対するフィードバックの欠如

• チャレンジ :フィードバックがないと、視覚障害または聴覚障害のあるユーザーは、アクションが完了したかどうかを確認するのに苦労する可能性があります。触覚、聴覚、視覚的な手がかりなどのフィードバックにより、ユーザビリティが向上します。

• SwiftUI ソリューション :.accessibilityHint を使用します。 発生するアクションに関する追加情報を提供します。

• 例 :

   Button("Submit") {
   // Submit action
   }.accessibilityHint("Submits the form")
  

• テスト :VoiceOver を使用して、ラベルの直後にヒントが読み上げられるようにします。ユーザーが追加の説明なしで各ボタンの機能を理解できることを確認してください。

複雑またはわかりにくいユーザー インターフェース

• チャレンジ :乱雑なインターフェースは、特に認知障害のあるユーザーにとっては圧倒される可能性があり、情報を効果的に移動したり処理したりするのが難しい可能性があります。

• SwiftUI ソリューション :レイアウトを簡素化し、.accessibilitySortPriority を使用します。 読む順序を論理的に整理します。

• 例 :

   VStack {
   Text("Main Content")
   .accessibilitySortPriority(1)
   Button("Secondary Action")
   .accessibilitySortPriority(2)
   }
  

• テスト :VoiceOver を使用して論理的な読み取り順序を確認し、関連する要素のみにアクセスできるようにします。 .accessibilityHidden を使用してください 意味のある情報を追加しない装飾要素を非表示にします。

支援技術のサポートの欠如

• チャレンジ :スクリーン リーダーやその他の支援技術のサポートが不十分な場合、一部のユーザーにとってアプリが使用できなくなる可能性があります。

• SwiftUI ソリューション :.accessibilityElement(children: .combine) で要素をグループ化します。 一貫したナビゲーションのために。これにより、スクリーン リーダー ユーザーの読みやすさと使いやすさが向上します。

• 例 :

   VStack {
   Text("Profile")
   Image("profile_picture")
   }
   .accessibilityElement(children: .combine)
  

• テスト :グループ化された要素が 1 つの単位としてアナウンスされることを VoiceOver で確認し、視覚障害のあるユーザーのナビゲーション フローを改善します。

アクセシビリティ機能の実装が不十分

• チャレンジ :定期的なテストと更新を行わないと、アクセシビリティ機能が時間の経過とともに低下し、ユーザー エクスペリエンスに悪影響を及ぼす可能性があります。

• SwiftUI ソリューション :VoiceOver と Xcode の Accessibility Inspector を使用した定期的なテストは、効果的な機能を維持するのに役立ちます。

• テスト :定期的なテストを実施して、アクセシビリティに必要な回帰や改善を検出します。 UI の更新後に VoiceOver の使いやすさを再チェックして、機能が引き続き有効であることを確認します。

カスタマイズ オプションが不十分

• チャレンジ :フォント サイズや配色などのカスタマイズ オプションが限られているため、特定の視覚的ニーズを持つユーザーの使いやすさが制限されます。

• SwiftUI ソリューション :.dynamicTypeSize() を使用します。 ユーザーの好みの設定に基づいてテキストのスケーリングを許可します。

• 例 :

   Text("Adjustable Text")
   .dynamicTypeSize(.xxxLarge)
  

• テスト :iOS のアクセシビリティ設定でテキスト サイズを調整し、アプリのテキストが切り詰められたり重なったりすることなく正しく拡大縮小され、読みやすさを維持できるようにします。

参考文献

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう