jQueryでアクセシブルなプルダウンメニューを実装

jQuery2011年5月21日

プルダウンメニューはjQueryをはじめ、多くの実装方法が紹介されていますが、キーボード操作に対応したプルダウンメニューを実装しているスクリプトは少ないです。
しかしながら昨今、ますますアクセシビリティ対応が求められるようになってきています。

そこで、グローバルメニューのプルダウンメニューもキーボード操作に対応する（アクセシビリティ対応をする）ことで、サイトの品質を向上させられればと思い、実装してみました。

方法としては、jQueryのプラグイン「Droppy」を改良することで、実現してみました。その方法をご紹介いたします。

HTML

<div id="nav-global">
<ul>
<li><a href="#">親メニュー1</a>
<ul>
<li><a href="#">子メニュー1</a></li>
<li><a href="#">子メニュー2</a></li>
<li><a href="#">子メニュー3</a></li>
<li><a href="#">子メニュー4</a></li>
<li class="last-child"><a href="#">子メニュー5</a></li>
</ul>
</li>
<li><a href="#">親メニュー2</a>
<ul>
<li><a href="#">子メニュー1</a></li>
<li><a href="#">子メニュー2</a></li>
<li><a href="#">子メニュー3</a></li>
<li><a href="#">子メニュー4</a></li>
<li class="last-child"><a href="#">子メニュー5</a></li>
</ul>
</li>
<li><a href="#">親メニュー3</a></li>
<li><a href="#">親メニュー4</a></li>
<li><a href="#">親メニュー5</a></li>
</ul>
</div>

CSS

#nav-global{
width:760px;
margin-bottom:18px;
font-size:0.78em;
}

#nav-global ul{
height:32px;
z-index:100;
background:#f37121;
color:#fff;
}

#nav-global ul li{
position:relative;
float:left;
}

#nav-global ul li a{
position:relative;
z-index:100;
float:left;
display:block;
padding:6px 10px 0 14px;
font-weight:bold;
text-align:center;
text-decoration:none;
color:#fff;
}

#nav-global ul li ul{
border:1px solid #f37121;
width:182px;
height:auto;
background:none;
background-color:#eff7fa;
display:none;
position:absolute;
top:31px;
left:0;
font-size:0.88em;
}

#nav-global ul li ul li{
position:static;
float:none;
border-bottom:1px dashed #fac1a6;
}

#nav-global ul li ul li.last-child{
border-bottom:none;
}

#nav-global ul li ul li a{
display:block;
float:none;
padding:5px 10px;
width:auto !important;
color:#004276;
font-weight:normal;
text-align:left;
zoom:1;
}

#nav-global ul li ul li a:hover,
#nav-global ul li ul li a:active,
#nav-global ul li ul li a:focus{
background:#c7dfeb;
}

Javascript

$(function() {

$(function() {
$("#nav-global ul").droppy();
});

});

/** Droppy 0.1.2* (c) 2008 Jason Frame (jason@onehackoranother.com) */
/** Customized by (c) 独学Webデザイナーの覚書 (/) */


$.fn.droppy = function(options) {

options = $.extend({speed: 150}, options || {});

this.each(function() {

var root = this, zIndex = 1000;

function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var subnav = $('> ul', ele);
return subnav.length ? subnav[0] : null;
} else {
return ele;
}
}

function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}

function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', false);
setTimeout(function() {
if (!$.data(subnav, 'cancelHide')) {
$(subnav).slideUp(options.speed);
}
}, 100);
}

function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}

$('ul, li', this).hover(show, hide);
$('li', this).hover(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
);


$('ul, li', this).keyup(show);
$('li', this).keyup(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); }
);

$('ul, li:last', this).keydown(hide);
$('li:last', this).keydown(
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover');}
);

});

};

解説

プラグインのスクリプトにキーボードイベント「keydown」「keyup」の処理をそれぞれ追記しています。
「keyup」でプルダウンメニューを表示させ、「keydown」では最後のメニューからkeydownしたタイミングでプルダウンメニューを非表示にし、次の要素にフォーカスが当たるようにしています。

Droppyでカスタマイズを試みたのは、コードがきれいに整理されているので追記しやすかったことと、エフェクトも少しコードをいじるだけで容易に変えることができたからです。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。