diff --git a/techniques/client-side-script/SCR20.html b/techniques/client-side-script/SCR20.html index 48e99d3ad..a446329ae 100644 --- a/techniques/client-side-script/SCR20.html +++ b/techniques/client-side-script/SCR20.html @@ -1,6 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
- This technique relates to + このテクニックは -2.1.1: Keyboard -(Sufficient - when used with G90: Providing keyboard-triggered event handlers).
This technique applies to all content that uses Script to implement functionality.
このテクニックは、機能を実装するためにスクリプトを用いる全てのコンテンツに適用される。
The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the success criterion requirement for keyboard access by including not only keyboard access but access using other devices as well.
このテクニックの目的は、イベントと関連付けられたスクリプト機能を含むコードを伴った、キーボード固有及びマウス固有のイベント双方の使用を明示することである。キーボード固有及びマウス固有のイベントを一緒に用いることにより、さまざまな種類の機器でコンテンツを操作できることを保証することができる。例えば、スクリプトが keypress を認識したときに、マウスボタンをクリックしたときと同じ動作を行うことができるようにする。このテクニックにより、キーボードによるアクセスだけでなく他の機器によるアクセスの達成基準を満たすことができる。
In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
onblur
onchange
onclick
ondblclick
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onselect
onsubmit
onunload
JavaScript でよく使用されるイベントハンドラには、onblur、onchange、onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onload、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onreset、onselect、onsubmit、onunload が含まれる。いくつかのマウス固有の機能には、論理的に対応するキーボード固有の機能がある (例えば 'onmouseover' と 'onfocus' のように)。キーボード向けのイベントハンドラは、対応するマウス向けの機能とともに提供すべきである。
The following table suggests keyboard event handlers to pair mouse event handlers.
次の表は、マウスイベントハンドラに対応するキーボードイベントハンドラの候補である。
mousedown
1 Although click is in principle a mouse event handler, most HTML user agents also process this event when a native HTML control (e.g. a button or a link) is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event when adding handlers to natively focusable HTML elements. However, it is necessary when adding handlers to other events, such as in Example 2 below.
2 Since the keypress event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.
Some mouse-specific functions (such as dblclick and mousemove) do not have a corresponding keyboard-specific function. This means that some functions may need to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).
1 click は基本的にはマウスのイベントハンドラであるが、ほとんどの HTML 向けのユーザエージェントは、HTML のネイティブコントロール (例: ボタン又はリンク) が有効化された場合、マウス又はキーボードのどちらで有効化されたかにかかわらず、イベントを処理することができる。そのため、もともとフォーカスできる HTML 要素にハンドラを追加するときは、実際にはキーボード用のイベントを補完する必要はない。しかし、下記の事例 2 のように他のイベントにハンドラを追加するときは、必要である。
2 keypress イベントハンドラは、どのキーに対しても有効であることから、そのイベントハンドラ関数では、イベントを処理する前に、Enter キーが押されたかどうかをチェックすべきである。そうでなければ、イベントハンドラは利用者が任意のキーを押すたびに実行され、コントロールから抜けるために Tab キーを押すような場合にも実行されるので、通常は望ましくない。
(dblclick 及び mousemove のような) いくつかのマウス固有の機能には、対応するキーボード固有の機能がない。つまり、いくつかの機能は機器別に違った実装をしなければならないということである (例えば、実装されているマウス固有の機能と同等の機能を、キーボードから実行するための一連のボタン操作を含むようにする)。
In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.
この画像リンクの例では、利用者がポインタを画像に重ねると画像が変化する。キーボード利用者に同様の体験を提供するには、利用者が画像リンクに 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="Menu"> </a>
This example shows a custom link control where both the mouse and the keyboard can be used to activate the function. The mouse onclick event is duplicated by an appropriate keyboard onkeypress event. The tabindex attribute ensures that the keyboard will have a tab stop on the span element. Note that in this example, the nextPage() function should check that the key pressed was Enter, otherwise it will respond to all keyboard actions while the span has focus, which is not the desired behavior.
この事例では、マウスとキーボードの両方を用いて機能を実行できるリンクのカスタムコントロールを紹介している。マウスの onclick イベントは、対応するキーボードの onkeypress イベントによって補完されている。tabindex 属性は、キーボードを用いて Tab キーで移動した際に、span 要素の上で停止させるためのものである。この事例では nextPage() 関数が、押されたキーボードのキーがEnterであることを確認すべきであり、そうでない場合は、span 要素がフォーカスを持つ間にすべてのキーボード動作に応答するが、これは期待される動作ではないことに注意する。
<span onclick="nextPage();" onkeypress="nextPage();" role="link" tabindex="0"> <img alt="Go to next page" src="arrow.gif"> @@ -164,8 +159,8 @@ Examples - Related Resources -No endorsement implied. + 関連リソース +推奨を意味するものではない。 @@ -178,24 +173,24 @@ Related Resources - Related Techniques + 関連テクニック G90: Providing keyboard-triggered event handlers - Tests + 検証 - Procedure + 手順 - Find all interactive functionality - Check that all interactive functionality can be accessed using the keyboard alone + 全てのインタラクティブな機能を探す。 + それらのインタラクティブな機能全てに、キーボードだけを使ってアクセスできることをチェックする。 - Expected Results + 期待される結果 - #2 is true + 2 が真である。 @@ -215,14 +210,13 @@ Expected Results - Help improve this page + このページを改善する - Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub + あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。 - E-mail - Fork & Edit on GitHub - New GitHub Issue + 翻訳に関するお問い合わせ (Google フォーム) + GitHub @@ -244,12 +238,15 @@ Help improve this page WAI-Guide project, co-funded by the European Commission. + この文書は、2025 年 5 月 21 日付けの Techniques for WCAG 2.2 を、ウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。 + + この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。
No endorsement implied.
推奨を意味するものではない。
Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub
あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。
この文書は、2025 年 5 月 21 日付けの Techniques for WCAG 2.2 を、ウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。 +
この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。