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

【displaynoneはNG】自作ラジオボタンチェックボックスをTABで操作する CSS
【displaynoneはNG】自作ラジオボタンチェックボックスをTABで操作する
2023.10.26
スポンサーリンク

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

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

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

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

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

本記事の執筆者：マサトラ

フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。

スポンサーリンク

デフォルトのラジオボタンやチェックボックスに対して「dispaly:none」がNGな理由

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

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

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

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

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

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

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

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

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

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

そもそも、なぜTABなどのキー操作できると良いのか？

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

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

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

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

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

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

スポンサーリンク

TABキーで操作できる自作のチェックボックス/ラジオボタン解説

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

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

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

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

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

input[type="radio"]:focus-visible + label,
input[type="checkbox"]:focus-visible + label {
  outline: 2px solid #005fcc;
  outline-offset: 4px;
}

ラジオボタンとチェックボックスのinputは、display: noneで消さず、フォーカス可能な状態を保ったまま視覚的に隠します。

これでネイティブの操作性が残り、Tabキーでラジオグループへ移動し、矢印キーで選択肢を移動したり、スペースキーでチェックボックスを切り替えたりできます。

position: absoluteで通常のレイアウトから外しつつ、:focus-visible時には隣接するlabelへアウトラインを表示します。透明にするだけでは現在のフォーカス位置が見えなくなるため、見た目のフォーカス表示までセットで実装することが大切です。

あわせて、各inputとlabelをid・forで関連付け、ラジオボタンのまとまりにはfieldsetとlegendを使いましょう。

まとめ

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

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

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

スポンサーリンク