1. iOSアプリの
VoiceOver対応開発 Rev.2
伊藤 伸裕
第44回Cocoa勉強会関⻄西

2. ⾃自⼰己紹介
• 伊勢 シン(伊藤 伸裕) といいます！
• ⼤大阪で主にスマートフォンのアプリ作っています
– 主にiOS (しあわせ)
– たまにAndroid (かなしい)
– Windows Phone (やりたいけど仕事がない)
– Windows 8 (やりたいけど（ｒｙ)
• スマートフォン勉強会の関⻄西代表やってます。
• Microsoft MVP for Device Application Development
(Oct 2011 - Sep 2012)
– 簡単に⾔言うとMS製品よく広めてくれてるで賞
– MSの⽝犬と⾔言われてある意味不不名誉

3. ⾃自⼰己紹介
• 趣味でもスマートフォンアプリ作ってます。
• 趣味で作った主なプロダクト
– ZEROProxy (Windows Mobile)
– EbIRC (Windows Mobile)
– Giraffe (Windows Mobile)
– SongTweeter (Windows Phone 7)
– PlaceHeart (iPhone)

4. おしながき
• 開発者にとってアクセシブルにするメリットとは
– 普通に作ったらVoiceOverで悲しい事態に！
• アクセシビリティサポート 実際のところ
– VoiceOverアクセシビリティ要素の基本
– アクセシビリティ簡単対応
– 独⾃自描画コントロールのアクセシビリティ対応
• アクセシビリティ属性の指定の仕⽅方
• アクセシビリティのデバッグ

5. アクセシビリティサポートをするメリット

6. なぜアクセシビリティサポートが重要か
• ユーザー層の拡⼤大
– 今まで使うことができなかった⼈人たちへリーチ
– より多くの⼈人にアプリを使ってもらう機会ができる
• アクセシビリティガイドラインへの対応
– 政府機関によって発⾏行行されている
アクセシビリティガイドラインへ対応することができる。
• “正しいことである”

7. VoiceOverつかったことありますか？
• タップで選択
• ダブルタップで確定
• ⼆二本指でスクロールすると読み上げ
• 三本指トリプルクリックでスクリーンカーテン
• ローター
– 読み上げ速度度などを変更更
• ただし⼊入⼒力力系の機能が弱い
– 変換するときに漢字の意味がわからない。
• See also
– http://www.ustream.tv/recorded/15304719
– 去年年同様のお話をした際VoiceOverを実際に使っている⽅方に
どのように使⽤用しているか説明して頂きました。

8. あなたのアプリはVoiceOverで使えますか？
• VoiceOverでテストしてますか？
– 設定＞⼀一般＞アクセシビリティ＞VoiceOver
– ホームトリプルクリックでVoiceOver切切り替えにできる
• 変な英語が読み上げられていたりしませんか？
• 使えない機能が存在してたりしていませんか？
• ⾃自分のアプリに「みっともない」側⾯面を残さないた
めにも、アクセシビリティサポートしておきたい

9. みっともない事例例 １
• 画像ボタンにアクセシビリティ属性指定しないと、
画像ファイル名を読み上げてしまう！
– 伊勢的VoiceOverみっともない事例例遭遇率率率第１位
• 例例：btn_hoge.png という画像をボタンにすると
「びー てぃー えぬ ほーじ ボタン」と読み上げられる。
何も指定されていないから
画像ファイル名が採⽤用されている

10. みっともない事例例 ２
• VoiceOver使ってる状況下
ではスクロール系の機能が
弱いことに注意
– Pull to Refresh系の
スクロール⾃自体に機能がある
場合はかなり使いづらくなる

11. Interface Builderで簡単にできるので
• 恥ずかしい思いをする前に対応しましょう。

12. アクセシビリティサポート実装
実際のところ

13. UIAccessibility、5つの基本要素
Label
Value Traits
UIAccessibility
Hint Frame

14. 5つの特性
種類 内容
Label ボタンの名前とか。⽂文字列列。
(ラベル) 「追加」「削除」
Traits コントロールの種類や、選択状態とか。定数から指定。
(特性) 「ボタン」「リンク」「テキストフィールド」「選択中」
Frame その項⽬目のスクリーン上の絶対位置。CGRectで指定。
(フレーム) コントロールの場合はframeプロパティそのもの。
Hint そのコントロールを使うと何が起こるのかを説明。⽂文字列列。
(ヒント) 特段必要でなければ設定されていないようです。
Value そのコントロールがどの値を⽰示しているか。スライダーなどで利利⽤用。
(値) ⽂文字列列。「50%」

15. Demo
• 簡単に設定できる⽅方法でオブジェクトに
アクセシビリティ属性を追加してみます
• カスタムドロークラスの内包しているオブジェクトに
アクセシビリティ属性を指定してみます

16. Interface Builderで簡単に設定するには
• Interface Builderでプロパティをちゃんと指定する
– 普通はこれだけで事⾜足りる
画像ボタンにもTitleを指定する、等

17. Interface Builderで簡単に設定するには
• 詳細に指定するならIdentity inspectorで設定
属性ごとに
⼊入⼒力力があります

18. カスタムドロークラスでの使⽤用
• drawRectで中⾝身を全部描画してる時などは、
カスタムドローUIViewで
UIAccessibilityContainer を実装する
– accessibilityElementCount,
accessibilityElementAtIndex,
indexOfAccessibilityElement を実装
– NSArrayをつくっておき、
上記３つのメソッドに委譲すると楽ですね

19. カスタムドロークラスでの使⽤用
• すべてのオブジェクトがすでにUIAccessibilityを
実装しているのでオーバーライドする
• accessibilityFrameはスクリーン上の座標なの
で変換が必要

20. UITableViewCell で気をつけること
• セルの中に複数のViewが含まれている場合、
⼦子の要素はアクセシビリティ無効にしておく。
– その要素にフォーカスが当たって残念念なことに
• UITableViewCellのaccessibilityLabelメソッドをオー
バーライドして、そのセル全体を読み上げるようにする
内部のビューは
アクセシビリティ属性無効にしておく
伊勢的新常識識 10
伊勢的新常識識 お気に⼊入り 10件の未読項⽬目

21. アクセシビリティ属性の指定の仕⽅方

22. 正しい情報を提供しましょう
• ここまででアクセシビリティ属性の指定が
できるようになりました。
• どのような属性情報を指定すれば良良いのでしょう
か。
• 属性指定の基本は「短く」「正しく」「役に⽴立立つ」
– 特にLabelとHintの指定は気をつけたい

23. Labelの指定
• 短く、わかりやすく。
– なるべく1つの単語ですむように指定する
– ただし、同じ画⾯面に2つ以上の同じ機能がある場合
は「〜～を追加」みたいにする
• コントロールの種類を含めないこと
– 「追加ボタン」とLabelを指定すると、Traitsとあわせて
「追加ボタンボタン」と読み上げられてしまう
• 英語の場合先頭は⼤大⽂文字にする
– 抑揚の制御に使われる
• Labelの末尾にピリオドは付けない。

24. Hintの指定
• 必要なときに指定する
• そのコントロールを使⽤用したときに何が起こるかを
「⾮非常に簡潔に」説明
– 「曲を再⽣生します」「コメントを送信します」など
– 名前をつけないこと
(「戻る ボタン 戻るを押すと〜～」と冗⻑⾧長になってしまう)
– 「タップすると〜～」といった操作⽅方法の説明は付けないこと
(混乱のもとになる)
• 英語の時は以下の点にも注意
– 複数形で始める (命令令っぽさをなくす)
– 先頭⼤大⽂文字と末尾のピリオドは省省略略するのは
Labelと同じ

25. Traitsの指定
• 以下の属性から複数指定できる
– 「Not Enabled」な「Button」なども表せる
■ Button ■ Plays Sound
■ Link ■ Selected
■ Search Field ■ Summary Element
■ Keyboard Key ■ Updates Frequently
■ Static Text ■ Not Enabled
■ Image ■ None

26. アクセシビリティのデバッグ

27. シミュレータを使ったデバッグ
• iOSシミュレータで設定されている
アクセシビリティ属性を⾒見見ることが
できます。
• iOSシミュレータで以下の場所に。
設定
＞⼀一般
＞アクセシビリティ
＞アクセシビリティインスペクタ

28. シミュレータを使ったデバッグ
• クリックすると指定してある
アクセシビリティ属性が
表⽰示される
• ただし読み上げされないので、
最終的に実機デバッグが
必要なのは他の機能と同じ

29. まとめ
• 新たなユーザーへリーチするため、⾃自分のアプリの
死⾓角をなくすため、アクセシビリティ対応をしましょ
う。
• ツール系アプリならInterface Builderで簡単にで
きます。
• 属性設定は「短く」「正しく」「役に⽴立立つ」ようにする

30. 参考資料料
• iOSアクセシビリティプログラミングガイド
– http://developer.apple.com/jp/devcenter/ios/
library/documentation/iPhoneAccessibility.pdf

31. おまけ
• ところでVoiceOverが有効かどうかが知りたい
– UIAccessibilityIsVoiceOverRunning 使えばいい
よ
BOOL
UIAccessibilityIsVoiceOverRunning();
• ステータスの変化はNSNotificationCenterで
UIAccessibilityVoiceOverStatusChanged
を監視すればOK。