Web/Accessibility/ARIA 以下の構造変更によるリンクの更新 (#26843)

Author: mfuji09

files/ja/glossary/accessible_description/index.md

@@ -13,7 +13,7 @@ l10n:
 
 {{htmlelement("table")}} のアクセシブル説明は最初の {{htmlelement("caption")}} であり、{{htmlelement("figure")}} のアクセシブル説明は {{htmlelement("figcaption")}} であり、{{htmlelement("summary")}} は、それを囲む {{htmlelement("details")}} のコンテンツのアクセシブル説明であり、ボタン型の {{htmlelement("input")}} 要素の場合は `value` 属性の値であり、要素に `aria-describedby` 属性または `aria-description` 属性がある場合はそちらが優先されます。
 
-他の要素では、説明を関連する要素にプログラム的に関連付ける必要があります。これらの場合、アクセシブル説明は [`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby) 属性、 [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性、[`title`](/ja/docs/Web/HTML/Reference/Global_attributes#title) 属性のいずれかによって指定されます。 `title` がその要素の{{glossary("accessible name", "アクセシブル名")}}でもない場合、優先順位の高い順に指定します。
+他の要素では、説明を関連する要素にプログラム的に関連付ける必要があります。これらの場合、アクセシブル説明は [`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby) 属性、 [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description) 属性、[`title`](/ja/docs/Web/HTML/Reference/Global_attributes#title) 属性のいずれかによって指定されます。 `title` がその要素の{{glossary("accessible name", "アクセシブル名")}}でもない場合、優先順位の高い順に指定します。
 
 説明はテキスト文字列に縮小されます。例えば、要素の `aria-describedby` 属性の値が HTML {{htmlelement("img")}} の `id` である場合、説明文は画像（通常は画像の `alt` 属性）の説明になります。
 

files/ja/learn_web_development/core/accessibility/wai-aria_basics/index.md

@@ -261,7 +261,7 @@ const intervalID = setInterval(showQuote, 10000);
 > [!NOTE]
 > 完成した例は [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) をご覧ください（もしくは[動作版をご覧ください](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)）。
 
-> **メモ:** [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) プロパティは、ライブリージョンが更新された際に何が読み上げられるかを制御するのに非常に役に立ちます。 例えば、追加や削除をされた内容だけを読み上げさせることもできます。
+> **メモ:** [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-relevant) プロパティは、ライブリージョンが更新された際に何が読み上げられるかを制御するのに非常に役に立ちます。 例えば、追加や削除をされた内容だけを読み上げさせることもできます。
 
 ### キーボードでのアクセシビリティの拡張
 
@@ -291,7 +291,7 @@ const intervalID = setInterval(showQuote, 10000);
 ```
 
 - [`role="alert"`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role) は、適用先の要素を自動的にライブリージョンにします。 すると、その要素に対する変更は読み上げられます。 また、その要素が警告メッセージ（重要であり、時間 / コンテキストの影響を受ける情報）なのだ、と意味論的に特定しています。 かつ、ユーザーに警告を伝える、よりアクセシビリティに優れたより良い方法も表現しています（[`alert()`](/ja/docs/Web/API/Window/alert) の呼び出しのようなモーダルダイアログには、いくつものアクセシビリティの問題があります。 WebAIM による [ポップアップウィンドウ](https://webaim.org/techniques/javascript/other#popups)（英語）を参照）。
-- [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) の `all` という値は、エラーリストに対して何らかの変更がなされた際には（つまり、エラーが追加または削除された際には）エラーリストの中身を読み上げるよう、スクリーンリーダーに命令するものです。これは有用です。 なぜなら、ユーザーは、リストに何が追加され、リストから何が削除されたのかを知りたいだけでなく、何のエラーが残っているのかを知りたいでしょうから。
+- [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-relevant) の `all` という値は、エラーリストに対して何らかの変更がなされた際には（つまり、エラーが追加または削除された際には）エラーリストの中身を読み上げるよう、スクリーンリーダーに命令するものです。これは有用です。 なぜなら、ユーザーは、リストに何が追加され、リストから何が削除されたのかを知りたいだけでなく、何のエラーが残っているのかを知りたいでしょうから。
 
 ARIA を使用して、更に先へ踏み込むこともできるでしょうし、なんらかの検査の手助けを更に提供することもできるでしょう。 そもそもフィールドが必須かどうかを示すことや、年齢がどの範囲にあるべきかを示すこと、などはいかがでしょうか？
 
@@ -303,7 +303,7 @@ ARIA を使用して、更に先へ踏み込むこともできるでしょうし
    <p>アスタリスク（*）が付いているフィールドは必須です。</p>
    ```
 
-4. これは視覚的に意味をなしますが、スクリーンリーダーのユーザーにとっては、理解するのがそれほど容易ではありません。 さいわい、WAI-ARIA には、フォーム入力欄を埋める必要があることをユーザーに伝えるべきだとスクリーンリーダーにヒントを与えるための、[`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性があります。 `<input>` 要素を次のように更新してください。
+4. これは視覚的に意味をなしますが、スクリーンリーダーのユーザーにとっては、理解するのがそれほど容易ではありません。 さいわい、WAI-ARIA には、フォーム入力欄を埋める必要があることをユーザーに伝えるべきだとスクリーンリーダーにヒントを与えるための、[`aria-required`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required) 属性があります。 `<input>` 要素を次のように更新してください。
 
    ```html
    <input type="text" name="name" id="name" aria-required="true" />
@@ -312,7 +312,7 @@ ARIA を使用して、更に先へ踏み込むこともできるでしょうし
    ```
 
 5. この例をここで保存してスクリーンリーダーでテストしてみれば、「Enter your name star, required, edit text（名前を入れてください　星、必須、テキストを編集）」のようなものを聞くことになるはずです。
-6. 年齢の値がどうあるべきかについて、スクリーンリーダーのユーザーと晴眼者のユーザーに知らせるのも、有用かもしれません。 これはツールチップとして提示されることがよくあり、あるいは、フォームのフィールド内部のプレースホルダーとして提示されることも、多分あります。 最小値と最大値を指定するための [`aria-valuemin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) プロパティと [`aria-valuemax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) プロパティを、WAI-ARIA は確かに含んではいますが、これらのプロパティは、今のところそれほどちゃんとサポートされてはいないようです。 よりちゃんとサポートされている機能は、HTML の `placeholder` 属性です。 これは、何の値も入力されていないときに入力欄の中に表示されるメッセージを含むことができ、多くのスクリーンリーダーにより読み上げられます。 数値入力欄を次のように更新してください。
+6. 年齢の値がどうあるべきかについて、スクリーンリーダーのユーザーと晴眼者のユーザーに知らせるのも、有用かもしれません。 これはツールチップとして提示されることがよくあり、あるいは、フォームのフィールド内部のプレースホルダーとして提示されることも、多分あります。 最小値と最大値を指定するための [`aria-valuemin`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemin) プロパティと [`aria-valuemax`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax) プロパティを、WAI-ARIA は確かに含んではいますが、これらのプロパティは、今のところそれほどちゃんとサポートされてはいないようです。 よりちゃんとサポートされている機能は、HTML の `placeholder` 属性です。 これは、何の値も入力されていないときに入力欄の中に表示されるメッセージを含むことができ、多くのスクリーンリーダーにより読み上げられます。 数値入力欄を次のように更新してください。
 
    ```html
    <label for="age">Your age:</label>
@@ -383,7 +383,7 @@ WAI-ARIA ロールを用いてこれを修正できます。 [`fake-div-buttons.
 
 #### 複雑なウィジェットを通じてユーザーを案内する
 
-他にも、標準的な HTML で利用可能なものを超える一般的な UI 機能として、意味的でない要素構造を特定できる [ロール](/ja/docs/Web/Accessibility/ARIA/Reference/Roles) が多数存在します。例えば [`combobox`](/ja/docs/Web/Accessibility/ARIA/Roles/combobox_role)、[`slider`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/slider_role)、[`tabpanel`](/ja/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)、[`tree`](/ja/docs/Web/Accessibility/ARIA/Roles/tree_role) などです。[Deque 大学コードライブラリー](https://dequeuniversity.com/library/)（英語）では、このようなコントロールをどのようにアクセシブルにできるかを示す有用な例を見ることができます。
+他にも、標準的な HTML で利用可能なものを超える一般的な UI 機能として、意味的でない要素構造を特定できる [ロール](/ja/docs/Web/Accessibility/ARIA/Reference/Roles) が多数存在します。例えば [`combobox`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role)、[`slider`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/slider_role)、[`tabpanel`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tabpanel_role)、[`tree`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tree_role) などです。[Deque 大学コードライブラリー](https://dequeuniversity.com/library/)（英語）では、このようなコントロールをどのようにアクセシブルにできるかを示す有用な例を見ることができます。
 
 わたしたち自身の事例を検討しましょう。 単純で、絶対的位置指定をした、タブ付きのインターフェイス（CSS と JavaScript のアクセシビリティの記事の、[ものごとを隠す](/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#ものごとを隠す) を参照）へと戻りましょう。 これは、[タブ付きの情報ボックスの例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html) を参照）の中に見つかります。
 
@@ -431,17 +431,17 @@ WAI-ARIA ロールを用いてこれを修正できます。 [`fake-div-buttons.
 
 ARIA 機能は次のように使われます。
 
-- 新たなロール — [`tablist`](/ja/docs/Web/Accessibility/ARIA/Roles/tablist_role)、[`tab`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role)、[`tabpanel`](/ja/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
+- 新たなロール — [`tablist`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)、[`tab`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role)、[`tabpanel`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tabpanel_role)
   - : これらは、タブのコンテナー、タブ自体、対応するタブパネルなど、タブ付きインターフェイスの重要な領域を識別します。
-- [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+- [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected)
   - : 今どのタブが選択されているのかを定めます。 別のタブがユーザーにより選択されると、その別のタブ上のこの属性の値が、 JavaScript を介して更新されます。
 - [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden)
   - : スクリーンリーダーに読み上げられないように、要素を隠します。 別のタブがユーザーにより選択されると、その別のタブ上のこの属性の値が、 JavaScript を介して更新されます。
 - `tabindex="0"`
   - : リンクを削除したので、リスト項目にキーボードフォーカスを与えるためには、リスト項目にこの属性を与える必要があります。
-- [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize)
+- [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-setsize)
   - : 要素が一連のもののうちの一部なのだということと、その一連のものの中にいくつの項目があるのかということを、スクリーンリーダーに対して指定することが、このプロパティによって可能となります。
-- [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset)
+- [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-posinset)
   - : このプロパティは、要素が一連のものの中でどの位置にあるかを指定します。 `aria-setsize` とともに、スクリーンリーダーに現在アイテム「3 分の 1」などにいることを指示するのに十分な情報を提供します。多くの場合、ブラウザーは要素の階層構造からこの情報を推測できるはずですが、より多くの手がかりを提供するのに役立つことは確かです。
 
 わたしたちの検査では、この新たな構造は、物事を全体的に改善するのに確かに役立ちました。 今や、タブはタブとして認識されます（例えば、スクリーンリーダーが「タブ」と話します）し、選択されたタブは、そのタブ名で読み上げられて「選択中」と示されますし、スクリーンリーダーは、どのタブ番号のところに今いるのかということも教えてくれます。 さらに、 `aria-hidden` の設定（まさに隠されていないタブのみに、 `aria-hidden="false"` と設定されている）のおかげで、隠されていないコンテンツのみが、ナビゲートして下ってゆける唯一のコンテンツとなっており、このことは、選択されたコンテンツを見つけやすくなったことを意味します。

files/ja/learn_web_development/core/css_layout/practical_positioning_examples/index.md

@@ -183,7 +183,7 @@ body {
 }
 ```
 
-次に、 [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) プロパティが `true` に設定されているタブを強調表示するルールを適用します。これは、タブがクリックされた際に JavaScript で設定します。以下の CSS を、他のスタイルのすぐ下に配置します。
+次に、 [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected) プロパティが `true` に設定されているタブを強調表示するルールを適用します。これは、タブがクリックされた際に JavaScript で設定します。以下の CSS を、他のスタイルのすぐ下に配置します。
 
 ```css
 .info-box [role="tab"][aria-selected="true"] {
@@ -444,7 +444,7 @@ button.addEventListener("click", () => {
 ```
 
 このコードは、ボタンにクリックイベントハンドラーを追加します。クリックハンドラーは、 `open` クラスを情報ボックスパネル上で切り替えます。これにより、パネルがビューにスライドインまたはスライドアウトします。
-イベントハンドラーは、アクセシビリティを向上させるために、 [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) プロパティをボタンに設定します。
+イベントハンドラーは、アクセシビリティを向上させるために、 [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded) プロパティをボタンに設定します。
 
 以上です。トグル式の情報パネル効果を作成する最も簡単な方法です。
 

files/ja/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md

@@ -80,7 +80,7 @@ l10n:
 
 ## ARIA ロール属性
 
-既定、 HTML の意味を持つすべての要素はロール ([`role`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles)) を持っています。例えば、 `<input type="radio">` は `radio` ロールを持ちます。 HTML の意味を持たない要素はロールを持ちません。 ARIA ロールは、 [`tablist`](/ja/docs/Web/Accessibility/ARIA/Roles/tablist_role) ウィジェットのように、 HTML にネイティブに存在しない要素を記述するために使用することができます。ロールはまた、存在するがまだブラウザーの完全な対応をしていない新しい要素にも役立ちます。例えば、 SVG 画像を使用する場合、開始タグに `role="img"` を追加してください。 [SVG VoiceOver のバグ](https://webkit.org/b/216364) があり、 VoiceOver は SVG 画像を正しくアナウンスできないからです。
+既定、 HTML の意味を持つすべての要素はロール ([`role`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles)) を持っています。例えば、 `<input type="radio">` は `radio` ロールを持ちます。 HTML の意味を持たない要素はロールを持ちません。 ARIA ロールは、 [`tablist`](/ja/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role) ウィジェットのように、 HTML にネイティブに存在しない要素を記述するために使用することができます。ロールはまた、存在するがまだブラウザーの完全な対応をしていない新しい要素にも役立ちます。例えば、 SVG 画像を使用する場合、開始タグに `role="img"` を追加してください。 [SVG VoiceOver のバグ](https://webkit.org/b/216364) があり、 VoiceOver は SVG 画像を正しくアナウンスできないからです。
 
 ```html
 <img src="mdn.svg" alt="MDN logo" role="img" />

files/ja/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md

@@ -172,7 +172,7 @@ l10n:
       <th scope="row">許可されている ARIA ロール</th>
       <td>
         この要素に設定可能な ARIA ロールの一覧を記入します。例えば
-        <a href="/ja/docs/Web/Accessibility/ARIA/Roles/directory_role"><code>directory</code></a>。
+        <a href="/ja/docs/Web/Accessibility/ARIA/Reference/Roles/directory_role"><code>directory</code></a>。
       </td>
     </tr>
     <tr>