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



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

显示不同类型的图像有一些语义正确和不正确的方法。

  • 普通图像最好使用标准的<img>标签,因为它们通常是网站的主要内容。它们应该有alt标签,以便向用户通知内容的重要部分
  • 图标是一种图像,它不是网站的主要内容,但也应该使用<img>标签来显示,因为显示特定图标在未正确显示的情况下的作用对可用性很重要
  • 不重要的图片应该显示为背景,因为这样你就不会在DOM中使用不必要的节点

我认为不应该将图标作为一个单独的元素来包含,只表示该图标;例如CCD_ 6或CCD_。

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

对图标使用单独的标记是一个语义错误。图标本身不起任何作用。它只是用来记住底层元素的功能。但事实上,当你移除图标时,这些元素仍然存在。

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

最新更新