-
Accessibility Inspector
Accessibility Inspectorを活用すると、Appの中でアクセシビリティに対応していない部分を特定することができます。その部分をアクセシビリティ対応にする方法についてフィードバックが表示されるほか、VoiceOverのシミュレーションも行われるため、ユーザーが実際に聞くVoiceOverを確認できます。Accessibility InspectorでAppを完全にデバッグするライブデモを通して、この強力なツールを使用してあらゆるユーザーに対応したAppを作る方法についてご確認ください。
リソース
関連ビデオ
WWDC20
WWDC19
-
ダウンロード
おはようございます 私はゲアリー アクセシビリティチーム所属です 今日 ご紹介するツールは― Accessibility Inspectorです
皆さんの アプリケーションにある― アクセシビリティの問題を 発見 診断 解決します サンプルのアプリケーションで 実演しましょう 始めます
私のアプリケーションです 仲間とピーナツバターを評価したり 記録したりできます 商品名をタップすると 詳細画面が出ます ここで商品の写真を 撮ることもできますし 商品の“お気に入り”追加や 購入もできます しかしアクセシビリティの テスト方法が分かりません Accessibility Inspectorの 出番です 開いてみましょう “Xcode”メニューの中に―
Accessibility Inspectorは この中です 文字の大きさに お気づきでしょうか 視力が弱い方へ向けた Macの新機能― Hover Textです カーソルの下のものが 大きく はっきり見えます 今日のデモでは これを使用します
(拍手) Accessibility Inspectorを開き 私のiOSデバイスを選択します
アプリケーションにある アクセシビリティの問題が― “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を表示”
コントラスト比は2.3:1で― 推奨値である3:0以下です そこで スライダで色を変えれば 元のデザインを損なわず 基準を満たすことができます
CATextLayerの foregroundColorにします
Accessibility Inspectorも 開いておきます
警告表示は なくなりました (拍手) VoiceOverを試すため “インスペクタ”で― “auto navigate”ボタンを 押します
“Nutter Buddy ボタン” “Patty's Creamy ヘッダ” “Patty's” “容器 画像” “写真を撮影ボタン” “お気に入りボタン” “購入ボタン” “クリーミー 混ぜる必要なし” “おいしい！”
これはAccessibility Inspectorが もたらす― アクセシブルな体験の ほんの一例です 簡単にアプリケーションの問題を 発見 解決し アクセシビリティに 取り組むことができます 皆さんも アプリケーションを ほんの数分間 チェックし アクセシブルにしましょう 皆のために (拍手) ありがとう
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。