onclickイベントで実行不可能な機能を作ってませんか?

公開日: カテゴリー: JavaScript

JavaScriptでonclickイベントは色々な機会で利用されますけど、状況によってはonclickイベントだけではアクセスできない機能が生まれる可能性がある、という話。

検証用ページを用意してみたので、ちょっと開いてみてください。以下に検証用ページのHTMLを掲載しておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onclickに関する検証ページ&#64;UCWD-Stuido.</title>
<style>
.isAction {
     color: #00f;
     text-decoration: underline;
     cursor: pointer;
}
</style>
<script type="text/javascript">
function warn () {
     alert("test");
}
</script>
</head>
<body>
<h1>onclickに関する検証ページ</h1>

<h2>onclickであまり問題にならないケース</h2>
<ul>
     <li><a href="#" onclick="warn();">クリックするとアラートが出ます</a></li>
    <li><input type="button" onclick="warn();" value="クリックするとアラートが出ます" /></li>
</ul>

<h2>onclickで問題になるケース</h2>
<ul>
     <li><span class="isAction" onclick="warn();">クリックするとアラートが出ます。</span></li>
</ul>
</body>
</html>

検証ページのうち、あまり問題にならないケースの場合はアンカーやボタンにフォーカスさえ当たっていれば、マウスのクリックでなくリターンキーを押下してもイベントが発生（＝アラートウィンドウが表示）しますが、問題になるケースの場合はマウスのクリックではイベントが発生してリターンキー押下ではイベントは発生しません。それどころかtabindexの対象にすらならないので、キーボードオンリーの環境ではイベントを発生させるどころか、選択することすらできません。

検証ページではキー押下でのイベント発生やtabindexの対象に含む指定は一切していないので、ともに機能しないのは当たり前といえば当たり前なのですが例えば、

  • （少なくともPC向けサイトでは）リンクはマウスによるクリックで辿るものだ、という思い込み
  • マウス・クリックによって開閉するアコーディオン型メニューを作成する上での考慮不足

などによって、状況によって実行不可能なイベントをWebページへ容易に挿入してしまうものですが、常々気をつけておきたいポイントの一つです。