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

Contents

前置き
構造理解
コード
まとめ

前置き

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

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

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

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

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

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

多くのサイトで紹介されているチェックボックスはdisplay: none;を使ったカスタマイズであるため、キーボードを使った選択操作ができません。
解決方法はシンプルです。input要素をdisplay: none;にするのではなく、widthを0にします。こうすることでタブによるフォーカスやスペースによる選択ができるようになります。
【コピペ可】HTMLとCSSでチェックボックスのコーディング４選

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

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

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

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

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

構造理解

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

<template>
  <label class="label">
    <input class="input" type="checkbox" />
    <span class="mark"></span>
    <span class="text">{{ text }}</span>
  </label>
</template>

</label>

</template>

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

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

<style lang="scss" scoped>
.label { // コンポーネント全体

  &:hover > .mark { // hoverした時
  }

  .input {
    margin: 0;
    // width: 0;
    // opacity: 0;
  }

  .input:focus + .mark { // focusした時の装飾枠
  }

  .input:checked + .mark { // checkした時の装飾枠
  }

  .input:checked + .mark::before { // checkした時の装飾枠内のチェック
  }

  .mark { // 装飾枠
  }
}
</style>

.label { // コンポーネント全体

&:hover > .mark { // hoverした時

}

.input {

margin: 0;

// width: 0;

// opacity: 0;

}

.input:focus + .mark { // focusした時の装飾枠

}

.input:checked + .mark { // checkした時の装飾枠

}

.input:checked + .mark::before { // checkした時の装飾枠内のチェック

}

.mark { // 装飾枠

}

</style>

.input:focus + .mark

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

.input:checked + .mark

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

&:hover > .mark

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

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

コード

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

<template>
  <label class="label">
    <input class="input" type="checkbox" />
    <span class="mark"></span>
    <span class="text">{{ text }}</span>
  </label>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: false,
      default: '',
    },
  },
}
</script>

<style lang="scss" scoped>
.label {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;

  &:hover > .mark {
    background: #dddddd !important;
    border: solid 2px #008eff;
  }

  .input {
    margin: 0;
    width: 0;
    opacity: 0;
  }

  .input:focus + .mark {
    background: #dddddd !important;
    border: solid 2px #008eff;
  }

  .input:checked + .mark {
    border: solid 2px #008eff;
    background: #ffffff;
  }

  .input:checked + .mark::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 80%;
    height: 80%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23008EFF" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>')
      no-repeat center;
    background-size: contain;
  }

  .mark {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 32px;
    height: 32px;
    border: solid 2px #93cfff;
    background: #ffffff;
    border-radius: 4px;
  }

  .text {
    margin-left: 12px;
    display: block;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>

</label>

</template>

export default {

props: {

text: {

type: String,

required: false,

default: '',

}

</script>

.label {

padding: 12px 8px;

display: flex;

align-items: center;

cursor: pointer;

&:hover > .mark {

background: #dddddd !important;

border: solid 2px #008eff;

}

.input {

margin: 0;

width: 0;

opacity: 0;

}

.input:focus + .mark {

background: #dddddd !important;

border: solid 2px #008eff;

}

.input:checked + .mark {

border: solid 2px #008eff;

background: #ffffff;

}

.input:checked + .mark::before {

content: '';

display: block;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -45%);

width: 80%;

height: 80%;

background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23008EFF" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>')

no-repeat center;

background-size: contain;

}

.mark {

position: relative;

top: 0;

left: 0;

display: block;

width: 32px;

height: 32px;

border: solid 2px #93cfff;

background: #ffffff;

border-radius: 4px;

}

.text {

margin-left: 12px;

display: block;

font-size: 18px;

font-weight: bold;

}

</style>

<template>
  <div class="page">
    <FormItemInputCheck text="同意する" />
  </div>
</template>

</div>

</template>

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

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

background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23008EFF" d="省略"/></svg>')no-repeat center;

1	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23008EFF" d="省略"/></svg>')no-repeat center;

まとめ

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