スライドして実行するUI
旧iOSのスライドしてロック解除やチケット系アプリのスライドして入場など、わざわざスライドして実行させることで誤動作を防ぐUIがあります。ツイキャスにもイベントのチケットを販売できる機能があり、この機能の実装時に以下のようなスライドして入場するUIを実装しました。この記事ではその実装とアクセシビリティ対応を紹介します。
実装
以下に簡略化したサンプルコードを示します。特に難しいことはしていないのですが、ポイントとしては
- スワイプを始めたところところからの差分でスライダーを移動させる
- スマホ対応のためにスワイプ時はtouchmoveをキャンセルする
あたりだと思います。
See the Pen Swipe UI by Takuto Yoshikawa (@Takuto-Yoshikawa) on CodePen.
アクセシビリティ対応
さて実装時にWeb上にこういったUIのアクセシビリティに関して情報を見つけることができませんでした。そこでどうアクセシビリティ対応するのか検討する必要がありました。
結論から言うと
- 非読み上げ環境ではスライドして実行するUIを表示する
- 読み上げ環境ではスライドして実行するUIをを隠して代わりに普通のボタンを表示する
という対応になりました。つまり、読み上げ環境やキーボード環境の場合はスライドさせることはせず、タップだけで実行できるようにします。
そもそもスライドという小さいボタンを押して指をなぞる操作は身体能力が衰えると難しくなっていく操作に思えるので、使い所はよく考える必要がありそうです。その点を考えても代替の方法としてスライド操作以外を提供するのは妥当に思えます。
VoiceOverでの仕様
なお実装後にiOSのスライドしてロック解除はVoiceOverではどのような仕様になっているか気になり調べてみました。その結果、
- 古いiOSでは、スライドしてロック解除をVoiceOverでタップ
- 最近のiOSでは、画面の一番下から指をスライド
という仕様になっていることが分かりました。今回の検討結果は古いiOSの仕様に近そうです。最近のiOSはそもそもヒットテストを巨大にすることで細かい操作なしにスライドして実行が行えるようにするアプローチのようでした。画面全体がスライド対象の場合はこのアプローチの方が良さそうです。