Switch ControlのAppアクセシビリティ

Switch ControlのAppアクセシビリティ

Switch Controlはモビリティに多大な制限を受ける人にとって非常にパワフルなアクセシビリティテクノロジーとなります。その機能はiOS上でネイティブに提供され、tips、 tricksといくつかのAPIを使いより優れたSwitch Controlを作成することも可能です。他の人がどのようにSwitch Controlを使っているかをご紹介し、Appの中で効果的にこれらを提供する成功事例もお見せします。このセッションを最大限に活用するためには、全般的なアクセシビリティの理念とVoiceOverアクセシビリティAPIの基本的な知識が必要です。より詳細については、"Making Apps More Accessible With Custom Actions"、"Writing Great Accessibility, Labels"、"VoiceOver: App Testing Beyond The Visuals"をご覧ください。

リソース
- Accessibility for UIKit
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC19
ダウンロード

こんにちは WWDCへようこそ “Switch Controlのアプリケーションアクセシビリティ” ソマーです Switch Controlのアクセシビリティについて話します Switch Controlはとても重要な技術であり運動機能に障害を持つユーザーをサポートします APIについて運動の観点から語る機会はあまり多くありません Switch Controlをより快適に使ってもらうためには工夫が必要ですまずはSwitch Controlの概要とユーザー像について次にSwitch Controlのユーザーのサポートに使えるAPIについて最後にすべての運動機能に障害を持つ方にとって使いやすくするための最良事例について話しますまずはSwitch Controlの概要です Switch Controlは運動機能に制限のあるユーザーが外部スイッチやボタンで iOSデバイスを操作するための機能ですスイッチで画面上のカーソルを動かせますスイッチを有効にするとユーザーはタップジェスチャースクロール音量調整などができます対象ユーザーの多くは手足の使用が制限されていますよってスイッチやボタンを車椅子に取り付け頭でのタップ舌でのクリック呼吸により操作するのが一般的ですデバイスを電動車椅子に取り付ければ充電しながら使うこともできます Switch Controlを理解するにはユーザーと会うのが一番です森を移動し口で操作するスイッチを使って写真を撮るイアン･マッケイを紹介します
さまざまな口の動きによりカーソルの移動やタップができますイアンは口を使ってスイッチを操作していましたが操作するまでカーソルが項目を移動し続ける自動スキャンを使っているユーザーも多いです自動スキャンの動作を見てみましょう
スイッチを使って世界時計に私の大好きなアムステルダムを追加します私が何もしなくてもカーソルが勝手に移動していますねタップするとハイライトされたグループを選択できたりメニューを表示できたりします Switch Controlで自動スキャンを使うユーザーは多いですこのようなユーザー向けのアプリを作る際は注意が必要です自動スキャンの場合希望の項目やグループにカーソルが移った時にすぐタップせねばなりませんタップミスをすれば修正には手間がかかりますユーザーにとって他にも重要なのが項目の効率性とグループ化ですグループ化に問題があると項目の選択に時間がかかりますまた震えやその他の不随意運動があるユーザーの場合他の介助技術の使用時よりもタップミスの確率が高くなり得ますデータの一括削除やログアウトの選択肢を誤ってタップしてしまったら大惨事になりかねないのでエラーに対する耐性が重要です Switch Controlのユーザーの特徴や彼らのために配慮すべき点をふまえ彼ら向けのアプリの構築方法を見てみましょうただしコードを見る前に重要な点を１つ挙げます大抵 Switch Control用の特別対応は不要で VoiceOverに100％アクセス可能なアプリを作成すれば問題ありませんただし操作性向上のため特別対応が必要になることもあります例えばVoiceOverに適用されない動作が必要な場合ですまた Switch Control特有の APIを理解すれば Switch Controlのユーザー専用のアプリの設計や構築もできますそれではコードの例を見てみましょう最近子供を持つ友人が増えています子供たちは成長に伴い数や形色を学び始めます私は手作りの贈り物が好きなので子供用のアプリを作りますこれはShape Shuffleという子供の学習を促すゲームです指示どおり数と形と色のカードを選びクリアするたびに難易度が上がりますこの動画で遊び方を説明しますホーム画面で曲がりくねった線上のレベルから３を選びます
すると“２青四角形”というプロンプトが出るのでプロンプトを満たす３枚のカードを探すためカードをタップして裏返します青のカードを見つけました答えに指定するにはダブルタップしますすると上に表示されます次に２または四角形を捜すためカードをタップし続けます
ないですね
２のカードがあったのでダブルタップして四角形のカードを探し続けます四角形のカードか確信が持てない時は後で見直すのを忘れないようにカードを長押ししてピン留めをしてから四角形探しに戻ります
これで複数のカードの中から四角形のカードを決められます
一番下のカードにしますダブルタップして完了です最初のレベルをクリアしました
簡単なゲームですがSwitch Controlのユーザー向けには課題があります第一にホーム画面の項目がグループ化されていない点です Switch Controlのカーソルは上から下左から右へ動くのでこのような曲線上では誤った順序でレベルを移動しかねませんまたレベルがグループ化されていないためレベル30を選ぶ場合カーソルが到達するまで長時間待たねばなりません第二にカードを裏返すにはタップが必要な点です手動スキャンを設定している場合スイッチを何度も操作せねばなりませんレベルが上がるとカード数も増えるため疲れてしまいます最後にダブルタップと長押しを頻繁に実行する必要がある点です Switch Controlで操作は可能でもメニューに移動してジェスチャーを選ぶ分時間がかかってしまいますそれでは第一の課題の解決法を紹介しますレベル選択画面で項目が多すぎて順序どおりにスキャンできない場合の手順は２つですまずはSwitch Controlにレベルをグループ化させるため accessibilityNavigationStyleを combinedと設定します既にコンテナビューで３つそれぞれの階層を構築済みなのでこれは簡単です次に要素の順序を制御して上から下左から右の順序にならないようにするため Accessibility Elementsの配列で正しい順序を返すよう明確に設定しますこれによりカーソルがレベル４５６の順に動きます次の課題はカードをタップして裏返すにはスイッチを何度も操作する必要がある点です自動スキャンではなく手動スキャンを使っているユーザーは疲れてしまいますそこでカーソルが合ったカードが自動で裏返るよう設定を追加しました accessibilityElementDidBecomeFocusedが焦点が合う度に呼び出されカードの表面が出ます accessibilityElementDidLoseFocusが焦点から外れると呼び出されカードの裏面に戻りますでは実際に見てみましょうカードが自動的に裏返るためメニューでの操作が不要です複数のジェスチャーを使うゲームの最後の課題を解決する前に Accessibility Custom Actionsの概念を簡単に紹介します Custom Actionsを用いるとVoiceOverや Switch Controlなどの介助技術でも簡単にアプリを操作をすることができます例えばリマインダーでは削除やフラグなどのスワイプ動作は Custom Actionsとして表示されますこれらの項目をカーソルを移動する必要があるビューにしないことで混乱を大幅に減らせますまた一般的な動作がより速くより簡単にできるようになりますそれではアプリに戻りましょう頻繁にダブルタップと長押しをするので Switch Controlのユーザーは何度もメニューに戻らねばなりませんよってこれらを上位メニューで簡単に選べる動作に変換するため Accessibility Custom Actions APIを使います Switch Controlの上位メニューに表示する動作ごとに UIAccessibilityCustomActionを作成し各動作の項目を配列として AccessibilityCustomActionに割り当てますスイッチを有効にした時に Switch Controlのメニュー上位に表示されるようになりますこのスライドを終了する前にもう１つ説明しますカスタムアクションの画像を設定できるよう iOS 14に新しいAPIを導入しました SF Symbolsを使いピン動作を示すピンと追加動作を示すプラス記号を作成しました画像を使わない場合はデフォルトの動作が表示されますメニュー項目には動作名の頭文字が表示されます Switch Controlで実行中のゲームを見てみましょうカードを自動で裏返すために自動スキャンをやめたのでスイッチを２つ使います右の赤いスイッチでカーソルを次の項目に移し左の黄色のスイッチでグループを選ぶかメニューを表示します手動スキャンなのでカードの自動反転機能が有効化されています “６青三角形”のカードを捜すためメニューの上位にあるピン動作を使い右上のカードをピン留めしますカードをめくり続け青いカードを見つけたら別の動作で追加します APIから離れる前に Switch Control向けの有効な手段とプロパティを紹介しますまず Switch Controlが実行中かを確認するには isSwitchControlRunningを呼び出すか関連した通知を使いますまたUILabelなどのユーザーがタップすると更新されるような静的UIがある場合は静的テキストに見えてもこの項目に移るように Switch Controlに伝えるため accessibilityRespondsToUserInteractionを trueに設定します APIについては以上です Switch Controlのユーザーにも使いやすいアプリに変えたり彼ら向けに完全に構築されたアプリを作るヒントになれば幸いです最後に一般的な最良の事例を数件紹介します運動機能に障害があるユーザーも使いやすくする方法ですこれらはSwitch Controlに限らず全ユーザーに優れた操作性を提供しますまず破壊的な動作や重要度の高い動作はユーザーの確認を得てください項目のタップミスをしやすい Switch Controlのユーザーは特にデータの一括削除やアカウントの削除のリスクがあるので重要です次に特にSwitch Controlの実行中はアプリで制限時間を設けるのは避けましょうペアリングコードや認証コードの入力画面では防犯上制限時間を短く設定しがちですが Switch Controlのユーザーはカーソルが合うのを待たないと入力できず入力エラーの修正にも時間がかかるため制限時間があると不便ですまた画面上の項目をグループ化しやすいようビューの階層構造を工夫しましょう明確でわかりやすい項目のグループ化は全ユーザーのためになります Switch Controlの実行中は項目のグループがカーソル操作の効率と速度により重大な影響を与えます最後に車椅子に取り付けられたデバイスを使うユーザーの場合画面上の入力情報の保護が難しいことを覚えておきましょう口座番号や医療情報などの個人情報を必要以上に画面に表示しないでくださいセッションは以上です Switch Controlのユーザー像や彼ら向けのアプリを構築する際に考慮すべき点について説明しました数行のコードを追加するだけで Switch Controlの操作性が高いゲームにカスタマイズできました最後にSwitch Controlのユーザーに大きな影響を与える事例を紹介しました誰もが使いやすいアプリの構築に参考になれば幸いですそれでは引き続き WWDC 2020をお楽しみください

7:53 - Navigation Style and Element Ordering

containerView.accessibilityNavigationStyle = .combined

containerView.accessibilityElements = [ levelFourView, levelFiveView, levelSixView]

8:47 - Follow Focus API

// Following Focus API 

class CardView : UIView { 
    var orientation: CardOrientation
    
    enum CardOrientation {
        case front
        case back
    }
    
    override func accessibilityElementDidBecomeFocused() {
        self.flip(to: .front)
    } 

		override func accessibilityElementDidLoseFocus() {
        self.flip(to: .back)
    }
    
// The rest of the class…
}

9:56 - Custom Actions API

// Custom Actions API (VoiceOver uses this too)

func configureActions() {

  let pinAction = UIAccessibilityCustomAction(
      name: "Pin Card") { (_) -> Bool in
          self.setPinned(true)
          return true
      }
  pinAction.image = UIImage(systemName: "pin")
       
  let addAction = UIAccessibilityCustomAction(
      name: "Add Card") { (_) -> Bool in
          self.setSelected(true)
          return true
      }
    addAction.image = UIImage(systemName: "add.square")

        
	self.accessibilityCustomActions = [addAction, pinAction]
}

11:51 - Other Useful API

static var isSwitchControlRunning: Bool { get }

var accessibilityRespondsToUserInteraction: Bool { get set }

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC19