這里沒(méi)有真正的介紹。亞馬遜不僅是我們?cè)S多人的家用主食，而且由于其無(wú)處不在的亞馬遜網(wǎng)絡(luò)服務(wù)平臺(tái)，它還為網(wǎng)絡(luò)的很大一部分提供了動(dòng)力。

這里有很多事情正在發(fā)生，所以我將探索在找到產(chǎn)品并假裝購(gòu)買(mǎi)產(chǎn)品時(shí)所吸引的無(wú)風(fēng)格的東西。

在主頁(yè)上，我立即看到該網(wǎng)站使用的精靈表。它確實(shí)代替了徽標(biāo)的位置，因此很難知道這些圖像是否旨在存在。每個(gè)精靈都包含多個(gè)版本的徽標(biāo)，即使我可以看到其中的“亞馬遜”單詞標(biāo)記，但令人驚訝的是，它不是全球家庭鏈接。如果您很好奇家庭鏈接的真正位置，就是這種跨度結(jié)構(gòu)，徽標(biāo)被用作背景圖像……在CSS中：

 <a href="%E2%80%9C/ref" nav_logo aria-label="“" amazon tabindex="“">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

出現(xiàn)的下一個(gè)問(wèn)題是“跳到主內(nèi)容”鏈接看起來(lái)不像典型的跳過(guò)鏈接，但它的工作方式像一個(gè)鏈接。事實(shí)證明，它是沒(méi)有HREF的元素，而JavaScript（是的，我確實(shí)離開(kāi)了該啟用）來(lái)模仿錨點(diǎn)功能。

當(dāng)我開(kāi)始搜索時(shí)，我必須在“入門(mén)”鏈接下方進(jìn)一步查看建議。在“您的列表”和“您的帳戶(hù)”項(xiàng)目下，很難區(qū)分鏈接。它們似乎都串在一起，好像它們是一個(gè)超長(zhǎng)的大型鏈接一樣。我相信，在這種情況下，使用語(yǔ)義無(wú)序列表來(lái)保持層次結(jié)構(gòu)會(huì)更有效。

但是，在所有這些搜索建議下，帳戶(hù)和導(dǎo)航鏈接易于閱讀，因?yàn)樗鼈儽荒承┛臻g分開(kāi)。

有趣的是，頁(yè)面下方的輪播仍然有效。如果我單擊“上一頁(yè)”或“下一頁(yè)”選項(xiàng)，則更改圖像的順序。但是，在這些選項(xiàng)之間跳躍需要我滾動(dòng)。

進(jìn)一步跳下來(lái)，有一個(gè)廣告元素。它包含一個(gè)“廣告反饋”字符串，看起來(lái)像我們?cè)凇疤^(guò)到主內(nèi)容”鏈接的“跳過(guò)到主內(nèi)容”鏈接中所看到的那樣。好吧，我無(wú)論如何都單擊了它，它揭示了一種表格，以分享有關(guān)廣告相關(guān)性的反饋。

您可能已經(jīng)錯(cuò)過(guò)了它，但是兩組標(biāo)簽上方有一個(gè)空白按鈕，并且收音機(jī)按鈕不合適。結(jié)構(gòu)令人困惑，因?yàn)槲也恢滥膫€(gè)標(biāo)簽屬于哪個(gè)無(wú)線(xiàn)電按鈕。我的意思是，我想我可以假設(shè)第一個(gè)標(biāo)簽與第一個(gè)無(wú)線(xiàn)電輸入有關(guān)，但這正是這樣：一個(gè)猜測(cè)。

令人困惑的是，在表單底部的“關(guān)閉窗口”，“取消”和“發(fā)送反饋”選項(xiàng)之間存在提交按鈕。如果我按其中任何一個(gè)，我會(huì)回到廣告中?，F(xiàn)在，假設(shè)我是盲目的，即使存在CSS，也使用屏幕讀取器來(lái)導(dǎo)航相同的部分。我會(huì)被告知兩個(gè)按鈕的“提交，按鈕”，因此在不猜測(cè)的情況下將零知道該怎么做。這是關(guān)于語(yǔ)義在處理標(biāo)記時(shí)的重要性的另一個(gè)好提醒（在這種情況下按鈕標(biāo)簽），并注意在JavaScript上放置多少依賴(lài)以覆蓋Web默認(rèn)值。

進(jìn)行搜索 - 假設(shè)“ Mac Minis” - 我仍然可以訪(fǎng)問(wèn)和理解產(chǎn)品評(píng)分，因?yàn)樗鼈儽伙@示為文本（代替了它們本來(lái)是其他工具提示）代替恒星。這是一個(gè)很好的例子，當(dāng)圖像用作視覺(jué)內(nèi)容時(shí)，使用堅(jiān)實(shí)的文本回退，但在CSS中被用作背景圖像。

選擇Mac Mini使用Intel Core i3選擇了我選擇的產(chǎn)品上方的其他Mac產(chǎn)品，并且必須超越它們以選擇我要購(gòu)買(mǎi)的數(shù)量。

向下滾動(dòng)，并在帶有相同內(nèi)容的標(biāo)簽旁邊顯示一個(gè)“添加到購(gòu)物車(chē)”按鈕。這是多余的，可能是不必要的，因?yàn)?button>元素能夠持有自己的標(biāo)簽：

 添加到購(gòu)物車(chē)

接下來(lái)，我們將提供亞馬遜優(yōu)勢(shì)會(huì)員資格的報(bào)價(jià)。這一切都很好，但是請(qǐng)注意，它是在我購(gòu)買(mǎi)的產(chǎn)品和“立即購(gòu)買(mǎi)”按鈕之間插入的。我很難知道單擊“立即購(gòu)買(mǎi)”是否會(huì)添加Mac mini來(lái)結(jié)帳，還是我是購(gòu)買(mǎi)Amazon Prime。

我還想玩一些，所以一旦我弄清楚了如何添加它，我就嘗試從購(gòu)物車(chē)中刪除Mac mini。我花了大約十秒鐘的時(shí)間來(lái)找到購(gòu)物車(chē)，所以我可以編輯它。事實(shí)證明，它直接在“繼續(xù)結(jié)帳（1個(gè)項(xiàng)目）”鏈接旁邊，但并在其旁邊向上撞，因此所有這些鏈接看起來(lái)都像一個(gè)鏈接。

總體而言，找到產(chǎn)品并不難。另一方面，隨著我的進(jìn)行，結(jié)帳的道路更加頭疼。有一些與語(yǔ)義和可訪(fǎng)問(wèn)性相關(guān)的糟糕的實(shí)踐引起了混亂，重要的按鈕和鏈接變得更加困難。

您以前使用過(guò)DuckDuckgo嗎？我認(rèn)為許多閱讀CSS漫步的人都有，但是對(duì)于那些可能是第一次聽(tīng)到的人來(lái)說(shuō)，這是Google搜索的替代方法，重點(diǎn)是用戶(hù)隱私。

因此，開(kāi)始時(shí)有點(diǎn)誤導(dǎo)，因?yàn)镈uckDuckgo首頁(yè)非常簡(jiǎn)單。那里沒(méi)有什么問(wèn)題，對(duì)嗎？好吧，這比這比這更重要的是，因?yàn)槲覀円幚硭阉魉阉鞑樵?xún)后處理搜索結(jié)果，內(nèi)容層次結(jié)構(gòu)和相關(guān)性。

馬上，我受到歡迎的內(nèi)容比我對(duì)如此簡(jiǎn)單的著陸器所期望的要多得多。在掃描網(wǎng)站時(shí)，目前尚不清楚這是哪個(gè)網(wǎng)站。第一個(gè)提及產(chǎn)品名稱(chēng)是第一個(gè)無(wú)序列表中的第四項(xiàng)，這是“傳播DuckDuckgo”的呼吁?；諛?biāo)完全缺少，這顯然意味著它被用作背景……在CSS中。

說(shuō)到那個(gè)無(wú)序的列表，我認(rèn)為我看到的屬于標(biāo)題中，并且沒(méi)有跳過(guò)導(dǎo)航。我們有一個(gè)三重箭頭圖標(biāo)（這是一個(gè)移動(dòng)菜單或菜單來(lái)隱藏最不重要的項(xiàng)目，或其他內(nèi)容？），其次是與隱私相關(guān)的內(nèi)容，社交媒體鏈接，看起來(lái)像一個(gè)鏈接，但實(shí)際上是“關(guān)于DuckDuckgo”和“ Duckduckgo”和“了解更多信息”的兩個(gè)鏈接。

最后，朝下是該網(wǎng)站的主要用例實(shí)際上出現(xiàn)的地方：搜索欄。我認(rèn)為“ S”標(biāo)簽的意思是“搜索”，而“ X”標(biāo)簽是清除搜索字段的簡(jiǎn)寫(xiě)。

好吧，進(jìn)行搜索。我仍然可以看到自動(dòng)探測(cè)并使用上下箭頭鍵突出顯示每個(gè)箭頭是非?？岬?。但是，清除該領(lǐng)域，建議直到我刷新頁(yè)面后才消失。

設(shè)置菜單中的所有內(nèi)容均為列表中的項(xiàng)目，包括“設(shè)置”，“隱私必需品”，“為什么隱私”，“我們是誰(shuí)”和“保持聯(lián)系”。如果啟用CSS，這些可能是移動(dòng)男士的一部分，也許是由頂部的三重箭頭鏈接觸發(fā)的。在該菜單中，我看到“設(shè)置”和“更多主題”之間的四個(gè)空白項(xiàng)目符號(hào)。

作為新用戶(hù)來(lái)到這里，我不知道那些空列表項(xiàng)目是什么，但是我在上面的屏幕截圖中突出顯示的子彈實(shí)際上是主題按鈕。為了澄清意圖，一些后備文本將有所幫助，這些文本應(yīng)該是無(wú)線(xiàn)電或普通按鈕而不是列表項(xiàng)目（考慮其功能）。

每個(gè)內(nèi)容都沒(méi)有“ X”（包括“設(shè)置”）的每個(gè)內(nèi)容。但是，單擊徒步旅行者映像圖像上方的“ X”確實(shí)會(huì)導(dǎo)致大量?jī)?nèi)容清除屏幕 - 這要?dú)w功于JavaScript仍在啟用。我真正發(fā)現(xiàn)尷尬的是“切換到Duckduckgo……”下的有序列表中的冗余計(jì)數(shù)……我們看到了：

 1。1我們不存儲(chǔ)您的個(gè)人信息
2。2我們不要跟隨您的廣告
3。3我們不跟蹤你。曾經(jīng)。

看起來(lái)一些混合用例的語(yǔ)義標(biāo)記案例以及其他一些顯示列表項(xiàng)目編號(hào)的方法。

遠(yuǎn)足者圖像下方有巨大數(shù)量的空白，直到第一個(gè)

元素。假設(shè)它們是鏈接或按鈕，請(qǐng)單擊“將DuckDuckgo添加到[瀏覽器]的每個(gè)實(shí)例”無(wú)濟(jì)于事。每個(gè)部分的插圖都會(huì)導(dǎo)致一些不必要的水平滾動(dòng)，這是我們?cè)谄渌W(wǎng)站中看到的常見(jiàn)問(wèn)題。

在這些部分之后，有一個(gè)空白框，我不知道它是什么。

我破解了開(kāi)放的DevTools，事實(shí)證明是

在此之后，我看到了兩個(gè)重復(fù)的實(shí)例“設(shè)置為默認(rèn)搜索引擎”，圍繞著“設(shè)置為主頁(yè)”部分。

當(dāng)我單擊“添加DuckDuckgo…”動(dòng)作時(shí)，這些一定是彈出的說(shuō)明，但它顯示了隱藏的影響并顯示內(nèi)容時(shí)可以使用直接標(biāo)記。相應(yīng)的鏈接或按鈕不用重復(fù)內(nèi)容，應(yīng)指向一個(gè)實(shí)例。那將減少這里的冗余。

好的，是時(shí)候最終進(jìn)入搜索了。我在搜索結(jié)果中看到的第一件事是一個(gè)空盒子，其中包含指令以忽略盒子。那時(shí)。

繼續(xù)前進(jìn)，您看到Duckduckgo鏈接了嗎？那一定是徽標(biāo)，我想知道為什么這不在主頁(yè)上。似乎是低懸垂的水果以改進(jìn)。

除了“ S”和“ X”按鈕外，搜索欄仍然正常運(yùn)行，這些按鈕已將其在主頁(yè)上的位置交換。

在搜索結(jié)果上。我可以很容易地將一個(gè)結(jié)果與另一個(gè)結(jié)果區(qū)分開(kāi)。我發(fā)現(xiàn)不必要的，但有趣的是，“您的瀏覽器表示您是否訪(fǎng)問(wèn)了此鏈接”消息，該消息位于每個(gè)頁(yè)面的末尾。從屏幕閱讀的角度來(lái)看，這將非常煩人。想象一下，在每個(gè)頁(yè)面標(biāo)題的末尾都重復(fù)聽(tīng)到。該消息傳遞與包含包含該消息傳遞的工具提示的選拔標(biāo)記一起顯示。但是，由于禁用CSS，沒(méi)有任何檢查標(biāo)記，也沒(méi)有工具提示。結(jié)果，我所得到的只是一個(gè)長(zhǎng)時(shí)間的標(biāo)題。

通常以不同類(lèi)型的結(jié)果（例如圖像）過(guò)濾的標(biāo)簽顯示的導(dǎo)航欄似乎在這一點(diǎn)上無(wú)能為力，因?yàn)楹茈y說(shuō)它們是過(guò)濾器而無(wú)需樣式的過(guò)濾器。但是，如果我單擊映像過(guò)濾器，則圖像結(jié)果實(shí)際上將下部下方加載到頁(yè)面上，直接堆放在Web結(jié)果的頂部，因此頁(yè)面變長(zhǎng)了。哦，您可能會(huì)認(rèn)為，滾動(dòng)一直返回（這是很長(zhǎng)的路），然后單擊另一個(gè)過(guò)濾器，例如視頻，可以替換圖像，但這只是在下面插入視頻縮略圖圖像，這使已經(jīng)成為超級(jí)巨型長(zhǎng)頁(yè)的圖像成為超級(jí)巨型長(zhǎng)頁(yè)。想象所有這些資產(chǎn)的頁(yè)面重量！

好吧，你不必。根據(jù)DevTools的說(shuō)法，僅圖像占831個(gè)請(qǐng)求，總重量為23.7 MB。 hefty！

最后幾個(gè)物品值得注意。單擊“發(fā)送反饋”鏈接顯然沒(méi)有任何作用。也許觸發(fā)了CSS的模態(tài)？而且，盡管“所有區(qū)域”鏈接不像一個(gè)鏈接，但我很容易忽略它，但我很好奇地單擊它，并被帶到了一個(gè)國(guó)家列表的錨點(diǎn)。最后兩個(gè)鏈接剛剛使其相應(yīng)的內(nèi)容出現(xiàn)在列表國(guó)家選項(xiàng)下。

這里有很多事情發(fā)生，顯然有改進(jìn)的機(jī)會(huì)。例如，有些呼叫作為正常文本顯示為鏈接或按鈕。另外，我們認(rèn)為CSS禁用的網(wǎng)站的性能會(huì)變得更好，但是搜索結(jié)果中的所有加載資產(chǎn)都令人難以置信。也就是說(shuō)，搜索體驗(yàn)一點(diǎn)也不痛苦……也就是說(shuō)，除非您在執(zhí)行圖像或視頻中挖掘圖像或視頻。

嘿，這是我們?cè)S多人非常熟悉的網(wǎng)站！好吧，我們?cè)S多人都習(xí)慣了一直登錄它，但是我將在登錄時(shí)沖浪。

已經(jīng)有一個(gè)跳過(guò)鏈接（是的）。我希望還有一個(gè)移動(dòng)導(dǎo)航圖標(biāo)無(wú)能為力，并且在我嘗試時(shí)被證明是正確的。

在某些導(dǎo)航項(xiàng)目之間，存在不必要的巨大差距。如果單擊這些，它們?nèi)匀怀洚?dāng)下拉菜單。它們是和

在將任何內(nèi)容鍵入現(xiàn)場(chǎng)之前，我會(huì)看到三個(gè)“搜索所有g(shù)ithub”和“跳到”鏈接的實(shí)例。我不知道要單擊哪個(gè)，但是如果我進(jìn)行搜索，則關(guān)鍵字顯示在第三組中。

主頁(yè)上的其他所有內(nèi)容似乎都很好，除了許多過(guò)大的圖像水平溢出窗口。

讓我們回到搜索欄，導(dǎo)航到我們可以找到的任何回購(gòu)。就在搜索按鈕下，我們有兩個(gè)幾乎相同的輔助導(dǎo)航欄，它們返回存儲(chǔ)庫(kù)計(jì)數(shù)，代碼，提交和其他meta。沒(méi)有查看來(lái)源，我不知道擁有兩個(gè)目的是什么。

存儲(chǔ)庫(kù)頁(yè)面仍然具有易于遵循的結(jié)構(gòu)和邏輯層次結(jié)構(gòu)。在登錄并在到達(dá)之前清除我的緩存時(shí)，“ JOIN GITHUB TODAY”塊的“解散”按鈕仍然可以按照我的期望。就像我們?cè)缧r(shí)候在亞馬遜上看到的一樣，標(biāo)簽鏈接很難分開(kāi)，因?yàn)樗鼈兪且恍小?/p>

接下來(lái)的兩個(gè)按鈕 - “ JavaScript”和“ New Pull請(qǐng)求” - 當(dāng)我單擊它們時(shí)，似乎沒(méi)有做任何事情。我想像拉動(dòng)請(qǐng)求按鈕應(yīng)在視為客人時(shí)被禁用，除非它打算讓用戶(hù)先登錄屏幕……但即使那感覺(jué)也不正確。事實(shí)證明，當(dāng)CSS處于活動(dòng)狀態(tài)時(shí)，該按鈕確實(shí)被禁用。然后，頁(yè)面的其余部分非常容易理解。

如果您在這里主要是為了管理，貢獻(xiàn)或檢查存儲(chǔ)庫(kù)，那么由于層次結(jié)構(gòu)表現(xiàn)良好，您將不會(huì)面臨很多摩擦。無(wú)論您是查看拉的請(qǐng)求，問(wèn)題還是單個(gè)文件，您都會(huì)在其他地方體驗(yàn)幾乎相同的情況。大多數(shù)障礙生活在網(wǎng)站上不太突出的頁(yè)面中。

？該網(wǎng)站做得很好	？網(wǎng)站可以改善什么
許多頁(yè)面的層次結(jié)構(gòu)和結(jié)構(gòu)確實(shí)很容易遵循，并使邏輯意義化。	使用元素和SVG上的高度和寬度屬性來(lái)防止它們炸毀。
頁(yè)面上嵌入的大多數(shù)SVG圖標(biāo)都是適當(dāng)尺寸的。	注意空列表項(xiàng)目。
很好地利用了標(biāo)題中的跳過(guò)鏈接。	確保按鈕標(biāo)簽使用完整單詞。
	確保鏈接之間有空白或線(xiàn)路斷裂，以防止跑步。

下一個(gè)網(wǎng)站是我經(jīng)常使用的在線(xiàn)工具檢查顏色對(duì)比度以供訪(fǎng)問(wèn)。對(duì)于一個(gè)顏色如此之大的網(wǎng)站，CSS可能會(huì)發(fā)生很多事情，因此它應(yīng)該變得有趣。

在導(dǎo)航上方有大量空間，沒(méi)有跳過(guò)鏈接。用于測(cè)試的每種顏色旁邊的移動(dòng)布局和“ X”按鈕的漢堡包和關(guān)閉按鈕超大。

哦，然后查看“測(cè)試顏色”按鈕和下一部分內(nèi)容之間的巨大差距。

該網(wǎng)站的許多不錯(cuò)的功能之一是一個(gè)復(fù)選框，它使您只能看到通過(guò)測(cè)試的顏色，而不是查看所有經(jīng)過(guò)測(cè)試的顏色。不幸的是，該按鈕對(duì)禁用CSS無(wú)能為力。但是，我仍然可以看到直接在結(jié)果表中的對(duì)比度，大文本和小文本的定義有效，并獲得定義。

隱藏和顯示術(shù)語(yǔ)可能是該按鈕對(duì)CSS所做的。令人沮喪的是，我不知道桌子標(biāo)題后那些單個(gè)字母（例如S和R）的目的?？吹奖碇蟮乃惺☆伾南⒁彩侵S刺和令人困惑的，因?yàn)?，此列表中有傳遞顏色?？梢宰龅氖悄J(rèn)將其隱藏，但是如果單個(gè)測(cè)試中的所有顏色失敗，則有條件地將其注入。

拔出DevTools，事實(shí)證明，頂部的一些空白是Hex Naw徽標(biāo)作為SVG文件。與該頁(yè)面使用的其他SVG符號(hào)相關(guān)聯(lián)的空間。通過(guò)為徽標(biāo)使用默認(rèn)的黑色顏色，這將有助于減少一些空間。我對(duì)DevTools進(jìn)行了快速的更改，這有很大的變化。

空間的第二個(gè)間隙是由SVG加載器引起的，該SVG裝載機(jī)在計(jì)算顏色對(duì)比度時(shí)出現(xiàn)?？梢酝ㄟ^(guò)指定更小但比例的，寬度和高度與移動(dòng)菜單和“ X”圖標(biāo)的高度來(lái)幫助這一點(diǎn)。

在每個(gè)SVG中添加初始寬度和高度肯定會(huì)減少滾動(dòng)的需求。這也是我們也可以采取的措施來(lái)解決Github導(dǎo)航中看到的空白。

最終，沒(méi)有CSS，HEX NAW仍然非常有用。我仍然可以測(cè)試顏色，通過(guò)和失敗的顏色結(jié)果，并在頁(yè)面周?chē)鷮?dǎo)航。太糟糕了，我無(wú)法使用實(shí)際的顏色，不得不圍繞那些超大的SVG圖標(biāo)工作。

像GitHub一樣，Stack Overflow是我們?cè)S多人（如果不是大多數(shù)人）保留在我們的后袋中的資源之一，因?yàn)樗兄谡业侥橙耸欠褚呀?jīng)問(wèn)了一個(gè)開(kāi)發(fā)問(wèn)題和對(duì)它們的答案。

在頁(yè)面上要提出問(wèn)題，我在主元素上方看到了一堆空白子彈點(diǎn)。我不知道為什么那些空列表項(xiàng)目在那里。我也看不到任何格式的按鈕，但是在弄亂了一點(diǎn)之后，我發(fā)現(xiàn)它們恰好只是空白列表項(xiàng)目。也許每個(gè)項(xiàng)目的后備文字或SVG圖標(biāo)都會(huì)有助于確定這些內(nèi)容和做什么。它們也應(yīng)該變成真實(shí)的按鈕。

在將文本輸入標(biāo)題字段時(shí)，仍然可以找到類(lèi)似問(wèn)題的列表。這里的每件事都是預(yù)期的，這很好。雖然，奇怪的是，每個(gè)建議的問(wèn)題的投票都算過(guò)兩次，一旦以鏈接而高于標(biāo)題，并且在標(biāo)題旁邊又不受鏈接。

降落在堆棧溢出問(wèn)題頁(yè)面時(shí)，我們所有人都尋找的關(guān)鍵元素之一是，大綠色檢查標(biāo)記，可以在所有提交的答案中指示正確的答案。但是，隨著CSS關(guān)閉，很難說(shuō)出哪個(gè)答案被接受，因?yàn)榱斜碇械拿總€(gè)答案都有一個(gè)黑色檢查標(biāo)記。即使接受的答案始終處于頂部，仍然沒(méi)有其他選擇或后備指示，而無(wú)需與頁(yè)面互動(dòng)。此外，沒(méi)有跡象表明您是否已經(jīng)投票或投票給了問(wèn)題或任何答案。

為了總結(jié)我在Stack Overflow上的經(jīng)驗(yàn)，我能夠完成我通常來(lái)到網(wǎng)站的內(nèi)容：找到編程問(wèn)題的答案。也就是說(shuō)，確實(shí)有一些改進(jìn)的機(jī)會(huì)，這個(gè)網(wǎng)站是設(shè)計(jì)通常依賴(lài)顏色來(lái)指示頁(yè)面上的層次結(jié)構(gòu)或價(jià)值的一個(gè)典型例子，在本實(shí)驗(yàn)的問(wèn)題頁(yè)面上，這在頁(yè)面上非常缺少。

Wikipedia，網(wǎng)絡(luò)的主要參考點(diǎn)！這是一個(gè)在線(xiàn)主食，其吸引人的品質(zhì)之一是缺乏設(shè)計(jì)。這應(yīng)該可以進(jìn)行有趣的測(cè)試。

一些鏈接向下，我們有一個(gè)用于實(shí)際導(dǎo)航和搜索的Skip Navigation選項(xiàng)。包含全球圖像的主頁(yè)標(biāo)頭保持其兩個(gè)列布局，您可能已經(jīng)猜到了原因：這是表布局。盡管這可能不是一個(gè)可用性問(wèn)題，但我們知道依靠表創(chuàng)建布局不是語(yǔ)義。當(dāng)我們沒(méi)有浮子，彈性箱，網(wǎng)格或其他任何處理內(nèi)容放置的方式時(shí)，那是過(guò)去的遺物。也就是說(shuō)，頁(yè)面上沒(méi)有明顯的可用性問(wèn)題或令人困惑的元素。

讓我們繼續(xù)了解我們?cè)S多人在Wikipedia中花費(fèi)最多的時(shí)間：文章條目。這通常是Wikipedia的切入點(diǎn)，尤其是對(duì)于我們這些開(kāi)始的人，從搜索引擎中鍵入某些內(nèi)容，然后單擊Wikipedia搜索結(jié)果。

最重要的是，此頁(yè)面仍然非常有用，并且在禁用CSS的情況下是非?？捎玫摹２季謿w結(jié)為單列，但是內(nèi)容仍然以邏輯順序流動(dòng)，甚至保持造型位，再次感謝對(duì)表和內(nèi)線(xiàn)表屬性的依賴(lài)。

我遇到的一個(gè)問(wèn)題是導(dǎo)航。標(biāo)題中有一個(gè)“跳到導(dǎo)航”鏈接，當(dāng)我單擊它時(shí)，確實(shí)會(huì)使我轉(zhuǎn)到導(dǎo)航。如果您想知道，導(dǎo)航包含在頁(yè)腳中，這是需要跳到它的原因。

在幾個(gè)導(dǎo)航標(biāo)題上方似乎有隨機(jī)的復(fù)選框（專(zhuān)門(mén)針對(duì)“變體”和“更多”），它們似乎沒(méi)有目的，盡管上面的復(fù)選框“更多”在啟用CSS時(shí)以某個(gè)視口寬度顯示。

導(dǎo)航中實(shí)際上有一件奇怪的事情，它是“在其他項(xiàng)目”和“語(yǔ)言”標(biāo)題之間的無(wú)標(biāo)簽按鈕。

單擊該按鈕，我仍然可以訪(fǎng)問(wèn)語(yǔ)言設(shè)置，并且它大多是按預(yù)期工作的。例如，布局維護(hù)一個(gè)超級(jí)功能的選項(xiàng)卡式布局。

但是，在“顯示”選項(xiàng)卡中，“語(yǔ)言”和“字體”按鈕無(wú)能為力。它們可能也是標(biāo)簽，但至少我可以看到他們提供的東西。除了這些按鈕是兩個(gè)空的選擇菜單，這些菜單絕對(duì)什么都不做（第一個(gè)按鈕在選中復(fù)選框時(shí)確實(shí)填充了漫畫(huà)，OpenDyslexic和System Font選項(xiàng)）。查看“輸入”選項(xiàng)卡，寫(xiě)作語(yǔ)言按鈕仍然恰好功能為選項(xiàng)卡。除了英語(yǔ)，西班牙語(yǔ)和中文之外，我仍然可以選擇其他選項(xiàng)。

沒(méi)有CSS，這些文章根本不難閱讀，這是因?yàn)閹缀趺總€(gè)元素在語(yǔ)義上都是正確的，并且遵循一致的文檔層次結(jié)構(gòu)。我想知道的一件事是通常在目錄中通常在哪里進(jìn)行的“顯示/隱藏”按鈕。事實(shí)證明這是一個(gè)孤獨(dú)的復(fù)選框，標(biāo)簽是假的 - 它使用CSS中的偽元素上的內(nèi)容屬性顯示標(biāo)簽。

文章中的另一個(gè)問(wèn)題是，您必須在預(yù)覽圖像時(shí)花費(fèi)時(shí)間來(lái)尋找圖像。通常，單擊文章側(cè)邊欄中的圖像將觸發(fā)包含圖像輪播的全屏模式。沒(méi)有CSS，旋轉(zhuǎn)木馬就消失了，取而代之的是上面有一排未標(biāo)記按鈕的圖像。這是一個(gè)令人討厭的人，但是如果旋轉(zhuǎn)木馬并不完全在頁(yè)面上，與點(diǎn)擊圖像在頁(yè)面頂部的位置相反，沒(méi)有能力跳到它的地方，那將是完全可以的。

如果我沒(méi)有提到文章中找不到Wikipedia徽標(biāo)，我會(huì)很粗心！它甚至不是白色的白色SVG。該鏈接實(shí)際上一無(wú)所有：

 <a href="%E2%80%9C/wiki/main_page%E2%80%9D" title="“訪(fǎng)問(wèn)主頁(yè)”"> </a>

值得慶幸的是，“導(dǎo)航”下的“主頁(yè)”鏈接是回家的另一種方式，而無(wú)需按下瀏覽器后退按鈕。但是，當(dāng)在主頁(yè)上做得如此出色時(shí)，在頁(yè)面上沒(méi)有品牌的品牌仍然很奇怪。

Wikipedia的HTML問(wèn)題主要存在于我期望的頻率較少而不是文章的功能中。從長(zhǎng)遠(yuǎn)來(lái)看，他們從未阻礙我的閱讀經(jīng)歷。

Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  溢出：隱藏；
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghw/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="那個(gè)時(shí)候我嘗試在沒(méi)有CSS的情況下瀏覽網(wǎng)絡(luò)" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
</button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  顯示：塊;
  溢出：隱藏；
  height: 0;
}

If there are

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
</button>