如何在Image Sprite中正确使用alt标签？避免文本覆盖背景图

你遇到的问题本质是img标签的alt文本会作为图片加载后的fallback内容渲染——哪怕用了1x1的透明图，浏览器仍会在img元素的位置显示alt文本，从而覆盖父元素的精灵背景图。以下是两种可行的解决方法：

方案1：用语义化元素替代img，通过aria-label实现可访问性 #

既然精灵图是通过父元素的background实现的，img仅作为承载alt的容器，完全可以用<span>或直接复用父div，通过aria-label提供无障碍说明，既满足可访问性要求，又不会出现文本覆盖的问题。

修改后的完整代码：

<html>
<head>
  <style>
    #mintscandies {
      width: 170px;
      height: 160px;
      background: url(https://www.texasbranderspromotional.com/files/color-home-page-sprites-07022022.jpg) -20px -20px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <div id="mintscandies" role="img" aria-label="custom branded mint candies">
    </div>
    <button class="dropbtn">MINT CANDIES</button>
    <div class="dropdown-content">
      <a href="https://www.texasbranderspromotional.com/breath-mints.htm">Popular Breath Mints</a>
      <a href="https://www.texasbranderspromotional.com/breath-mints-wrapped.htm">Full Color Wrapper Mints</a>
    </div>
  </div>
</body>
</html>

说明：给承载精灵图的div添加role="img"和aria-label，可以告诉屏幕阅读器这是一张图片，并提供对应的描述，完全替代img的alt功能，同时不会渲染出可见文本。

方案2：保留img但隐藏alt文本的可视渲染 #

如果一定要保留img标签，可以通过CSS将alt文本移出可视区域，让它仅对屏幕阅读器可见，不影响背景图显示：

修改后的完整代码：

<html>
<head>
  <style>
    #mintscandies {
      width: 170px;
      height: 160px;
      background: url(https://www.texasbranderspromotional.com/files/color-home-page-sprites-07022022.jpg) -20px -20px;
      margin-left: auto;
      margin-right: auto;
    }
    /* 隐藏img的alt文本可视渲染 */
    #mintscandies img {
      text-indent: -9999px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <div id="mintscandies">
      <img src="https://www.sagemember.com/we/we.dll/img_trans.gif" alt="custom branded mint candies" width="1" height="1">
    </div>
    <button class="dropbtn">MINT CANDIES</button>
    <div class="dropdown-content">
      <a href="https://www.texasbranderspromotional.com/breath-mints.htm">Popular Breath Mints</a>
      <a href="https://www.texasbranderspromotional.com/breath-mints-wrapped.htm">Full Color Wrapper Mints</a>
    </div>
  </div>
</body>
</html>

说明：text-indent: -9999px会将alt文本向左移出可视区域，overflow: hidden确保文本不会溢出显示，同时不影响屏幕阅读器读取alt内容。

内容的提问来源于stack exchange，提问作者Dcarr