iOSのVoiceOver。 視覚障害を持つ人々にとってアプリケーションをより便利にする方法

良い一日！ 私の名前はイヴァン・スモリンです。 私はTouch InstinctのiOS開発者です。

今日、VoiceOverテクノロジーがiOSにどんなものがあるかをお話ししたいと思います。 そして、視覚障害のある人にとってフットボールのアプリケーションをより便利にした方法。

VoiceOverとは

これは、モバイルデバイスの画面上のコンテンツを読み取るジェスチャベースの方法です。 このテクノロジーにより、ユーザーは画面上のコンテンツを表示しなくてもモバイルデバイスを制御できます。 彼女は、アプリケーションインターフェイスとユーザーの間の仲介者として機能し、アプリケーションのインターフェイス要素とアクションの詳細を声に出して話します。

この機能は、視覚障害のある人にとって特に便利です。 VoiceOverを使用すると、この種の問題を抱える人々がモバイルデバイスを簡単に使用できます。 この機能を有効にすると、ユーザーはインターフェイス内を移動して、実行する必要のあるアクションとこれらのアクションの結果を理解できます。 [1]

VoiceOverの使用方法

ユーザーが画面上の任意の場所をタップすると、モバイルデバイス（iPhone、iPad、Watch）がこの場所にある要素を大声で話します。

• 要素をダブルタップすると、それが選択されます。
• 画面上のコンテンツをスクロールするには、1本ではなく3本の指を使用する必要があります。
• 3本の指でダブルタップすると、ロック画面の音声コマンドがオンまたはオフになります。
• アクションの実行中に2本の指でダブルタップすると、このアクションが停止されるか、開始されていない場合は開始されます。 たとえば、電話での会話中に、画面上で2本の指でダブルタップすると通話が終了します

VoiceOverサポートをアプリケーションに追加する方法

ほとんどの場合、アプリケーションはVoiceOverで既に正常に機能しています。 Appleのエンジニアに敬意を表する価値はあります。すべての標準コンポーネントはVoiceOverテクノロジーを完全にサポートしています。 ただし、視覚障害のある人にとってインターフェースをより便利にするために、追加のコードを記述する必要がある場合があります。

VoiceOverサポートを自分で実装する必要があるコンポーネントは2種類のみです。

1. グラフィック要素：グラフ、チャート、画像。
2. 視覚障害のある人に元々適合していなかった複雑な要素：たとえば、略語の形式の見出しを持つ表。

最初のタイプは非常にまれなので、2番目のケースの状況を大幅に改善する方法を詳細に検討します。

それ以外の場合は、VoiceOverが提供する追加機能を使用することでのみ使いやすさを向上できます。

設計

アプリケーションにVoiceOverなどの支援技術のサポートが最初に含まれている場合、すべては設計から始まります。 Webコンテンツをアクセス可能にするための特定のガイドと、 モバイルプラットフォームにこの標準を適用する方法に関するガイドがあります 。 これらのガイドは、設計を開始する前に最低限読む必要があります。

レイアウトを描画した後、追加情報を添付する必要があります。 視覚的には見えませんが、視覚障害のある人にとっては重要です。 VoiceOverの場合、そのような情報は、ユーザーが対話できるすべての画面要素のテキストによる説明です。表示またはクリックします。 それらの特性をテキストで記述することが重要です。

例

ログインページで「remember me」（4）を切り替えます。

• 最初に読むテキスト：私を覚えておいてください
• アイテムタイプ：「スイッチ」
• 現在の値：「オンまたはオフ」
• 追加のヒント：「ログインを記憶するにはダブルタップ」

開発

ローカライズされた文字列を取得したら、開発を開始できます。 まず、 アクセシビリティプログラミングガイドをお読みください。 次に、UIAccessibility APIをさらに詳しく調べます。

UIAccessibility

このプロトコルには、ユーザーインターフェイス要素を記述する一連のプロパティが含まれています。 サポートアプリケーションは、この情報を使用して、障害を持つユーザーを支援します。

このプロトコルには、基準別にグループ化できる多くのプロパティが含まれています。

1. アイテムの説明を担当：

   
   
   
   
   
   
   
   • isAccessibilityElement-この要素は、VoiceOverを介した選択と発言にこの要素を使用できるかどうかを決定します。
   • accessibilityLabel-ボタンのテキストなど、要素のコンテンツの簡単な説明。 このテキストが最初に読まれます。

   • accessibilityTraits-要素が持つ特性の組み合わせ（列挙）。 これらの機能は、VoiceOverがアイテムと対話する方法を理解するのに役立ちます。 多くの特性[ https://developer.apple.com/reference/objectivec/nsobject/1615202-accessibilitytraits ]がありますが、それらの一部のみをリストします。

     
     
     
     
     
     
     
     • 最も一般的に使用される：
       
       
       • UIAccessibilityTraitButton-アイテムがVoiceOverによってボタンとして認識されることを示します。
       • UIAccessibilityTraitLink-要素がVoiceOverによってリンクとして認識されることを示します。
       • UIAccessibilityTraitImage-要素がVoiceOverによって画像として認識されることを示します。
       • UIAccessibilityTraitSelected-アイテムが選択状態であることを示します。
     • まれにしか使用されませんが、興味深い：
       
       
       • UIAccessibilityTraitCausesPageTurn-VoiceOverがテキストの読み取りを完了したときに要素がページをめくる必要があることを示します。
       • UIAccessibilityTraitSummaryElement-アイテムが画面に表示される内容の概要を提供することを示します。 たとえば、天気アプリケーションの現在の温度。
       • UIAccessibilityTraitStartsMediaSession-この要素がアクティブ化されたときにメディアセッションを開始することを示します。 たとえば、ユーザーがオーディオを録音しているとき、VoiceOverの音声を消します。
     
     
     
   • accessibilityValue-要素の現在の値。 たとえば、スライダーの値やテキストボックスのテキストを指定できます。 このテキストは、accessibilityLabelで割り当てられたテキストの後に読み込まれます。
   • accessibilityHint-ユーザーがこの要素に関連付けられたアクションを実行するとすぐに起こることの簡単な説明。 この値は、accessibilityValueで値が設定されていない場合、accessibilityValueで割り当てられたテキストの後、またはaccessibilityLabelの後に読み込まれます。
   • accessibilityLanguage-accessibilityLabel、accessibilityValue、accessibilityHintのプロパティからテキストを発音するために使用する言語。
   
   
   
2. 要素の空間特性を担当するプロパティ：
   
   
   • accessibilityActivationPoint-画面上の要素のアクティブ化のポイント。
   • accessibilityFrame-要素が配置されている画面上の場所。
   • accessibilityPath-通常の長方形の代わりに要素を選択する行。
3. レイアウトを担当するプロパティ：
   
   
   • accessibilityElementsHidden-親内で子の「アクセス可能な」要素を非表示にするかどうか。
   • shouldGroupAccessibilityChildren-子の「アクセス可能な」要素をグループ化するかどうか。
   • accessibilityViewIsModal-現在の階層レベルと同じ階層レベルにある他の要素を無視するかどうか。
4. ナビゲーションを担当するプロパティ：
   
   
   • accessibilityNavigationStyle-コンテナの子をナビゲートする方法を説明します。

アプリケーションに障害のあるユーザー向けのアクセシビリティの問題がある場合、ほとんどの場合、プロパティの最初のグループを正しくオーバーライドするだけで済みます。

FotMobの UIAccessibilityの例

次に、上記のUIAccessibilityプロパティを使用して、アプリケーションの非常に具体的な問題を解決する方法の例を示します。

テスト中に、VoiceOverのナビゲーションバーのボタンの名前付けに関連するいくつかの欠点が確認されました。 これらの問題を解決し、アプリケーション全体でボタンを再利用できるようにするために、ボタン作成コードをリファクタリングすることにしました。

まず、すべてのボタンのリストと、これらのボタンがそれ自体に格納できる値を持つ列挙型を作成しました。

enum Button { case calendar(date: Date) case filter(isActive: Bool) case alert(isActive: Bool) case commentary case share case favorite(isSelected: Bool) case addToCalendar case edit case close }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、列挙値からUIBarButton



およびUIButton



既製のインスタンスを作成する拡張機能が作成されました。

最後のボタンの作成は次のようになりました。

 class SomeController { private let navBarButtons: [Button] = [.commentary, .share, .addToCalendar] private var navBarButtonItems: [UIBarButtonItem] { return navBarButtons.flatMap { switch $0 { case .commentary: return $0.barButtonWith(target: self, action: #selector(self.onBtnCommentaryClicked), buttonSize: .rightBarButtonSize) case .share: return $0.barButtonWith(target: self, action: #selector(self.onBtnShareMatchClicked), buttonSize: .rightBarButtonSize) case .addToCalendar: return $0.barButtonWith(target: self, action: #selector(self.onBtnAddMatchToCalendarClicked), buttonSize: .rightBarButtonSize) default: return nil } } } func updateBarButtons() { navItem.setRightBarButtonItems(navBarButtonItems, animated: false) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの変更後、VoiceOverの正しい名前がアプリケーションに表示されただけでなく、追加情報が追加されました。これは視覚障害を持つ人々にとって非常に便利です。 たとえば、カレンダーボタンを選択すると、その名前だけでなく、選択した日付も読み込まれます。

通知ボタンについても同様です。 ボタンが選択された状態（通知がオン）であるかどうかをユーザーに通知します。 また、ユーザーがボタンをタップするとどうなるかをユーザーに通知します。

これらの小さな拡張により、アプリケーションの使用が大幅に簡素化されます。

アプリケーションでのもう1つの問題は、チームの統計情報を含むテーブルでした。 VoiceOverの場合、このようなテーブルは、何らかの形で関連付けられていない略語と数字のセットにすぎません。 VoiceOverをオンにしてアプリケーションを実行しようとすると、視覚障害者はこの意味のない単語のセットを処理できないことがすぐに明らかになります。

ここでは、要素のグループ化とVoiceOver用に特別に準備された行を使用しました。 たとえば、テーブルタイトルは「PL WDL±GD PTS」ではなく、「テーブルヘッダー：プレイ済み、ウォン、ドロー、ロスト、ゴール差、ゴール差値、ポイント」という展開形式で表示されます。

表の各行とタイトルには、フィールドの完全な説明が含まれています。「位置：4、マンチェスター・ユナイテッド、プレイ済み：36、ウォン：21、ドロー：9、ロスト：6、ゴール差：72-38、ゴール差値： 34、ポイント：72»

テスト中

目を閉じてテストできるテスターを経験しているなら、あなたは幸運です。 ただし、多くの場合、機能を検証する責任はプログラマーにあります。

シミュレーター

VoiceOverはシミュレータでサポートされていないという事実にもかかわらず、アプリケーションをテストすることもできます。 Xcodeと共にインストールされるAccessibility Inspectorユーティリティは、これに役立ちます。

このユーティリティでは次のことができます。

1. アプリケーションの可用性に関する一般的な問題を見つけます。
2. 検証モードで各アイテムのアクセシビリティ属性を確認してください。
3. 一般的なアクセシビリティ設定を変更し、再起動せずにアプリケーションにどのように影響するかを確認します。

私自身の経験から、このユーティリティは開発には十分ですが、完全なテストには不十分であると言えます。 彼女はテキストを発音せず、句読点に関連する非常に重要な問題を見逃す可能性があるためです。

テスター

何よりも、VoiceOverをオンにして本当にアプリを試すことができる視覚障害者がいる場合。 幸運なことに、思いやりのあるユーザーがアプリケーション全体を調べ、VoiceOverがうまく機能しないすべての場所について詳細な説明をしました。 これらすべての欠点を修正することができました。 彼は引き続きアプリケーションの可用性を改善するのを手伝ってくれました。

ユーザーケア

VoiceOverは、視覚障がいのあるユーザー向けの真にアクセス可能なアプリケーションを作成できる高度なテクノロジーです。

すべてのAppleオペレーティングシステムに組み込まれており、ほぼそのまま使用できます。 したがって、VoiceOverを使用するか、そのサポート付きのアプリケーションを開発するかに関係なく、VoiceOverはどこでも同じで予測可能な動作をします。

優れたVoiceOver対応アプリは、2015年のワークフローで起こったように、iOSデザイン賞を受賞することさえあります。

ワークフローアプリは、iOSアクセシビリティ機能の優れた使用、特に明確にラベル付けされたアイテム、思慮深いヒント、およびドラッグ/ドロップアナウンスメントを備えたVoiceOverの優れた実装により、アプリを使いやすく迅速にアクセスできるため、2015年のApple Design Awardに選ばれました目の不自由な人や弱視の人に。 [2]

おそらく、すべてのチームがアプリケーションについて同じフィードバックを受け取りたいと考えています。 ユーザーが機能に関係なく、アプリケーションを使いやすくするために可能な限りのことをすべて実行してください。

追加のVoiceOver関連コンテンツ

• Apple VoiceOver-高度な画面読み上げテクノロジー
• iOSアプリでVoiceOverをより使いやすくする方法
• アクセシブルなアプリの開発
• iOSのアクセシビリティ
• iOSアクセシビリティ-VoiceOverユーザーエクスペリエンスのベストプラクティス