1

我正在尝试让我正在开发的网站符合 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绝对需要使用：H37：在 img 元素上使用 alt 属性

而对于一个 mediaobject来说，包装内容就足够了：H53: Body of Object

div但是使用具有非装饰性图像的 aa 的主体是否background合格还不是很清楚。

任何人都可以谈论这个或将我指向标准中的相关页面吗？

4

1 回答 1

5

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

  1. 内容图像（例如画廊）
  2. 导航或工具栏选项等功能元素。

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

在这种情况下，如果人们可以在没有图像的情况下显示它以阅读替代文本，那么您的方法将符合 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”&gt;Save</span>
    
 </button>

使用像这样的 CSS，假设您已经导入了要使用的正确字体：

    .icon-save:before {

       font-family: icons;
      
       content: &#x21dd; /* whatever your icon reference is */
    
    }

 .alt {
  position: absolute;
 left: -9999px;}
于 2013-12-10T18:31:37.360 回答