元Appleの方のアクセシビリティに関する発表で
アプリをアクセシブルにするための明日から使える１０のTipsが紹介されており、
「なぜ必要なのか？」
「どのようにすればよいのか？」
がすごいわかりやすかったので
twitterでメモしていたことを再度まとめてみました。
動画はこちら: iOS Accessibility Tips&Tricks
以前発表で使用した資料も参考までに貼ります。
https://speakerdeck.com/shiz/iosdc2018
高いカラーコントラスト比を保持する
カラーコントラスト比
背景色と文字色の色のコンストラクト比のこと
最低限必要なコントラスト比
通常のテキスト -> 4.5:1
大きいテキスト -> 3:1
※大きいテキスト = 1４pt(Bold) または 18pt(Normal)以上のテキスト
カラーコントラストチェッカーの参考例
https://webaim.org/resources/contrastchecker/
検索すればたくさん出てくる
理想のコントラスト比
目安は色々あるが、7:1くらいが良い
どんな人、状況に重要か
- 色覚異常の方
- 高齢に伴う視力の低下
- 日光で眩しいときや目が疲れているとき
- ユーザーが設定でinvert colorやgray scaleを指定したとき
Use Dynamic TypeとAutoLayoutを使用する
Dynamic Type
なぜ？
文字の大きさはユーザーが見たいように設定を決めることができるため
ユーザーに合わせての最適化が必要になる。
どうやって？
UILabelやUIITextViewに対して
- Text Stylesと伴にpreferredFontForContentSizeCategoryを使用する
- adjustsFontsForContentSizeCategoryを使用する
AutoLayout
なぜ？
- UI要素を自動で収まるように包んでくれたり、拡張してくれる
- UIApplicationの
preferredContentSizeCategoryをチェックすることで ユーザーの文字サイズの設定値がわかるのでそれに合わせてレイアウトを変更しやすい
どんな人、状況に重要か
- 視力の弱い方
- 高齢の方
- ユーザーが好みに合わせて設定を変更したとき
小さい要素をタップさせない
最低限の目安
- 44x44ポイント以上(=約9mmx9mm以上)の大きさにする(人差し指の平均)
- タップできる要素同士は32ポイント以上空ける
どんな人、状況に重要か
- 視力の弱い方
- 身体的に障害をお持ちの方
よくない例
インスタグラムのユーザー名は小さすぎる。(タップしたことある人いる？)
可能な限りいつでも標準のUIKitコンポーネントを使用する
なぜ？
- デフォルトでアクセシビリティに対応している(VoiceOverが正しい性質(Traits)を理解できる、ジェスチャーにナビゲーションが正しく動く)
- ユーザーは動きに慣れている
カスタムUIを作る場合
最低限、Appleの標準のUIKitコンポーネントと同等程度にアクセシビリティに対応すること
複数の方法で重要な情報にアクセスできるようにする
なぜ？
ユーザーにとって何がベストなのかはわからない。
だから複数の方法を提供してユーザーに選択肢を提供することが重要。
例 入力エラーを示す場合
- 文字の色を変える
- 表示位置を変える
- 文字の内容を変える
- 音声で読み上げるようにする
どうやって？
- 目と耳両方でわかるようにする
- 目でわかるようにするためには、色、場所、内容(スタイル)を変える
- 触覚も考慮する（バイブなど）
- VoiceOverに読み上げてもらう(UIAccessibilityPostNotification)
画像は画像。文字は文字。
なぜ画像に文字を入れてはいけない？
- VoiceOver対応をしなければならない
- 文字の大きさが固定
- ローカライズできない
画像の種類
- ユーザーが提供するもの(インスタグラムの写真など)
- 情報を伝えるもの(タブバーのアイコンなど)
- ただの装飾
VoiceOverを使用したテストを行う
VoiceOverの実際の使用例
Tommy Edisonさん(目が不自由なYouTuber)
https://www.youtube.com/channel/UCld5SlwHrXgAYRE83WJOPCw
まずはやってみること
- スワイプまたは指をスライドさせると項目移動
- ダブルタップで選択
- ３本指のスワイプでスクロール
※VoiceOverをOnにするためのショートカットを設定しておくと楽
4つのテスト観点
- アプリのどんなところへもユーザーを正しく案内できているか？
- タップ可能な要素は全てタップできるか？
- 画面上の全てのテキストを聞き取れるか？
- 情報を伝える目的の画像の情報は聞き取れるか？
カーソルが当たらなかったら？
対象要素のisAccessibilityElementをtrueにする
正しい名前が読まれなかったら？
対象要素の accessibilityLabelの設定を変える
どんな人、状況にVoiceOverは重要か
- 目が不自由な方
- Switch Systemのユーザー (VoiceOverに対応するとSwitch Systemにも対応できる)
シンプルに！
注意点
- 複雑なUIよりもユーザーを正しく導くものが良い。
- 色の使いすぎには注意。重要な情報が強調されにくくなる。
- 車輪の再発明はしない(標準とUIの動きを変えるなど)。使い方を覚えるユーザーの負荷が増える。
どんな人、状況に重要か
- 全ての人(障害の有無に関係なく)
- 全ての世代
良くない例
snap chatはUI複雑すぎるよね。
ジェスチャーの使いすぎには注意
なぜ？
- ジェスチャー操作についてユーザーは記憶、習熟しなければならない
- しばしば間違いに気づかないことがある
- アプリ内で一貫性がなかったりする
- VoiceOverの機能とぶつかることがある
どうすれば良い？
ジェスチャーは便利機能して提供して、もっとわかりやく簡単にできる方法も提供すること
どんな人、状況に重要か
- 指や手などが自由に動かせない方
- 何か学習することや記憶するのに時間がかかる方
ユーザーと話し、ユーザーの声に耳を傾ける
なぜ？
- ユーザーはあなたのアプリを使いたいと思っている
- 障害をお持ちの方などは他とは違った視点を持っている
- 対応しなければいったい誰のためのアプリなのか？
どのように？
- フィードバックを受けやすい環境を整える
- アクセシビリティに対応していることをユーザーに伝える
最後のアドバイス
- アプリをアクセシブルにするために専門家である必要はない。良いUX/UIを心がけて取り組めば良い。
- アプリをアクセシブルにすることは全ユーザーにとってより使いやすいアプリになることに繋がる。
- アプリをアクセシブルにすることは正しいことである。