SwiftUIにおけるアクセシビリティ – WWDC2019

Session概要

アクセシビリティの紹介

アクセシビリティとは何か

• 障がいのある人でもアプリを存分に楽しめるようにする機能
  • 例えば、VoiceOverは視覚に障がいのある人もデバイスの操作が可能になります
    • iOSではジェスチャー、Macではキーボードを利用して操作することができる
• Mac, iPhone, Watch, HomePodなど多くのデバイスで支援機能を組み込んでいる

アクセシビリティの新機能

• Voice Control
  • 音声によるナビゲーション、インタラクション
• フルキーボードアクセス
  • キーボードであらゆる操作が可能。画面移動やコマンド指示など

アクセシビリティUI

• アプリの各Viewがアクセシビリティ要素となり、ラベル（AccessibilityLable）やアクションを持つ
  • アクションはDefaultのアクションとカスタマイズ可能なアクションがある

アクセシビリティUIを実装する上で重要なポイント

1. アクセシビリティ要素はわかりやすくすること
   • 理解しやすいラベルと値情報の記述が必要
2. 操作可能
   • 適切なDefaultアクションとカスタムアクションを意味する
3. ナビゲーション
   • アクセシビリティの配列とグループ化でアクセシビリティ機能の利便性は決まる
     
     

SwiftUI活用時における自動的なアクセシビリティ実装

• SwiftUIはアクセシビリティAPIを備えている
  • 例えば、アクセシビリティ要素の値変更時における通知
• SwiftUIではUIViewと同様にアクセシビリティ要素も自動で生成する
  • 下記の例だと、TextとButtonにアクセシビリティ要素が生成されている
    
    

カスタムUIにおけるアクセシビリティ

// With SwiftUI, you can easily customize button drawing

struct CustomButtonStyle : ButtonStyle {
func body(configuration: Button<Label>, isPressed: Bool)
 -> some View
 {
 configuration.label
 .font(size: 18)
 .foregroundColor(isPressed ? .black : .white)
 .padding(8)
 .background(
 RoundedRectangle(cornerRadius: 5)
 .fill(isPressed ? Color.red : Color.blue)
 )
 }
}

画像への直感的なアクセシビリティの提供

• Imageにlabelを付与することでアクセシビリティラベルを設定可能
• 画像が単に装飾の場合は、decorativeで定義することで読み上げはされない
  
  

Pickerにおけるcontrol labelの実装サンプル

// Control labels for accessibility in SwiftUI
static let voices = [ "Alex", "Fred", "Victoria" ]
@State var selectedVoice = Self.voices.first!

var body: some View {
  Picker(selection: $selectedVoice,
   label: Text("System Voice")) {
     ForEach(Self.voices.identified(by: \.self)) {
      Text(verbatim: $0)
     }
   }
}

SwiftUIにおけるAccessibility APIの説明

• アプリがユーザに求められるもの
  • 理解しやすさ（わかりやすさ）
    • そのための文字列の情報は十分か？
  • インタラクティブ
    • 設定したアクションはシンプルか？
  • ナビゲーション
    • 素早いナビゲーションか？
      
      

理解しやすいアクセシビリティの実装

• スライダーなどのUIコンポーネントにも適切な情報を付与する
  
  

操作しやすいアクセシビリティの実装

• accessibilityActionを設定して、VoiceOver等でも操作しやすいようにする
  
  

ナビゲートしやすいアクセシビリティの実装

• アプリの画面レイアウトに合わせて適切なheaderを設定する
  • 下記の例では、アプリは大きく3つの機能に分かれているので3分割している
• VoiceOverローターを用いて、素早いナビゲーションが可能となる
  
  

アクセシビリティツリーについて

• アクセシビリティツリーは実装したUIコンポーネントの階層を表しており、アクセシビリティの対象は上位階層からたどってアクセスする
  • そのため、アクセシビリティの対象を明確にするにはアクセシビリティツリーを意識した実装をする
• sortPriorityを用いて、UI要素の読み上げにおける優先度をソートする
  • ZStackを用いると画面の表示と読み上げの順序がマッチしない可能性があるため
    
    

アクセシビリティ機能を満たしているか確認する

• 実際にアクセシビリティ機能を使用する
  • VoiceOver
  • フルキーボードアクセス
• Accessibility Inspectorを使用する
  • こちらの記事参照