4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

スライドして実行するUIとそのアクセシビリティ

Last updated at Posted at 2023-12-20

スライドして実行する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はそもそもヒットテストを巨大にすることで細かい操作なしにスライドして実行が行えるようにするアプローチのようでした。画面全体がスライド対象の場合はこのアプローチの方が良さそうです。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?