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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レッツトライ！