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

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绝对是一个要求:H37:在img元素上使用alt属性

对于媒体来说object,包装内容就足够了:H53:对象的身体

但是,使用div具有非装饰性图像的aa的身体是否background通过集合并不是很清楚.

任何人都可以对此说话或指向标准中的相关页面吗？

Answer 1

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

1. 内容图片(例如图库)
2. 功能元素,如导航或工具栏选项.

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

在这种情况下,如果人们可以在没有图像的情况下显示它以便阅读alt文本,那么您的方法将符合WCAG .这可能听起来很奇怪,但辅助技术早就知道如何读取alt属性,但图像替换可以通过多种方式完成,并且可能无法分辨它何时被使用.

屏幕阅读器用户可能会发现它没问题,但是其他需要alt文本的组可能无法在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;}