html - HTML - 显示图像/图标/用户界面元素的语义方式？

Question

是否存在显示图片/图标的语义正确和不正确的方式？
我的意思是，将报纸文章的所有图片都包含为背景图片当然不是很友好，因为那样的话，屏幕阅读器无法读出alt文本，但是图标或用户界面元素呢？从面向语义的角度来看，将这些作为背景图像包含在内是否合理？

Answer 1

显示不同种类的图像有一些语义上正确和不正确的方式。

• 普通图片最好使用标准<img>标签，因为它们通常是网站的主要内容。这些应该有alt标签来通知用户内容的重要部分。
• 图标是一种图像，它不是您网站的主要内容，但它们也应该使用<img>标签显示，因为如果特定图标显示不正确，显示特定图标的作用对于可用性很重要。
• 使网站美观且不是网站主要内容的不重要图片应显示为背景，因为这样您就不会在DOM.

Answer 2

我认为您不应该将图标作为单独的元素包含在仅代表该图标的元素中；例如一个img或i。

相反，每个图标代表一个特定的功能——因此您应该使用可用于该功能的元素，例如锚点a或button. 这些元素中的每一个都应该有一个可以被屏幕阅读器和网络蜘蛛解析的非图形内容。然后，您可以通过为某些图形图标使用背景图像来美化这些元素。

对图标使用单独的标记是语义错误/错误。图标本身什么也不做。它只是为了记住底层元素的功能。但实际上，当您删除图标时，这些元素仍然存在。

所以是的，我总是将图标作为背景图像直接包含在元素或生成的伪元素中。