52
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Xcode 11 の Accessibility Inspector がとても便利

Posted at

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

52
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?