我经常看到像stackoverflow这样的网站，例如将徽标嵌入为背景图片，并带有用于屏幕阅读器的文字的span标签。
<a href="https://stackoverflow.com" class="-logo js-gps-track">
<span class="-img _glyph">Stack Overflow</span>
</a>
为什么要用替代文本代替img元素呢？ 有语义上的原因吗？一些可访问性原因？ SEO原因？
它不是用于样式化后备文本的样式，以防图像未加载。您可以设置替代文本的样式...
这不是为了性能-因为使用img，您可以使用srcset和size提供备用的较小图像，并且CSS唯一接近srcset和size的规范尚未得到很好的支持。
我唯一有道理的是将Spritesheet用于网站（例如堆栈溢出）
如果要防止人们“窃取”徽标，这似乎很愚蠢，因为简单的Google搜索会告诉别人如何获取背景图片的网址。如果是这样，那似乎仍然很愚蠢，因为您可以仅在图像本身上使用pointer-events:none;，并将包装链接设置为display:inline-block;，并且它仍然是可点击的链接，而无需有人能够右键单击并另存为。
我想了解这样做是否有好处。
我在Google上四处搜寻，但实际上并没有找到任何有用的信息来回答为什么要这样做的原因。
答案 0 :(得分：1)
看着它，我会说这是支持SEO的一种方法。正如您所指出的，可以通过多种方式实现，所以我想说这是他们的首选方法。
答案 1 :(得分：1)
为什么用替代文本代替img元素呢？有语义上的原因吗？一些可访问性原因？ SEO原因？
当您要使用CSS媒体查询并根据屏幕分辨率显示不同的徽标大小时，这很有用。
关于可访问性，这就是诸如在禁用图像时允许用户查看替代文本的原因。