2024/07/26 時点の英語版に基づき更新

mdn · Sep 23, 2024 · feecdc4 · feecdc4
1 parent e711f8b
commit feecdc4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/files/ja/web/css/scrollbar-color/index.md b/files/ja/web/css/scrollbar-color/index.md
@@ -1,6 +1,8 @@
 ---
 title: scrollbar-color
 slug: Web/CSS/scrollbar-color
+l10n:
+  sourceCommit: 9231a7046973685f4600e1891fa644ecce41ef3b
 ---
 
 {{CSSRef}}
@@ -11,7 +13,7 @@ slug: Web/CSS/scrollbar-color
 
 **つまみ**はスクロールバーの動く部分で、ふつうはトラックの上を動きます。
 
-{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}
+`scrollbar-color` の値がドキュメントのルート要素に設定されている場合、その値はビューポートのスクロールバーに適用されます。
 
 ## 構文
 
@@ -27,6 +29,7 @@ scrollbar-color: rebeccapurple green; /* 二つの有効な色。
 scrollbar-color: inherit;
 scrollbar-color: initial;
 scrollbar-color: revert;
+scrollbar-color: revert-layer;
 scrollbar-color: unset;
 ```
 
@@ -53,10 +56,9 @@ scrollbar-color: unset;
       </tbody>
     </table>
 
-    > [!NOTE]
-    > ユーザーエージェントはビューポートのルート要素に、何らかの `scrollbar-color` の値を適用しなければなりません。
+> **メモ:** [`@media (forced-colors: active)`](/ja/docs/Web/CSS/@media/forced-colors) とすると、`scrollbar-color` が `auto` になります。
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
 `scrollbar-color` プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを保証してください。 [Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1](https://www.w3.org/TR/WCAG20-TECHS/G183.html) を参照してください。
 
@@ -79,7 +81,7 @@ scrollbar-color: unset;
   width: 300px;
   height: 100px;
   overflow-y: scroll;
-  scrollbar-color: rebeccapurple green;
+  scrollbar-color: #007 #bada55;
 }
 ```
 
@@ -109,5 +111,8 @@ scrollbar-color: unset;
 
 ## 関連情報
 
-- [`scrollbar-width`](/ja/docs/Web/CSS/scrollbar-width)
-- [`overflow`](/ja/docs/Web/CSS/overflow)
+- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_overflow)モジュール
+- [CSS スクロールバースタイル設定](/ja/docs/Web/CSS/CSS_scrollbars_styling)モジュール
+- {{CSSxRef("overflow")}}
+- {{CSSxRef("scrollbar-gutter")}}
+- {{CSSxRef("scrollbar-width")}}
diff --git a/files/ja/web/css/scrollbar-width/index.md b/files/ja/web/css/scrollbar-width/index.md
@@ -1,14 +1,14 @@
 ---
 title: scrollbar-width
 slug: Web/CSS/scrollbar-width
+l10n:
+  sourceCommit: fc1cc5684c98d19816d5cc81702d70f2a0debbad
 ---
 
 {{CSSRef}}
 
 **`scrollbar-width`** プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。
 
-{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}
-
 ## 構文
 
 ```css
@@ -21,12 +21,13 @@ scrollbar-width: none;
 scrollbar-width: inherit;
 scrollbar-width: initial;
 scrollbar-width: revert;
+scrollbar-width: revert-layer;
 scrollbar-width: unset;
 ```
 
 ### 値
 
-- _\<scrollbar-width>_
+- `<scrollbar-width>`
 
   - : スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。
 
@@ -52,14 +53,14 @@ scrollbar-width: unset;
     > [!NOTE]
     > ユーザーエージェントは、ビューポートのルート要素に何らかの `scrollbar-width` の値を設定する必要があります。
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
 このプロパティは注意して使用してください。 — `scrollbar-width` を `thin` または `none` に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。
 
 WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。
 
-- [MDN WCAG の理解、ガイドライン 2.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.1_%E2%80%94_keyboard_accessible_make_all_functionality_available_from_a_keyboard)
-- [MDN WCAG の理解、ガイドライン 2.5 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.5_input_modalities_make_it_easier_for_users_to_operate_functionality_through_various_inputs_beyond_keyboard.s/)
+- [MDN WCAG の理解、ガイドライン 2.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#ガイドライン_2.1_—_キーボードアクセス可能_キーボードから全ての機能を利用可能にする)
+- [MDN WCAG の理解、ガイドライン 2.5 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#ガイドライン_2.5_—_入力様式_キーボードを超えた様々な入力を通して機能をユーザーが操作しやすくする)
 - [Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
 - [Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
 
@@ -112,5 +113,8 @@ WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボード
 
 ## 関連情報
 
-- {{CSSxRef("-ms-overflow-style")}}
-- {{CSSxRef("::-webkit-scrollbar")}}
+- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_overflow)モジュール
+- [CSS スクロールバースタイル設定](/ja/docs/Web/CSS/CSS_scrollbars_styling)モジュール
+- {{CSSxRef("overflow")}}
+- {{CSSxRef("scrollbar-gutter")}}
+- {{CSSxRef("scrollbar-color")}}