Question

我有一个具有背景图像的CSS类

e.g。：

.my_class_bg_image { 
    background: url(myPhoto.jpg) 0 0 no-repeat;
}

我想让包含此CSS类的页面可以访问。

我可以使用它吗？：

<span role="img" aria-labelledby="ddd" title="This is my bg image title" class="my_class_bg_image">
  <span id="ddd">This is my text which is shown when the image cannot be loaded, 
     but it's also there and invisible and when the image load succeeds
  </span>
</span>

如果没有，我怎样才能使这些html元素可访问？ - 包含包含bg图像的CSS类的html元素

Answer 1

使用带有ID的aria-labelledby将使文本可供需要它的屏幕阅读器使用。如果你想隐藏一些内容，我建议使用Yahoo提出的方法。将CSS添加到样式表后，您只需在HTML中添加一个类（在本例中为sr-only）即可隐藏文本。

代码如下：

.sr-only {
   height: 1px;
   width: 1px;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
   position: absolute;
}

这会将内容剪切掉（clip），隐藏任何溢出，对于不以clip呈现'正确'方式的浏览器，请将它们置于绝对位置以使它们脱离整体布局流动。

Answer 2

如果您只是尝试解决辅助功能（并且您的受众只使用从左到右的语言），那么您可以使用text-indent直观地隐藏文本，但仍允许屏幕阅读器阅读

此技术最适用于块级元素。我怀疑你的例子不会使用span并使用背景照片，但如果你使用精灵图标，那么你会稍微改变一下。

.my_class_bg_image {
  display: block; /* if you are not using a block-level element */
  overflow: hidden;
  text-indent: -999px;
}

I made a quick CodePen

如何使用aria-labelledby来启用辅助功能？

2 个答案: