iOS VoiceOver

1. CopyrightR-learningInc.AllRightsReserved.
1
VoiceOver
について超語る
2018/7/26 日向強

2. 自己紹介
2
•日向強（tsuyoshi hyuga）
•@coffeegyunyu
•iPhone(2009-)
•Android(2010-)
•Titanium
•tvOS
•株式会社アールラーニングにて主に
iPhone、Androidの受託開発を担当

3. VoiceOver
3
VoiceOver
って何？

4. VoiceOver
4
アプリケーションのユーザインター
フェイスを説明し、音声とサウンド
を使用してユーザによるアプ リケー
ション内のビューとコントロールの
移動を支援します。
VoiceOverとは
iOSアクセシビリティ プログラミングガイド より抜粋

5. VoiceOver
5
テキスト読み上げ機能
視覚的な情報（テキスト、画像、etc）を音声で
読み上げる機能
アクセシビリティの一種

6. VoiceOver
6
アクセシビリティ
年齢や身体障害の有無に関係なく、誰でも必
要とする情報に簡単にたどり着け、利用できる
読み上げは、視覚サポートのための機能

7. 7

8. 8

9. VoiceOver
9
連携されているアプリは
結構少ない

10. VoiceOver
10
例：ショッピングアプリ Kaeru(カエル)
• UICollectionViewController
• セルはUIImageViewを内包
• 画像はネットワークから取得
• 画像クリックで商品詳細に遷移

11. VoiceOver
11
例：ショッピングアプリ Kaeru(カエル)
• 商品詳細では、買うボタン
とお気に入りボタンが存在
する
何の変哲も無い
ショッピングアプリ

12. VoiceOver
12
VoiceOver
ONにするとこうなる

13. VoiceOver
13
問題1
画像をタップしても、フリック
しても商品にフォーカスが当
たらない

14. VoiceOver
14
問題1
画像をタップしても、フリック
しても商品にフォーカスが当
たらない
買えない！

15. VoiceOver
15
問題1
それぞれのセルで、
cell.imageView.isAccessibilityElement = true
とすることでフォーカスが当
たるようになる
買える！

16. VoiceOver
16
問題2
商品にフォーカスしても、そ
れが何なのかわからない

17. VoiceOver
17
問題2
これは何？
そもそも商品？
それとも何かのボタン？
商品にフォーカスしても、そ
れが何なのかわからない

18. VoiceOver
18
問題2
画像と同時に商品名も取得し、
cell.imageView.accessibilityLabel
に商品名を設定する
カバン

19. VoiceOver
19
問題2
cell.imageView.accessibilityTraits
= UIAccessibilityTraitImage
にしていれば、画像から判
断して読み上げてくれる
(iOS11)
財布
少しぼやけた
明るい

20. VoiceOver
20
問題3
購入ボタンにフォーカスを当
てたら、意味不明な読み上
げが行われた
ぜろにーいちはちあーるびーにばいはち
リソース名(0218_rd2_buy_8)を
読んでる

21. VoiceOver
21
問題3
内容によっては「発音不能」
と読み上げられる
はつおんふのう

22. VoiceOver
22
問題3
これでは買えない
accessibilityLabelの設定を忘
れずに！

23. VoiceOver
23
問題4
UILabelは何もしなくても大丈
夫？

24. VoiceOver
24
問題4
UILabelは何もしなくても大丈
夫？
テレビで紹介されてた
カエルをダウンロードしたけど
偽物なのかな？
けるー

25. VoiceOver
25
問題4
カエル
UILabelはデフォルトでtextの
内容を読み上げるが
意図しない読み上げを防ぐ
ためaccessibilityLabelの設定
も検討しよう

26. VoiceOver
26
問題4
kɑ.e.ɾɯ.ɯ(国際音声記号)
iOS11であれば、
accessibilityAttributedLabel
を用いての読み上げも可能
let attributedString =
NSMutableAttributedString(string: ”Kaeru")
attributedString.addAttribute(
NSAttributedStringKey(rawValue:
UIAccessibilitySpeechAttributeIPANotation),
value: "kɑ.e.ɾɯ.ɯ", range: NSRange(location:
0, length: 5))

27. VoiceOver
27
問題4
多くの場合、
ブランド名=アプリ名
だと思うので、
plistに
CFBundleSpokenNameの設
定も忘れずに！
カエル

28. VoiceOver
28
おまけ
リツイートを行う
各コンポーネントに
accessibilityLabel設定済み
リツイート

29. VoiceOver
29
おまけ
セパレータは認識できない
ため、リツイートボタンが、
「何に対して」のリツイートか
わからない
このリツイートボタンは
上下どっちをリツイートするの？

30. VoiceOver
30
おまけ
改善案として、
UITableViewCell全体のみを
アクセシブルにして、リツイ
ートのアクションはセル選択
後の画面で行う

31. VoiceOver
31
おまけ
アクションを行う気がないツイー
ト内のボタンへのフォーカスも無
くなるので、
タイムラインも右フリックで移動し
やすい

32. VoiceOver
32
まとめ

33. VoiceOver
33
•iOSには、VoiceOverという、画面読み上
げ機能が標準で存在する
•対応されているサービスは結構少ない
•VoiceOverに対応するには設計や実装が
必要
•VoiceOverに対応することは「正しいこ
とである」
まとめ

34. 34