Zenn
😺

チェックボックスUI - コピペで使えるアクセシビリティ対応モジュール

に公開
CSS
HTML
JavaScript
アクセシビリティ
tech

はじめに

こんにちは。株式会社VOWZ の Chikara です。
弊社では、定期的なアクセシビリティ講習の実施や、制作したWebページに対するアクセシビリティチェックなど、企業として継続的にアクセシビリティに取り組んでいます。

今回は、チェックボックスUIに関する解説をお届けします。
HTML標準のセマンティクスのinput type="checkbox"を使用したモジュールにあわせて、div要素などをカスタマイズして実装したモジュールの2例を紹介させていただきます。
モジュールだけを確認したい場合は、目次の【モジュール】をご参照ください。

基本編

【モジュール】標準的なチェックボックスUI

標準的なチェックボックスUIのコード解説

こちらのコードでは、HTMLの標準機能を使用しているため、さまざまなサポートが受けられます。
まず第一に、aria-checked などの状態管理を行うための JavaScript を用意する必要がありません。
HTML と CSS だけで動作する構成となっており、シンプルさと堅牢さの両立が実現されています。

<h3 id="id-group-label">好きなアニメにチェックを入れてください</h3>
<div role="group" aria-labelledby="id-group-label">
  1. id 属性を使用することで、aria-labelledby 属性によってラベルと対象要素を関連付けることができます。
  2. role="group" を付与することで、内包される要素がひとつの意味的なグループであることを明示できます。
    ただし、ul 要素に対して role="group" を指定すると、本来の role="list" が上書きされてしまうため、付与は避けるべきです。


<label class="c-check-label">
  <input type="checkbox" class="c-check">
  SPY×FAMILY
</label>
  1. label 要素の中に input 要素とラベルテキストを含めることで、id と for 属性による紐付けを省略することができます。
  2. 一方で、label 要素の外に input 要素を配置する場合は、id 属性と for 属性による明示的な紐付けが必要です。
  3. input 要素単体で使用する場合は、aria-label などでラベル情報を提供する必要があります。


.c-check {
  appearance: none; /* デフォルトスタイルの打ち消し */
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #ccc;
  border-radius: 2px;
  transition: .3s;
  position: relative;
}
.c-check-label:hover {
  color: #008060;
}
.c-check-label:hover .c-check {
  border-color: #008060;
  box-shadow: 0 0 0 1px #008060 inset;
}
  1. スタイルの自由度が限られがちな input 要素に対して、appearance: none; を指定することで、ブラウザによるデフォルトスタイルを無効化しています。
  2. appearance プロパティは主要なブラウザでサポートされていますが、念のため -webkit-appearance も併用して対応範囲を広げています。
  3. デフォルトスタイルを無効にした場合、ホバーやフォーカスなどステータス変化に応じたスタイルが消えてしまうため、必要に応じてそれらを明示的に追加する必要があります。

応用編

【モジュール】カスタムチェックボックスUI

カスタムチェックボックスUIのコード解説

カスタム要素として実装しているため、スタイル面での拡張性は高く、デザインの自由度も確保しやすい構造になっています。
ただし、機能面では aria 属性や JavaScript に依存しているため、実装が適切でない場合、アクセシビリティ上の問題が生じる可能性があります。
意図した挙動が支援技術でも正しく伝わるよう、仕様に沿った丁寧な実装が求められます。

HTML

<li>
  <div role="checkbox" 
       aria-checked="false"
       tabindex="0"
       aria-label="SPY×FAMILYを選択">SPY×FAMILY
  </div>
</li>
  1. role="checkbox" を使用することで、input type="checkbox" と同等の挙動を持たせることができます。
  2. aria-checked によって、チェックの状態（オン／オフ）を明示的に管理します。
  3. tabindex="0" を指定することで、div 要素でもキーボード操作によるフォーカスが可能になります。
  4. aria-label に「〜を選択」などの文言を設定することで、支援技術にとってわかりやすく、よりアクセシブルな実装になります。

【モジュール】input を label の外に配置したチェックボックス

今回の実装のように、input 要素が label 要素の外に出ている

<li>
  <input id="check-1" type="checkbox" class="visually-hidden">
  <label for="check-1" class="c-check-label"># SPY×FAMILY</label>
</li>

input 要素が label 要素の中に含まれている

<label class="c-check-label">
  <input type="checkbox" class="c-check">
  SPY×FAMILY
</label>

業務の中で、input 要素が label 要素の外に配置されたチェックボックスに触れる機会がありましたので、備忘録として記載しておきます。

まとめ

チェックボックスに関しては、HTML標準の機能だけでも、十分なカスタマイズ性を備えていると感じています。そのため、どうしても必要な事情がある場合を除き、標準要素の活用を優先するのが望ましいかもしれません。もちろん、カスタム要素の使用が問題というわけではありませんが、role 属性などを正しく設定した上での実装が前提となりますので、ご注意ください。

今回ご紹介したモジュールについては、すべての支援技術での完全な動作保証まではできないものの、Chromeの拡張機能「axe DevTools」でのアクセシビリティチェックをクリアしたものを掲載しています。アクセシブルなサイトづくりを目指すエンジニアの皆さまにとって、ささやかでも一助となれば幸いです。

本記事に関するご質問や、そのほか気になる点などありましたら、お気軽にコメントいただければと思います。

※本記事で掲載されているモジュールの一部は、W3Cによる ARIA Authoring Practices を引用・調整したものです。ライセンスは W3C Software License に準拠します。
※選択肢の例として『SPY×FAMILY』『鬼滅の刃』など、人気アニメを使用しています。

GitHubで編集を提案

Discussion