稿件來源：阿里云開發者社區(點擊下面“了解更多”查看原文)

CSS Grid 可以將元素放入有行和列的網格中，從而讓創建二維布局成為可能。有了它，你可以自定義網格的任何形態，例如網格寬高、網格范圍、或者網格之間的間隙。但是，CSS Grid 可能會有訪問性不佳的問題，尤其是對于那些使用屏幕閱讀器和僅使用鍵盤的用戶。本篇教程將會幫助你避免此類問題。

源順序獨立性

“源順序獨立性”是 CSS Grid 強大優勢之一。這意味著你不需要像使用 float 或者表格布局那樣，在 HTML 中定義布局結構。你可以使用 CSS Grid 的排序和網格位置屬性改變 HTML 呈現的視覺效果。

W3C 的 CSS Grid 文檔中的重排序和可訪問性章節，將源順序獨立性定義為：

“通過將網格布局與媒體查詢相結合，開發者可以使用相同的語義標記，但是元素布局的重新排列是脫離源代碼順序而獨立存在的，這樣就可以同時在源代碼順序和渲染出的視覺效果兩個方面實現需要的布局。”

使用 CSS Grid，你可以將邏輯順序和視覺順序解耦。源順序獨立性在很多時候都非常有用，但是它也有可能會破壞代碼的可訪問性。使用屏幕閱讀器和鍵盤的用戶都只能看到你 HTML 文件的代碼邏輯順序，但是無法看到通過 CSS Grid 創建出來的視覺順序。

如果你的文檔很簡單，這通常不是什么大問題，因為這時候源代碼邏輯順序和視覺順序基本是一致的。但是，比較復雜、不對稱、零散，或者使用了其他創意布局的文件通常就會對使用屏幕閱讀器或者鍵盤的用戶造成困惑。

能改變視覺順序的屬性

CSS Grid 有很多可以改變文檔視覺順序的屬性：

order —— 在 flexbox 和 CSS Grid 規則中都有 order 屬性。它可以改變 flex 或者 grid 容器中項目的默認排序。

網格位置屬性 —— grid-row-start，grid-row-end，grid-column-start，grid-column-end。

上述網格位置屬性的簡寫 —— grid-row，grid-column，和 grid-area(它是 grid-row 和 grid-column 的簡寫)。

grid-template-areas —— 指定已命名的網格區的位置。

如果你想知道更多關于網格位置屬性的使用方法，可以看看我們之前關于網格區域的文章。現在，讓我們看看視覺重排序是如何造成代碼可訪問性的問題的。

視覺效果與邏輯的重排序

這是一個簡單的網格布局，只有幾個簡單的鏈接，所以你可以使用鍵盤測試代碼：

Link 1 Link 2 Link 3 Link 4 Link 5 Link 6

現在我們再加入一些樣式。下面的 CSS 代碼將網格元素放入了三個寬度相同的列中。使用 grid-row 屬性，第一個元素被移動到了第二行的開始。

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.625rem;} .item-1 { grid-row: 2;}

在下面這個圖中，你可以看到最終的視覺效果，其中 Link 1 被加上了一些特殊樣式以便突出說明。普通的用戶將會首先看到 Link 2，但是使用屏幕閱讀器的用戶將會從 Link 1 開始，因為他們遵從的是 HTML 代碼中定義的邏輯順序。

對于純鍵盤使用者，使用 tab 鍵瀏覽頁面也同樣困難，因為這樣依舊會從 Link 1 開始，也就是頁面的左下角(你可以自己嘗試一下)。

解決方案

解決方案非常簡單優雅。不要改變視覺順序，你只需要將 Link 1 移動到 HTML 文件的下面。這樣，源代碼順序和視覺順序就一致了。

Link 2 Link 3 Link 4 Link 1 Link 5 Link 6

你不需要在 CSS 中為 .item-1 添加任何關于 Grid 的屬性。因為你也不用改變默認的源代碼順序了，那么你只需要為網格容器定義屬性即可。

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.625rem;}

看，盡管這個例子最終結果和以前一樣，現在它的可訪問性更高了。使用 tab 或者屏幕閱讀器都會從 Link 2 開始，邏輯上也遵循源代碼順序。

如何讓布局的可訪問性更好

這里有幾個通用的布局模版，你可以讓使用 CSS Grid 重排序屬性的代碼可訪問性更高。例如，“圣杯布局”就是這樣一種模式。它包括一個頭部，一個主要內容區域，一個頁腳，還有兩個固定寬度的側邊欄，它們倆一個在左一個在右。

左邊欄布局可能會為使用屏幕閱讀器的用戶造成困惑。因為左邊欄在源代碼順序要要比主要內容區域靠前，而它則是使用屏幕閱讀器的用戶最先看到的內容。但是，通常情況下，使用屏幕閱讀器的用戶開始閱讀的位置最好是主要內容。特別是當左邊欄主要包括的其實是廣告，博客目錄，標簽云，或者其他一些不相關的內容。

CSS Grid 允許你改變 HTML 文件的源代碼順序，并將主要內容放在兩個側邊欄前面：

HeaderMain content Left sidebar Right sidebar Footer

還有一些其他可用的解決方案，來使用 CSS Grid 定義視覺順序的改變。大部分教程都會使用命名的網格區域，并使用 grid-template-areas 屬性對它們進行重排列。

下面的代碼是最簡單的解決方案，因為它只是為視覺順序和源代碼順序不同的元素添加了幾個額外的規則。CSS Grid 有優秀的自動排列功能，能夠把余下的網格元素搞定。

.container { display: grid; grid-template-columns: 9.375rem 1fr 9.375rem; grid-gap: 0.625rem;}header, footer { grid-column: 1 / span 3;}.left-sidebar { grid-area: 2 / 1;}

這樣，grid-column 讓 和 區域橫跨整個屏幕(三列)，然后 grid-area(grid-row 和 grid-column 的簡寫)固定了左邊欄的位置。如下就是使用這些樣式后的樣子：

盡管圣杯布局是一個相對簡單的布局，你還可以使用相同的邏輯來完成一些更復雜的布局。要始終牢記頁面的哪個部分是最重要的，哪部分是使用屏幕閱讀器的用戶在看到其他內容之前可能最想看的。

語義丟失怎么辦

某些情況下，CSS Grid 也會對語義造成破壞；這也是影響可訪問性的一個方面。由于 display: grid; 布局僅被元素的直接子元素繼承，網格元素的子元素其實就不是網格布局的一部分了。為了節省工作量，開發者也許認為將布局扁平化是一個不錯的解決方案，所以他們就將所有希望包括在網格布局內的元素都作為網格容器的直接子元素。但是，如果一個布局被認為的扁平化了，文件的語義通常也就丟失了。

加入你想要創建一個元素展覽墻(比如圖片墻)，在這里，元素按照網格排列并被一個頭部和一個頁腳包圍。如下是帶語義的標簽寫法：

HeaderItem 1 Item 2 Item 3 Item 4 Item 5 Item 6 Footer

但是如果你想要使用 CSS Grid， 應該作為網格容器，

、

和

• 是網格元素。但是，列表內的元素不被包括在網格內，因為他們是網格容器子元素的子元素。

所以，如果你想要快速的完成工作，將布局結構扁平化也許是一個不錯的主意，也就是讓所有的元素都作為網格容器的子元素：

HeaderItem 1 Item 2 Item 3 Item 4 Item 5 Item 6 Footer

現在，你就可以很輕松地使用 CSS Grid 創建出想要的布局：

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.625rem;}header,footer { grid-column: 1 / span 3;}

一切看上去都非常好，但是文檔已經丟失了它最初的語義，所以：

使用屏幕閱讀器的用戶無法知道元素之間的關系，也無法知道它們其實是列表的一部分(大部分的屏幕閱讀器都會通知用戶列表元素的數量)；

被破壞的語義也會讓搜索引擎很難明白你的內容；

如果用戶在禁用 CSS 的時候訪問你的內容(例如，網速不佳的時候)，在瀏覽頁面時可能會很困惑，因為他們只看到一系列不相關的 div。

最重要的規則是，你絕對不能為了看上去好看而放棄語義。

解決方案

目前的解決方案通過為未排序的列表添加了 CSS 規則，創建出了嵌套的網格。

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.625rem;}.container > * { grid-column: 1 / span 3;}ul { display: inherit; grid-template-columns: inherit; grid-gap: inherit;}

在如下例子中，你可以看到嵌套的網格和父級網格是如何關聯的。元素按照期望的樣子排列出來了，但是此時，文檔始終保留著它的語義。

總結

簡單的 CSS Grid 布局可能不會導致可訪問性的問題。但是當你想要改變視覺順序或者創建多層網格的時候，問題就可能暴露出來。解決這些問題通常不會很麻煩，所以這樣做來修復那些可訪問性問題是很值得的，因為這樣你能夠讓那些使用輔助工具的用戶更易讀懂你的內容。

稿件來源：阿里云開發者社區(點擊下面“了解更多”查看原文)

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。