アプリのアクセシビリティ監査の実施

アプリのアクセシビリティ監査の実施

アプリのアクセシビリティを、ビルド毎にテストする方法を紹介します。XCTestを使ってアクセシビリティの自動監査を行う方法や、その結果の解釈方法について説明します。UIテストのカバー範囲を改善するのに役立つ、アクセシビリティAPIの強化についても共有します。

関連する章
- 0:40 - Discover accessibility audits
- 2:52 - Add audits to your UI tests
- 9:34 - Filter audit issues
- 11:41 - Considerations when running audits
- 12:59 - Expose elements hidden from accessibility to UI tests
リソース
- XCUIApplication
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC18
- 卓越したアクセシビリティ体験の提供
ダウンロード

♪ ♪
こんにちは Bhavyaです Accessibilityチームのエンジニアです本日のセッションで焦点を当てるのはみなさんのアプリにおけるアクセシビリティ監査の実行方法ですまず UIテストにおける自動アクセシビリティ監査の実行がいかに簡単であるかを見ていきますその次は素晴らしいテスト体験を実現すると同時に素晴らしいアクセシビリティ体験を提供するためにどのように要素を公開するか説明しますではアクセシビリティ監査から始めていきましょうアプリの開発プロセスにおいてテストは必要不可欠ですテストを書くことでコード送信の前にバグを発見し修正できますそのような方法でプロダクトの品質が保たれていますアクセス可能なプロダクトは品質の高いプロダクトです世界中のおよそ7人に1人が何らかの障がいを抱えていて世の中やデバイスとのインタラクションが障がいによって妨げられています VoiceOverのようなツールを使ってアプリとのインタラクションを最善の状態にしています高品質プロダクトを届けるというのは誰もがアクセス可能なアプリを届け誰でも最高レベルのアプリ体験ができるようにすることです私自身の体験からもアクセシビリティは非常に深く複雑なテーマだと認識していますいかにアクセシビリティ監査がこれを簡単にしてくれるか見てみましょう XcodeにはAccessibility Inspector というツールがありますこのツールはアプリ内のアクセシビリティ上の問題を簡単に発見・診断し修正してくれますこのツールをパワフルに利用できる方法の一つがアプリにおける監査の実行です Inspectorはアプリ内の個々のビューにある一般的なアクセシビリティ問題が監査できます
これは私のサンプルアプリでタブが2つあります最初のタブには心に響く引用句が表示されて二つ目には内省のために自分の考えが書き込めます引用句のタブはテキストビューで引用句を表示していますこのテキストビューは背景画像の上に置かれています「New Quote」ボタンもありこのボタンで引用句を更新します Accessibility Inspectorを起動してアプリの監査を実行できます Inspectorはあらゆる種類の問題をチェックします例えば要素の説明が十分であるか適切なコントラストがあるかなどです発見された問題は表に表示されそれぞれに詳細な説明がついていますアクセシビリティ監査はパワフルでしかも自動化できるようになりましたみなさんもUIテストで監査が実行できるのです XCUIApplicationに perform AccessibilityAuditを呼び出せば現在のビューのアクセシビリティ問題を Inspectorと同じように監査しますアサーションは不要で問題が発見された場合はテストは自動でfailになります簡単なデモで具体的に見てみましょう
Xcodeでデモアプリを開きました Swiftで書かれていて標準のUIKitビューを使っています既にいくつか合格したテストを用意していますがこれらは画面上に要素が存在するか検証するものです例えば testQuoteTabViewが検証するのは引用句のタブに画像ビューとテキストビューが存在するかどうかです強調したいのはこれらのテストがアクセシビリティの検証にもなることです XCTestがこれらのビューを発見できるのはアクセシビリティ要素だからですつまり UIテストが要素を発見できるなら Appleの補助技術でも発見できるということですこの方法でもアクセシビリティのテストが少しできるのは良いことですがテストに監査を追加してどんな問題でもすべて確実に見つけられるようにしたいと思います testAccessibilityQuoteTabViewというもう1つのテストを作成しますアプリの起動を設定して Quoteタブをナビゲートしていきます
そして最後にアプリに呼び出すのが performAccessibilityAuditです
監査は複数の問題を報告してくれるので最初のfailureのあとでもテストが残りの問題も報告してくれるよう continueAfterFailureを trueに設定します
できましたテストの菱形をクリックしてテストを実行しましょう
テストはfailだったようです問題はXcode source editor内に埋め込みで報告されています監査で2つの問題が発見されました要素に説明がないこととラベルが人間には読めないことです問題の要素が何なのか見つけ出しましょうこの2つの問題を掘り下げるには Report navigatorに行って Testsをクリックしテストの隣にある開示の三角マークをクリックしますこのビューはテストランと問題の詳細な内容を表示します最初の問題は「要素に説明がない」だったので要素のスクリーンショットをダブルクリックすると画像ビューに説明がないことが分かります 2つ目の問題も同様にできますテキストビューのラベルが人間に読めないことが分かります監査で見つかった問題をどう対処するのか考えましょう個々の問題を探究してそれを修正するのは重要なことでさもなければ補助技術に頼るアプリのユーザーにとってインタラクションやナビゲーションの深刻な問題に発展していまします中には見つかった問題をふるい分けしたうえで無視すべき場合もあるということを知るのは重要ですおそらく問題は誤検出だったり想定していた結果なのでしょうアクセシビリティ監査ではこのような問題を簡単に無視できるようになります問題の無視についての例は後半で触れていきますアクセシビリティのベストプラクティスについての詳細は 2018年のトーク「Deliver an Exceptional Accessibility Experience」をどうぞでは監査で見つかった最初の問題を見ていきましょうテキストビューのアクセシビリティラベルが人間に読めないことです Storyboardのテキストビューを調べてみると設定されたアクセシビリティラベルは QUOTE_TEXTVIEWになっています VoiceOverなどの補助技術に頼るユーザーは最初にこのアクセシビリティラベルを聞き次にアクセシビリティ値を聞きますがこのようになります VoiceOver：QUOTE_TEXTVIEW 「1日ずつ生きて 1日ごとを最高傑作の人生にする」これはあまり良いラベルとは言えませんし本来なら VoiceOverはラベルをスキップして引用句のみを話すべきですアクセシビリティラベルを削除できますがその場合UIテストが崩壊しますなぜならテストはこのラベルでテキストビューを識別するからですできればこの文字列はアクセシビリティ識別子として設定されるべきですアクセシビリティ識別子を使えば UIテストの作成時にアクセシビリティやUI体験に影響せずに要素を一意的に識別できます Storyboardに行ってみましょう
テキストビューを選択しラベルからこの文字列をカットし識別子にペーストします
監査で見つかったもう一つの問題は画像に説明がないことでした典型的には画像は簡潔かつ説明的なラベルによってアクセス可能であるのは重要ですですが私のアプリではこれは装飾的な背景画像です主要なコンテンツの一部ではなく引用句に何の意味も付加しませんできればVoiceOverのような技術はこの画像ビューをスキップすべきですビューコントローラのビューでアクセシビリティ要素を上書きしてスキップさせることにします引用句のテキストビューと「New Quote」ボタンのみに設定すれば VoiceOverは画像ビューには触れないようになります Xcodeに行ってやってみましょうビューコントローラファイルに行って accessibilityElementsを設定します
良いですねそれでは監査に戻ってテストケースを実行し問題が解決したか見てみましょう
できました監査は合格です UIテストの一つが failになっているようですがそれについては後ほど触れますアクセシビリティ監査を追加するとふるい分けすべき問題に遭遇することがあるかもしれません例を挙げると私の監査が見つけた問題に特定のラベルのコントラストが低すぎると出ていました調べてみたところコントラストには何も問題がなく問題は誤検出だったようですではこの問題を無視する方法を見ていきましょう performAccessibilityAudit関数は追加のパラメータを取り込みます最初のパラメータで私が実行したい監査カテゴリのオプションセットが特定できますこれらのカテゴリはダイナミックタイプやコントラストなどで Accessibility Inspectorで既に馴染みのある同様のカテゴリですこの例ではダイナミックタイプとコントラストに関する問題のみ監査の対象に選びました 2番目のパラメータではクロージャの特定ができますこのクロージャは監査で見つかったすべての問題に呼び出されどの問題を無視するかまたは報告するかを選ばせてくれますまずは shouldIgnoreと呼ばれる値を falseに定義しますデフォルトとしては問題は無視されるべきではありません要素のコントラストの問題を「My Label」ラベルで無視したいとしましょう
issue.elementを使って問題に関連した XCUIElementが取得できますこの要素のラベルは「My Label」で問題のタイプはコントラストで対象の問題だと確認できたため shouldIgnoreをtrueに設定します trueに設定したということはこの問題を無視したいということです最後にまた shouldIgnoreについてお話しします上の条件が満たされなければ shouldIgnoreはfalseとなり問題はfailureとして報告されるべきだということになります以上ですこの例を他にも当てはめて無視の基準をカスタム化するのも要素タイプや識別子などほかのプロパティを使って行えます自分のアプリへのアクセシビリティ監査を書き始めるにあたり覚えておくと便利なことは以下の通りです監査ができるのは画面上の要素だけですつまり完全に網羅したいならアプリが表示するであろうすべての異なるビューにアクセシビリティ監査テストを追加するべきです私のサンプルアプリの場合もう1つのテストを追加して 2番目のタブをナビゲートし監査を行うべきです複数テストのために即時に監査を追加する簡単な方法は teardownで監査に上書き実行することです変数はクラスのスコープ内で定義できますそれによりテストはこれらの変数を上書きして監査にオプトインしたりオプトアウトしたりでき問題を無視するためのクロージャをカスタマイズできますテスト計画はプロジェクト内の監査専用テストのグループ分けに便利ですテスト計画ではテストのターゲットやケース個別のメソッドを選択的に有効化することができます最後に監査は補助技術の本当のテストに代わるものではありません結局は VoiceOverや Dynamic Typeのようなテクノロジーをオンにしてアプリをテストするのが高品質な体験を確保する最善法です優れたアクセシビリティと優れたテストはどちらも相互に妥協することなく達成できます自動化の要素では自動化の目的に特化して要素を公開することで要素のアクセシビリティに影響を与えずに済みます今ではUIKitでこのAPIを利用して自動化が必要な要素のみを公開することができますし同時にこれらの要素のアクセシビリティをカスタマイズすることもできます先ほどの例では監査の問題を修正した際に UIテストの1つが壊れました画像ビューはもう無くなっているようですそれがUIテストから消えたのはアクセシビリティからも消えているからですこの画像ビューは装飾的なものであったためアクセシビリティ要素に上書きしてアクセシビリティから排除しましたしかしそれにより UIテストからも排除したことになったわけです自動化要素がどのように画像ビューをUIテストに公開しやすくするかを見ましょう Xcodeでビューコントローラファイルに行きます
そしてビューコントローラビューの automationElementsを imageViewに設定します automationElementsに上書きする時は自動化に公開する必要のあるすべての要素の特定が必要だということを忘れずに
つまり TextViewとButtonもリストに追加しなければなりません自動化要素を上書きすると既に自動化に公開されている既存の要素を上書きしていることになりますテストケースを実行して再び渡しているかどうか見てみましょう
良いですね素晴らしいUIとアクセシビリティのテストを書いてアクセシビリティの問題も修正できましたアクセシビリティ監査はアプリに簡単で自動化されたアクセシビリティテストを追加できる素晴らしい方法です監査により発見された問題を修正することで誰もがみなさんのアプリを確実に楽しめるようになります素晴らしいアクセシビリティと自動化の体験の両方をどちらも損なうことなく作成しましょう自動化要素でアクセシビリティ体験に影響せず UIテストの目的に特化して要素が公開できますみなさんも是非 UIテストに行って performAccessibilityAuditを素早く追加してみてくださいご視聴ありがとうございました

2:52 - Add an accessibility audit to a UI test

func testAccessibility() throws {
    let app = XCUIApplication()
    app.launch()
    
    try app.performAccessibilityAudit()
}

8:40 - Customize elements available to assistive technologies
```
view.accessibilityElements = [quoteTextView, newQuoteButton]
```

9:57 - Filter specific issues from accessibility audits

try app.performAccessibilityAudit(for: [.dynamicType, .contrast]) { issue in
    var shouldIgnore = false
          
    // ignore contrast issue on "My Label"
    if let element = issue.element, 
       element.label == "My Label",
       issue.auditType == .contrast {
           shouldIgnore = true
    }
    return shouldIgnore
}

14:07 - Customize automation elements available to UI tests
```
view.automationElements = [imageView, quoteTextView, newQuoteButton]
```

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

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

関連する章

リソース

関連ビデオ

WWDC18