iOSアクセシビリティ。 Getting Started

Update note: Fayyaz Syed は iOS 13、Xcode 11、Swift 5 用にこのチュートリアルを更新しました。 Vincent Ngo がオリジナルを書きました。

障害のある人を含め、さまざまな職業、年齢、背景の人々がスマートフォンのアプリを使用しています。アクセシビリティを考慮してアプリを設計することで、視覚、運動、学習、または聴覚の障害を持つ人を含め、すべての人がアプリを使用できるようになります。その過程で、次のことを学びます。

Use VoiceOver.
Check your app with the Accessibility Inspector.
Implement accessibility elements with UIKit.
Build a better user experience for people with disabilities.

Tutorial requires Xcode 11.3 and Swift 5.1.This tutorial will continue to improve a visual disabilities.Anywhere? また、Swift 開発の基本をすでに知っていることを前提にしています。 Swift が初めての場合は、まず私たちの本、Swift Apprentice をチェックしてください。

Note: VoiceOver を使用するには、物理デバイスが必要です。このアクセシビリティ機能は、現時点ではシミュレーターではサポートされていません。

Getting Started
Getting to Know the Recipe App
Behind the Scenes of the Recipe App
Why Accessibility? アクセシビリティのためにアプリを設計すると、KIF フレームワークまたは Xcode の UI テストを使用している場合でも、機能テストを簡単に記述できるようになります。政府機関で働いている場合、すべてのソフトウェアまたはテクノロジーがすべてのユーザーにとってアクセス可能でなければならないという 508 コンプライアンスを実装する必要があります。 :]
VoiceOver を有効にする
VoiceOver の使い方
Trying VoiceOver With the Recipe App
Accessibility Attributes
インスペクションポインターを使用する
Using Quicklook to Check Audio in Xcode
Highlighting Problems With the Inspector Audit
追加のインスペクタ設定
Making the Recipe App Accessible
Transforming the Difficulty Labels
警告の確認
動的なテキストの作成
Testing Some Other Options
Transforming the Recipe Detail Screen
チェックボックスの改善
ここから先は？
raywenderlich.com Weekly
このコンテンツの評価を追加する

Getting Started

このチュートリアルでは、レシピとその難易度のリストを含むレシピというすでに完了したアプリで作業します。また、作った料理の品質を評価することもできます。

チュートリアルの上部または下部にある [資料のダウンロード] ボタンを使用して、開始するために必要なすべての資料をダウンロードします。 beginフォルダーにあるRecipe.xcodeprojを開いてください。

デバイス上でアプリを実行する前に、署名を設定する必要があります。

これを行うには、ナビゲーターで Recipe プロジェクトをクリックしてから、同じ名前のターゲットを選択します。 Signing & Capabilities] タブを選択し、一番上で [Debug] を選択したことを確認します。最後に、ドロップダウンからチームを選択します。

Configuring signing in Xcode

Getting to Know the Recipe App

次に、アプリを構築して実行し、その機能に慣れることができます。

レシピアプリの機能

ルートコントローラは、画像、説明、難易度評価を含むレシピのテーブルビューです。レシピをクリックすると、レシピの材料や作り方が書かれた大きな画像が表示されます。

さらに、必要な材料が揃っているかどうか、リスト上の項目を消していくこともできるので、盛り上がります。作ったものが好きか嫌いか、好き/嫌いの絵文字を切り替えることができます。

Behind the Scenes of the Recipe App

begin プロジェクトのコードに数分間慣れ親しんでおいてください。以下はそのハイライトです。

Main.storyboard には、アプリのすべてのストーリーボードシーンが含まれています。すべての UI コンポーネントが標準的な UIKit のコントロールとビューであることに気づくでしょう。
RecipeListViewController.swift は、利用可能なすべてのレシピのリストを表示する、ルートテーブルビューを管理します。
Recipe.swiftはレシピを表すモデルオブジェクトです。レシピの配列を読み込むためのユーティリティメソッドが含まれており、アプリ全体で使用します。
RecipeCell.swift は、ルートコントローラのレシピリストのセルです。
RecipeInstructionViewController.swift は、レシピの詳細ビューのコントローラコードで、料理の画像を大きく表示し、材料や調理方法を表示します。 InstructionViewModelを使用したテーブルビューで、材料と作り方を切り替えるUISegmentedControlが特徴です。
InstructionViewModel.swift は RecipeInstructionsViewController のデータソースとして使用されます。
InstructionCell.swiftは、説明書や成分表で使用するラベルとチェックボックスを含むセルを定義しています。

アプリがどのように動作するか理解できたので、次はそれをよりアクセシブルにする方法を検討します。

Why Accessibility?

アクセシビリティのためにアプリを設計すると、KIF フレームワークまたは Xcode の UI テストを使用している場合でも、機能テストを簡単に記述できるようになります。

政府機関で働いている場合、すべてのソフトウェアまたはテクノロジーがすべてのユーザーにとってアクセス可能でなければならないという 508 コンプライアンスを実装する必要があります。 :]

納得していただけましたか？

VoiceOver を有効にする

iOS には画面読み上げツール VoiceOver が付属しており、ユーザーは画面を見ることなくソフトウェアと対話することが可能です。これは、特に視力に問題のある人のために設計されています。

VoiceOver は、視覚障害のあるユーザーがスクリーンに表示されているものを聞き、操作できるようにします。 VoiceOverはジェスチャーに反応し、画面に表示されているものやユーザーが選択したものを音声でユーザーに伝えます。つまり、VoiceOver は UI とユーザーのタッチ入力をつなぐ役割を果たします。

VoiceOver を使用する最も簡単な方法は、iOS デバイスの設定アプリケーションを開き、「アクセス」 ▸ 「アクセス性のショートカット」を選択して、「VoiceOver」を選択することです。

VoiceOver のショートカット

これにより、物理デバイスのホームボタン (新しい携帯電話ではサイドボタン) をトリプルタップして VoiceOver のオンとオフを切り替えられるショートカットが作成されます。このチュートリアルでは、主に VoiceOver に焦点を当てます。

VoiceOver を有効にしたら、いよいよ試してみましょう。

VoiceOver の使い方

VoiceOver には、アプリを簡単に操作するための便利なジェスチャープリセットがいくつか付属しています。

画面のどこかをシングルタップすると、VoiceOverがその項目のアクセシビリティ属性から識別情報を読み上げてくれます。
左または右にスワイプすると、VoiceOverは次に表示されるアクセシビリティ項目を選択し、それを読み上げます。
下方向にスワイプすると、フォーカスした項目を一文字ずつスペルチェックします。
ダブルタップすると、フォーカスした項目を選択します。

VoiceOver のジェスチャーの完全なリストについては、Apple の「iPhone で VoiceOver のジェスチャーを学ぶ」を参照してください。 VoiceOverの仕組みはご理解いただけたと思いますが、あなたのアプリはどうでしょうか？

Trying VoiceOver With the Recipe App

物理デバイスでビルドして実行し、ホームボタンをトリプルクリックして VoiceOver をオンにします。左右にスワイプしてレシピリストを移動します。 VoiceOverは左上から右下へ要素を読み上げます。ヘッダー名から始まり、各レシピの名前と関連する画像の名前が続きます。

しかし、VoiceOverの体験にはいくつかの問題があります。

Image は、各セルの画像ビューの役に立つ説明ではありません。
VoiceOver は各レシピの難易度について何も言わないので、この機能は視覚障害のある人々にとって役に立たない。

Accessibility Attributes

Accessibility 属性は、アクセシビリティをサポートするために実装しなければならないコアコンポーネントです。これらの属性は、アプリ内の要素に関する情報を VoiceOver に提供し、VoiceOver がその情報をユーザーに読み上げられるようにします。これらの属性が適切に設定されていないと、VoiceOverはアプリについて必要な情報を提供できません。

アクセシビリティ属性には5つのプロパティがあります：
1. Label: コントロールまたはビューを識別するための簡潔な方法。いくつかの例は、戻るボタンとレシピ画像です。
2. 特性。これらは要素の状態、動作、または使用法を記述します。ボタンの特性は、例えば、選択されています。
3. Hint: 要素が完了するアクションを記述します。例えばレシピの詳細を表示します。
4. フレーム。画面内の要素のフレームで、CGRectの形式です。 VoiceOverはCGRectの内容を話します。
5. 値。要素の値です。たとえば、プログレスバーやスライダーでは、現在の値は「100 のうち 5」と表示されます。
ほとんどの UIKit コンポーネントにはこれらの属性があらかじめ設定されているので、ユーザー体験を向上させるには、詳細を指定するだけでよいのです。カスタムコントロールを作成する場合、属性のほとんどを自分で供給する必要があります。

注: Recipe アプリは標準の UIKit ビューとコントロールを使用しており、これらはすでにアクセス可能で、せいぜい属性文字列に変更が必要な程度です。カスタム要素を使用するプロジェクトについては、iOSアクセシビリティチュートリアルを必ずお読みください。

さて、VoiceOver がユーザーに提供する情報をどこで取得するかがわかったところで、アプリのアクセシビリティの弱点を見つけて修正するのに役立つ新しいツール、アクセシビリティインスペクターを理解する時がやってきました。
- アプリを実行して、一般的なアクセシビリティの問題を見つけます。
- 検査モードでは、UI 要素のアクセシビリティ属性を確認できます。
- アプリを離れることなく、アクセシビリティ要素のライブプレビューを提供します。
- macOS, iOS, watchOS および tvOS を含むすべてのプラットフォームをサポートします。
Recipes で Accessibility Inspector を使用する前に、ツールを見ておきましょう。まず、Xcode ▸ Open Developer Tool ▸ Accessibility Inspector に移動して、Xcode メニューから開きます。

インスペクターは次のような外観になります：

ターゲット選択ツールでは、検査したいデバイスが選択できます。 MacBook Pro、iOS デバイス、またはシミュレーターを選択できます。

アクセシビリティ要素のライブプレビューにより、シミュレータで直接テストできます。ライブプレビューは VoiceOver を聞くよりも速いので、この iOS アクセシビリティチュートリアルでは、ほとんどの作業をここで行います。

ビルドしてシミュレータで実行し、アクセシビリティインスペクターのターゲットをシミュレータに変更する。

インスペクションポインターを使用する

注意: この記事の執筆時点では、最新バージョンの Xcode 11.3 には、このツールを確実に使用できないバグがあります。

インスペクター UI でレチクル照準のように見えるインスペクションポインターを選択すると、デバイス上の VoiceOver を有効にした場合と同様のことができます。ポインターを有効にすると、任意の UI 要素にカーソルを置いて、その属性を確認できます。

Inspection Detail ペインには、アプリのアクセシビリティ属性を確認したり操作したりするのに必要なものがすべてあります:
- Basic: 現在ハイライトされている要素の属性プロパティを表示します。ボタンをタップしたり、ビューをスクロールするなどのアクションを実行することができます。このペインの [実行] ボタンを押すと、ターゲットに対してアクションが実行されます。現在のアイテムのクラス、アドレス、およびコントローラが表示されます。この記事を書いている時点では、一貫して動作していません。
- 階層。要素のビュー階層を表示し、複雑なビューを理解しやすくします。
Using Quicklook to Check Audio in Xcode

Xcode 11 には Inspection Detail ペインの上部の Quicklook セクション内に新しい機能があり、デバイス上で聞こえる音声を Xcode でシミュレートすることができます。これは、実際のデバイスを必要とせずに、アプリを使用するときにユーザーが聞く音をチェックできることを意味します。

アプリがシミュレーターで実行されている間に再生ボタンを押し、アクセシビリティインスペクターがアプリを循環させ、各要素を大声で説明するのを聞くことができます。 9699>

この機能を使用すると、特に開発中に、デバイス上でアプリを実行して VoiceOver を使用するより速くなります。いつものように、アプリとそのすべてのアクセシビリティ機能を実際のデバイスでテストします。

Highlighting Problems With the Inspector Audit

Inspector Audit の最も便利な機能の 1 つは、監査機能で、アプリ内のアクセシビリティ問題についての警告を表示することです。この機能を試すには、シミュレーターがまだ実行中であることと、レシピ一覧に自分がいることを確認します。インスペクタで、「Audit」アイコンをクリックし、「Run audit」をクリックします。

警告をクリックすると、Xcode はシミュレーターと Inspector Audit 画面の下部にある関連する要素をハイライト表示します。

この場合、セルに関連するイメージビューには説明がありません。これは、VoiceOverが読者にそれらを説明することができないことを意味します。

警告の1つについて、丸に疑問符のような［修正提案］アイコンをクリックすると、インスペクターが問題の修正方法について提案します。これらの提案には後で対処します。

Eye アイコンをクリックすると、アプリのスナップショットが撮影されます。これは、正確なバグ報告を作成する必要がある品質保証に携わる人にとって便利です。

インスペクターには、さらに便利なアクセシビリティ設定がいくつか用意されています。次に、これらの機能を簡単に説明します。

追加のインスペクタ設定

このチュートリアルの範囲外ですが、アクセシビリティインスペクタでは、次のアクセシビリティ設定もテストできることを知っておくとよいでしょう。
1. 色の反転
2. コントラストの増加
3. 透明度の減少
4. 動きの減少
5. フォントサイズの変更
これらの機能を有効にするのに、もう設定アプリケーションを使用する必要はなくなりました。アクセシビリティインスペクターでは、現在これら 5 つのオプションしか提供されていませんが、Apple は将来的にさらに多くのオプションを追加することを計画しています。ただし、VoiceOver を手動でテストして、実際のユーザーエクスペリエンスを試す必要があることを忘れないでください。この最後のステップは、インスペクターが見逃している問題を発見するのに役立ちます。

ここまでで、アクセシビリティインスペクターの機能を一通り見てきましたが、いよいよアプリに取り掛かる時です。

Making the Recipe App Accessible

VoiceOver を使用してデバイス上でアプリをテストしたとき、画像の説明があまり有用でないことに気づきました。監査ツールはその理由を示してくれました。画像ビューにアクセシビリティラベルがなかったからです。

Xcode で RecipeCell.swift を開き、次のコードをファイルの最後に追加します。
```
// MARK: Accessibilityextension RecipeCell { func applyAccessibility(_ recipe: Recipe) { // 1 foodImageView.accessibilityTraits = .image // 2 foodImageView.accessibilityLabel = recipe.photoDescription }}
```
このコードは、セルの Recipe オブジェクトに基づき、不足しているアクセシビリティプロパティを埋めます。以下はその仕組みです：
1. accessibilityTraits はアクセシビリティ要素を特徴づける特質のマスクを取ります。この場合、.imageは画像であることを示します。
2. VoiceOverでは、accessibilityLabelを使って要素を記述します。ここではrecipe.photoDescriptionとし、画像の内容を表す文字列としています。
さて、これを今後のレシピにも適用したいと思います。 RecipeCell クラスの configureCell(_:) を探します。メソッドの最後に次の行を追加します:
```
applyAccessibility(recipe)
```
セルを作成するたびに、このコードはレシピオブジェクトのプロパティを使用して画像にアクセシビリティ属性を適用します。

ビルドしてデバイスで実行し、ホームボタンを 3 回タップして VoiceOver を有効にします。レシピリストをテストして、画像の説明がより意味を持つかどうかを確認します。

かなり良くなりました! 単に「画像」と聞いて具体的な詳細を提供しない代わりに、画像の完全な説明を聞くことができるようになりました。

シミュレーターでアプリを実行したまま、アクセシビリティインスペクターを再度実行し、レシピリストにナビゲートします。インスペクタのすべての警告をクリアし、[監査] をタップすることを確認します。

WOOt – no more description warnings! 画像に説明を追加することに成功した後、このビューのコアは完全にアクセス可能になりました。

さて、次はレシピの難易度をアクセス可能にします。

Transforming the Difficulty Labels

The Accessibility Inspector では、アクセスできないかもしれないテキストの警告が表示され、視覚障害のあるユーザーにとって難易度ラベルが見えないことが示されます。これらを修正するには、ラベルをアクセス可能にし、そのプロパティを意味のある説明で更新する必要があります。

次のステップとして、RecipeCell.swift に移動し、applyAccessibility(_:):
```
// 1difficultyLabel.isAccessibilityElement = true// 2difficultyLabel.accessibilityTraits = .none// 3difficultyLabel.accessibilityLabel = "Difficulty Level"// 4switch recipe.difficulty {case .unknown: difficultyLabel.accessibilityValue = "Unknown"case .rating(let value): difficultyLabel.accessibilityValue = "\(value)"}
```
このコードが行うことについてもう少し詳しく説明します：
1. isAccessibilityElementは true 時にアイテムをアクセシビリティ機能で見えるようにするためのフラグです。ほとんどの UIKit クラスでは、デフォルトは true ですが、UILabel では false です。
2. accessibilityTraits はアクセシビリティ要素を特徴付けるのに役立ちます。
3. 次に、VoiceOverにこのラベルの意図を簡潔に識別させる。 Difficulty Level によって、ユーザーは何を扱っているのかを正確に知ることができます。
4. VoiceOverはaccessibilityValueをラベルの説明の一部として読み取ります。
物理デバイス上でアプリを構築して実行し、ホームボタンをトリプルタップして VoiceOver を有効にし、レシピリストをスワイプします。

異なるアクセシビリティ要素をスクロールすると、難易度を含む各セルの全説明を VoiceOver が読み上げられます。

警告の確認

ここで難易度について行ったように、新しいアクセシビリティ要素を公開するたびに、監査を再度実行する必要があります。デバイスまたはシミュレーターでアプリを実行し、それに応じてインスペクターターゲットを設定します。ここで、監査のトグルボタンを選択し、［監査を実行］をタップします。

The audit showing fewer warnings

少ない警告が表示されました！警告が表示されました。残りの警告は、ラベルが動的テキストをサポートしていないことに関するものです。次はそれを修正します。

動的なテキストの作成

監査人は、アプリを誰もが使用できるようにするための重要なステップ、動的なテキストが欠落していることを警告しています。これは、アクセシビリティのための重要な機能であり、部分的に視覚障害のあるユーザーが読みやすくするためにフォントサイズを大きくすることを可能にします。このアプリで現在使用されている非ダイナミックフォントでは、このようなことはできません。

[修正提案] アイコンをクリックして、監査人の推奨事項を確認します:

UIfont preferred font を使用して adjustsFontForContentSizeCategory を true に設定するよう指示が表示されます。

RecipeCell.swift 内で、一番下の applyAccessibility(_:) 内に次のコードを追加します。
```
dishNameLabel.font = .preferredFont(forTextStyle: .body)dishNameLabel.adjustsFontForContentSizeCategory = truedifficultyLabel.font = .preferredFont(forTextStyle: .body)difficultyLabel.adjustsFontForContentSizeCategory = true
```
これは、preferredFont を body スタイルに設定し、iOS がドキュメント本文と同様にテキストにスタイルを設定することを意味します。サイズとフォントの仕様は、アクセシビリティの設定に依存します。 adjustsFontForContentSizeCategory は、ユーザーがテキストコンテンツのサイズを変更したときに、フォントが自動的に更新されるようにすることを示します。

Accessibility Inspector のおかげで、アプリがフォントのサイズ変更をどのように処理するかをテストするのは簡単です。

Accessibility Inspector と共にレシピアプリをビルドして実行します。

Testing Some Other Options

Navigate to the Settings toggle in the inspector and experiment with some tools:
1. Invert Colors to preview what your interface looks like with this accessibility feature.All Rights Reserved. これは、光に敏感な人、視力の弱い人、場合によっては色覚異常の人に便利です。
2. また、大きなフォントサイズを好むユーザーのために、ダイナミックなフォントサイズの変更をリアルタイムでテストできます。
アプリをテストすると、おそらく次のようになります。

The inspector provides testing accessibility cases easy. ここから、レシピリストが視覚障害のあるユーザーにとってうまく機能することがわかります。

Transforming the Recipe Detail Screen

これで、レシピオプションのリストを処理したので、ユーザーがレシピのいずれかをクリックするとどうなるかを確認したいのです。デバイスでアプリを実行し、VoiceOver を有効にして、詳細表示を見てください。次のような感じです:

There are some issues with the VoiceOver interaction in the detail view:
1. Left Arrow button is not a great description for the navigation.これは、ナビゲーションのための優れた説明ではありません。
2. 絵文字の顔の状態は、「ハート形の目」と「困惑した顔」です。これらの説明は、どんなユーザーも困惑させるでしょう！
3. ユーザーがチェックボックスを選択すると、icon empty と表示され、あまり説明がありません。
これらの各ケースでは、コントロールの状態がどう見えるかというよりも、何を意味するかを説明することが重要です。左矢印ボタンより戻るボタンの方がわかりやすい。いいね！」と「嫌い」は絵文字を簡潔に説明しています。

ナビゲーションを変更するには、RecipeInstructionsViewController.swiftを開き、assert(recipe != nil)の後のviewDidLoadに以下を追加します：
```
backButton.accessibilityLabel = "back"backButton.accessibilityTraits = .button
```
左矢印ボタンではなく、VoiceOverでは戻るボタンと言うようになりました

さて、次は絵文字の話。同じファイルで、isLikedFood(_:)の内容を次のように置き換えます：
```
if liked { likeButton.setTitle("😍", for: .normal) likeButton.accessibilityLabel = "Like" likeButton.accessibilityTraits = .button didLikeFood = true} else { likeButton.setTitle("😖", for: .normal) likeButton.accessibilityLabel = "Dislike" likeButton.accessibilityTraits = .button didLikeFood = false}
```
「いいね」と「嫌い」の両方のモードについて、accessibilityLabelを追加して、ボタンが何をするのかを明確にしました。また、ボタンとして識別するためにaccessibilityTraitsを設定し、ユーザーがどのように操作できるかがわかるようにしています。

Build and run on a device and enable VoiceOver.を作成し、デバイス上で実行します。 VoiceOver を使用して詳細レシピ画面に移動し、ビューの上部にあるボタンへの変更をテストします。

今、これらの各機能は、ユーザーがその意図を理解できるように、明確で短い説明を持っています。大いに結構！

チェックボックスの改善

最後の問題は、チェックリストについてです。各チェックボックスについて、VoiceOverでは現在、アイコンが空であることを示し、その後にレシピの指示を示しています。これでは全く意味がありません!

これを変更するには、InstructionCell.swift を開き、shouldStrikeThroughText(_:) を探します。
```
// 1checkmarkButton.isAccessibilityElement = falseif strikeThrough { // 2 descriptionLabel.accessibilityLabel = "Completed: \(text)" attributeString.addAttribute( NSAttributedString.Key.strikethroughStyle, value: 2, range: NSRange(text.startIndex..., in: text))} else { // 3 descriptionLabel.accessibilityLabel = "Uncompleted: \(text)"}
```
このコードが行うことは次のとおりです。
1. チェックマークボタンのアクセシビリティをオフにし、VoiceOver がそれを 2 つの異なるアクセシビリティ要素ではなく 1 つのユニットとして読み取ります。
2. 完了したコードと同様に、ユーザーがアイテムを未完了としてマークした場合、ラベルの説明の前に "Uncompleted" を追加します。
アプリを再度ビルドして実行し、どのように聞こえるかを確認してみてください。ユーザーの耳には心地よく響くことでしょう。 :]

ここから先は？

このチュートリアルの上部または下部にある [Download Materials] ボタンを使用して、プロジェクトの完成版をダウンロードすることができます。アクセシブルな要素をすべてスクロールし、ユーザーエクスペリエンスを自分でテストすることにより、手動監査を実行しました。その後、アクセシビリティインスペクターを使用して、監査を行い、アクセシビリティ要素の値を確認し、色を反転させたりフォントサイズを変更したりする動的な変更をライブで実行しました。誰かの人生にプラスの影響を与えることを知ることは、やりがいにつながります。

アクセシビリティ機能には多くの可能性があります。このチュートリアルは、あなたが始めるための表面を削ったにすぎません。以下は、チェックアウトすべきリソースです。
- Categories of Accessibility
- Accessibility Development Resources
- Applying Accessibility to Custom Views
- Deliver an Exceptional Accessibility Experience
- Accessibility Inspector
ご意見、ご質問がありましたら、以下の議論に参加してください!

raywenderlich.com Weekly

The raywenderlich.com ニュースレターは、モバイル開発者として知っておくべきすべてのことについて、最新情報を入手する最も簡単な方法です。

当社のチュートリアルやコースのダイジェストを毎週お届けし、ボーナスとして無料の詳細なメールコースをお届けします！

このニュースレターの内容は、以下のとおりです。

平均評価 4.8/5

このコンテンツの評価を追加する

評価を追加するにはサインインしてください

10 評価