Accessibility Inspector

(音楽)

おはようございます 私はゲアリー アクセシビリティチーム所属です 今日 ご紹介するツールは― Accessibility Inspectorです

皆さんの アプリケーションにある― アクセシビリティの問題を 発見 診断 解決します サンプルのアプリケーションで 実演しましょう 始めます

私のアプリケーションです 仲間とピーナツバターを評価したり 記録したりできます 商品名をタップすると 詳細画面が出ます ここで商品の写真を 撮ることもできますし 商品の“お気に入り”追加や 購入もできます しかしアクセシビリティの テスト方法が分かりません Accessibility Inspectorの 出番です 開いてみましょう “Xcode”メニューの中に―

“Developer Toolを開く”が あります

Accessibility Inspectorは この中です 文字の大きさに お気づきでしょうか 視力が弱い方へ向けた Macの新機能― Hover Textです カーソルの下のものが 大きく はっきり見えます 今日のデモでは これを使用します

(拍手) Accessibility Inspectorを開き 私のiOSデバイスを選択します

主な構成要素は３つです “インスペクタ”

“audit” そして“設定”です auditに注目します

アプリケーションにある アクセシビリティの問題が― “Auditを実行”を押すと 表示されます 試してみましょう

問題箇所が一覧で表示され―

クリックすると 問題がハイライトされます

画像説明に問題があるようです

カスタムボタンに影響が出ます

VoiceOverのような 支援テクノロジーは ラベル等の― アクセシビリティ情報を使い UIをガイドします その情報は どう提供するのでしょう？

右の“ヘルプ”を クリックしてください

accessibilityLabelの設定を 勧められました

“インスペクタ”に戻り

カスタムボタンを調査しましょう 上の“point inspection”ボタンを 押します

これで アプリケーション上にある― アクセシブルにする要素の 切り替えができます まずはカスタムボタンです

ラベルのプロパティが 画像ファイル名になっています

ユーザには不便です そこで追加された新機能が― VoiceOverの シミュレーションです “speak”ボタンを押します “Camera.on.rectangle button” “次へ”で次の要素を確認します “Suit.heart button” “Cart.badge.plus button” ボタンの機能を 的確に説明しておらず ユーザへのガイドに なっていません コードへ移り 意味を成すラベルを付けましょう

accessibilityLabelを ビューの下に設定します ハートのボタンは “お気に入り”にしましょう

カメラのボタンは “写真を撮影”にします

カートのボタンは “購入”とします 文字列は正確に ローカライズしてください Accessibility Inspectorに 戻りましょう

アクセシブルでない テキストがあるようです

senderがUIKitやAppKitならば いいのですが― 今回は商品名にCATextLayerを 使っています そのため自分で 対応する必要があります

コードで アクセシブルにしましょう

accessibilityElementであると 支援テクノロジーに指示するため― isAccessibilityElementを trueにします

次に適切なラベルを付けますが― brandNameと 同じに設定しておきます これだけです

最後の問題を確認します

商品名と背景の コントラストが不適当です 開閉用三角ボタンで 詳細を表示します

文字色および背景色と そのコントラスト比が出ました

はっきり読みやすいことが重要です

しかし 現在のコントラストでは 商品名の判読が困難です

“ヘルプ”を押します

推奨コントラスト比は 3:0以上と書かれています Accessibility Inspectorの― Color Contrast Calculatorで 実現可能です このツールを使えば コントラスト比を 推奨値以上にできます 開くには メニューバーの “ウィンドウ”を選択し―

“Color Contrast Calculatorを表示”

Color Pickerから―

商品名の文字に使用した グレーを選びます

コントラスト比は2.3:1で― 推奨値である3:0以下です そこで スライダで色を変えれば 元のデザインを損なわず 基準を満たすことができます

このダークグレーを 使用しましょう

darkGrayColorを追加し―

CATextLayerの foregroundColorにします

いよいよ アプリケーションを 動かしてみましょう

Accessibility Inspectorも 開いておきます

“Auditを実行”で 再度テストしましょう

警告表示は なくなりました (拍手) VoiceOverを試すため “インスペクタ”で― “auto navigate”ボタンを 押します

“Nutter Buddy ボタン” “Patty's Creamy ヘッダ” “Patty's” “容器 画像” “写真を撮影ボタン” “お気に入りボタン” “購入ボタン” “クリーミー 混ぜる必要なし” “おいしい！”

ずっと よくなりました

これはAccessibility Inspectorが もたらす― アクセシブルな体験の ほんの一例です 簡単にアプリケーションの問題を 発見 解決し アクセシビリティに 取り組むことができます 皆さんも アプリケーションを ほんの数分間 チェックし アクセシブルにしましょう 皆のために (拍手) ありがとう