「そのボタン、本当にクリックできますか？」インライン要素にイベントを仕込む時の大切な作法
Web制作を学んでいると、ふとこんな場面に出くわしませんか？
「この``タグをクリックしたら、メニューを開くようにしたいな」
「``タグにクリックイベントを付けて、何かアクションを起こさせよう！」
もちろん、JavaScriptを使えばそれは簡単に実現できます。でも、ちょっと待ってください。実はその「気軽な実装」、Webのアクセシビリティ（使いやすさ）という観点から見ると、少しだけ危うい落とし穴が隠れているんです。
今日は、フロントエンド開発の現場で意外と見落とされがちな「インライン要素とクリックイベント」の秘密について、一緒に紐解いていきましょう。
—
なぜ「aタグ以外」のクリックは注意が必要なのか？
まず、身近な例え話をしましょう。
Webサイトにある``タグは、いわば「自動ドア」のようなものです。近づけば（クリックすれば）自然に反応し、キーボードのEnterキーでもスムーズに通り抜けることができます。
一方で、``や`
この「無理やり」な状態だと、こんな問題が発生します。
- キーボードだけで操作している人が、そのボタンに気づけない
- EnterキーやSpaceキーを押しても、反応してくれない
マウスを使えない人や、キーボード操作に慣れているエンジニアにとって、これは非常にストレスフルな体験になってしまうんですね。
キーボード操作に対応する、たった一つの魔法
もし、どうしても``や`
1. `tabindex=”0″` を付与する：これによって、キーボードのTabキーでその要素にピント（フォーカス）を合わせられるようになります。
2. Enterキー/Spaceキーのイベントを拾う：マウスのクリックだけでなく、キーボードの入力を検知して処理を実行します。
実際にコードを見てみましょう。
// HTML:
const btn = document.querySelector(‘#my-button’);
// マウスでのクリック
btn.addEventListener(‘click’, () => {
alert(‘クリックされました！’);
});
// キーボード操作の対応
btn.addEventListener(‘keydown’, (event) => {
// Enterキー（13）かSpaceキー（32）が押されたら実行
if (event.key === ‘Enter’ || event.key === ‘ ‘) {
// スペースキーの場合、ページがスクロールするのを防ぐ
event.preventDefault();
alert(‘キーボードで決定されました！’);
}
});
このコードを書くだけで、あなたの作った「ただの文字」が、誰にとっても優しい「ボタン」へと生まれ変わります。
そもそも「buttonタグ」を使えば解決する、という事実
ここまで「インライン要素にイベントを付ける方法」を解説してきましたが、実は一番の解決策があります。それは、「なるべく`button`タグを使うこと」です。
`button`タグは、最初から「クリックされること」を前提に作られています。ブラウザが自動的にキーボード操作に対応してくれますし、スクリーンリーダー（視覚障がい者向けの読み上げソフト）も「これはボタンですよ」と正しく伝えてくれます。
「デザインが`button`タグだと崩れてしまう…」と悩むこともあるかもしれません。でも、CSSで`border: none; background: none;`と指定して、文字の飾りだけを付ければ、見た目は自由自在です。
—
まとめ：あなたのWebサイトを「誰にでも開かれたドア」に
Web開発の世界には、「動けばいい」という段階から「誰にとっても使いやすいか」を考えるステップアップの瞬間があります。
- インライン要素にイベントを仕込むときは、キーボード操作（Enter/Space）を忘れない
- できるだけ`button`タグという「標準装備」を優先する
この2つを意識するだけで、あなたの作るWebページはグッとプロフェッショナルな品質に近づきます。
最初は難しく感じるかもしれませんが、大丈夫です。一歩ずつ、ユーザーの使い心地を想像しながらコードを書く。その丁寧な積み重ねこそが、最高峰のフロントエンド・エンジニアへの一番の近道ですよ。
今日も楽しくコードを書いていきましょう！
コメント