diff --git a/techniques/client-side-script/SCR26.html b/techniques/client-side-script/SCR26.html index d29bcd381..a1be27923 100644 --- a/techniques/client-side-script/SCR26.html +++ b/techniques/client-side-script/SCR26.html @@ -1,6 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
- This technique relates to + このテクニックは -2.4.3: Focus Order -(Sufficient - when used for changing a web page dynamically).
This technique applies to HTML and script.
このテクニックは、HTML 及びスクリプトに適用される。
The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.
The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.
onclick
Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted.
このテクニックの目的は、Document Object Model (DOM) に挿入されたユーザインタフェースの要素をタブ順序及びスクリーンリーダーの読み上げ順序がユーザエージェント標準のふるまいによって正しく設定されるような方法で配置することである。このテクニックは、メニューやダイアログのように隠れているものと表示されているもの、全てのユーザインタフェース要素に利用することができる。
スクリーンリーダーの読み上げ順序は、Document Object Model 内の HTML の要素の順序に基づいており、それはタブ順序についても同様である。このテクニックでは、新しいコンテンツを DOM のそのトリガーとなる要素の直後に挿入する。トリガーとなる要素は、リンク又はボタンでなければならず、スクリプトはその onclick イベントにより呼び出されなければならない。これらの要素はもともとフォーカス可能であり、その onclick イベントはデバイスに依存しない。フォーカスは選択された要素に残り、その後に挿入された新しいコンテンツは、タブ順序及びスクリーンリーダーの読み上げ順序の両方において、次の順番となる。
このテクニックは同期された更新にも利用できることに注目して欲しい。(AJAX と呼ばれることのある) 非同期の更新では、支援技術に非同期のコンテンツが挿入されたことを通知するために追加のテクニックが必要となる。
This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an id for the new menu as a parameter.
id
この例では、リンクがクリックされた際にメニューを生成し、そのリンクの後に挿入する。リンクの onclick イベントは新しいメニューのための id をパラメータとして渡す ShowHide スクリプトを呼び出すために使用される。
<button aria-expanded="false" type="button" onclick="ShowHide('foo',this)"> Toggle </button>
The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.
div
ShowHide スクリプトは新しいメニューを含む div を生成し、リンクを挿入する。最終行がスクリプトの核心となる。スクリプトのトリガーとなる要素の親を探し、新しい子として生成された div をそれに追加する。これにより、新しい div は DOM 内でメニューの次になる。利用者が Tab キーを押したときには、フォーカスがメニュー内で最初のフォーカス可能な項目となる生成されたリンクに移動する。
function ShowHide(id,src){ var el = document.getElementById(id); @@ -131,23 +126,23 @@ About this Technique } }
CSS is used to make the div and link look like a menu.
CSS は div およびリンクをメニューのように見せるために利用される。
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が提供する翻訳文書のライセンスをご覧ください。