先日、ユーザさんにフィードバックを頂いて、「う、ごめんなさい」と思いつつ具体的に調べてみた。
iOSアプリで対応が必要なのは、VoiceOver という読み上げ機能。
ある程度デフォルトで組み込まれているので、意識せずアプリを作成していても、VoiceOverが動作する。
良い意味でも悪い意味でも、iOSアプリはアクセサビリティ対応が標準という位置づけ。
そのため、知らずに恥ずかしい状態でアプリをリリースしている可能性がある。
iOSアクセシビリティプログラミングガイド に日本語のドキュメントがある。
プログラミングガイドとなっているが、どんなラベル、ヒントなどを入れると良いのか?という記述もあり、プログラマー以外でもとても参考になると思う。
(ただドキュメントは少し古いようで、Accessibility Inspector の表示方法が違っていて、XCode のメニュー Open Developer Tool - Accessibility Inspector で可能。)
基本的なことは、そのガイドを理解できるので、ここでは、実際に対応を試してみて、気がついたところを書いてみる。
VoiceOver対応のコスト
VoiceOver対応にかかる工数・コストは、一概にこれぐらいというのはない。UIデザインに依存していて、なにも対応しなくてOKな場合あるし、そもそもVoiceOverでは操作が無理という場合もある。
つまり、アプリのUIを考える前に、VoiceOverについて理解しておくとGood。
画像Onlyボタン
ラベル、ボタンはデフォルトでアクセサビリティがONになっていて、読み上げ対象になる。
特に指定が無い場合は、表示されている文字が読み上げられるのだが、画像のみのボタンの場合は「画像のアセット名」が読み上げられてしまうようだ。
これはなんとも恥ずかしい。適当に書いたコードを見られてしまったような恥ずかしさ。
画像のみのボタンは、Accessibility Label に文字を入れておくようにしよう。
StoryboardのIdentity Inspector で設定できる。
StoryboardのIdentity Inspector で設定できる。
正しいTraitsを
特にボタンかどうか?は操作する側にとっては大事な情報なはず。
Traitsの設定はここをポチッと変えるだの簡単なものなので普段から意識して設定するのがいいと思う。
段組みレイアウト
読み上げの順番は、左上から右下になる。(コードでカスタマイズ可能)あ、右から読む言語だと逆かもですが。
普通であれば、問題ないのですが、段組みレイアウトの場合は困ったことになる。
この場合、
「ワークアウト」→「平均」→「ベスト」→「100」→「8」→ ....
と読み上げてしまうことに。
この解決には、段組ごとのViewをAccessibilityをONにして、
「ワークアウト, 100件」→「平均, 8分」→「ベスト, 53分」
という文字をViewのAccessibilityのLabelに設定する必要がある。
Appleのカレンダーアプリでも、AccessibilityのLabelがカスタマイズされている様子。
「9」をタップすると、「2018年3月9日 金曜日, 1件のイベント ボタン」と読み上げする。
このようなレイアウトは、多くの場合カスタマイズが必要になりそう。
Table Cellは自動的に
Table Cellの場合、Cell の単位で自動的にAccessibleになる。便利!上記の場合、セルのAccessibility Labelに以下の文字が自動的に設定される。
1行目: 「水泳」
2行目: 「場所, プール」
3行目: 「プールの長さ, 25m」
カスタムCellの場合もOK。
さらに、Disclosure Indicator ( 右の > ) が設定されていれば、Traitsが自動的にButtonになる。
単位の表記
「10 min」は「Ten minutes」、「1 min」は「One minute」(単数形) で読み上げてくれる。
ただ、「10, min」は、「Ten, min」になる。
カンマがあると、読み上げ時に区切って発音してくれる効果があるが、このような違いもでてくる。
値と単位とで、別のLabelにすることをよくしていた。
「単位は少し小さいフォントにしたい」 というデザインの要望があった時でも、Storyboardだけで対応しやすいから。
しかし、その対応はイマイチだったようだ。
強い要望がない限りは、値と単位は同じフォント・サイズで、1つのラベルで表示するのがよさそう。
イマイチだったUI
タップ中は、その箇所の情報が表示され、指を離すと、もとに戻るというUI。
キャンセル・戻る ようなボタンを用意する必要がないので好きだったのだが、アクセサビリティはイマイチだった。
マイナスとプラスを1つのボタンになっていて、タップした位置によって判断しているUI。
指を離さなくても、増減を変えられたり、増加量を変えたり出来ると思い作成したが、アクセサビリティはイマイチだった。