Html 使用文本缩进为sprite图像提供简短描述是否符合WCAG？

我正试图得到一个网站，我的工作是WCAG2兼容。该网站使用图像精灵，在整个网站中取代图像精灵的使用将是一个挑战。因此，我试图确定以下技术：

<div style="background: url(flower.png); height: 20px; width:20px;">  
  <div style="text-indent: 100%; white-space: wrap; overflow: hidden">
    A red rose
  </div>
</div>

红玫瑰

完全符合要求。通过阅读文档。。。不清楚

对于非装饰性的

img

标签，必须使用

alt

：

对于媒体

对象

s，包装内容就足够了：

但使用具有非装饰性图像背景的a

div

的主体是否通过检查还不是很清楚

---

任何人都可以对此发表意见，或者给我指一下标准中的相关页面吗？

这可能有几种情况，建议会根据情况而变化：

内容图像（如图库）

功能元素，如导航或工具栏选项

如果它们是内容图像（“红玫瑰”的意思），那么我认为这项技术适用于：

在这种情况下，如果人们可以在没有图像的情况下显示它以读取alt文本，那么您的方法将满足WCAG的要求。这听起来可能有些奇怪，但辅助技术早就知道如何读取alt属性，但图像替换可以通过多种方式完成，而且他们可能无法判断何时使用它

屏幕阅读器用户可能会发现它没问题，但其他需要alt text的组可能无法读取20x20px框中的文本。例如，如果在Windows中打开高对比度模式，背景CSS图像将被删除，文本将不可见

如果它们是功能元素，并且图像是一个图标，例如“保存”按钮，那么您需要一个可见（例如工具提示）和编程标签，在这种情况下，我建议：

<div style="background: url(flower.png); height: 20px; width:20px;" 
role="button" aria-label="Save" title="Save" tabindex="0"></div>

---

这可能有两种情况，建议将根据以下情况而变化：

内容图像（如图库）

功能元素，如导航或工具栏选项

如果它们是内容图像（“红玫瑰”的意思），那么我认为这项技术适用于：

在这种情况下，如果人们可以在没有图像的情况下显示它以读取alt文本，那么您的方法将满足WCAG的要求。这听起来可能有些奇怪，但辅助技术早就知道如何读取alt属性，但图像替换可以通过多种方式完成，而且他们可能无法判断何时使用它

屏幕阅读器用户可能会发现它没问题，但其他需要alt text的组可能无法读取20x20px框中的文本。例如，如果在Windows中打开高对比度模式，背景CSS图像将被删除，文本将不可见

如果它们是功能元素，并且图像是一个图标，例如“保存”按钮，那么您需要一个可见（例如工具提示）和编程标签，在这种情况下，我建议：

<div style="background: url(flower.png); height: 20px; width:20px;" 
role="button" aria-label="Save" title="Save" tabindex="0"></div>

---

在标题属性中添加基本文本时要小心，因为屏幕阅读器不会可靠地公布这些内容。实际上，我认为在这种（狭义的）情况下，这是非常可靠的，因为屏幕阅读器会为链接寻找最好的标签。我刚刚在VoiceOver/NVDA/Jaws的最新版本中测试了它。诚然，总体而言，这不是一个很好的方法，但我们需要更多的信息来改进它。它是用户可配置的，许多AT用户由于噪音（即SEO用户为了获得更高的页面排名而将标题属性塞得满满的）而关闭了它。我认为即使用户关闭了它，考虑到使用的规则（）它仍然会被读出，因为它是唯一的信息。在检查这一点时，我自己刚刚发现了这一点，我将更新我的答案，建议改为使用aria标签。在标题属性中添加基本文本时要小心，因为它们不是由屏幕阅读器可靠宣布的。事实上，我认为在这种（狭义）情况下会非常可靠，因为屏幕阅读器会为链接寻找最佳标签。我刚刚在VoiceOver/NVDA/Jaws的最新版本中测试了它。诚然，总体而言，这不是一个很好的方法，但我们需要更多的信息来改进它。它是用户可配置的，许多AT用户由于噪音（即SEO用户为了获得更高的页面排名而将标题属性塞得满满的）而关闭了它。我认为即使用户关闭了它，考虑到使用的规则（）它仍然会被读出，因为它是唯一的信息。在检查这一点时，我自己刚刚遇到了这个问题，我将更新我的答案，改为建议使用aria标签。

    .icon-save:before {

       font-family: icons;
      
       content: ⇝ /* whatever your icon reference is */
    
    }

 .alt {
  position: absolute;
 left: -9999px;}