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 回答