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

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

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

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

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

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

但是，在所有這些搜索建議下，帳戶和導(dǎo)航鏈接易于閱讀，因為它們被某些空間分開。

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

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

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

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

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

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

向下滾動，并在帶有相同內(nèi)容的標簽旁邊顯示一個“添加到購物車”按鈕。這是多余的，可能是不必要的，因為元素能夠持有自己的標簽：

 添加到購物車

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

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

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

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

因此，開始時有點誤導(dǎo)，因為DuckDuckgo首頁非常簡單。那里沒有什么問題，對嗎？好吧，這比這比這更重要的是，因為我們要處理搜索搜索查詢后處理搜索結(jié)果，內(nèi)容層次結(jié)構(gòu)和相關(guān)性。

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

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

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

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

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

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

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

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

看起來一些混合用例的語義標記案例以及其他一些顯示列表項目編號的方法。

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

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

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

我破解了開放的DevTools，事實證明是

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

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

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

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

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

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

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

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

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

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

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

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

在某些導(dǎo)航項目之間，存在不必要的巨大差距。如果單擊這些，它們?nèi)匀怀洚斚吕藛?。它們是?summary>元素……但是在語義上有些錯誤。菜單項實際上是未排序的列表項目，并且本機瀏覽器功能仍然可以通過使用語義擴展內(nèi)容來進行，這真是太好了。但是，那個SVG偶像使我感到困惑。

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

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

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

存儲庫頁面仍然具有易于遵循的結(jié)構(gòu)和邏輯層次結(jié)構(gòu)。在登錄并在到達之前清除我的緩存時，“ JOIN GITHUB TODAY”塊的“解散”按鈕仍然可以按照我的期望。就像我們早些時候在亞馬遜上看到的一樣，標簽鏈接很難分開，因為它們是一行。

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

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

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

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

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

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

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

隱藏和顯示術(shù)語可能是該按鈕對CSS所做的。令人沮喪的是，我不知道桌子標題后那些單個字母（例如S和R）的目的。看到表之后的所有失敗顏色的消息也是諷刺和令人困惑的，因為，此列表中有傳遞顏色。可以做的是默認將其隱藏，但是如果單個測試中的所有顏色失敗，則有條件地將其注入。

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

空間的第二個間隙是由SVG加載器引起的，該SVG裝載機在計算顏色對比度時出現(xiàn)?？梢酝ㄟ^指定更小但比例的，寬度和高度與移動菜單和“ X”圖標的高度來幫助這一點。

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

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

像GitHub一樣，Stack Overflow是我們許多人（如果不是大多數(shù)人）保留在我們的后袋中的資源之一，因為它有助于找到某人是否已經(jīng)問了一個開發(fā)問題和對它們的答案。

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

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

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

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

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

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

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

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

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

在幾個導(dǎo)航標題上方似乎有隨機的復(fù)選框（專門針對“變體”和“更多”），它們似乎沒有目的，盡管上面的復(fù)選框“更多”在啟用CSS時以某個視口寬度顯示。

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

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

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

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

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

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

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

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

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