WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR20: キーボードとその他のデバイス特有の機能を両方とも使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

機能を実装するためにスクリプトを用いる全てのコンテンツ

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、イベントと関連付けられたスクリプト機能を含むコードを伴った、キーボード固有及びマウス固有のイベント双方の使用を明示することである。キーボード固有及びマウス固有のイベントを一緒に用いることにより、さまざまな種類の機器でコンテンツを操作できることを保証することができる。例えば、スクリプトがkeypressを認識したときに、マウスボタンをクリックしたときと同じ動作を行うことができるようにする。このテクニックにより、キーボードによるアクセスだけでなく他の機器によるアクセスの達成基準を満たすことができる。

JavaScriptでよく使用されるイベント・ハンドラには、onblur、onchange、onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onload、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onreset、onselect、onsubmit、onunloadが含まれる。いくつかのマウス固有の機能には、論理的に対応するキーボード固有の機能がある(例えば'onmouseover'と'onfocus'のように)。キーボード向けのイベント・ハンドラは、対応するマウス向けの機能とともに提供すべきである。

次の表は、マウスイベント・ハンドラに対応するキーボードイベント・ハンドラの候補である。

対応表
マウス向けキーボード向け
mousedown keydown
mouseup keyup
click [1] keypress [2]
mouseover focus
mouseout blur

1 clickは基本的にはマウスのイベント・ハンドラであるが、ほとんどの HTML 及び XHTML 向けのユーザエージェントは、HTML のネイティブコントロール(例: ボタン又はリンク)が有効化された場合、マウス又はキーボードのどちらで有効化されたかにかかわらず、イベントを処理することができる。そのため、もともとフォーカスできる HTML 要素にハンドラを追加するときは、実際にはキーボード用のイベントを補完する必要はない。しかし、下記の事例 2 のように他のイベントにハンドラを追加するときは、必要である。

2 keypress イベント・ハンドラは、どのキーに対しても有効であることから、そのイベント・ハンドラ関数では、イベントを処理する前に、Enterキーが押されたかどうかをチェックすべきである。そうでなければ、イベント・ハンドラは利用者が任意のキーを押すたびに実行され、コントロールから抜けるために Tab キーを押すような場合にも実行されるので、通常は望ましくない。

dblclick 及び mousemove のような)いくつかのマウス固有の機能には、対応するキーボード固有の機能がない。つまり、いくつかの機能は機器別に違った実装をしなければならないということである(例えば、実装されているマウス固有の機能と同等の機能を、キーボードから実行するための一連のボタン操作を含むようにする)。

事例

事例 1

この画像リンクの例では、利用者がポインタを画像に重ねると画像が変化する。キーボード利用者に同様の体験を提供するには、利用者が画像リンクにTabキーで移動した場合に、画像を変化させればよい。

コード例:


<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> 
<img id="menu" src="menu_off.gif" alt="メニュー" /> 
</a>

事例 2

この事例では、マウスとキーボードの両方を用いて機能を実行できる画像のカスタム・コントロールを紹介している。マウスイベントの onclick は、対応するキーボードイベントの onkeypress によって補完されている。tabindex 属性は、キーボードを用いてTabキーで移動した際に、画像の上で停止させるためのものである。この事例では nextPage() 関数が、キーボードのキー押下が Enter キーであるかどうかをチェックしていることに注目してほしい。もしチェックしなければ、画像にフォーカスがあるときには、どのキーが押下されても常に反応してしまうため望ましくない。

コード例:


<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif" 
alt="次のページへ移動">

注記: この例では img 要素に tabindex を用いている。現時点では(文法的に)妥当ではないが、この機能を実装するための古典的なテクニックとして用いられている。このようなカスタム・コントロールでは、コントロールの役割(role)と状態(state)を支援技術に引き渡すために WAI-ARIA も用いるべきである。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. 全てのインタラクティブな機能を探す。

  2. それらのインタラクティブな機能全てに、キーボードだけを使ってアクセスできる。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。