iosのvoiceover対応開発
DESCRIPTION
iPhoneのVoiceOverの実装についてTRANSCRIPT
iPhoneアプリの
VoiceOver対応開発
伊勢 シン
スマートフォン勉強会@関東#13
自己紹介
• 伊勢 シン といいます！
– あれ、なんで僕２回連続で関東にいるの・・・？
• スマートフォン勉強会の関西代表やってます。
• 大阪でスマートフォンのアプリ作っています
– iPhoneアプリのビルド待ちしている間に、
Androidアプリを書くとかそういうお仕事
自己紹介
• 趣味でもスマートフォンアプリ作ってます。
• 趣味で作った主なプロダクト – EbIRC
– ZEROProxy
– Giraffe
– SongTweeter
• Microsoft MVPでもある
– Microsoft MVP for Windows Phone (Oct 2009 - Sep 2011)
– でも今日はiPhoneのお話。ちなみに前回はAndroid。
おしながき • 開発者にとってアクセシブルにするメリットとは
– 普通に作ったらVoiceOverで悲しい事態に！
• アクセシビリティサポート 実際のところ – VoiceOverアクセシビリティ要素の基本
– アクセシビリティ簡単対応
– 独自描画コントロールのアクセシビリティ対応
• アクセシビリティ属性の指定の仕方
• アクセシビリティのデバッグ
アクセシビリティサポートをするメリット
なぜアクセシビリティサポートが重要か
• ユーザー層の拡大
–今まで使うことができなかった人たちへリーチ
– より多くの人にアプリを使ってもらう機会ができる
• アクセシビリティガイドラインへの対応
–政府機関によって発行されている
アクセシビリティガイドラインへ対応することができる。
• “正しいことである”
あなたのアプリはVoiceOverで使えますか？
• アプリ開発者の皆さん、VoiceOverでテストしてますか？
– 設定＞一般＞アクセシビリティ＞VoiceOver
– ホームトリプルクリックでVoiceOver切り替えにできる
• 変な英語が読み上げられていたりしませんか？
• 使えない機能が存在してたりしていませんか？
• 自分のアプリに「みっともない」側面を残さないためにも、アクセシビリティサポートしておきたい
みっともない事例 １
• 画像ボタンにアクセシビリティ属性指定しないと、
画像ファイル名を読み上げてしまう！
–伊勢的VoiceOverみっともない事例遭遇率第１位
• 例：btn_hoge.png という画像をボタンにすると
「びー てぃー えぬ ほーじ ボタン」と読み上げられる。
何も指定されていないから
画像ファイル名が採用されている
みっともない事例 ２
• VoiceOver使ってる状況下では全く使えなくなってしまう機能もある
– VoiceOver環境下では
スクロール系の機能が
弱いことに注意
–はみ出す領域への引っ張りがサポートされないので、
Pull to Refreshは
一切使えない。
Interface Builderで簡単にできるので
• 恥ずかしい思いをする前に対応しましょう。
アクセシビリティサポート実装
実際のところ
UIAccessibility、5つの基本要素
UIAccessibility
Label
Traits
Frame Hint
Value
5つの特性
種類 内容
Label
(ラベル)
ボタンの名前とか。文字列。
「追加」「削除」
Traits
(特性)
コントロールの種類や、選択状態とか。定数から指定。
「ボタン」「リンク」「テキストフィールド」「選択中」
Frame
(フレーム)
その項目のスクリーン上の絶対位置。CGRectで指定。
コントロールの場合はframeプロパティそのもの。
Hint
(ヒント)
そのコントロールを使うと何が起こるのかを説明。文字列。
特段必要でなければ設定されていないようです。
Value
(値)
そのコントロールがどの値を示しているか。スライダーなどで利用。
文字列。「50%」
Demo
• 簡単に設定できる方法でオブジェクトに
アクセシビリティ属性を追加してみます
• カスタムドロークラスの内包しているオブジェクトにアクセシビリティ属性を指定してみます
Interface Builderで簡単に設定するには
• Interface Builderでプロパティをちゃんと指定する
– 普通はこれだけで事足りる
画像ボタンにもTitleを指定する、等
Interface Builderで簡単に設定するには
• 詳細に指定するならIdentity inspectorで設定
属性ごとに
入力があります
カスタムドロークラスでの使用
• drawRectで中身を全部描画してる時などは、カスタムドローUIViewでUIAccessibilityContainer を実装する
– accessibilityElementCount,
accessibilityElementAtIndex,
indexOfAccessibilityElement を実装
– NSArrayをつくっておき、上記３つのメソッドに委譲
カスタムドロークラスでの使用
• すべてのオブジェクトがすでにUIAccessibilityを実装しているのでオーバーライドする
• accessibilityFrameはスクリーン上の座標なので変換が必要
UITableViewCell で気をつけること
• セルの中に複数のViewが含まれている場合、
子の要素はアクセシビリティ無効にしておく。
– その要素にフォーカスが当たって残念なことに
• UITableViewCellのaccessibilityLabelメソッドをオーバーライドして、そのセル全体を読み上げるようにする
伊勢的新常識 10
伊勢的新常識 お気に入り 10件の未読項目
内部のビューは
アクセシビリティ属性無効にしておく
アクセシビリティ属性の指定の仕方
正しい情報を提供しましょう
• ここまででアクセシビリティ属性の指定が
できるようになりました。
• どのような属性情報を指定すれば良いのでしょうか。
• 属性指定の基本は「短く」「正しく」「役に立つ」
–特にLabelとHintの指定は気をつけたい
Labelの指定
• 短く、わかりやすく。
–なるべく1つの単語ですむように指定する
– ただし、同じ画面に2つ以上の同じ機能がある場合は「〜を追加」みたいにする
• コントロールの種類を含めないこと
– 「追加ボタン」とLabelを指定すると、Traitsとあわせて「追加ボタンボタン」と読み上げられてしまう
• 英語の場合先頭は大文字にする
–抑揚の制御に使われる
• Labelの末尾にピリオドは付けない。
Hintの指定 • 必要なときに指定する
• そのコントロールを使用したときに何が起こるかを 「非常に簡潔に」説明 – 「曲を再生します」「コメントを送信します」など
– 名前をつけないこと (「戻る ボタン 戻るを押すと〜」と冗長になってしまう)
– 「タップすると〜」といった操作方法の説明は付けないこと (混乱のもとになる)
• 英語の時は以下の点にも注意 – 複数形で始める (命令っぽさをなくす)
– 先頭大文字と末尾のピリオドは省略するのは Labelと同じ
Traitsの指定
• 以下の属性から複数指定できる
– 「Not Enabled」な「Button」なども表せる
■ Button
■ Link
■ Search Field
■ Keyboard Key
■ Static Text
■ Image
■ Plays Sound
■ Selected
■ Summary Element
■ Updates Frequently
■ Not Enabled
■ None
アクセシビリティのデバッグ
シミュレータを使ったデバッグ
• iOSシミュレータで設定されている
アクセシビリティ属性を見ることができます。
• iOSシミュレータで以下の場所に。
設定
＞一般
＞アクセシビリティ
＞アクセシビリティインスペクタ
シミュレータを使ったデバッグ
• クリックすると指定してある
アクセシビリティ属性が
表示される
• ただし読み上げされないので、
最終的に実機デバッグが
必要なのは他の機能と同じ
まとめ
• 新たなユーザーへリーチするため、自分のアプリの死角をなくすため、アクセシビリティ対応をしましょう。
• ツール系アプリならInterface Builderで簡単にできます。
• 属性設定は「短く」「正しく」「役に立つ」ようにする
参考資料
• iOSアクセシビリティプログラミングガイド
– http://developer.apple.com/jp/devcenter/ios/lib
rary/documentation/iPhoneAccessibility.pdf
おまけ
• ところでVoiceOverが有効かどうかが知りたい
– UIAccessibilityIsVoiceOverRunning 使えばいいよ
• ステータスの変化はNSNotificationCenterで UIAccessibilityVoiceOverStatusChanged
を監視すればOK。
BOOL UIAccessibilityIsVoiceOverRunning();