Question

我正在尝试获得一个我正在努力成为符合WCAG 2标准的网站。该网站使用图像精灵，在整个过程中替换图像精灵的使用将是一个挑战。因此，我试图确定是否采用以下技术：

<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使用object绝对是必需的：H37: Using alt attributes on img elements

对于媒体div，包装内容就足够了：H53: Body of Object

但是，使用具有非装饰性图像background的{{1}}的身体是否通过集合并不是很清楚。

任何人都可以这样说或者指向标准中的相关页面吗？

Answer 1

这可能有几种情况，建议会根据是否会改变：

内容图片（例如图库）
功能元素，例如导航或工具栏选项。

如果它们是内容图像（“红玫瑰”暗示），那么我认为这种技术适用： http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/C30.html

在这种情况下，如果人们可以在没有图像的情况下显示它以便阅读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>

但是，最好使用前景图像或字体图标，因为它们在不同情况下更加强大。例如，如果您添加了字体图标，则可以使用：

<button>   <span class=”icon-save” aria-hidden="true"></span>   <span class=”alt”>Save</span>  </button>

使用类似CSS的东西，假设您已导入要使用的正确字体：

.icon-save:before {  font-family: icons;  content: ⇝ /* whatever your icon reference is */  } .alt {  position: absolute;  left: -9999px;}

是否使用text-indent为符合WCAG的精灵图像提供简短描述？

1 个答案: