【display:noneはNG】自作ラジオボタン/チェックボックスをTABで操作する

Web制作で、お問い合わせフォームを実装するにあたり、デザインカンプを再現するためにラジオボタンやチェックボックスを自作するケースが多いかと思います。

その際、デフォルトのラジオボタンやチェックボックスを「display:none」で非表示にして、別途デザインカンプに沿ったものを自作していませんか？

その方法で自作することはできますし、私も駆け出しの頃はそのように作成していました。

でも、デフォルトのデザインを「display:none」で非表示にすることはNGです。やめましょう！

その理由と、「display:none」以外で自作する方法をご紹介します。

なぜデフォルトのラジオボタンやチェックボックスを「display:none」で非表示にするのはNGなのでしょうか？

その理由は、そうしてしまうとTABキーで操作できないからです。

TABキーで操作できないとはどういうことかと言うと、フォーカスできない＝キーボード操作できないということです。

ピンと来ないかもしれないので、実例を見てみましょう。

See the Pen ラジオボタンやチェックボックスでタブキーが効かない by Sugar (@ms_da_13) on CodePen.

上記のコードは、TABキーで操作できない状態のものです。大きな画面でコードを確認したい場合は、右上のCODE PENのロゴをクリックしてください。

こちらは、デフォルトのラジオボタンやチェックボックスを「display:none」で非表示にして、別途ボタンやボックスを自作したものです。

ラジオボタンの場合は← →のキー、チェックボックスはタブキーを押しても移動できないですし、スペースキーでチェックを入れる/外すこともできないですよね。

本来であればそれらができるはずなのですが、「display:none」を当ててしまうことによって要素自体が消えてしまい、キー移動ができなくなってしまいました。

タブキーや左右キー、スペースキーが使用できなくなると操作性が下がるので、「display:none」をすることはやめましょう！

デフォルトのラジオボタンやチェックボックスを「display:none」をするとタブキーなどの操作ができなることは分かりましたが、正直なところ「別にキー操作できなくても、そこまで不便じゃなくね？」と感じたかもしれません。

そもそも、タブなどのキー操作できるようにするのは、単に便利/不便だけの視点だけではありません。

コーダーの仕事は、デザインカンプを再現するだけではなく、実際にサイトを運用する際のことまで想像を働かせる必要があります。

例えば、サイトを訪問するユーザー全てがマウスクリックでチェックボックスにチェックを入れるわけではないかもしれません。

• パソコン使用中にマウスの電池が切れてしまった(私も何度か経験あります…)
• タッチパッドが故障してしまった
• 手や腕の怪我でマウスが操作できない

こういった不便な状況の時に、タブキーで操作できれば、ユーザーの役に立てますよね。

では、「display:none」を使用せずにデフォルトのラジオボタンやチェックボックスを消して、新たに自作する方法を解説します。

デモはCODE PENをご参照ください。

See the Pen ラジオボタンやチェックボックスでタブキーが効く by Sugar (@ms_da_13) on CodePen.

ポイントはCSSの以下の部分です。

input[type="radio"],
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

ラジオボタンとチェックボックスのinputタグに対して、「display:none」ではなく「opacity:0」を当てましょう。

これで、要素自体は消えず透明になるだけなので、フォーカスを当てることができる＝タブや←→キー、スペースで操作可能になります。

加えて、position:absoluteでレイアウトに関与しないようにしておきましょう。

たったこれだけで、アクセシビリティを考慮したラジオボタンやチェックボックスを作成することができます。

コーダーとして駆け出しの頃は、参考サイトを見ながらお問い合わせフォームを実装することが多いかと思いますが、display:noneでデフォルトのラジオボタンやチェックボックスを非表示にしているサイトが非常に多く、それを参考にしてしまうと一部のユーザーにとって不便なサイトとなってしまいます。

私も最初はそのようにコーディングしていましたが、自身で操作してみた時に「TABで移動できないのは不便だな」と気づきました。

たった2行のCSSで対応可能なので、「display:none」で対応していた方は、ぜひこの機会にTABキーで操作できるコードに見直しましょう。