Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのVoiceOver対応

RyoAbe
July 26, 2018

 はじめてのVoiceOver対応

VoiceOver 対応における事前知識やTipsのご紹介になります。
実際に私がVoiceOver対応したアプリはこちらです。
https://www.youtube.com/watch?v=8BCnHntPqGo

RyoAbe

July 26, 2018
Tweet

Other Decks in Technology

Transcript

  1. はじめてのVoiceOver対応
    Ryo Abe
    potatotips #53

    View full-size slide

  2. ● 阿部 諒
    ● freee 株式会社 iOSエンジニア
    ○ 会計 freee
    ○ 人事労務 freee
    ● Twitter/Qiita/GitHub
    ○ RyoAbe
    自己紹介

    View full-size slide

  3. 話すこと
    ● 私が VoiceOver 対応したアプリのご紹介
    ● アクセシビリティ属性ゴレンジャーと、それぞれのTips
    ● なぜ freee は VoiceOver 対応するのか

    View full-size slide

  4. 私が対応したアプリ
    【人事労務freee】iOSの音声読み上げ機能(VoiceOver)のデモ

    View full-size slide

  5. ● accessibilityLabel - ラベル
    ● accessibilityTraits - 特性
    ● accessibilityHint - ヒント
    ● accessibilityValue - 値
    ● accessibilityFrame - フレーム
    アクセシビリティ属性 ゴレンジャー

    View full-size slide

  6. accessibilityLabel - ラベル
    UI要素のラベルを表す
    ● UISwitch は「切り替えボタン」
    ● UITextFiled は「テキストフィールド」
    ● UIButton の title など
    > ● Label(ラベル)。コントロールやビューを簡潔に説明する、短く、ローカライズされた単語
    またはフレーズですが、要素のタイプは識別しません。例としては、「Add(追加)」や「Play
    (再生)」などです。
    iOSアクセシビリティ プログラミングガイド p.8

    View full-size slide

  7. 画像のみボタンには label をセットが必須
    ● 意識していないと平気で発生するし、詰む可能性が高い
    ● HTMLでいう img タグに alt 属性が入ってのと同じ
    ● 画像のみの場合 trails の「ボタン」しか読み上げられない
    ● custom type で画像のみセットされている場合に必要となる
    ○ UIBarButtonItem.init(image:style:target:action:)
    ○ UIButton.setImage(_:for:)
    ■ UIButton は title がセットされていれば大丈夫
    ● system type の画像ボタンは不要

    View full-size slide

  8. accessibilityTraits - 特性
    UI要素の種類、状態、実行可能な振る舞い、を複数選択して表す
    デフォルトでは下記:
    ● UIButton の場合 button
    ● UIImageView であれば image
    ● UIDatePicker であれば adjustable
    ● 動的に変わる
    ○ UITableViewCell や UICollectionViewCell の
    selected が true になると traits に selected がセットされる
    > ● Traits(特性)。それぞれが要素の状態、動作、または使用方法の特徴の1つを説明す
    る個々の特性を、1つ以上組み合わせたものです。たとえば、キーボードのキーのように動
    作する要素が現在選択されている場合、KeyboardKey特性およびSelected特性の組み合
    わせで特徴付けることができます。
    iOSアクセシビリティ プログラミングガイド p.8

    View full-size slide

  9. traitsは振る舞いに沿って設定する①
    ● UITableViewCell にはデフォルトでは traits は何も指定されない
    ● こちらケースだと traits に button が指定されていることが望ましいが、
    無指定なので「サインアウト」としか読み上げられない
    ● 適切に trails に button を追加してあげる
    設定 > Apple ID > サインアウト セル

    View full-size slide

  10. traitsは振る舞いに沿って設定する①
    ● 同じような形状のセルでも必ず button でよいとは限らない
    ● 右記のセルはタップすると Web ページが表示される
    ● そのため適切な trait は button ではなく link となる
    App Store > マイアカウント > アカウント
    > サービス規約

    View full-size slide

  11. accessibilityHint - ヒント
    Label と Trais だけでは補えない情報を付与する。例えば:
    ● UIButton は適切な Label と Trait が入っていれば認識できる
    ● UIDatePicker は表示されてもどのように編集していいかは不明
    ● そのためデフォルトで「値を調整するには 1本指で上または下にスワイ
    プします」というヒントが入っている
    > ● Hint(ヒント)。要素に対するアクションの結果を説明する、短く、ローカライズされたフ
    レーズです。例としては、「Adds a title(タイトルを追加)」や「Opens the shopping list
    (ショッピングリストを開く)」などです。
    iOSアクセシビリティ プログラミングガイド p.8

    View full-size slide

  12. hint がないと詰んでしまうかも
    ● hint は label と trais だけでは情報を補えない場合にセット
    ● カレンダーアプリの日付はタップすることで日付ピッカーが表示され編
    集できる
    ● カレンダーアプリでは日付にフォーカスを当てると「編集するにはダブ
    ルタップします」と読み上げられる
    ● 適切に hint をセットして詰まないように
    カレンダー > 予定追加 > 開始/終了 セ

    View full-size slide

  13. accessibilityValue - 値
    ● UIButton の場合は空になっている。
    ● 値を持つような Picker や Swich、Progress などは値が入る
    > ● Value(値)。値がラベルで表されていない場合の、要素の現在の値です。たとえば、ス
    ライダのラベルは「Speed(速度)」ですが、その現在の値は「50%」であることなどが考えら
    れます。
    iOSアクセシビリティ プログラミングガイド p.8

    View full-size slide

  14. accessibilityFrame - フレーム
    UIView など frame 情報を持つオブジェクトでは
    デフォルトで実装されているため
    独自で AccessibilityElement を作ったりしない限り不要のはず
    > ● Frame(フレーム)。要素の画面位置とサイズをCGRect構造体で表す、要素のフレーム
    の画面座標です。
    iOSアクセシビリティ プログラミングガイド p.8

    View full-size slide

  15. extension 作っておくと便利①
    extension String {
    func say() {
    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, self)
    }
    }
    "編集するにはダブルタップします ".say()
    ● 任意の文字を読み上げ

    View full-size slide

  16. extension 作っておくと便利②
    extension UIView {
    func focus() {
    UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, self)
    }
    }
    view.focus()
    ● 任意の view にフォーカスをあてる

    View full-size slide

  17. Accessibility Inspector Audit をうまく使おう
    ● Xcode > Open Developer Tool > Accessibility Inspector > Audit Tab
    > Run Audit より利用可能
    ● 大まかな Accessibility の不備のチェックが可能
    ○ description がないよ
    ○ タップエリアが狭いよ
    ○ Dynamic Type に対応されていないよ
    ○ など
    ● 他のアプリに影響が出たりすることがある

    View full-size slide

  18. なぜ VoiceOver 対応するのか
    ● 少し手を加えてあげるだけで利用可能なユーザを増やすことができる
    ● おまけに、UI設計の知見が深まる
    ● freeeは事業として取り組んでいる
    ● 全盲のエンジニアも社内に居てアクセシビリティ向上に取り組んでいる

    View full-size slide

  19. 誰かのためではなく
    将来の自分のために

    View full-size slide

  20. レッツトライ!

    View full-size slide