2024/06/22 時点の英語版に基づき更新

files/ja/web/css/css_grid_layout/grid_layout_and_accessibility/index.md

@@ -9,7 +9,7 @@ l10n:
 
 ウェブ制作に長年携わってきた人なら、 CSS グリッドは「レイアウトのための表」と少し似ていると思うかもしれません。ウェブデザインの黎明期には、 HTML の表を使ってページのレイアウトを構築し、表のセルにデザインを分割してレイアウトを作成していました。この方法は、その後に登場した「CSS 位置指定」に比べて、表表示による位置合わせと一定の高さの列を利用できるという利点がありました。しかし、最大の欠点は、デザインとマークアップを結びつけてしまうことで、アクセシビリティの問題が発生しやすくなることでした。デザインを表にレイアウトするために、例えばスクリーンリーダーで読み上げたときに全く意味をなさない方法でコンテンツを分割することがよくありました。
 
-CSS に移行する際に、 CSS についてはコンテンツとマークアップと表現を分離するレイアウトができることをよく話していました。最終的な目的は、意味的にしっかりと構造化された文書を作成し、CSS を適用して希望のレイアウトを作成することです。 [CSS Zen Garden](http://www.csszengarden.com/) のようなサイトがこの能力を示しています。 CSS Zen Garden では、同一のマークアップを、 CSS を使って独自のデザインに仕上げることに挑戦しました。
+CSS に移行する際に、 CSS についてはコンテンツとマークアップと表現を分離するレイアウトができることをよく話していました。最終的な目的は、意味的にしっかりと構造化された文書を作成し、CSS を適用して希望のレイアウトを作成することです。 [CSS Zen Garden](https://www.csszengarden.com/) のようなサイトがこの能力を示しています。 CSS Zen Garden では、同一のマークアップを、 CSS を使って独自のデザインに仕上げることに挑戦しました。
 
 [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)では、テーブルのような問題はなく、グリッド構造はマークアップではなく CSS で定義されます。要素を追加する必要があれば、意味的には何の意味もないものを使うことができます。グリッドは、マークアップからコンテンツを分離するという約束を適切に果たすのに役立つと考えられますが、この考えは行き過ぎではないのでしょうか。グリッドを使用することで、アクセシビリティの問題を引き起こす可能性はないのでしょうか。
 
@@ -95,11 +95,11 @@ CSS に移行する際に、 CSS についてはコンテンツとマークア
 
 ## グリッドとマークアップの平坦化の危険性
 
-CSS グリッドレイアウトや CSS フレックスボックスで注意しなければならないもう一つの問題は、マークアップを平坦にしようとする誘惑です。これまで述べてきたように、アイテムがグリッドアイテムになるためには、グリッドコンテナの直接の子である必要があります。したがって、グリッドコンテナー内に {{HTMLElement("ul")}} 要素がある場合、子要素の {{HTMLElement("li")}} ではなく、その `ul` 要素がグリッドアイテムになります。
+CSS グリッドレイアウトや CSS フレックスボックスで注意しなければならないもう一つの問題は、マークアップを平坦にしようとする誘惑です。これまで述べてきたように、アイテムがグリッドアイテムになるためには、グリッドコンテナーの直接の子である必要があります。したがって、グリッドコンテナー内に {{HTMLElement("ul")}} 要素がある場合、子要素の {{HTMLElement("li")}} ではなく、その `ul` 要素がグリッドアイテムになります。
 
 [サブグリッド](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid) の `grid-template-columns` と `grid-template-rows` の値は、広く実装されればこの問題を解決します。これにより、グリッドがグリッドアイテムに継承され、ツリーに引き継がれるようになります。
 
-サブグリッドの相互運用の対応が限られていることから、 CSS グリッドレイアウトを使用したサイトを開発する際には、レイアウトをより簡単に作成するために、マークアップを平坦にしたり、意味的な要素を削除したりしようとする誘惑に駆られることがあります。例えば、あるコンテンツが意味的にはリストとしてマークアップされていたが、代わりに {{HTMLElement("div")}} 要素のセットを使用すれば、 `display: grid` に設定されたコンテナの直接の子要素とすることができるからです。この誘惑に気をつけて、マークアップを削除することなくデザインを発展させる方法を見つけてください。実際に文書に入ってそうしなければならない場合、レイアウトを機能させるために意味的な要素を削除していることに気づくでしょうから、きちんと構造化された文書から始めることは、この問題を避けるとても良い方法です。
+サブグリッドの相互運用の対応が限られていることから、 CSS グリッドレイアウトを使用したサイトを開発する際には、レイアウトをより簡単に作成するために、マークアップを平坦にしたり、意味的な要素を削除したりしようとする誘惑に駆られることがあります。例えば、あるコンテンツが意味的にはリストとしてマークアップされていたが、代わりに {{HTMLElement("div")}} 要素のセットを使用すれば、 `display: grid` に設定されたコンテナーの直接の子要素とすることができるからです。この誘惑に気をつけて、マークアップを削除することなくデザインを発展させる方法を見つけてください。実際に文書に入ってそうしなければならない場合、レイアウトを機能させるために意味的な要素を削除していることに気づくでしょうから、きちんと構造化された文書から始めることは、この問題を避けるとても良い方法です。
 
 ## 参考資料