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

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

在主頁上，我立即看到該網(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è)問題是“跳到主內(nèi)容”鏈接看起來不像典型的跳過鏈接，但它的工作方式像一個(gè)鏈接。事實(shí)證明，它是沒有HREF的元素，而JavaScript（是的，我確實(shí)離開了該啟用）來模仿錨點(diǎn)功能。

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

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

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

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

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

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

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

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

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

 添加到購物車

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

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

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

您以前使用過DuckDuckgo嗎？我認(rèn)為許多閱讀CSS漫步的人都有，但是對於那些可能是第一次聽到的人來說，這是Google搜索的替代方法，重點(diǎn)是用戶隱私。

因此，開始時(shí)有點(diǎn)誤導(dǎo)，因?yàn)镈uckDuckgo首頁非常簡單。那裡沒有什麼問題，對嗎？好吧，這比這比這更重要的是，因?yàn)槲覀円幚硭阉魉阉鞑樵冡崽幚硭阉鹘Y(jié)果，內(nèi)容層次結(jié)構(gòu)和相關(guān)性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

好吧，你不必。根據(jù)DevTools的說法，僅圖像佔(zhàn)831個(gè)請求，總重量為23.7 MB。 hefty！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

隱藏和顯示術(shù)語可能是該按鈕對CSS所做的。令人沮喪的是，我不知道桌子標(biāo)題後那些單個(gè)字母（例如S和R）的目的。看到表之後的所有失敗顏色的消息也是諷刺和令人困惑的，因?yàn)?，此列表中有傳遞顏色?？梢宰龅氖悄J(rèn)將其隱藏，但是如果單個(gè)測試中的所有顏色失敗，則有條件地將其註入。

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

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

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

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

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

在頁面上要提出問題，我在主元素上方看到了一堆空白子彈點(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í)，仍然可以找到類似問題的列表。這裡的每件事都是預(yù)期的，這很好。雖然，奇怪的是，每個(gè)建議的問題的投票都算過兩次，一旦以鏈接而高於標(biāo)題，並且在標(biāo)題旁邊又不受鏈接。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <a href="%E2%80%9C/wiki/main_page%E2%80%9D" title="“訪問主頁”"> </a>

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

Wikipedia的HTML問題主要存在於我期望的頻率較少而不是文章的功能中。從長遠(yuǎn)來看，他們從未阻礙我的閱讀經(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í)候我嘗試在沒有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>