HTML - 顯示圖像/圖標/用戶界面元素的語義方式？

Question

確實存在語義錯誤&顯示圖片/圖標的不正確方法？
我的意思是，將報紙文章的所有圖片作爲背景圖片並不是很友好，因爲屏幕閱讀器無法讀出alt文本，但圖標或用戶界面元素又如何呢？從面向語義的角度來看，將這些視爲背景圖像是否合理？

Answer 1

顯示不同種類的圖像有一些語義上正確和不正確的方法。

• 普通圖像這是更好地使用標準<img>標籤，因爲他們往往是一個網站的主要內容。這些應該有alt標籤告知用戶有關內容的重要部分。
• 圖標是一種圖像，它不是您網站的主要內容，但它們也應該使用<img>標籤進行顯示，因爲如果顯示不正確，則顯示具體圖標的用途很重要。
• 不重要的圖片哪些使網站不錯，並不是網站的主要內容應顯示爲背景，因爲那麼你不使用不必要的節點在你的DOM。

Answer 2

我不認爲你應該包含圖標作爲一個單獨的元素，只是代表該圖標;例如img或i。

而是每個圖標代表一個特定的功能 - 因此您應該使用可用於該功能的元素，例如，一個主播a或button。這些元素中的每一個都應具有可供屏幕閱讀器和網頁蜘蛛分析的非圖形內容。然後，您可以使用某些圖形圖標的背景圖像來美化這些元素。

對圖標使用單獨的標記是語義錯誤/錯誤。圖標本身什麼都不做。它只是爲了記憶底層元素的功能。但實際上，當您移除圖標時，這些元素仍然存在。

所以是的，我總是會將圖標作爲背景圖片直接添加到元素中，或者添加到生成的僞元素中。