Webサイトのドロップダウンとキーボードのでつらつら思ったこと

• フォーム要素をキーボードで操作する
• ドロップダウンが選べない

長めの登録フォームを入力する機会があった。
記入形式(type=”text”)とドロップダウンとラジオボタンを含めて、計40問くらい。

面倒なのでマウスは使わず、キーボードで入力していく。
ところが最初の設問でつまずいた。

フォーム要素をキーボードで操作する

マウスを使わず、キーボードのみでフォームの入力を進めるならだいたいこんな感じ。
覚えておくとちょっと便利。

ドロップダウンが選べない

今回入力したフォームの設問その1は、ドロップダウンで2択だった。
問題はこれをSpaceキーで展開はできるけど、選択ができない。(フォーカスが動いていないように見える)

実装を見てみる

デベロッパーツールで確認してみると、実装はselect要素ではなくて、エリア自体はbutton要素で、それを展開するとトグル的に選択しが表示される。
選択肢はラジオボタン(※opacity: 0;)とlabel要素(radioの外側)で実装。
選択された場合はlabel要素に疑似要素でチェックマークが表示され背景色を変更、button要素のテキストをlabel内のテキストに差し替え。

javascriptでクラスを付与して見た目を変えている感じだった。

自分の思ってた動作と違う

もちろんjavascriptでクラスを付与して見た目を変えるとか、そういうことは別に問題を感じない。
プルダウンなんだから絶対にselect要素にすべきだとも言わない。(ブラウザ間の違いとか見た目の実装のめんどくささとかよく分かる)

多くの人はマウスを使う。きっとそうだと思う。
それでもアクセシビリティとか考えるとどうなのでしょう。
みんながみんなマウスを使うとは限らないのではないか？

さらにフォーム全体としても最初の時点では設問数が分からない作りになっていた。
第一問でページが区切ってあったのでしばらく続くのだろうという予想をすることはできたのだけれど。
進めていくとプログレスバーも表示されているのも分かった。(サイトヘッダーにほぼベタ付きではじめは気がつかなかった)

入力していて、上のようなことを整理して考えていたわけではない。なんか、「思ってるのと違う」「期待してる動きじゃない」というところに違和感なり気持ち悪さなりを感じただけだ。
こういうフォームって、入力してもらう内容に意味があるのであって、入力動作自体に特に意識を向けなくてもいいように作りたい。
作る時は、その辺もちゃんと考えて作らなきゃなと思ったできごとでした。