爲什麼使用display：隱藏HTML中的文本被認爲是不好的做法？

Question

我最近遇到本教程，它使用CSS背景圖像來顯示網頁的徽標，而不是使用HTML標記。在div中有一個佔位符文本，其中包含徽標，爲了使該文本消失，作者使用文本縮進：-9999px而不是display：hidden因爲他說使用後者是不好的做法。

那麼，爲什麼它被認爲是不好的做法？

Answer 1

因爲有時屏幕閱讀器和搜索引擎會忽略display:none或visibility:hidden的元素，但不會爲了搜索引擎優化和/或語音的目的而放置在屏幕外的元素。然而，無論哪種方法是「不好的做法」並不是真正的行業範圍內的協議，更多的是偏好的東西取決於作者真正瞭解這些工具以及他們的目標是什麼。

另外請記住，建議至少5年，隨着時間的推移，事情會發生變化，那麼'最佳實踐'現在不會自動成爲最佳實踐。

因此，找出你想達到的目標，然後考慮你的選擇，這是我的想法'最佳實踐'。

Answer 2

主要是因爲屏幕閱讀器不會閱讀隱藏的內容，但很多人會閱讀已經定位在屏幕外但仍然可見的內容。

Answer 3

首先，沒有什麼所謂的display: hidden;是，無論是它的display: none;或者它visibility: hidden;或overflow: hidden;並來到你的問題，我不喜歡使用，而不是我用的img標籤，與alt屬性將描述我的形象，是的，屏幕閱讀器會閱讀​​TEXT，如果你沒有alt您img標籤做，它會如果我使用img我標誌所以我會使用類似

簡單地忽略它..

例如

<img src="#" alt="Company Name Logo" title="Company Name" /> 

Answer 4

使用徽標的背景圖像意味着您可以將徽標文本放置在相同的元素中。

這樣做的一個原因是，無障礙閱讀器（針對視障者）將在無法看到徽標時閱讀徽標文本。但是，您不希望文字覆蓋徽標，因此您可以使用文本縮進來隱藏它。

顯示內容：不讀取任何元素。

我不是100％肯定在這一個，但我也記得閱讀，一些搜索引擎忽略隱藏元素的內容。但是，它們可能會索引縮進的內容，但這需要驗證。