unslug ja: move

1 files changed, 115 insertions, 0 deletions

diff --git a/files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html b/files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html
new file mode 100644
index 0000000000..8091563161
--- /dev/null
+++ b/files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html
@@ -0,0 +1,115 @@
+---
+title: キー操作可能なカスタム DHTML ウィジェット
+slug: Key-navigable_custom_DHTML_widgets
+tags:
+  - AJAX
+  - Accessibility
+  - DHTML
+---
+<p> </p>
+
+<h3 id=".E8.AA.B2.E9.A1.8C:_.E4.BB.8A.E6.97.A5.E3.81.AE_DHTML_.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.81.AF.E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B7.E3.83.93.E3.83.AA.E3.83.86.E3.82.A3.E3.81.8C.E6.AC.A0.E3.81.91.E3.81.A6.E3.81.84.E3.82.8B" name=".E8.AA.B2.E9.A1.8C:_.E4.BB.8A.E6.97.A5.E3.81.AE_DHTML_.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.81.AF.E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B7.E3.83.93.E3.83.AA.E3.83.86.E3.82.A3.E3.81.8C.E6.AC.A0.E3.81.91.E3.81.A6.E3.81.84.E3.82.8B">課題: 今日の DHTML パッケージはキーボードアクセシビリティが欠けている</h3>
+
+<p>増加傾向にあるウェブアプリケーションは、<a href="ja/JavaScript">JavaScript</a> を使用してメニューやツリービュー、リッチテキストフィールド、タブパネルなどのようなデスクトップウィジェットを模倣しています。Web 開発者は絶えず表計算やカレンダー、構造図などのような対話的な要素を取り入れ、新たなアプリケーションは複雑化しています。現在まで、Web 開発者はスタイル付けられた <code><span class="nowiki">&lt;div&gt;</span></code> や <code><span class="nowiki">&lt;span&gt;</span></code> を基にして、正しい技術を欠いたウィジェットをキーボードで利用できるようにしようとしています。しかしながら、キーボードアクセシビリティは Web 開発者が知っておくべき最小限必要なアクセシビリティの一部でしかありません。</p>
+
+<p>実例を挙げると、ほとんどの <a href="ja/DHTML">DHTML</a> メニューは、キーボードアクセスを尊重した正規のメニューのようには動作しません。キーボードでとにかくメニューを利用できるようにする場合によくある共通の間違いは、各メニュー項目(<code><span class="nowiki">&lt;a&gt;</span></code> 要素を使用して作られます) をタブ移動の順番に含めてしまうことです。実際のメニューの正しい振る舞いは、一度でメニュー全体にタブ移動でき、矢印キーによる操作でメニュー項目からメニュー項目へと移動できるようになっていなければなりません。これはツリービューやグリッド、タブパネルなど、その他の "グループ化された操作" にも当てはまります。</p>
+
+<p>HTML 作者にとっては今すぐできる正しいことです。これらのウィジェットを支援技術との互換性を持たせるためのドキュメントは、<a href="ja/ARIA/Accessible_Rich_Internet_Applications">ARIA: Accessible Rich Internet Applications</a> 以下にあります。</p>
+
+<h3 id=".E8.A7.A3.E6.B1.BA.E6.B3.95:_tabindex_.E3.81.AE.E6.8C.AF.E3.82.8B.E8.88.9E.E3.81.84.E3.82.92.E6.A8.99.E6.BA.96.E6.BA.96.E6.8B.A0.E3.81.AB.E3.81.99.E3.82.8B" name=".E8.A7.A3.E6.B1.BA.E6.B3.95:_tabindex_.E3.81.AE.E6.8C.AF.E3.82.8B.E8.88.9E.E3.81.84.E3.82.92.E6.A8.99.E6.BA.96.E6.BA.96.E6.8B.A0.E3.81.AB.E3.81.99.E3.82.8B">解決法: tabindex の振る舞いを標準準拠にする</h3>
+
+<p>Firefox 1.5 は、Microsoft Internet Explorer が先導する <code>tabindex</code> 属性を拡張することにより、どの要素でもフォーカスできるように変更しています。IE システムの <code>tabindex</code> によれば、私たちは、すでに IE でキーボード操作できるようになっている<a href="ja/DHTML">DHTML</a> ウィジェットを Firefox 1.5 でもキーボードで操作できるようにしています。作者がカスタムウィジェットをキーボードで操作できるようにする手段をもつために、ルールは曲げられるべきです。</p>
+
+<p>続く表は、新しい <code>tabindex</code> の振る舞いについて記述しています:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th><code>tabindex</code> 属性</th>
+   <th>マウスまたは <code>element.focus()</code> を用いた JavaScript でフォーカス</th>
+   <th>タブ操作</th>
+  </tr>
+  <tr>
+   <td>なし</td>
+   <td>既定の要素の振る舞いに従う。(フォームコントロールやリンクなどについては可)</td>
+   <td>既定の要素の振る舞いに従う。</td>
+  </tr>
+  <tr>
+   <td>負の値 (例: <code>tabindex="-1"</code>)</td>
+   <td>可</td>
+   <td>不可。作者は矢印キーか他のキーの押下によって <code><a href="ja/DOM/element.focus">element.focus()</a></code> でフォーカスしなければいけません。</td>
+  </tr>
+  <tr>
+   <td>0 (例: <code>tabindex="0"</code>)</td>
+   <td>可</td>
+   <td>タブで移動する順番は、要素のドキュメント内の位置によります。</td>
+  </tr>
+  <tr>
+   <td>正の値 (例: <code>tabindex="33"</code>)</td>
+   <td>可</td>
+   <td>tabindex の値は、要素の位置にタブで移動する順番を手動で変更します。これらの要素へ移動する順番は、<code>tabindex="0"</code> を持つ要素か、そのままタブで移動できる要素の前に位置します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id=".E6.96.B0.E3.81.97.E3.81.84.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0.E3.81.AE.E4.BD.BF.E3.81.84.E6.96.B9" name=".E6.96.B0.E3.81.97.E3.81.84.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0.E3.81.AE.E4.BD.BF.E3.81.84.E6.96.B9">新しいシステムの使い方</h3>
+
+<p>タブで操作できる簡単なウィジェットを作成するには、<code>tabindex="0"</code> を <code><span class="nowiki">&lt;div&gt;</span></code> または <code><span class="nowiki">&lt;span&gt;</span></code> 上に使用してください。<a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">span を基にしたチェックボックス</a> の例は Firefox 1.5 と IE の両方で、キーボードで利用できます。(ただし、チェックボックス画像の <code><a href="ja/CSS/%3abefore">:before</a></code> ルールは IE で動作しません)</p>
+
+<p>メニューやタブパネル、グリッド、ツリービューなど、ウィジェットの集まりの親要素は <code>tabindex="0"</code> を持つべきです。また、選択肢/タブ/セル/行の子孫要素は <code>tabindex="-1"</code> を持つべきです。<code><a href="ja/DOM/element.focus">element.focus()</a></code> を使用して矢印キーを観察する <code><a href="ja/DOM/window.onkeydown">onkeydown</a></code> イベントは、適切な子孫ウィジェットにフォーカスをセットして呼び出すことができるため、フォーカスすることができます。<a class="external" href="http://www.mozilla.org/access/dhtml/tree">DHTML ツリービュー</a> の例は Firefox の nightly ビルド上で、キーボードとスクリーンリーダで利用できます。(IE 上でも動作します)</p>
+
+<p>これはまだ W3C やその他の公式な標準の一部ではありません。しかし今は、完全にキーボードで利用できるようにするためにルールを曲げる必要があります。</p>
+
+<h3 id=".E4.BD.9C.E6.88.90.E6.99.82.E3.81.AE.E3.83.92.E3.83.B3.E3.83.88" name=".E4.BD.9C.E6.88.90.E6.99.82.E3.81.AE.E3.83.92.E3.83.B3.E3.83.88">作成時のヒント</h3>
+
+<h4 id="onfocus_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E7.8F.BE.E5.9C.A8.E3.81.AE.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E8.BF.BD.E8.B7.A1.E3.81.99.E3.82.8B" name="onfocus_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E7.8F.BE.E5.9C.A8.E3.81.AE.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E8.BF.BD.E8.B7.A1.E3.81.99.E3.82.8B"><code>onfocus</code> を使用して現在のフォーカスを追跡する</h4>
+
+<p><code><a href="ja/DOM/element.onfocus">onfocus</a></code> イベントおよび <code><a href="ja/DOM/element.onblur">onblur</a></code> イベントは、すべての要素で使用することができます。現在のドキュメントのフォーカスを得るための 標準的な <a href="ja/DOM">DOM</a> インタフェースが無いため、これを追跡し続けるには <a href="ja/JavaScript">JavaScript</a> の変数を使用します。</p>
+
+<p>すべてのフォーカス変更はキーイベントとマウスイベントによってのみ起こるとは仮定しないでください。スクリーンリーダなどの支援技術はフォーカスを任意のフォーカス可能な要素にセットすることができ、それらが JavaScript ウィジェットによって的確に扱われる必要があります。</p>
+
+<h4 id="tabIndex_.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E5.8F.AF.E8.83.BD.E6.80.A7.E3.82.92.E5.8B.95.E7.9A.84.E3.81.AB.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name="tabIndex_.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E5.8F.AF.E8.83.BD.E6.80.A7.E3.82.92.E5.8B.95.E7.9A.84.E3.81.AB.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B"><code>tabIndex</code> プロパティを使用してフォーカス可能性を動的に変更する</h4>
+
+<p>カスタムコントロールが無効なった場合にはフォーカスできなくし、有効になった場合にはフォーカスできるようにしたいはずです。無効になったコントロールにタブで移動するべきではありません。しかしながら、それらが操作ウィジェットの集まりの一部である場合はタブで移動できるようにします。</p>
+
+<h4 id="element.focus.28.29_.E3.81.A8_setTimeout_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E3.82.BB.E3.83.83.E3.83.88.E3.81.99.E3.82.8B" name="element.focus.28.29_.E3.81.A8_setTimeout_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E3.82.BB.E3.83.83.E3.83.88.E3.81.99.E3.82.8B"><code>element.focus()</code> と <code>setTimeout</code> を使用してフォーカスをセットする</h4>
+
+<p>要素にフォーカスを移すために <code><a href="ja/DOM/document.createEvent">createEvent()</a></code> および <code><a href="ja/DOM/event.initEvent">initEvent()</a></code>, <code><a href="ja/DOM/element.dispatchEvent">dispatchEvent()</a></code> を使用してはいけません。DOM フォーカスイベントは、何かがフォーカスされた後にシステムによって発生しますが、フォーカスのセットには使用されません。タイムアウトは、ユーザがボタンやその他のコントロールをクリックして予期しない動作を起こすスクリプトを防ぐために、IE と Firefox 1.5 の両方で必要です。要素をフォーカスする実際のコードは以下のようになります:</p>
+
+<pre><code>window.setTimeout(function () { focusItem.focus(); },0);  // focusItem はスコープ内になければいけません
+</code></pre>
+
+<h4 id=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.81.AE.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E4.BB.98.E3.81.91.E3.81.AB_:focus_.E3.81.BE.E3.81.9F.E3.81.AF.E5.B1.9E.E6.80.A7.E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E3.81.AF.E3.81.84.E3.81.91.E3.81.BE.E3.81.9B.E3.82.93" name=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.81.AE.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E4.BB.98.E3.81.91.E3.81.AB_:focus_.E3.81.BE.E3.81.9F.E3.81.AF.E5.B1.9E.E6.80.A7.E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E3.81.AF.E3.81.84.E3.81.91.E3.81.BE.E3.81.9B.E3.82.93">フォーカスのスタイル付けに <code><span class="nowiki">:focus</span></code> または属性セレクタを使用してはいけません</h4>
+
+<p>IE でフォーカスが表れるようにしたい場合、フォーカスのスタイル付けに <code><a href="ja/CSS/%3afocus">:focus</a></code> または属性セレクタを使用することはできません。<code><a href="ja/DOM/element.onfocus">onfocus</a></code> イベントハンドラ内でスタイルをセットしてください。例えば、<code><span class="nowiki">&lt;div&gt;</span></code> メニュー項目のフォーカスハンドラに <code><span class="nowiki">this.style.backgroundColor = "gray";</span></code> を追加します。</p>
+
+<h4 id=".E3.83.97.E3.83.AD.E3.82.B0.E3.83.A9.E3.83.A0.E7.9A.84.E3.81.AB.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.8F.97.E3.81.91.E3.81.9F_tabindex.3D.22-1.22_.E9.A0.85.E7.9B.AE.E3.81.8A.E3.82.88.E3.81.B3.E8.A6.81.E7.B4.A0.E3.81.AB.E3.81.AF.E3.81.84.E3.81.A4.E3.82.82.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E6.8F.8F.E3.81.8F" name=".E3.83.97.E3.83.AD.E3.82.B0.E3.83.A9.E3.83.A0.E7.9A.84.E3.81.AB.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.8F.97.E3.81.91.E3.81.9F_tabindex.3D.22-1.22_.E9.A0.85.E7.9B.AE.E3.81.8A.E3.82.88.E3.81.B3.E8.A6.81.E7.B4.A0.E3.81.AB.E3.81.AF.E3.81.84.E3.81.A4.E3.82.82.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E6.8F.8F.E3.81.8F">プログラム的にフォーカスを受けた <code>tabindex="-1"</code> 項目および要素にはいつもフォーカスを描く</h4>
+
+<p>IE はプログラム的にフォーカスを受けた項目には自動的にフォーカスの輪郭を描きません。<code>this.style.backgroundColor = "gray";</code> のようにして背景色を変更するか、<code>this.style.border = "1px dotted invert"</code> のように点線の境界線を追加するか、どちらかを選んでください。点線の境界線にする場合は、はじめに見えない 1px の境界線を要素に指定しておく必要があります。こうしておけば、境界線のスタイルが適用されたときに要素がずれることはありません。(境界線が空白をつくり、IE は CSS の輪郭を提供しません)</p>
+
+<h4 id=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.81.AE.E8.BF.BD.E8.B7.A1.E3.81.AB.E3.81.AF_onkeypress_.E3.81.A7.E3.81.AF.E3.81.AA.E3.81.8Fonkeydown_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.81.AE.E8.BF.BD.E8.B7.A1.E3.81.AB.E3.81.AF_onkeypress_.E3.81.A7.E3.81.AF.E3.81.AA.E3.81.8Fonkeydown_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B">キーイベントの追跡には <code>onkeypress</code> ではなく<code>onkeydown</code> を使用する</h4>
+
+<p>IE は英数字以外のキーで <code><a href="ja/DOM/window.onkeypress">keypress</a></code> イベントを発生させることができません。</p>
+
+<h4 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E6.A9.9F.E8.83.BD.E3.82.92.E5.AE.9F.E8.A1.8C.E3.81.99.E3.82.8B.E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.81.AE.E4.BD.BF.E7.94.A8.E3.82.92.E9.81.BF.E3.81.91.E3.82.8B" name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E6.A9.9F.E8.83.BD.E3.82.92.E5.AE.9F.E8.A1.8C.E3.81.99.E3.82.8B.E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.81.AE.E4.BD.BF.E7.94.A8.E3.82.92.E9.81.BF.E3.81.91.E3.82.8B">ブラウザの機能を実行するキーイベントの使用を避ける</h4>
+
+<p>矢印キーが使用される場合は、以下のようなコードで、キーを使用をする何か(スクロールなど) からブラウザを避けてください:</p>
+
+<pre class="eval"><span class="nowiki">&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;</span>
+</pre>
+
+<p><code>handleKeyDown()</code> が <code>false</code> を返す場合は、イベントは消費され、キー入力して実行する動作からブラウザを避けます。</p>
+
+<h4 id=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E8.A6.81.E7.B4.A0.E3.81.AE.E3.82.A2.E3.82.AF.E3.83.86.E3.82.A3.E3.83.99.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.82.92.E6.9C.89.E5.8A.B9.E3.81.AB.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6.E8.A6.81.E7.B4.A0.E3.81.AE.E3.82.A2.E3.82.AF.E3.83.86.E3.82.A3.E3.83.99.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.82.92.E6.9C.89.E5.8A.B9.E3.81.AB.E3.81.99.E3.82.8B">キーイベントハンドラを使用して要素のアクティベーションを有効にする</h4>
+
+<p>すべてのマウスイベントハンドラには、キーボードイベントハンドラが必要です。例えば、<code>onclick="doSomething()"</code> には、この要素を Enter キーでアクティベートできるようにするために、<code>onkeydown="return event.keyCode != 13 || doSomething();"</code> が必要です。</p>
+
+<h4 id="try.2Fcatch_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6_JavaScript_.E3.82.A8.E3.83.A9.E3.83.BC.E3.82.92.E5.9B.9E.E9.81.BF.E3.81.99.E3.82.8B" name="try.2Fcatch_.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.A6_JavaScript_.E3.82.A8.E3.83.A9.E3.83.BC.E3.82.92.E5.9B.9E.E9.81.BF.E3.81.99.E3.82.8B">try/catch を使用して JavaScript エラーを回避する</h4>
+
+<p>このシステムは現在、Opera および Safari、その他の Mozilla (1.7 およびそれ以前) の古いバージョンではサポートしていません。一部のブラウザは、すべての要素上の<code><a href="ja/DOM/element.tabIndex">tabIndex</a></code> プロパティのような新しい能力をサポートしていないため、適切な場所で try/catch を使用してください。DTHML によるキー操作システムをサポートしていないブラウザ上では、ウィジェットをマウスで利用できるようにしておくべきです。このシステムは Opera と Safari でのサポートが <a class="external" href="http://whatwg.org/">WHATWG</a> 仕様を通して計画されています。</p>
+
+<h4 id=".E3.82.AD.E3.83.BC.E3.83.AA.E3.83.94.E3.83.BC.E3.83.88.E3.81.AE.E6.8C.AF.E3.82.8B.E8.88.9E.E3.81.84.E3.81.AF.E4.B8.80.E8.B2.AB.E3.81.97.E3.81.A6.E3.81.84.E3.81.BE.E3.81.9B.E3.82.93" name=".E3.82.AD.E3.83.BC.E3.83.AA.E3.83.94.E3.83.BC.E3.83.88.E3.81.AE.E6.8C.AF.E3.82.8B.E8.88.9E.E3.81.84.E3.81.AF.E4.B8.80.E8.B2.AB.E3.81.97.E3.81.A6.E3.81.84.E3.81.BE.E3.81.9B.E3.82.93">キーリピートの振る舞いは一貫していません</h4>
+
+<p>困ったことに、<code><a href="ja/DOM/window.onkeydown">onkeydown</a></code> が繰り返されるかどうかは、あなたの起動している OS に依存します。Bugzilla データベースの {{ Bug(91592) }} をご覧ください。</p>
+
+<p>{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "fr": "fr/Contr\u00f4les_DHTML_personnalis\u00e9s_navigables_au_clavier" } ) }}</p>