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. • 阿部 諒 • freee 株式会社 iOSエンジニア ◦ 会計 freee

    ◦ 人事労務 freee • Twitter/Qiita/GitHub ◦ RyoAbe 自己紹介
  2. • accessibilityLabel - ラベル • accessibilityTraits - 特性 • accessibilityHint

    - ヒント • accessibilityValue - 値 • accessibilityFrame - フレーム アクセシビリティ属性 ゴレンジャー
  3. accessibilityLabel - ラベル UI要素のラベルを表す • UISwitch は「切り替えボタン」 • UITextFiled は「テキストフィールド」

    • UIButton の title など > • Label(ラベル)。コントロールやビューを簡潔に説明する、短く、ローカライズされた単語 またはフレーズですが、要素のタイプは識別しません。例としては、「Add(追加)」や「Play (再生)」などです。 iOSアクセシビリティ プログラミングガイド p.8
  4. 画像のみボタンには label をセットが必須 • 意識していないと平気で発生するし、詰む可能性が高い • HTMLでいう img タグに alt

    属性が入ってのと同じ • 画像のみの場合 trails の「ボタン」しか読み上げられない • custom type で画像のみセットされている場合に必要となる ◦ UIBarButtonItem.init(image:style:target:action:) ◦ UIButton.setImage(_:for:) ▪ UIButton は title がセットされていれば大丈夫 • system type の画像ボタンは不要
  5. accessibilityTraits - 特性 UI要素の種類、状態、実行可能な振る舞い、を複数選択して表す デフォルトでは下記: • UIButton の場合 button •

    UIImageView であれば image • UIDatePicker であれば adjustable • 動的に変わる ◦ UITableViewCell や UICollectionViewCell の selected が true になると traits に selected がセットされる > • Traits(特性)。それぞれが要素の状態、動作、または使用方法の特徴の1つを説明す る個々の特性を、1つ以上組み合わせたものです。たとえば、キーボードのキーのように動 作する要素が現在選択されている場合、KeyboardKey特性およびSelected特性の組み合 わせで特徴付けることができます。 iOSアクセシビリティ プログラミングガイド p.8
  6. traitsは振る舞いに沿って設定する① • UITableViewCell にはデフォルトでは traits は何も指定されない • こちらケースだと traits に

    button が指定されていることが望ましいが、 無指定なので「サインアウト」としか読み上げられない • 適切に trails に button を追加してあげる 設定 > Apple ID > サインアウト セル
  7. traitsは振る舞いに沿って設定する① • 同じような形状のセルでも必ず button でよいとは限らない • 右記のセルはタップすると Web ページが表示される •

    そのため適切な trait は button ではなく link となる App Store > マイアカウント > アカウント > サービス規約
  8. accessibilityHint - ヒント Label と Trais だけでは補えない情報を付与する。例えば: • UIButton は適切な

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

    カレンダーアプリの日付はタップすることで日付ピッカーが表示され編 集できる • カレンダーアプリでは日付にフォーカスを当てると「編集するにはダブ ルタップします」と読み上げられる • 適切に hint をセットして詰まないように カレンダー > 予定追加 > 開始/終了 セ ル
  10. accessibilityValue - 値 • UIButton の場合は空になっている。 • 値を持つような Picker や

    Swich、Progress などは値が入る > • Value(値)。値がラベルで表されていない場合の、要素の現在の値です。たとえば、ス ライダのラベルは「Speed(速度)」ですが、その現在の値は「50%」であることなどが考えら れます。 iOSアクセシビリティ プログラミングガイド p.8
  11. accessibilityFrame - フレーム UIView など frame 情報を持つオブジェクトでは デフォルトで実装されているため 独自で AccessibilityElement

    を作ったりしない限り不要のはず > • Frame(フレーム)。要素の画面位置とサイズをCGRect構造体で表す、要素のフレーム の画面座標です。 iOSアクセシビリティ プログラミングガイド p.8
  12. Accessibility Inspector Audit をうまく使おう • Xcode > Open Developer Tool

    > Accessibility Inspector > Audit Tab > Run Audit より利用可能 • 大まかな Accessibility の不備のチェックが可能 ◦ description がないよ ◦ タップエリアが狭いよ ◦ Dynamic Type に対応されていないよ ◦ など • 他のアプリに影響が出たりすることがある