diff --git a/techniques/client-side-script/SCR29.html b/techniques/client-side-script/SCR29.html index 8747739d2..e6cd80d52 100644 --- a/techniques/client-side-script/SCR29.html +++ b/techniques/client-side-script/SCR29.html @@ -1,6 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
- This technique relates to + このテクニックは -2.1.1: Keyboard -(Advisory).
This technique applies to HTML, script.
このテクニックは、HTML 及びスクリプトに適用される。
The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler.
div
span
tabindex
onkeyup
onkeypress
onclick
When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().
0
-1
element.focus()
Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.
このテクニックの目的は、div や span などの静的な HTML 要素により実行されるユーザインタフェース コントロールにキーボードアクセスを提供する方法を示すことである。このテクニックは tabindex 属性を設定することで要素をフォーカス可能にし、onclick ハンドラに加えて onkeyup 又は onkeypress ハンドラを提供することでキーボードから動作を実行することができるようにするものである。
tabindex 属性の値が 0 の際、要素はキーボードでフォーカス可能であり、文書のタブ順序に含まれる。tabindex 属性の値が -1 の際、要素はタブ移動できないが、element.focus() を使用することによりフォーカスをプログラムで制御できる。
静的な HTML 要素にはそれらに関連した動作がないため、スクリプトが利用できない環境に対する、代替としての実装又は説明を提供することはできない。このテクニックはクライアントサイド スクリプティングが利用できる環境でのみ使用されるべきである。
Note
注記
Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.
そのようなユーザインタフェース コントロールは達成基準 4.1.2 を満たさなければならない。ユーザインタフェース コントロールの役割、名前及び状態についての情報がないままこのテクニックを適用する場合、F59 (達成基準 4.1.2 の失敗例 - コントロールに役割 (role) を提供せずに、HTML の div 要素又は span 要素をユーザインタフェースコントロールにするために、スクリプトを用いている) に該当することになる。
The div element on the page is given a unique id attribute and a tabindex attribute with value 0. A script uses the Document Object Model (DOM) to find the div element by its id and add the onclick handler and the onkeyup handler. The onkeyup handler will invoke the action when the Enter key is pressed. Note that the div element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.
id
onload
ページにある div 要素には一意の id 属性及び値が 0 の tabindex 属性が付与されている。スクリプトはドキュメントオブジェクトモデル (DOM) を利用し、id によって div 要素を見つけ onclick ハンドラ及び onkeyup ハンドラを追加する。onkeyup ハンドラは Enter キーが押下された際、アクションを実行する。div 要素を見つけて変更するには、div 要素が DOM の中に読み込まれた状態でなければならないことに注意する。これは、通常、body 要素の onload イベントでスクリプトを呼び出すことで達成される。イベントハンドラを追加するスクリプトはユーザエージェントが JavaScript をサポートし、かつ有効にしている場合にのみ実行される。
<script> // this is the function to perform the action. This simple example toggles a message. @@ -181,14 +177,14 @@ Example 1: Adding a JavaScript action to a div </div> </body>
div </div> </body>
Working example of this code: Creating Divs with Actions using JavaScript.
このコードの動作例: Creating Divs with Actions using JavaScript
No endorsement implied.
推奨を意味するものではない。
In a user agent that supports Scripting:
スクリプトをサポートするユーザエージェントで:
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が提供する翻訳文書のライセンスをご覧ください。