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

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

源順序獨(dú)立性

“源順序獨(dú)立性”是 CSS Grid 強(qiáng)大優(yōu)勢之一。這意味著你不需要像使用 float 或者表格布局那樣，在 HTML 中定義布局結(jié)構(gòu)。你可以使用 CSS Grid 的排序和網(wǎng)格位置屬性改變 HTML 呈現(xiàn)的視覺效果。

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

“通過將網(wǎng)格布局與媒體查詢相結(jié)合，開發(fā)者可以使用相同的語義標(biāo)記，但是元素布局的重新排列是脫離源代碼順序而獨(dú)立存在的，這樣就可以同時(shí)在源代碼順序和渲染出的視覺效果兩個(gè)方面實(shí)現(xiàn)需要的布局。”

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

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

能改變視覺順序的屬性

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

order —— 在 flexbox 和 CSS Grid 規(guī)則中都有 order 屬性。它可以改變 flex 或者 grid 容器中項(xiàng)目的默認(rèn)排序。

網(wǎng)格位置屬性 —— grid-row-start，grid-row-end，grid-column-start，grid-column-end。

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

grid-template-areas —— 指定已命名的網(wǎng)格區(qū)的位置。

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

視覺效果與邏輯的重排序

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

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

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

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

在下面這個(gè)圖中，你可以看到最終的視覺效果，其中 Link 1 被加上了一些特殊樣式以便突出說明。普通的用戶將會(huì)首先看到 Link 2，但是使用屏幕閱讀器的用戶將會(huì)從 Link 1 開始，因?yàn)樗麄冏駨牡氖?HTML 代碼中定義的邏輯順序。

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

解決方案

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

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

你不需要在 CSS 中為 .item-1 添加任何關(guān)于 Grid 的屬性。因?yàn)槟阋膊挥酶淖兡J(rèn)的源代碼順序了，那么你只需要為網(wǎng)格容器定義屬性即可。

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

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

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

這里有幾個(gè)通用的布局模版，你可以讓使用 CSS Grid 重排序?qū)傩缘拇a可訪問性更高。例如，“圣杯布局”就是這樣一種模式。它包括一個(gè)頭部，一個(gè)主要內(nèi)容區(qū)域，一個(gè)頁腳，還有兩個(gè)固定寬度的側(cè)邊欄，它們倆一個(gè)在左一個(gè)在右。

左邊欄布局可能會(huì)為使用屏幕閱讀器的用戶造成困惑。因?yàn)樽筮厵谠谠创a順序要要比主要內(nèi)容區(qū)域靠前，而它則是使用屏幕閱讀器的用戶最先看到的內(nèi)容。但是，通常情況下，使用屏幕閱讀器的用戶開始閱讀的位置最好是主要內(nèi)容。特別是當(dāng)左邊欄主要包括的其實(shí)是廣告，博客目錄，標(biāo)簽云，或者其他一些不相關(guān)的內(nèi)容。

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

HeaderMain content Left sidebar Right sidebar Footer

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

下面的代碼是最簡單的解決方案，因?yàn)樗皇菫橐曈X順序和源代碼順序不同的元素添加了幾個(gè)額外的規(guī)則。CSS Grid 有優(yōu)秀的自動(dòng)排列功能，能夠把余下的網(wǎng)格元素搞定。

.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 讓 和 區(qū)域橫跨整個(gè)屏幕(三列)，然后 grid-area(grid-row 和 grid-column 的簡寫)固定了左邊欄的位置。如下就是使用這些樣式后的樣子：

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

語義丟失怎么辦

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

加入你想要?jiǎng)?chuàng)建一個(gè)元素展覽墻(比如圖片墻)，在這里，元素按照網(wǎng)格排列并被一個(gè)頭部和一個(gè)頁腳包圍。如下是帶語義的標(biāo)簽寫法：

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

但是如果你想要使用 CSS Grid， 應(yīng)該作為網(wǎng)格容器，

、

和

• 是網(wǎng)格元素。但是，列表內(nèi)的元素不被包括在網(wǎng)格內(nèi)，因?yàn)樗麄兪蔷W(wǎng)格容器子元素的子元素。

所以，如果你想要快速的完成工作，將布局結(jié)構(gòu)扁平化也許是一個(gè)不錯(cuò)的主意，也就是讓所有的元素都作為網(wǎng)格容器的子元素：

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

現(xiàn)在，你就可以很輕松地使用 CSS Grid 創(chuàng)建出想要的布局：

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

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

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

被破壞的語義也會(huì)讓搜索引擎很難明白你的內(nèi)容；

如果用戶在禁用 CSS 的時(shí)候訪問你的內(nèi)容(例如，網(wǎng)速不佳的時(shí)候)，在瀏覽頁面時(shí)可能會(huì)很困惑，因?yàn)樗麄冎豢吹揭幌盗胁幌嚓P(guān)的 div。

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

解決方案

目前的解決方案通過為未排序的列表添加了 CSS 規(guī)則，創(chuàng)建出了嵌套的網(wǎng)格。

.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;}

在如下例子中，你可以看到嵌套的網(wǎng)格和父級(jí)網(wǎng)格是如何關(guān)聯(lián)的。元素按照期望的樣子排列出來了，但是此時(shí)，文檔始終保留著它的語義。

總結(jié)

簡單的 CSS Grid 布局可能不會(huì)導(dǎo)致可訪問性的問題。但是當(dāng)你想要改變視覺順序或者創(chuàng)建多層網(wǎng)格的時(shí)候，問題就可能暴露出來。解決這些問題通常不會(huì)很麻煩，所以這樣做來修復(fù)那些可訪問性問題是很值得的，因?yàn)檫@樣你能夠讓那些使用輔助工具的用戶更易讀懂你的內(nèi)容。

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

與50位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。