はじめに
ハジメマシテ。qiita 初投稿です。
(どうか温かい目で)宜しくお願い致します。
内容について迷いましたが、
サイト制作をしてきて「これはやってしまっていた！」となった出来事がありましたので、
恥ずかしさを堪え共有します。
※ すでに社内共有済みの件なのですが、備忘も兼ねて記載させていただきます。
アコーディオンの制作方法
皆様はアコーディオンなパーツはどのように制作をされていますか。
自分はといえば、最初は div 要素と JavaScript を使用し、
クリック時にクラス追加をすることによって実装しておりましたが、
某サイトの記事を読み、JavaScript を使用しない方法を知り、
半年 ~ 10 ヶ月?程度、HTML 及び CSS のみで実装していました。
JavaScript 不使用のアコーディオン
実装例
以下が実装例です。
See the Pen accordion menu (useless) by h.u (@pon_uchi_pon) on CodePen.
実装方法
実装方法としては、上記の CodePen を確認いただければと思いますが、
input 要素の checkbox 型を使用して作成します。
以下、ざっくりとした実装方法です。
- checkbox を
display: none
- label 要素をクリック後、 checkbox に擬似クラス
:checkedが付与されるので、
それ自身とその隣接クラスを装飾
問題発生
しかし、ある時この方法で制作している際に、ふと TAB キーを押下したところ、
なんということでしょう。
キーボードからの操作が全く効かないことが判明しました。
既にお気付きかと思いますが、
checkbox を display: none にした時点で
check を入れる動作どころか、フォーカスでさえも、
キーボードからの操作が効かなくなってしまった のです。
( tabindex だとフォーカスまではできるようになりますが、チェックができません。)
アクセシビリティを考慮したアコーディオン
解決方法
では、どうすればよいのかと調べたところ、
全く同じことを考えられている記事がありました。
アクセシビリティで気をつけるchecbox,radioのCSS
実際の解決方法については、上記のサイトをご確認いただければと思いますが、
appearanceopacity- フォーカスされた checkbox の隣接要素に
box-shadow
上記のプロパティを使用して問題の解消をされております。
実装例
以下、実装例です。
Tab キーにてフォーカスの移動、スペースにてアコーディオンの開閉が可能となっております。
See the Pen accordion menu (nice) by h.u (@pon_uchi_pon) on CodePen.
これで一旦はアクセシビリティの問題は改善されたかたちとなりました。
一安心です。
まとめ
良さそうなコードを見たからと言って、それをそのまま使うのではなく、
「何か問題がないか、常に意識をしていくことを忘れないようにしよう」
というのが今回の教訓です。
よって、この記事の内容もまた後ほど更に精査して、
問題や改善点が無いか確認すべきですね。
貴重な時間を割き、お読み下さいましてありがとうございました。
参考文献
以下、有益な情報をありがとうございました。