諸事情でJavaScript無しでハンバーガーメニューを実装する必要が出た。つまり、メニュー表示用アイコンを準備し、それがクリックされた時にメニューを表示するという実装。JS無しですってよ奥様。いやいや無理だろ。
ダメ元で調べてみると……いやぁ何事もググってみるもので、CSSのみでマウスクリックを検知し、ページに変化を起こさせるサンプルが見つかった。
実際に動作するサンプルは此方。「CLICK ME!
」と書かれた背景色が赤の要素をクリックする度に、背景色が青、赤、青……と変化する。
不可視のチェックボックスを作る事、それとクリック時に変化を起こさせる要素を<label>要素で関連付ける事がミソで、チェックボックスのON/OFFを:checked擬似クラスで判断し、~セレクタとの合わせ技で適用するスタイルを切り替える。
これを応用すれば、ハンバーガーメニューも実装できそうだよね。という訳で作ってみたのが以下。
動作するサンプルは此方。「[BUTTON]」部分をクリックするとメニューの内容が表示される。メニュー以外の部分を暗くするbackdrop付き。うん、期待通りの挙動になっているようだ。
しかし、暫く考えて、お蔵入りにする事にした。
理由は、アクセシビリティ。どう考えても、非マウス（及び、非タッチスクリーン）環境でマトモに動作するとは思えない。
webの良い所は、デフォルトでアクセサビリティに配慮されている点だ（今回のようなhackや、JSで中途半端に凝った事をしようとしなければ）。この精神は重視すべきだ。「マウスもタッチスクリーンも使えない環境でweb見てる奴なんて殆ど居ないだろ」「障害者? 無視無視! だって殆ど居ないし」と考える事は可能だが、そうやって考えずに作った物が、ある日突然、私自身に牙を剥かないとも限らない。明日、明後日、自分の命が尽きるまでの何処かで、事故に在って障害を得る事は有り得ないなんて、一体誰に断言できるだろう? そういう目に会ってから後悔しても遅いのである。アクセシビリティについて僅か5秒でも考える開発者が1人でも増えれば、それだけ万一の時に自分が困る可能性を減らせるというものだ。
因みに、諸事情の方は、こんな苦労をしなくてもハンバーガーメニューの実装は可能だった事が後々判明した。正直、これもどうかとは思うのだが……
