Vueと共通

【Nuxt.js】アクセシビリティとコンポーネント化を考えたcheckbox

前置き

input type="checkbox"
といえばこのデザイン

これをカスタムすると
色や形も自由に変更できます✨

ただCSSでデザインできる💫
とわかっていても
毎回ググっては読み解くのに
時間がかかったため
シンプルに理解できるよう
記事にしました🔍📚

また、ほとんどのサイトでは
inputlabelで囲まず、
labelに装飾をするパターンです。
inputdisplay: none;
label::beforeで枠線
label::afterでチェック部分を装飾。

ただ個人的にそれだけCSSを書くなら
コンポーネントにしたい❗️
そしてNuxtの場合
templateの直下タグを
1つにできるならそうしたいので
template > label > input
にしたいのです💡

それからdisplay: none;
キーボード操作ができない💥
ということを知りました。
そう、アクセシビリティ
(利用のしやすさ)が低いのです🤔💭
こちらを参考にしています👇

多くのサイトで紹介されているチェックボックスはdisplay: none;を使ったカスタマイズであるため、キーボードを使った選択操作ができません。

解決方法はシンプルです。input要素をdisplay: none;にするのではなく、widthを0にします。こうすることでタブによるフォーカスやスペースによる選択ができるようになります。

【コピペ可】HTMLとCSSでチェックボックスのコーディング4選

⬇️以前switchボタンで
 input type="checkbox"
 装飾をしているのですが…
【Nuxt.js】props実践編:switchボタンを作ろう!

まずはチェックボックスを
どうデザインするのか
説明がわかりにくいと思ったので
チェックボックスに要点を絞ったものを
書きたいな〜✍️
と思っていたのです🍀

ということで今回は
ディレクティブなどは置いておき、
コンポーネントの大まかな構造と
CSSをどうあてるかを書いています❗️

$emitなどもまとめて書いたコードは
今度公開予定です🌟

参考:
【コピペ可】HTMLとCSSでチェックボックスのコーディング4選
アクセシビリティで気をつけるcheckbox,radioのCSS


構造理解

全体の構成を理解していきます。
input自体に装飾はできないため、
spanで装飾をしていきます。

そのためinputはCSSで
非表示にする必要がありますが、
今の段階では、
あえて隠していません。
inputspan
連動させることを
分かりやすくするためです🪐

あとは
擬似クラス:checked
擬似要素::beforeなどを使用して
inputと連動させながら装飾をしていくだけです🌟

.input:focus + .mark

:focus
隣接セレクタ(+)
inputをクリックした時のmark
となるため、
mark部分がinputと連動するわけです💫☝️

.input:checked + .mark

:checked
こちらも:focusと同様に
inputをチェックした時のmark
ということで連動しています

&:hover > .mark

子セレクタ、直下セレクタ(>)
&はscssで親を指すので
.labelのことです。
labelhoverした時のmark

⬇️セレクタについては
 こちらも参考になります
 2011年の記事ですが、
 一覧で見れるのはメリットです🌟
意外と知らない!?CSSセレクタ20個のおさらい


コード

そしてinputdisplay: none;
にはしていないので、
キーボード操作が可能です。
tabキーでinputまで移動し
スペースを押すと選択ができます。

アイコンはiconmonstrを使用🍒
background-image
svgを適応させています。
svgコードはiconmonstrコピペして
pathの後ろにfillを追加するだけです。
カラーコードの#
%23にする必要があります。
#008EFFを使用したかったので
%23008EFFになります。

とりあえずdata:image/svg+xmlして
svgコードつけてfillで色つければOKです🙆‍♀️
ベースのコードはこちら❗️



まとめ

これでアクセシビリティを高め
コンポーネントの作成もしやすく
スタイリングも
分かりやすくなりました✨👏

-Vueと共通
-,

© 2021 aLiz Nuxt