GTXiLibで小さく始める Accessibility Testing

satoshin21氏：よろしくお願いします。「GTXiLibで小さく始める Accessibility Testing」というタイトルで発表させていただきます。

今日はAccessibilityをテーマに話します。まずAccessibilityについてなのですが、これは高齢者や障がい者も含めてあらゆる人がどのような環境においても柔軟に利用できるのかどうかの指標を表しています。

聞いたことある方いらっしゃると思うんですが、iOSでもアプリ上でVoice OverやVoice Controlなどをサポートすることができます。実際の対応方法についてはさまざまな資料がありますので、今回は割愛させていただきます。

ぶっちゃけた話なんですけど、「Accessibility対応の優先順位を高めている人っているのかな？」と思うのですがいかがでしょうか？、重要性は認識しつつも、デザイナーサイドとも認識を合わせつつ対応が必要な部分もあったりして優先順位的には下がっちゃうのかなと思います。

AppleのほうからAccessibility Inspectorという名前で簡単にAccessibility Checkができるようなツールも配布されているんですが、「これをデザイナーの方に立ち上げてもらうのか？」「リリースの都度実行してチェックするのか？」「実際に運用できるのかな？」という不安もあり、我々はエンジニアなのでできるのであれば自動化したいところです。

そこで今回紹介させていただきたいのがGoogleのGTXiLibです。

Googleの提供するオープンソースのAccessibility Test自動化ツールです。

既存のテストがXCTestでUIテストが作られている場合は簡単に統合ができるんですが、ちょっと残念なところはXCUITestが非対応というところです。代わりにGoogleの提供するEarlGreyというテストフレームワークを使えば、XCTestベースのフレームワークなので対応可能です。

これがすごく簡単に実装できまして、XCTestCaseのセットアップでGTXiLibのinstallメソッドを渡すだけで、テストケースでなにかしらのUIテストが行われれば、それをフックしてAccessibilityテストが実行されます。

GTXChecksCollectionがありまして、もうすでにGoogleからいくつかAccessibility Testが提供されているのでそれを利用することもできます。さらに、自分でこういうかたちのAccessibility Testを実行したい、というものがあるときは自前でテストケースを書くこともできます。

これがサンプルで、ラベルの高さが44以上になることをテストするためのテストケースです。GTXiLib.checkというところで作っていて、elementに例えばUIViewなどが渡されるので、そこからチェックをすれば自前で作ることが可能です。

独自定義したUI Component

ざっくりとした仕組みについて解説すると、GTXiLibCore.mを参照してもらえばわかると思うんですが、testCaseの開始と終了をフックしてUIApplication.sharedからkeyWindowを取得、それにぶらさがっているViewに対してすべてのGTXCheckingを実行しています。

実装しててよく「あれ、これ完全にAccessibility悪いのにテスト通っちゃうな？」というところがあったんですが、そういう場合はなにかしら、例えばisAccessibilityElementがtrueになってなかったりするので、テストを通っちゃうときはソースコードを見たほうが早いかなと思います。

UITestをちゃんと書けていない方も多いかと思います。僕もUITestって継続的に書くのは難しいと感じる事があります。そういう場合は小さいところから、UI ComponentだけでもAccessibility Testを始めてみるのはいかがでしょうか。

GTXiLibにはGTXToolKitが組み込まれていまして、これが実際にAccessibility Testを実行するクラスになっています。GXToolKitは基本的にほかのテストフレームワークに組み込むときに利用されるようなものなんですが、直接UIViewなどのelementを渡して、そのAccessibilityのチェックをすることも可能です。

例えば、UIButtonを継承したCustomizedButtonを作って、Accessibility対応をしたカスタムボタンを作ったとします。

それに対してUI ComponentをテストするときにはまずButtonのインスタンスを作成、サイズを指定をします。

それでGTXToolKitのregisterCheckに実行したいテストケースを全部追加します。

そして、toolKit.checkElementに対してそのボタンを渡すことで、それのAccessibility Testが実行されて、resultで結果を受け取ることができます。

GTXiLib.check()のように実際のプロダクトベースのUIテストではないので完璧ではないというか、本当に局所的なテストになっています。例えば背景色が透明なUI Componentsで実際に画面上に配置された時、背景色とのコントラストが大丈夫かというテストは難しいです。

例えばボタンのサイズが適切か、ボタンのtitleと背景色のコントラストが適切か、簡易的なチェックには有効ですので、ぜひとも試していただければなと思います。

あと、SwiftUIには未対応なんですが、先ほどの自前で作るGTXCheckingを作れば対応可能かと思います。では、Accessibility改善を少しずつ進めていましょう。というところで終わりにさせていただきます。

（会場拍手）

Occurred on , Published at