Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Voice over20180722

9,609 views

Published on

iOS VoiceOver

Published in: Technology
  • Be the first to comment

Voice over20180722

  1. 1. CopyrightR-learningInc.AllRightsReserved. 1 VoiceOver について超語る 2018/7/26 日向強
  2. 2. 自己紹介 2 •日向強(tsuyoshi hyuga) •@coffeegyunyu •iPhone(2009-) •Android(2010-) •Titanium •tvOS •株式会社アールラーニングにて主に iPhone、Androidの受託開発を担当
  3. 3. VoiceOver 3 VoiceOver って何?
  4. 4. VoiceOver 4 アプリケーションのユーザインター フェイスを説明し、音声とサウンド を使用してユーザによるアプ リケー ション内のビューとコントロールの 移動を支援します。 VoiceOverとは iOSアクセシビリティ プログラミングガイド より抜粋
  5. 5. VoiceOver 5 テキスト読み上げ機能 視覚的な情報(テキスト、画像、etc)を音声で 読み上げる機能 アクセシビリティの一種
  6. 6. VoiceOver 6 アクセシビリティ 年齢や身体障害の有無に関係なく、誰でも必 要とする情報に簡単にたどり着け、利用できる 読み上げは、視覚サポートのための機能
  7. 7. 7
  8. 8. 8
  9. 9. VoiceOver 9 連携されているアプリは 結構少ない
  10. 10. VoiceOver 10 例:ショッピングアプリ Kaeru(カエル) • UICollectionViewController • セルはUIImageViewを内包 • 画像はネットワークから取得 • 画像クリックで商品詳細に遷移
  11. 11. VoiceOver 11 例:ショッピングアプリ Kaeru(カエル) • 商品詳細では、買うボタン とお気に入りボタンが存在 する 何の変哲も無い ショッピングアプリ
  12. 12. VoiceOver 12 VoiceOver ONにするとこうなる
  13. 13. VoiceOver 13 問題1 画像をタップしても、フリック しても商品にフォーカスが当 たらない
  14. 14. VoiceOver 14 問題1 画像をタップしても、フリック しても商品にフォーカスが当 たらない 買えない!
  15. 15. VoiceOver 15 問題1 それぞれのセルで、 cell.imageView.isAccessibilityElement = true とすることでフォーカスが当 たるようになる 買える!
  16. 16. VoiceOver 16 問題2 商品にフォーカスしても、そ れが何なのかわからない
  17. 17. VoiceOver 17 問題2 これは何? そもそも商品? それとも何かのボタン? 商品にフォーカスしても、そ れが何なのかわからない
  18. 18. VoiceOver 18 問題2 画像と同時に商品名も取得し、 cell.imageView.accessibilityLabel に商品名を設定する カバン
  19. 19. VoiceOver 19 問題2 cell.imageView.accessibilityTraits = UIAccessibilityTraitImage にしていれば、画像から判 断して読み上げてくれる (iOS11) 財布 少しぼやけた 明るい
  20. 20. VoiceOver 20 問題3 購入ボタンにフォーカスを当 てたら、意味不明な読み上 げが行われた ぜろにーいちはちあーるびーにばいはち リソース名(0218_rd2_buy_8)を 読んでる
  21. 21. VoiceOver 21 問題3 内容によっては「発音不能」 と読み上げられる はつおんふのう
  22. 22. VoiceOver 22 問題3 これでは買えない accessibilityLabelの設定を忘 れずに!
  23. 23. VoiceOver 23 問題4 UILabelは何もしなくても大丈 夫?
  24. 24. VoiceOver 24 問題4 UILabelは何もしなくても大丈 夫? テレビで紹介されてた カエルをダウンロードしたけど 偽物なのかな? けるー
  25. 25. VoiceOver 25 問題4 カエル UILabelはデフォルトでtextの 内容を読み上げるが 意図しない読み上げを防ぐ ためaccessibilityLabelの設定 も検討しよう
  26. 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. 27. VoiceOver 27 問題4 多くの場合、 ブランド名=アプリ名 だと思うので、 plistに CFBundleSpokenNameの設 定も忘れずに! カエル
  28. 28. VoiceOver 28 おまけ リツイートを行う 各コンポーネントに accessibilityLabel設定済み リツイート
  29. 29. VoiceOver 29 おまけ セパレータは認識できない ため、リツイートボタンが、 「何に対して」のリツイートか わからない このリツイートボタンは 上下どっちをリツイートするの?
  30. 30. VoiceOver 30 おまけ 改善案として、 UITableViewCell全体のみを アクセシブルにして、リツイ ートのアクションはセル選択 後の画面で行う
  31. 31. VoiceOver 31 おまけ アクションを行う気がないツイー ト内のボタンへのフォーカスも無 くなるので、 タイムラインも右フリックで移動し やすい
  32. 32. VoiceOver 32 まとめ
  33. 33. VoiceOver 33 •iOSには、VoiceOverという、画面読み上 げ機能が標準で存在する •対応されているサービスは結構少ない •VoiceOverに対応するには設計や実装が 必要 •VoiceOverに対応することは「正しいこ とである」 まとめ
  34. 34. 34

×