Posted at

Xcode 11 の Accessibility Inspector がとても便利

WWDC 2019 の Accessibility Inspector の動画から、Xcode 11 のアクセシビリティインスペクターの機能について紹介します。

アクセシビリティ対応をしようと思ってもどこから手を付けていいかわからなかったり、そもそもどこがアクセシビリティ観点でマズイのかわからず困ったりすることもあったと思います。が、Xcode 11 のアクセシビリティインスペクターは普段のコードのデバッグと同じように問題点を見つけ、修正することができます。一度触って体感してみてください。

※ここに貼っている画像は、上記動画をスクショしたものです。


Accessibility Inspector の起動方法

メニューバーから Xcode -> Open Developer Tool -> Accessibility Inspector で起動できます。

スクリーンショット 2019-08-17 21.24.59.png

ターゲットを選択するとこのような画面になります。

スクリーンショット 2019-08-17 21.26.49.png


対応が必要な箇所を見つけるには

右上には3つのボタンがあります。

スクリーンショット_2019-08-17_18_22_32.png

Audit(検査?)タブから「Run Audit」をクリックすると、アプリ内に存在するアクセシビリティ上の問題点が一覧で表示されます。

スクリーンショット 2019-08-17 18.33.27.png

クリックするとアプリの対象箇所がハイライトされます。

スクリーンショット 2019-08-17 18.36.19.png

行の右端の「?」マークをクリックすると、修正方法のサジェスチョンが出てきます(この例ではaccessibilityLabelの設定を勧められています)。

スクリーンショット 2019-08-17 19.20.38.png

右上インスペクタボタンをクリックし、さらに Start inspection follows point ボタンをクリックしてからシミュレータの画面要素をマウスオーバーすると、アクセシビリティに関連する様々な項目を見ることができます。また、Speak ボタンをタップすると VoiceOver を使っている時と同じように音声を再生してくれます。

スクリーンショット 2019-08-17 19.25.48.png


アクセシビリティラベルを変更する場合

ここで、例えば画像のラベルが単なる画像ファイル名になってしまっていること、ボタンのラベルが機能を的確に表していないことなどが判明したとします。その場合はコードで適切なラベルを設定する必要があります。

button.accessibilityLabel = "Buy"

もしデフォルトでアクセシビリティ対応がされない要素を使っている場合は自分で対応させる必要があります。方法としてはフラグを立て、ラベルを付与するだけです。

view.isAccessibilityElemment = true

view.accessibilityLabel = "\(brandName)"


コントラスト比を高めるには

コントラスト比が適切でなかった場合もちゃんと警告が出てくれます。

スクリーンショット 2019-08-17 19.54.33.png

アクセシビリティインスペクタの Color Contrast Calculator を使うと、推奨値以上のコントラスト比を確保できる色がなんなのかを簡単に知ることができます。メニューバーの Window から Show Color Contrast Calculator を選択するとツールを表示することができます。スライダーをずらせば元の色合いを変えることなく、コントラスト比の高い色を探せます。

スクリーンショット 2019-08-17 21.19.27.png